Skip to content

Adding validation and toggle icon in forgot password section. #3882

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 9 commits into from
Closed

Adding validation and toggle icon in forgot password section. #3882

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9f3d3d5
Adding validation and toggle icon in forgot password section.
mohitm15 Jan 27, 2020
990d524
Adding toggle icon action
mohitm15 Jan 28, 2020
baadb68
Fixing CI by correcting indentation
mohitm15 Jan 28, 2020
8fd0be1
Adding confirm password field.
mohitm15 Jan 30, 2020
47e0cff
Adding confirm password field and toggle action.
mohitm15 Jan 30, 2020
ca6b855
Adding confirm password field and toggle icon action.
mohitm15 Jan 30, 2020
21752bf
Adding validations only
mohitm15 Feb 19, 2020
d324b8d
Adding validations in Forget Password Section.
mohitm15 Feb 19, 2020
f54877f
Fixing travis build.
mohitm15 Feb 19, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion app/components/forms/reset-password-form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,19 @@ export default Component.extend(FormMixin, {
{
type : 'empty',
prompt : this.l10n.t('Please enter your new password')
},
{
type : 'minLength[8]',
prompt : this.l10n.t('Your password must have at least {ruleValue} characters')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add a field for confirmation of password .

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure!

}
]
},
repeatPassword: {
identifier : 'password_repeat',
rules : [
{
type : 'match[password]',
prompt : this.l10n.t('Passwords do not match')
}
]
}
Expand All @@ -42,6 +55,13 @@ export default Component.extend(FormMixin, {
},

actions: {
showNewPassword() {
this.toggleProperty('showNewPass');
},

showRepeatPassword() {
this.toggleProperty('showRepeatPass');
},
submit() {
this.onValid(() => {
let payload = {};
Expand Down Expand Up @@ -109,4 +129,4 @@ export default Component.extend(FormMixin, {
this.set('session.newUser', null);
}
}
});
});
43 changes: 41 additions & 2 deletions app/templates/components/forms/reset-password-form.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,46 @@
{{#if token}}
<div class="ui left icon input">
<i class="key icon"></i>
{{input type='password' name='password' placeholder=(t 'password') value=password}}
{{#if showNewPass}}
{{input type='text' name='password' placeholder=(t 'New Password') value=password}}
{{else}}
{{input type='password' name='password' placeholder=(t 'New Password') value=password}}
{{/if}}
<div class="ui small basic icon buttons">
<button type="button" class="ui button" {{action 'showNewPassword'}}>
{{#if showNewPass}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A lot of duplication in here. Please reduce it and make the code optimal

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Then there will be no space in between both the textfields, thats why repeated the else part

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ezgif com-video-to-gif (1)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is implemented similar to that in sign up part

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Goal is to improve the code as we move on. "It was implemented this way" doesn't really work

Remove duplication as much as possible

<i class="hide basic icon"></i>
{{else}}
<i class="unhide basic icon"></i>
{{/if}}
</button>
</div>
</div>
{{else}}
<div class="ui left icon input">
<i class="mail icon"></i>
{{input name='email' placeholder=(t 'Email ID') value=identification}}
</div>
{{/if}}
</div>
<div class="field">
{{#if token}}
<div class="ui left icon input">
<i class="key icon"></i>
{{#if showRepeatPass}}
{{input type='text' name='password_repeat' placeholder=(t 'Confirm Password') value=password_repeat}}
{{else}}
{{input type='password' name='password_repeat' placeholder=(t 'Confirm Password') value=password_repeat}}
{{/if}}
<div class="ui small basic icon buttons">
<button type="button" class="ui button" {{action 'showRepeatPassword'}}>
{{#if showRepeatPass}}
<i class="hide basic icon"></i>
{{else}}
<i class="unhide basic icon"></i>
{{/if}}
</button>
</div>
</div>
{{else}}
<div class="ui left icon input">
Expand All @@ -41,4 +80,4 @@
</div>
</form>
</div>
</div>
</div>