Adjusted some UI

src/static/app/src/components/configurationComponents/peerShareLinkModal.vue

@@ -87,6 +87,12 @@ export default {
 	},
 	computed: {
 		getUrl(){
+			const crossServer = this.store.getActiveCrossServer();
+			if(crossServer){
+				return `${crossServer.host}/${this.$router.resolve(
+					{path: "/share", query: {"ShareID": this.dataCopy.ShareID}}).href}`
+			}
+			
 			return window.location.origin 
 				+ window.location.pathname 
 				+ this.$router.resolve(

src/static/app/src/components/settingsComponent/accountSettingsMFA.vue

@@ -47,7 +47,7 @@ export default {
 		<div class="form-check form-switch ms-3">
 			<input class="form-check-input" type="checkbox"
 			       v-model="this.status"
-			       role="switch" id="allowAPIKeysSwitch">
+			       role="switch" id="allowMFAKeysSwitch">
 		</div>
 		<button class="btn bg-warning-subtle text-warning-emphasis border-1 border-warning-subtle ms-auto rounded-3 shadow-sm" 
 		        v-if="this.status" @click="this.resetMFA()">

src/static/app/src/components/settingsComponent/dashboardAPIKeysComponents/dashboardAPIKey.vue

@@ -37,7 +37,8 @@ export default {
 	<div class="card rounded-3 shadow-sm">
 		<div class="card-body d-flex gap-3 align-items-center apiKey-card-body" v-if="!this.confirmDelete">
 			<div class="d-flex align-items-center gap-2">
-				<small class="text-muted">Key</small>{{this.apiKey.Key}}
+				<small class="text-muted">Key</small>
+				<span style="word-break: break-all">{{this.apiKey.Key}}</span>
 			</div>
 			<div class="d-flex align-items-center gap-2 ms-auto">
 				<small class="text-muted">Expire At</small>
@@ -64,12 +65,21 @@ export default {
 <style scoped>
 @media screen and (max-width: 992px) {
 	.apiKey-card-body{
-		flex-direction: column;
+		flex-direction: column !important;
 		align-items: start !important;
 		
 		div.ms-auto{
 			margin-left: 0 !important;
 		}
+		
+		div{
+			width: 100%;
+			align-items: start !important;
+		}
+		
+		small{
+			margin-right: auto;
+		}
 	}
 }
 </style>

src/static/app/src/components/signInComponents/RemoteServer.vue

@@ -11,17 +11,19 @@ export default {
 			active: false,
 			startTime: undefined,
 			endTime: undefined,
-			errorMsg: ""
+			errorMsg: "",
+			refreshing: false
 		}
 	},
 	methods: {
-		handshake(){
+		async handshake(){
 			this.active = false;
+			this.refreshing = true;
 			if (this.server.host && this.server.apiKey){
 				this.startTime = undefined;
 				this.endTime = undefined;
 				this.startTime = dayjs()
-				fetch(`${this.server.host}/api/handshake`, {
+				await fetch(`${this.server.host}/api/handshake`, {
 					headers: {
 						"content-type": "application/json",
 						"wg-dashboard-apikey": this.server.apiKey
@@ -39,7 +41,9 @@ export default {
 				}).catch((res) => {
 					this.active = false;
 					this.errorMsg = res;
-				})
+				});
+					
+				this.refreshing = false;
 			}
 		},
 		async connect(){
@@ -67,6 +71,9 @@ export default {
 			if (this.startTime && this.endTime){
 				return `${dayjs().subtract(this.startTime).millisecond()}ms`
 			}else{
+				if (this.refreshing){
+					return `Pinging...`
+				}
 				return this.errorMsg ? this.errorMsg : "N/A"
 			}
 		}
@@ -77,7 +84,7 @@ export default {
 <template>
 	<div class="card rounded-3">
 		<div class="card-body">
-			<div class="d-flex gap-3 w-100">
+			<div class="d-flex gap-3 w-100 remoteServerContainer">
 				<div class="d-flex gap-3 align-items-center flex-grow-1">
 					<i class="bi bi-server"></i>
 					<input class="form-control form-control-sm"
@@ -92,7 +99,7 @@ export default {
 					       v-model="this.server.apiKey"
 					       type="text">
 				</div>
-				<div class="d-flex gap-2">
+				<div class="d-flex gap-2 button-group">
 					<button 
 						@click="this.$emit('delete')"
 						class="ms-auto btn btn-sm bg-danger-subtle text-danger-emphasis border-1 border-danger-subtle">
@@ -110,6 +117,18 @@ export default {
 		<div class="card-footer gap-2 d-flex align-items-center">
 			<span class="dot ms-0 me-2" :class="[this.active ? 'active':'inactive']"></span>
 			<small>{{this.getHandshakeTime}}</small>
+
+			<div class="spin ms-auto text-primary-emphasis" v-if="this.refreshing">
+				<i class="bi bi-arrow-clockwise"></i>
+			</div>
+
+			<a role="button"
+			   v-else
+			   @click="this.handshake()"
+
+			   class="text-primary-emphasis text-decoration-none ms-auto disabled">
+				<i class="bi bi-arrow-clockwise me"></i>
+			</a>
 		</div>
 	</div>
 </template>
@@ -119,4 +138,27 @@ export default {
 		background-color: #dc3545;
 		box-shadow: 0 0 0 0.2rem #dc354545;
 	}
+	
+	.spin{
+		animation: spin 1s infinite cubic-bezier(0.82, 0.58, 0.17, 0.9);
+	}
+	
+	@keyframes spin {
+		0%{
+			transform: rotate(0deg);
+		}
+		100%{
+			transform: rotate(360deg);
+		}
+	}
+	
+	@media screen and (max-width: 768px) {
+		.remoteServerContainer{
+			flex-direction: column;
+		}
+		
+		.remoteServerContainer .button-group button{
+			width: 100%;
+		}
+	}
 </style>

src/static/app/src/views/signin.vue

@@ -86,11 +86,11 @@ export default {
 </script>
 
 <template>
-	<div class="container-fluid login-container-fluid d-flex main flex-column" :data-bs-theme="this.theme">
+	<div class="container-fluid login-container-fluid d-flex main flex-column py-4 text-body" 
-		<div class="login-box m-auto" style="width: 700px;">
+	     style="overflow-y: scroll"
-			<div class="m-auto">
+	     :data-bs-theme="this.theme">
-				<div class="card px-4 py-5 rounded-4 shadow-lg">
+		<div class="login-box m-auto" >
-					<div class="card-body">
+			<div class="m-auto" style="width: 700px;">
 				<h4 class="mb-0 text-body">Welcome to</h4>
 				<span class="dashboardLogo display-3"><strong>WGDashboard</strong></span>
 				<div class="alert alert-danger mt-2 mb-0" role="alert" v-if="loginError">
@@ -145,9 +145,7 @@ export default {
 				</div>
 			</div>
 		</div>
-			</div>
+		<small class="text-muted pb-3 d-block w-100 text-center mt-3">
-		</div>
-		<small class="text-muted pb-3 d-block w-100 text-center">
 			WGDashboard v4.0 | Developed with ❤️ by 
 			<a href="https://github.com/donaldzou" target="_blank"><strong>Donald Zou</strong></a>
 		</small>
@@ -161,5 +159,13 @@ export default {
 </template>
 
 <style scoped>
+@media screen and (max-width: 768px) {
+	.login-box{
+		width: 100% !important;
+	}
 
+	.login-box div{
+		width: auto !important;
+	}
+}
 </style>

src/static/css/dashboard.css

@@ -1,6 +1,6 @@
-/**{*/
+*{
-/*    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";*/
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-/*}*/
+}
 
 .dp__input{
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;