finalisation

Author: alainabbas

nuxt.config.ts

@@ -7,7 +7,7 @@ export default defineNuxtConfig({
   proxy: {
     https: false,
     proxies: {
-      '/management': {
+      '/management/passwd': {
         target: process.env.API_URL,
         changeOrigin: true,
         headers: {Authorization: 'Bearer ' + process.env.API_KEY},

src/components/LoginMenu.vue

@@ -5,21 +5,21 @@
       <q-toolbar-title>Gestion de votre accès</q-toolbar-title>
     </q-toolbar>
     <q-card-section class="col-lg-4 flex items-center mobile-hide">
-      <q-img src="/logo.png" style="max-width: 100%;width:500px;"/>
+      <q-img src="/img/logo.png" style="max-width: 100%;width:500px;"/>
     </q-card-section>
     <q-card-section class="col-ms-8  column">
       <div class="q-pa-md row-md">
         <q-btn-toggle
-          v-model="action"
-          @click="resetData()"
-          spread
-          no-caps
-          rounded
-          unelevated
-          toggle-color="primary"
-          color="white"
-          text-color="primary"
-          :options="[
+            v-model="action"
+            @click="resetData()"
+            spread
+            no-caps
+            rounded
+            unelevated
+            toggle-color="primary"
+            color="white"
+            text-color="primary"
+            :options="[
           {label: 'Changer votre mot de passe', value: 'change'},
           {label: 'Reinitialiser votre mot de passe', value: 'reset'}
         ]"
@@ -38,23 +38,23 @@
                             :entropy-bad="passwordPolicies.minComplexity"
                             :entropy-good="passwordPolicies.goodComplexity"
                             :check-pwned="passwordPolicies.checkPwned"
-                            >
+        >
 
         </input-new-password>
       </div>
       <div v-show="action == 'reset'" class="row-md">
         <div class="q-pa-md row-md">
           <q-btn-toggle
-            @click="actionResetRenit()"
-            v-model="actionReset"
-            spread
-            no-caps
-            rounded
-            unelevated
-            toggle-color="warning"
-            color="white"
-            text-color="primary"
-            :options="optionsReset()"
+              @click="actionResetRenit()"
+              v-model="actionReset"
+              spread
+              no-caps
+              rounded
+              unelevated
+              toggle-color="warning"
+              color="white"
+              text-color="primary"
+              :options="optionsReset()"
           />
         </div>
         <q-input v-model="username" label="Utilisateur" type="text"></q-input>
@@ -86,45 +86,40 @@
   <q-dialog v-model="messageSms" persistent>
     <q-card style="min-width: 350px">
       <q-card-section>
-        <div class="text-h5">Saisissez le code reçu par {{ typeOfReset }}</div>
-      </q-card-section>
-
-      <q-card-section  >
-        <div class="row">
-        </div>
-        <div class="row">
-          <q-input  class="input self-center" maxlength="6" mask="######" style="width:100%;font-size: 30px" rounded outlined v-model="code" autofocus/>
-        </div>
-
-          <q-card-section>
-            <div class="text-h5">Définisez votre nouveau mot de passe</div>
-          </q-card-section>
-          <input-new-password v-model="newpassword"
-                              :min="passwordPolicies.len"
-                              :min-upper="passwordPolicies.hasUpperCase"
-                              :min-lower="passwordPolicies.hasLowerCase"
-                              :min-number="passwordPolicies.hasNumbers"
-                              :min-special="passwordPolicies.hasSpecialChars"
-                              :min-entropy="passwordPolicies.minComplexity"
-                              :entropy-bad="passwordPolicies.minComplexity"
-                              :entropy-good="passwordPolicies.goodComplexity"
-                              :check-pwned="passwordPolicies.checkPwned"
-          >
+        <q-card-section>
+          <div class="text-h5">Saisissez le code reçu par {{ typeOfReset }}</div>
+          <q-input class="input self-center" maxlength="6" mask="######" style="width:100%;font-size: 30px" rounded
+                   outlined v-model="code" autofocus/>
+        </q-card-section>
+        <q-card-section>
+          <div class="text-h5">Définisez votre nouveau mot de passe</div>
+        </q-card-section>
+        <input-new-password v-model="newpassword"
+                            :min="passwordPolicies.len"
+                            :min-upper="passwordPolicies.hasUpperCase"
+                            :min-lower="passwordPolicies.hasLowerCase"
+                            :min-number="passwordPolicies.hasNumbers"
+                            :min-special="passwordPolicies.hasSpecialChars"
+                            :min-entropy="passwordPolicies.minComplexity"
+                            :entropy-bad="passwordPolicies.minComplexity"
+                            :entropy-good="passwordPolicies.goodComplexity"
+                            :check-pwned="passwordPolicies.checkPwned"
+        >
 
-          </input-new-password>
+        </input-new-password>
 
       </q-card-section>
       <q-card-actions align="right" class="text-primary">
         <q-btn @click="doReloadPage" flat label="Abandonner" v-close-popup/>
-        <q-btn @click="actionSendReset" flat label="Valider" v-close-popup/>
+        <q-btn @click="actionSendReset" flat label="Valider" v-close-popup :disabled="enableValidationCode"/>
       </q-card-actions>
     </q-card>
   </q-dialog>
 </template>
 
 <script setup>
 import {ref} from 'vue'
-import {computed,onMounted} from 'vue';
+import {computed, onMounted} from 'vue';
 
 
 const messageType = ref('bg-secondary')
@@ -140,43 +135,49 @@ const newpassword = ref('')
 const actionReset = ref('mail')
 const typeOfReset = ref('SMS')
 const code = ref('')
-const resetToken=ref('')
+const resetToken = ref('')
 const enableByMail = ref(true)
 const enableBySms = ref(true)
-const passwordPolicies=ref({
-  bannedTime:3600,
-  checkPwned:true,
-  goodComplexity:60,
-  hasLowerCase:1,
-  hasNumbers:1,
-  hasSpecialChars:1,
-  hasUpperCase:1,
-  len:10,
-  maxRetry:10,
-  minComplexity:20,
-  resetBySms:false,
+const passwordPolicies = ref({
+  bannedTime: 3600,
+  checkPwned: true,
+  goodComplexity: 60,
+  hasLowerCase: 1,
+  hasNumbers: 1,
+  hasSpecialChars: 1,
+  hasUpperCase: 1,
+  len: 10,
+  maxRetry: 10,
+  minComplexity: 20,
+  resetBySms: false,
   redirectUrl: ''
 })
-onMounted(async ()=>{
-  const requestOptions = { method:'GET'}
-  let rep= await fetch('/management/passwd/getpolicies')
-  if (rep.status === 200){
-    let response =await rep.json();
-    passwordPolicies.value=response.data
-    enableBySms.value=passwordPolicies.value.resetBySms
-  }else{
-    messageAction.value = 'reloadPage'
-    messageText.value = 'Une erreur c est produite : ' + rep.status
-    messageType.value = 'bg-negative'
-    message.value = true
-  }
-  }
+onMounted(async () => {
+      const requestOptions = {method: 'GET'}
+      let rep = await fetch('/management/passwd/getpolicies')
+      if (rep.status === 200) {
+        let response = await rep.json();
+        passwordPolicies.value = response.data
+        enableBySms.value = passwordPolicies.value.resetBySms
+      } else {
+        messageAction.value = 'reloadPage'
+        messageText.value = 'Une erreur c est produite : ' + rep.status
+        messageType.value = 'bg-negative'
+        message.value = true
+      }
+    }
 )
+const enableValidationCode = computed(() => {
+  if (code.value !== '' && newpassword.value !== '') {
+    return false
+  }
+  return true
+})
 const enableValidation = computed(() => {
   if (action.value === 'change') {
     if (username.value !== '' &&
-      oldpassword.value !== '' &&
-      newpassword.value !== '') {
+        oldpassword.value !== '' &&
+        newpassword.value !== '') {
       return false
     }
   }
@@ -230,33 +231,33 @@ function envoi() {
     loading.value = true
     enableValidation.value = false
     fetch('/management/passwd/change', requestOptions)
-      .then(async response => {
-        const isJson = response.headers.get('content-type')?.includes('application/json');
-        const data = isJson && await response.json();
-        console.log('status :' + data.status)
-        // check for error response
-        if (response.status === 200){
+        .then(async response => {
+          const isJson = response.headers.get('content-type')?.includes('application/json');
+          const data = isJson && await response.json();
+          console.log('status :' + data.status)
+          // check for error response
+          if (response.status === 200) {
             messageAction.value = 'redirect'
             messageText.value = 'Votre mot de passe a été changé. Vous pouvez vous connecter'
             messageType.value = 'bg-secondary'
             message.value = true
-          } else if (response.status === 400){
+          } else if (response.status === 400) {
             messageAction.value = 'reloadPage'
             messageText.value = 'Erreur d\'authentification. Veuillez réessayer.'
             messageType.value = 'bg-negative'
             message.value = true
-          }else{
-          const error = (data && data.message) || response.status;
-          return Promise.reject(error);
-        }
-      })
-      .catch(error => {
-        messageAction.value = 'reloadPage'
-        messageText.value = 'Une erreur c est produite : ' + error
-        messageType.value = 'bg-negative'
-        message.value = true
-        console.error('There was an error!', error);
-      })
+          } else {
+            const error = (data && data.message) || response.status;
+            return Promise.reject(error);
+          }
+        })
+        .catch(error => {
+          messageAction.value = 'reloadPage'
+          messageText.value = 'Une erreur c est produite : ' + error
+          messageType.value = 'bg-negative'
+          message.value = true
+          console.error('There was an error!', error);
+        })
 
   }
 }
@@ -266,12 +267,12 @@ function actionInitReset(resetType) {
   const requestOptions = {
     method: 'POST',
     headers: {'Content-Type': 'application/json'},
-    body: JSON.stringify({uid: username.value,type:resetType})
+    body: JSON.stringify({uid: username.value, type: resetType})
   }
-  if (resetType === 0){
-    typeOfReset.value='mail'
-  }else{
-    typeOfReset.value='SMS'
+  if (resetType === 0) {
+    typeOfReset.value = 'mail'
+  } else {
+    typeOfReset.value = 'SMS'
   }
 
   loading.value = true
@@ -282,10 +283,10 @@ function actionInitReset(resetType) {
         const data = isJson && await response.json();
         console.log('status :' + data.status)
         // check for error response
-        if (response.status === 200){
-          resetToken.value=data.token
-          messageSms.value=true
-        } else{
+        if (response.status === 200) {
+          resetToken.value = data.token
+          messageSms.value = true
+        } else {
           messageAction.value = 'reloadPage'
           messageText.value = 'Une erreur c est produite : ' + error
           messageType.value = 'bg-negative'
@@ -301,26 +302,29 @@ function actionInitReset(resetType) {
       })
 
 }
-function actionSendReset(){
+
+function actionSendReset() {
   const requestOptions = {
     method: 'POST',
     headers: {'Content-Type': 'application/json'},
-    body: JSON.stringify({token: resetToken.value,
-      code:parseInt(code.value),
-      newpassword: newpassword.value})
+    body: JSON.stringify({
+      token: resetToken.value,
+      code: parseInt(code.value),
+      newpassword: newpassword.value
+    })
   }
   fetch('/management/passwd/resetbycode', requestOptions)
       .then(async response => {
         const isJson = response.headers.get('content-type')?.includes('application/json');
         const data = isJson && await response.json();
         console.log('status :' + data.status)
         // check for error response
-        if (response.status === 200){
-          messageAction.value='redirect'
+        if (response.status === 200) {
+          messageAction.value = 'redirect'
           messageText.value = 'Votre mot de passe a été reinitialisé'
-          messageType.value = 'positive'
+          messageType.value = 'bg-positive'
           message.value = true
-        } else{
+        } else {
           messageAction.value = 'reloadPage'
           messageText.value = 'Une erreur c\'est produite : ' + error
           messageType.value = 'bg-negative'
@@ -335,12 +339,13 @@ function actionSendReset(){
         console.error('There was an error!', error);
       })
 }
+
 function doActionMessage() {
   if (messageAction.value === 'reloadPage') {
     window.location.reload()
   }
   if (messageAction.value === 'redirect') {
-      window.location.replace(passwordPolicies.value.redirectUrl )
+    window.location.replace(passwordPolicies.value.redirectUrl)
   }
 }
 

src/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-page class="window-height window-width row justify-center items-center">
+  <q-page class="window-height window-width row justify-center items-center bg-image">
     <LoginMenu></LoginMenu>
   </q-page>
 </template>
@@ -10,5 +10,10 @@ export default {
 </script>
 
 <style scoped>
+.bg-image {
+  background-image: url(/img/background.png);
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
 
 </style>