JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: password strength check added to change password popup

Browse Source 
Change-Id: Ibea92b34ab52547caacdcff8a71e8b2042226134
This commit is contained in:
VitaliiShpital 2019-12-26 15:46:33 +02:00 committed by Vitalii Shpital
parent f9b2af934b
commit 19d318ea9d
3 changed files with 39 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
web/satellite/src/components/account/ChangePasswordPopup.vue
View File

@ -19,18 +19,26 @@
:error="oldPasswordError"
@setData="setOldPassword"
/>
<div class="password-input">
<HeaderlessInput
class="full-input"
label="New Password"
placeholder ="Enter New Password"
width="100%"
ref="newPasswordInput"
is-password="true"
:error="newPasswordError"
@setData="setNewPassword"
@showPasswordStrength="showPasswordStrength"
@hidePasswordStrength="hidePasswordStrength"
/>
<PasswordStrength
:password-string="newPassword"
:is-shown="isPasswordStrengthShown"
/>
</div>
<HeaderlessInput
class="full-input mt"
label="New Password"
placeholder ="Enter New Password"
width="100%"
ref="newPasswordInput"
is-password="true"
:error="newPasswordError"
@setData="setNewPassword"
/>
<HeaderlessInput
class="full-input mt"
class="full-input"
label="Confirm Password"
placeholder="Confirm Password"
width="100%"
@ -66,13 +74,14 @@
import { Component, Vue } from 'vue-property-decorator';
import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
import PasswordStrength from '@/components/common/PasswordStrength.vue';
import VButton from '@/components/common/VButton.vue';
import ChangePasswordIcon from '@/../static/images/account/changePasswordPopup/changePassword.svg';
import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
import { AuthHttpApi } from '@/api/auth';
import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { validatePassword } from '@/utils/validation';
@Component({
@ -81,6 +90,7 @@ import { validatePassword } from '@/utils/validation';
CloseCrossIcon,
HeaderlessInput,
VButton,
PasswordStrength,
},
})
export default class ChangePasswordPopup extends Vue {
@ -93,6 +103,16 @@ export default class ChangePasswordPopup extends Vue {
private readonly auth: AuthHttpApi = new AuthHttpApi();
public isPasswordStrengthShown: boolean = false;
public showPasswordStrength(): void {
this.isPasswordStrengthShown = true;
}
public hidePasswordStrength(): void {
this.isPasswordStrengthShown = false;
}
public setOldPassword(value: string): void {
this.oldPassword = value;
this.oldPasswordError = '';
@ -243,6 +263,11 @@ export default class ChangePasswordPopup extends Vue {
}
}
.password-input {
position: relative;
width: 100%;
}
@media screen and (max-width: 720px) {
.change-password-popup {

2
web/satellite/src/views/register/passwordStrength/PasswordStrength.vue → web/satellite/src/components/common/PasswordStrength.vue
View File

@ -179,7 +179,7 @@ export default class PasswordStrength extends Vue {
.password-strength-container {
position: absolute;
top: 95px;
top: 96px;
right: -3px;
padding: 25px 20px;
opacity: 0.97;

2
web/satellite/src/views/register/RegisterArea.vue
View File

@ -7,6 +7,7 @@
import { Component, Vue } from 'vue-property-decorator';
import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
import PasswordStrength from '@/components/common/PasswordStrength.vue';
import RegistrationSuccessPopup from '@/components/common/RegistrationSuccessPopup.vue';
import AuthIcon from '@/../static/images/AuthImage.svg';
@ -21,7 +22,6 @@ import { SegmentEvent } from '@/utils/constants/analyticsEventNames';
import { LOADING_CLASSES } from '@/utils/constants/classConstants';
import { LocalData } from '@/utils/localData';
import { validateEmail, validatePassword } from '@/utils/validation';
import PasswordStrength from '@/views/register/passwordStrength/PasswordStrength.vue';
@Component({
components: {