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;
}
.button-primary {
.button-primary,
.button-disabled {
border-radius: var(--radius);
border: none;
@@ -102,3 +103,9 @@ 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;
}
+10 -7
View File
@@ -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>