Added disabled button

This commit is contained in:
Florian Sylvain
2022-12-23 21:15:02 +01:00
parent 2c2b478d5e
commit 17b41cc232
2 changed files with 18 additions and 8 deletions
+8 -1
View File
@@ -82,7 +82,8 @@ h2, h3, h4, h5, h6 {
color: red; color: red;
} }
.button-primary { .button-primary,
.button-disabled {
border-radius: var(--radius); border-radius: var(--radius);
border: none; border: none;
@@ -101,4 +102,10 @@ h2, h3, h4, h5, h6 {
.button-primary:active { .button-primary:active {
background-color: var(--primary-dark); background-color: var(--primary-dark);
}
.button-disabled {
color: var(--neutral-dark);
background-color: var(--neutral-light);
cursor: default;
} }
+10 -7
View File
@@ -7,8 +7,13 @@ import { useRouter } from 'vue-router';
const isTokenOK: Ref<boolean|undefined> = ref(undefined) const isTokenOK: Ref<boolean|undefined> = ref(undefined)
const router = useRouter() const router = useRouter()
const authStore = useAuthStore() const authStore = useAuthStore()
const email = ref('')
const password = ref('')
const isFormEmpty: ()=>boolean = () => {
return email.value === '' || password.value === ''
}
function updateJWTcookies(JWTdata: jwtFormat): void { function updateJWTcookies(JWTdata: jwtFormat): void {
const cookieExpire = new Date(JWTdata.expire) const cookieExpire = new Date(JWTdata.expire)
@@ -59,16 +64,12 @@ function login(email: string, password: string): void {
} }
}) })
} }
const email = ref('')
const password = ref('')
</script> </script>
<template> <template>
<div class="login-page"> <div class="login-page">
<div class="login-form"> <div class="login-form">
<h2>Connexion à GohCMS</h2> <h2>Connexion à <span style="color:#00ACD7">Go</span>hCMS</h2>
<form @submit.prevent="login(email, password)"> <form @submit.prevent="login(email, password)">
<div class="inputs-group"> <div class="inputs-group">
@@ -83,7 +84,9 @@ const password = ref('')
<p v-else-if="useErrorsStore().sessionExpired"> Votre session a expiré.</p> <p v-else-if="useErrorsStore().sessionExpired"> Votre session a expiré.</p>
</div> </div>
</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> </form>
</div> </div>
</div> </div>