319 lines
10 KiB
Vue
319 lines
10 KiB
Vue
<template>
|
|
<div class=" ">
|
|
<div class="modal-content-style">
|
|
<div v-if="canView">
|
|
<div class="popUp-tab__content tab-content">
|
|
<div
|
|
class="fade show active"
|
|
id="nav-changepass"
|
|
role="tabpanel"
|
|
aria-labelledby="nav-changepass-tab"
|
|
>
|
|
<div class="my-profile__container" style="position: relative">
|
|
<div class="my-profile">
|
|
<div class="my-profile__form">
|
|
<div class="mt-md-5">
|
|
<div class="form-row">
|
|
<label class="col-12 col-md-5" for=""
|
|
>{{ $t("CurrentPassword") }}:</label
|
|
>
|
|
<div class="col-12 col-md-7">
|
|
<input
|
|
class="form-control"
|
|
type="password"
|
|
placeholder="رمز عبور فعلی"
|
|
v-model.trim="$v.password.$model"
|
|
/>
|
|
<!-- <button
|
|
type="button"
|
|
@click="togglePasswordVisibility"
|
|
class="toggle-password-btn border-right-0 rounded-left"
|
|
>
|
|
<svg v-if="isPasswordVisible" class="icon icon-eye">
|
|
<use xlink:href="#icon-eye"></use>
|
|
</svg>
|
|
<svg v-else class="icon icon-Eye-Slash">
|
|
<use xlink:href="#icon-Eye-Slash"></use>
|
|
</svg>
|
|
</button> -->
|
|
</div>
|
|
</div>
|
|
<div class="form-row my-3 position-relative">
|
|
<label class="col-12 col-md-5" for=""
|
|
>{{ $t("NewPassword") }}:</label
|
|
>
|
|
<div class="col-12 col-md-7">
|
|
<input
|
|
class="form-control"
|
|
:class="{ 'form-group--error': $v.newpass.$error }"
|
|
:type="passwordFieldType"
|
|
placeholder="رمز عبور جدید"
|
|
v-model.trim="$v.newpass.$model"
|
|
@focus="isFocusedOnNewpass = true"
|
|
@blur="isFocusedOnNewpass = false"
|
|
/>
|
|
<button
|
|
type="button"
|
|
@click="togglePasswordVisibility"
|
|
class="toggle-password-btn border-right-0 rounded-left"
|
|
>
|
|
<svg v-if="isPasswordVisible" class="icon icon-eye">
|
|
<use xlink:href="#icon-eye"></use>
|
|
</svg>
|
|
<svg v-else class="icon icon-Eye-Slash">
|
|
<use xlink:href="#icon-Eye-Slash"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<transition name="fade">
|
|
<div
|
|
v-if="isFocusedOnNewpass"
|
|
class="password-requirements"
|
|
>
|
|
<ul>
|
|
<li
|
|
:class="{
|
|
'text-success':
|
|
!$v.newpass.$pending && $v.newpass.minLength,
|
|
'text-danger': !$v.newpass.minLength,
|
|
}"
|
|
>
|
|
طول آن حداقل باید 8 کاراکتر باشد
|
|
</li>
|
|
<li
|
|
:class="{
|
|
'text-success':
|
|
!$v.newpass.$pending && $v.newpass.hasLowerCase,
|
|
'text-danger': !$v.newpass.hasLowerCase,
|
|
}"
|
|
>
|
|
حداقل شامل یک حرف کوچک باشد
|
|
</li>
|
|
<li
|
|
:class="{
|
|
'text-success':
|
|
!$v.newpass.$pending && $v.newpass.hasUpperCase,
|
|
'text-danger': !$v.newpass.hasUpperCase,
|
|
}"
|
|
>
|
|
حداقل شامل یک حرف بزرگ باشد
|
|
</li>
|
|
<li
|
|
:class="{
|
|
'text-success':
|
|
!$v.newpass.$pending &&
|
|
$v.newpass.hasSpecialChar,
|
|
'text-danger': !$v.newpass.hasSpecialChar,
|
|
}"
|
|
>
|
|
حداقل شامل یک کاراکتر خاص باشد
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</transition>
|
|
<div class="form-row my-3 position-relative">
|
|
<label class="col-12 col-md-5" for=""
|
|
>{{ $t("RepeatNewPassword") }}:</label
|
|
>
|
|
<div class="col-12 col-md-7">
|
|
<input
|
|
class="form-control"
|
|
:class="{ 'form-group--error': $v.repassword.$error }"
|
|
type="password"
|
|
placeholder="تکرار رمز عبور"
|
|
v-model.trim="$v.repassword.$model"
|
|
@focus="isFocusedOnRepassword = true"
|
|
@blur="isFocusedOnRepassword = false"
|
|
/>
|
|
<div v-if="$v.repassword.$error">
|
|
<div class="error">
|
|
{{ $t("PasswordsDoNotMatch") }}
|
|
</div>
|
|
</div>
|
|
<!-- <button
|
|
type="button"
|
|
@click="togglePasswordVisibility"
|
|
class="toggle-password-btn border-right-0 rounded-left"
|
|
>
|
|
<svg v-if="isPasswordVisible" class="icon icon-eye">
|
|
<use xlink:href="#icon-eye"></use>
|
|
</svg>
|
|
<svg v-else class="icon icon-Eye-Slash">
|
|
<use xlink:href="#icon-Eye-Slash"></use>
|
|
</svg>
|
|
</button> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-end mt-3 ml-5">
|
|
<button @click="edit" class="button btn">
|
|
{{ $t("Save") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<no-data v-else>
|
|
<!-- <the-content-loading v-if="fetchingData"></the-content-loading> -->
|
|
|
|
<div class="d-flex justify-content-center align-items-center">
|
|
<div
|
|
class="alert alert-warning d-flex justify-content-center align-items-center"
|
|
>
|
|
<span
|
|
class="tavasi tavasi-warning-circle color-inherit ml-1 text__32"
|
|
></span>
|
|
{{ $t("Inaccessibility") }}
|
|
</div>
|
|
</div>
|
|
</no-data>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import settingsMixin from "@mixins/settings/settingsMixin";
|
|
import {
|
|
required,
|
|
minLength,
|
|
sameAs,
|
|
} from "@vuelidate/validators";
|
|
|
|
export default {
|
|
validations: {
|
|
password: {
|
|
required,
|
|
minLength: minLength(8),
|
|
},
|
|
newpass: {
|
|
required,
|
|
minLength: minLength(8),
|
|
hasLowerCase: (value) => /[a-z]/.test(value),
|
|
hasUpperCase: (value) => /[A-Z]/.test(value),
|
|
hasSpecialChar: (value) => /[!@#$%^&*(),.?":{}|<>]/.test(value),
|
|
},
|
|
repassword: {
|
|
required,
|
|
sameAsPassword: sameAs("newpass"),
|
|
minLength: minLength(8),
|
|
},
|
|
code: {
|
|
required,
|
|
},
|
|
},
|
|
props: ["currentTab"],
|
|
mixins: [settingsMixin],
|
|
mounted() {
|
|
if (this.isRealUser) {
|
|
this.canView = true;
|
|
} else this.canView = false;
|
|
},
|
|
data() {
|
|
return {
|
|
password: "",
|
|
newpass: "",
|
|
repassword: "",
|
|
submitStatus: null,
|
|
isFocusedOnNewpass: false,
|
|
isFocusedOnRepassword: false,
|
|
isPasswordVisible: false,
|
|
};
|
|
},
|
|
computed: {
|
|
passwordFieldType() {
|
|
return this.isPasswordVisible ? "text" : "password";
|
|
},
|
|
},
|
|
methods: {
|
|
togglePasswordVisibility() {
|
|
this.isPasswordVisible = !this.isPasswordVisible;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.user-modal {
|
|
border: none !important;
|
|
/* height:35em !important; */
|
|
margin-top: 0 !important;
|
|
.my-profile {
|
|
padding-bottom: unset !important;
|
|
}
|
|
.popUp-tab__content {
|
|
padding-top: unset !important;
|
|
}
|
|
}
|
|
|
|
.fix-user-modal {
|
|
position: relative;
|
|
margin: auto;
|
|
top: 255px;
|
|
}
|
|
.fix {
|
|
position: relative;
|
|
margin: auto;
|
|
}
|
|
.my-profile__form {
|
|
max-width: 40em;
|
|
}
|
|
.my-profile {
|
|
padding-right: 50px;
|
|
}
|
|
.toggle-password-btn {
|
|
position: absolute;
|
|
left: 6px;
|
|
min-width: 26px !important;
|
|
height: 30px !important;
|
|
border: 0 !important;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: #fff;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
.modal-content-style {
|
|
height: 19em;
|
|
}
|
|
.password-requirements {
|
|
/* position: absolute;
|
|
top: 100%;
|
|
left: 0; */
|
|
background-color: #f9f9f9;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
z-index: 10;
|
|
}
|
|
|
|
.password-requirements ul {
|
|
list-style-type: disc;
|
|
padding-left: 20px;
|
|
margin: 0;
|
|
}
|
|
|
|
.password-requirements li {
|
|
margin-bottom: 5px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
.form-group--loading .form__input,
|
|
.form-group--loading .form-control {
|
|
border-image-slice: 1;
|
|
animation: loading-frame 1s infinite;
|
|
}
|
|
.form-group--error {
|
|
border-color: #f79483;
|
|
animation-name: shakeError;
|
|
animation-fill-mode: forwards;
|
|
animation-duration: 0.6s;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
.error {
|
|
color: #f04124;
|
|
}
|
|
</style>
|