save

Author: alainabbas

package.json

@@ -24,6 +24,8 @@
     "@quasar/extras": "^1.16.9",
     "@vueuse/router": "^10.7.2",
     "cookie": "^0.6.0",
+    "fast-password-entropy": "^1.1.1",
+    "hibp": "^14.1.2",
     "moment": "^2.30.1",
     "openapi-fetch": "^0.8.2",
     "pinia": "^2.1.7",

src/components/identityForm/actions.vue

@@ -13,6 +13,8 @@ div.flex
       :true-value="1"
       :false-value="0"
       )
+    q-btn.q-mx-xs(@click="resetPasswordModal = true" color="red-8" icon="mdi-account-key"  :disabled="props.identity.state != IdentityState.SYNCED")
+      q-tooltip.text-body2(slot="trigger") Définir le mot de passe
     q-btn.q-mx-xs(@click="sendInit" color="primary" icon="mdi-email-arrow-right"  :disabled="props.identity.state != IdentityState.SYNCED")
       q-tooltip.text-body2(slot="trigger") Envoyer le mail d'invitation
     q-btn.q-mx-xs(@click="submit" color="positive" icon="mdi-check"  v-show="!isNew" v-if="crud.update")
@@ -24,6 +26,24 @@ div.flex
       q-tooltip.text-body2(slot="trigger") Voir les logs de l'identité
     q-btn.q-mx-xs(v-if="props.identity?._id" @click="deleteIdentity" color="negative" icon="mdi-delete")
       q-tooltip.text-body2(slot="trigger") Supprimer l'identité
+    q-dialog(v-model="resetPasswordModal" persistent medium)
+      q-card(style="width:800px")
+       q-card-section(class="text-h6 bg-primary text-white") definition du mot de passe
+       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-actions(align="right" class="bg-white text-teal")
+          q-btn( label="Abandonner" color="negative" @click="resetPasswordModal = false" )
+          q-btn( label="Sauver" color="positive" @click="resetPasswordModal = false" :disabled="newpassword === ''")
+
 </template>
 
 <script lang="ts" setup>
@@ -35,8 +55,24 @@ import { useRouter } from 'vue-router'
 import { useFetch } from 'nuxt/app'
 import { useIdentityStates } from '~/composables'
 import { useErrorHandling } from '#imports'
+import InputNewPassword from "~/components/inputNewPassword.vue";
+const resetPasswordModal=ref(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: ''
+})
 
-
+const newpassword=ref('')
 type IdentityResponse = operations['IdentitiesController_search']['responses']['200']['content']['application/json']
 type Identity = components['schemas']['IdentitiesDto']
 const activation=ref(true)

src/components/inputNewPassword.vue

