Skip to content

OD-746 [Feature] Added show password function #435

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.

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

Open
wants to merge 9 commits into
base: master
Choose a base branch
from

Conversation

skrupnyk
Copy link
Contributor

@skrupnyk skrupnyk commented Mar 15, 2022

@romanyosyfiv @inna-bieshulia

OD-746 https://weboo.atlassian.net/browse/OD-746

Description

  • A checkbox has been added in the component settings, which allows users to enable or disable this feature.
  • Added an eye icon, which, when clicked, changes the type of two inputs at the same time (password and password confirmation).

Screenshots/screencasts

www.awesomescreenshot.com/video/7898374?key=f9b553451702e462f73af9c397621638

Backward compatibility

This change is fully backward compatible.

Reviewers

@upplabs-alex-levchenko

css/form.css Outdated
@@ -7,6 +7,13 @@
opacity: 0.65;
}

.fa-eye, .fa-eye-slash {
Copy link
Contributor

Choose a reason for hiding this comment

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

Please limit this to the widget instance context.

Suggested change
.fa-eye, .fa-eye-slash {
.fl-form .fa-eye, .fl-form .fa-eye-slash {

type="password"
class="form-control focus-outline"
:type="isShowPassword ? 'text' : 'password'"
class="form-control focus-outline input-password"
Copy link
Contributor

Choose a reason for hiding this comment

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

What is the purpose of the input-password class name?

Suggested change
class="form-control focus-outline input-password"
class="form-control focus-outline"

<label for="confirm-yes">
<span class="check"><i class="fa fa-circle"></i></span> <strong>Yes</strong> - Add a password confirmation field
<span class="check"><i class="fa fa-circle"></i></span> <strong :class="{'text-muted': canShowPassword}">Yes</strong> - Add a password confirmation field
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
<span class="check"><i class="fa fa-circle"></i></span> <strong :class="{'text-muted': canShowPassword}">Yes</strong> - Add a password confirmation field
<span class="check"><i class="fa fa-circle"></i></span> <strong :class="{ 'text-muted': canShowPassword }">Yes</strong> - Add a password confirmation field

<input type="checkbox" :name="name" v-model="canShowPassword" id="password-show-checkbox" :disabled="confirm">
<label for="password-show-checkbox">
<span class="check"><i class="fa fa-check"></i></span>
<span class="hide-field" :class="{'text-muted': confirm}">Yes, please.</span>
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
<span class="hide-field" :class="{'text-muted': confirm}">Yes, please.</span>
<span class="hide-field" :class="{ 'text-muted': confirm }">Yes, please.</span>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants