From e3f82e136a9612a719e4eae35e79cd9f6b0bc3a7 Mon Sep 17 00:00:00 2001
From: Donald Zou <donaldzou@live.hk>
Date: Mon, 12 Aug 2024 18:04:41 -0400
Subject: [PATCH] Adjusted some UI

---
 .../peerShareLinkModal.vue                    |   6 +
 .../settingsComponent/accountSettingsMFA.vue  |   2 +-
 .../dashboardAPIKey.vue                       |  14 ++-
 .../signInComponents/RemoteServer.vue         |  54 ++++++++-
 src/static/app/src/views/signin.vue           | 106 +++++++++---------
 src/static/css/dashboard.css                  |   6 +-
 6 files changed, 126 insertions(+), 62 deletions(-)

diff --git a/src/static/app/src/components/configurationComponents/peerShareLinkModal.vue b/src/static/app/src/components/configurationComponents/peerShareLinkModal.vue
index 7555acd..5904919 100644
--- a/src/static/app/src/components/configurationComponents/peerShareLinkModal.vue
+++ b/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(
diff --git a/src/static/app/src/components/settingsComponent/accountSettingsMFA.vue b/src/static/app/src/components/settingsComponent/accountSettingsMFA.vue
index b19749e..1a99b52 100644
--- a/src/static/app/src/components/settingsComponent/accountSettingsMFA.vue
+++ b/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()">
diff --git a/src/static/app/src/components/settingsComponent/dashboardAPIKeysComponents/dashboardAPIKey.vue b/src/static/app/src/components/settingsComponent/dashboardAPIKeysComponents/dashboardAPIKey.vue
index 1e961fc..bf06885 100644
--- a/src/static/app/src/components/settingsComponent/dashboardAPIKeysComponents/dashboardAPIKey.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/static/app/src/components/signInComponents/RemoteServer.vue b/src/static/app/src/components/signInComponents/RemoteServer.vue
index 5d44143..e1dc50a 100644
--- a/src/static/app/src/components/signInComponents/RemoteServer.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/static/app/src/views/signin.vue b/src/static/app/src/views/signin.vue
index 1595785..2fd5c30 100644
--- a/src/static/app/src/views/signin.vue
+++ b/src/static/app/src/views/signin.vue
@@ -86,68 +86,66 @@ export default {
 </script>
 
 <template>
-	<div class="container-fluid login-container-fluid d-flex main flex-column" :data-bs-theme="this.theme">
-		<div class="login-box m-auto" style="width: 700px;">
-			<div class="m-auto">
-				<div class="card px-4 py-5 rounded-4 shadow-lg">
-					<div class="card-body">
-						<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">
-							{{this.loginErrorMessage}}
-						</div>
-						<form @submit="(e) => {e.preventDefault(); this.auth();}" 
-						      v-if="!this.store.CrossServerConfiguration.Enable">
-							<div class="form-group text-body">
-								<label for="username" class="text-left" style="font-size: 1rem">
-									<i class="bi bi-person-circle"></i></label>
-								<input type="text" v-model="username" class="form-control" id="username" name="username"
-								       autocomplete="on"
-								       placeholder="Username" required>
-							</div>
-							<div class="form-group text-body">
-								<label for="password" class="text-left" style="font-size: 1rem"><i class="bi bi-key-fill"></i></label>
-								<input type="password"
-								       v-model="password" class="form-control" id="password" name="password"
-								       autocomplete="on"
-								       placeholder="Password" required>
-							</div>
-							<div class="form-group text-body" v-if="totpEnabled">
-								<label for="totp" class="text-left" style="font-size: 1rem"><i class="bi bi-lock-fill"></i></label>
-								<input class="form-control totp"
-								       required
-								       id="totp" maxlength="6" type="text" inputmode="numeric" autocomplete="one-time-code"
-								       placeholder="OTP from your authenticator"
-								       v-model="this.totp"
-								>
-							</div>
-							<button class="btn btn-lg btn-dark ms-auto mt-4 w-100 d-flex btn-brand signInBtn" ref="signInBtn">
+	<div class="container-fluid login-container-fluid d-flex main flex-column py-4 text-body" 
+	     style="overflow-y: scroll"
+	     :data-bs-theme="this.theme">
+		<div class="login-box m-auto" >
+			<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">
+					{{this.loginErrorMessage}}
+				</div>
+				<form @submit="(e) => {e.preventDefault(); this.auth();}"
+				      v-if="!this.store.CrossServerConfiguration.Enable">
+					<div class="form-group text-body">
+						<label for="username" class="text-left" style="font-size: 1rem">
+							<i class="bi bi-person-circle"></i></label>
+						<input type="text" v-model="username" class="form-control" id="username" name="username"
+						       autocomplete="on"
+						       placeholder="Username" required>
+					</div>
+					<div class="form-group text-body">
+						<label for="password" class="text-left" style="font-size: 1rem"><i class="bi bi-key-fill"></i></label>
+						<input type="password"
+						       v-model="password" class="form-control" id="password" name="password"
+						       autocomplete="on"
+						       placeholder="Password" required>
+					</div>
+					<div class="form-group text-body" v-if="totpEnabled">
+						<label for="totp" class="text-left" style="font-size: 1rem"><i class="bi bi-lock-fill"></i></label>
+						<input class="form-control totp"
+						       required
+						       id="totp" maxlength="6" type="text" inputmode="numeric" autocomplete="one-time-code"
+						       placeholder="OTP from your authenticator"
+						       v-model="this.totp"
+						>
+					</div>
+					<button class="btn btn-lg btn-dark ms-auto mt-4 w-100 d-flex btn-brand signInBtn" ref="signInBtn">
 								<span v-if="!this.loading" class="d-flex w-100">
 									Sign In<i class="ms-auto bi bi-chevron-right"></i>
 								</span>
-								<span v-else class="d-flex w-100 align-items-center">
+						<span v-else class="d-flex w-100 align-items-center">
 									Signing In...
 									<span class="spinner-border ms-auto spinner-border-sm" role="status">
 								        <span class="visually-hidden">Loading...</span>
 									</span>
 								</span>
-							</button>
-						</form>
-						<RemoteServerList v-else></RemoteServerList>
-						
-						<div class="d-flex mt-3" v-if="!this.store.IsElectronApp">
-							<div class="form-check form-switch ms-auto">
-								<input 
-									v-model="this.store.CrossServerConfiguration.Enable"
-									class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked">
-								<label class="form-check-label" for="flexSwitchCheckChecked">Access Remote Server</label>
-							</div>
-						</div>
+					</button>
+				</form>
+				<RemoteServerList v-else></RemoteServerList>
+
+				<div class="d-flex mt-3" v-if="!this.store.IsElectronApp">
+					<div class="form-check form-switch ms-auto">
+						<input
+							v-model="this.store.CrossServerConfiguration.Enable"
+							class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked">
+						<label class="form-check-label" for="flexSwitchCheckChecked">Access Remote Server</label>
 					</div>
 				</div>
 			</div>
 		</div>
-		<small class="text-muted pb-3 d-block w-100 text-center">
+		<small class="text-muted pb-3 d-block w-100 text-center mt-3">
 			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>
\ No newline at end of file
diff --git a/src/static/css/dashboard.css b/src/static/css/dashboard.css
index 2eb2f82..a94a69b 100644
--- a/src/static/css/dashboard.css
+++ b/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;