From 17b41cc23284b9a87ac7d22e78e7ae1536448ead Mon Sep 17 00:00:00 2001
From: Florian Sylvain <floriansylvainpro@gmail.com>
Date: Fri, 23 Dec 2022 21:15:02 +0100
Subject: [PATCH] Added disabled button

---
 web/admin-gui/src/assets/base.css |  9 ++++++++-
 web/admin-gui/src/views/Login.vue | 17 ++++++++++-------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/web/admin-gui/src/assets/base.css b/web/admin-gui/src/assets/base.css
index 64cdbbb..1767f91 100644
--- a/web/admin-gui/src/assets/base.css
+++ b/web/admin-gui/src/assets/base.css
@@ -82,7 +82,8 @@ h2, h3, h4, h5, h6 {
 	color: red;
 }
 
-.button-primary {
+.button-primary,
+.button-disabled {
 	border-radius: var(--radius);
 	border: none;
 	
@@ -101,4 +102,10 @@ h2, h3, h4, h5, h6 {
 
 .button-primary:active {
 	background-color: var(--primary-dark);
+}
+
+.button-disabled {
+	color: var(--neutral-dark);
+	background-color: var(--neutral-light);
+	cursor: default;
 }
\ No newline at end of file
diff --git a/web/admin-gui/src/views/Login.vue b/web/admin-gui/src/views/Login.vue
index 67c508a..12c265b 100644
--- a/web/admin-gui/src/views/Login.vue
+++ b/web/admin-gui/src/views/Login.vue
@@ -7,8 +7,13 @@ import { useRouter } from 'vue-router';
 
 const isTokenOK: Ref<boolean|undefined> = ref(undefined)
 const router = useRouter()
-
 const authStore = useAuthStore()
+const email = ref('')
+const password = ref('')
+
+const isFormEmpty: ()=>boolean = () => { 
+	return email.value === '' || password.value === ''
+}
 
 function updateJWTcookies(JWTdata: jwtFormat): void {
 	const cookieExpire = new Date(JWTdata.expire)
@@ -59,16 +64,12 @@ function login(email: string, password: string): void {
 			}
 		})
 }
-
-const email = ref('')
-const password = ref('')
-
 </script>
 
 <template>
 	<div class="login-page">
 		<div class="login-form">
-			<h2>Connexion à GohCMS</h2>
+			<h2>Connexion à <span style="color:#00ACD7">Go</span>hCMS</h2>
 			
 			<form @submit.prevent="login(email, password)">
 				<div class="inputs-group">
@@ -83,7 +84,9 @@ const password = ref('')
 						<p v-else-if="useErrorsStore().sessionExpired">⌛ Votre session a expiré.</p>
 					</div>
 				</div>
-				<button class="button-primary" type="submit">Se connecter</button>
+				<button :class="`button-${isFormEmpty() ? 'disabled' : 'primary'}`" type="submit" :disabled="isFormEmpty()">
+					Se connecter
+				</button>
 			</form>
 		</div>
 	</div>