@@ -0,0 +1,326 @@
+<template>
+  <div>
+    <div class="col-12">
+      <q-input @update:model-value="checkPassword($event,'pass')" :label-color="pwdColor" v-model="newPassword"
+               label="Nouveau mot de passe" :type="typePasswordProp">
+        <template v-slot:append>
+          <q-icon name="mdi-eye" @click="togglePassword" style="cursor: pointer;"/>
+        </template>
+
+      </q-input>
+      <q-input @update:model-value="checkPassword($event,'confirm')" v-model="confirmNewPassword" :label-color="confirmColor"
+               label="Confirmation du nouveau mot de passe" :type="typeConfirmProp">
+        <template v-slot:append>
+          <q-icon name="mdi-eye" @click="toggleConfirm" style="cursor: pointer;"/>
+        </template>
+      </q-input>
+    </div>
+    <div class="col-12">
+      <p style="margin: 0px;">
+        <q-icon :name="has_len" :color="has_len_color" size="xs" style="margin: 0px;"></q-icon>
+        &nbsp;doit avoir au moins {{min}} caractères
+      </p>
+      <p v-show="minUpper > 0" style="margin: 0px;">
+        <q-icon  :name="has_upper" :color="has_upper_color" size="xs" ></q-icon>
+        &nbsp;doit comporter au moins {{minUpper}} majuscules
+      </p>
+      <p v-show="minLower > 0" style="margin: 0px;">
+        <q-icon  :name="has_lower" :color="has_lower_color" size="xs" ></q-icon>
+        &nbsp;doit comporter au moins {{minLower}} minuscules
+      </p>
+      <p  v-show="minNumber > 0" style="margin: 0px;">
+        <q-icon  :name="has_number" :color="has_number_color" size="xs" ></q-icon>
+        &nbsp;doit comporter au moins {{minNumber}} chiffre
+      </p>
+      <p v-show="minSpecial > 0" style="margin: 0px;">
+        <q-icon  :name="has_special" :color="has_special_color" size="xs" ></q-icon>
+        &nbsp;doit comporter au moins {{minNumber}} charactère special
+      </p>
+      <p v-show="minEntropy > 0" style="margin: 0px;">
+        <q-icon  :name="has_complexity" :color="has_complexity_color" size="xs" ></q-icon>
+        &nbsp; Complexité
+        <br>
+        <q-linear-progress :value="progress" :color="progress_color" class="q-mt-sm" size="10px" />
+      </p>
+      <p v-show="checkPwned">
+        <q-icon  :name="isPwned" :color="isPwned_color" size="xs" ></q-icon>
+        &nbsp; Exposition du mot de passe <a href="https://haveibeenpwned.com">haveiBeenPwned</a>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useQuasar } from 'quasar'
+import {ref} from 'vue'
+import stringEntropy from 'fast-password-entropy'
+import { pwnedPassword } from 'hibp';
+const emit = defineEmits(['update:modelValue'])
+const $q = useQuasar()
+const newPassword = ref('')
+const confirmNewPassword = ref('')
+const pwdColor = ref('')
+const confirmColor = ref('')
+const has_len=ref('mdi-alert-box')
+const has_len_color=ref('red')
+const has_upper=ref('mdi-alert-box')
+const has_upper_color=ref('red')
+const has_lower=ref('mdi-alert-box')
+const has_lower_color=ref('red')
+const has_number=ref('mdi-alert-box')
+const has_number_color=ref('red')
+const has_special=ref('mdi-alert-box')
+const has_special_color=ref('red')
+const has_complexity=ref('mdi-alert-box')
+const has_complexity_color=ref('red')
+const isPwned=ref('mdi-emoticon-neutral')
+const isPwned_color=ref('grey')
+const progress=ref(0)
+const progress_color=ref('red')
+const typePasswordProp=ref('password')
+const typeConfirmProp=ref('password')
+const props = defineProps({
+  min: {
+    type: Number,
+    default:8},
+  minUpper:{
+    type: Number,
+    default:1
+  },
+  minLower:{
+    type: Number,
+    default:1
+  },
+  minNumber:{
+    type: Number,
+    default:1
+  },
+  minSpecial:{
+    type:Number,
+    default:1
+  },
+  minEntropy:{
+    type:Number,
+    default:30
+  },
+  entropyBad:{
+    type:Number,
+    default:10
+  },
+  entropyGood:{
+    type:Number,
+    default:80
+  },
+  checkPwned:{
+    type:Boolean,
+    default:true
+  }
+})
+
+async function checkPassword(ev, type) {
+  let newP = newPassword.value
+  let confirmP = confirmNewPassword.value
+  if (type === 'pass') {
+    newP = ev
+  } else {
+    confirmP = ev
+  }
+  if (checkPolicy(newP) === true) {
+    if (newP === confirmP) {
+      console.log('emit ' + newPassword.value)
+      //avant d accepter on cherche dans l api de pwned
+      try{
+        if (props.checkPwned === true ){
+          const numPwns = await pwnedPassword(newP);
+
+          if (numPwns >0){
+            iconIsPwnedOK(false)
+            $q.notify({
+              message: '<text-weight-medium>Ce mot de passe est déjà apparu lors d\'une violation de données. Vous ne pouvez pas l\'utiliser</text-weight-medium>',
+            })
+            emit('update:modelValue', '')
+            return
+          }else{
+            iconIsPwnedOK(true)
+          }
+          console.log('pwn :' + numPwns)
+        }
+      }catch(err){
+
+      }
+
+
+      confirmColor.value='green'
+      emit('update:modelValue', newPassword.value)
+    }else{
+      emit('update:modelValue', '')
+      confirmColor.value='red'
+    }
+  }else{
+    emit('update:modelValue', '')
+  }
+}
+
+function checkPolicy(password) {
+  has_len.value='highlight_off'
+  let statut=true
+  if (props.minSpecial >= 1){
+    if (/[!@#\$%\^\&*\)\(+=._-]/.test(password) === false){
+      pwdColor.value = 'red'
+      iconSpecialOK(false)
+      statut=false
+    }else{
+      iconSpecialOK(true)
+    }
+  }
+  if (props.minNumber >= 1) {
+    if (/\d/.test(password) === false) {
+      pwdColor.value = 'red'
+      iconNumberOK(false)
+      statut = false
+    } else {
+      iconNumberOK(true)
+    }
+  }
+  if (props.minLower >= 1) {
+    if (/[a-z]/.test(password) === false) {
+      pwdColor.value = 'red'
+      iconLowerOK(false)
+      statut = false
+    } else {
+      iconLowerOK(true)
+    }
+  }
+  if (props.minUpper >= 1) {
+    if (/[A-Z]/.test(password) === false) {
+      pwdColor.value = 'red'
+      iconUpperOK(false)
+      statut = false
+    } else {
+      iconUpperOK(true)
+    }
+  }
+  if (password.length < props.min) {
+    console.log('trop court ' + props.min)
+    iconLenOK(false)
+    statut=false
+  }else{
+    iconLenOK(true)
+  }
+  console.log('password OK ')
+  if (statut === true){
+    pwdColor.value = 'green'
+  }else {
+    pwdColor.value = 'red'
+  }
+  //entropie
+  if (complexity(password) === false){
+    statut=false
+    iconComplexityOK(false)
+  }else{
+    iconComplexityOK(true)
+  }
+  return statut
+}
+function iconComplexityOK(value){
+  if (value === true){
+    has_complexity.value='mdi-check'
+    has_complexity_color.value='green'
+  }else{
+    has_complexity.value='mdi-alert-box'
+    has_complexity_color.value='red'
+  }
+}
+function iconLenOK(value){
+  if (value === true){
+    has_len.value='mdi-check'
+    has_len_color.value='green'
+  }else{
+    has_len.value='mdi-alert-box'
+    has_len_color.value='red'
+  }
+}
+function iconUpperOK(value){
+  if (value === true){
+    has_upper.value='mdi-check'
+    has_upper_color.value='green'
+  }else{
+    has_upper.value='mdi-alert-box'
+    has_upper_color.value='red'
+  }
+}
+function iconLowerOK(value){
+  if (value === true){
+    has_lower.value='mdi-check'
+    has_lower_color.value='green'
+  }else{
+    has_lower.value='mdi-alert-box'
+    has_lower_color.value='red'
+  }
+}
+function iconNumberOK(value){
+  if (value === true){
+    has_number.value='mdi-check'
+    has_number_color.value='green'
+  }else{
+    has_number.value='mdi-alert-box'
+    has_number_color.value='red'
+  }
+}
+function iconSpecialOK(value){
+  if (value === true){
+    has_special.value='mdi-check'
+    has_special_color.value='green'
+  }else{
+    has_special.value='mdi-alert-box'
+    has_special_color.value='red'
+  }
+}
+function iconIsPwnedOK(value){
+  if (value === true){
+    isPwned.value='mdi-emoticon'
+    isPwned_color.value='green'
+  }else{
+    isPwned.value='mdi-emoticon-angry'
+    isPwned_color.value='red'
+  }
+}
+function complexity(password){
+  console.log(stringEntropy(password))
+  if (props.minEntropy > 0){
+    let c = stringEntropy(password)
+    progress.value = c / 100
+    console.log('entropy' + c)
+    if (c < props.entropyBad) {
+      progress_color.value = 'red'
+    } else if (c >= props.entropyBad && c < props.entropyGood) {
+      progress_color.value = 'warning'
+    } else {
+      progress_color.value = 'green'
+    }
+    if (c >= props.minEntropy) {
+      return true
+    } else {
+      return false
+    }
+  }
+}
+function togglePassword(){
+  if (typePasswordProp.value === 'password'){
+    typePasswordProp.value='text'
+  }else{
+    typePasswordProp.value='password'
+  }
+}
+function toggleConfirm(){
+  if (typeConfirmProp.value === 'password'){
+    typeConfirmProp.value='text'
+  }else{
+    typeConfirmProp.value='password'
+  }
+}
+</script>
+
+<style scoped>
+
+</style>