ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-12 23:35:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Login Form updated to use ShowPassword component.

Browse Source
This commit is contained in:
Brandon Tripp 2021-04-05 11:54:28 -06:00
parent 60a6ac3c5b
commit 0e763c0ac3
1 changed files with 5 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
webapp/components/LoginForm/LoginForm.vue
View File

@ -31,11 +31,7 @@
ref="password" ref="password"
:type="showPassword ? 'text' : 'password'" :type="showPassword ? 'text' : 'password'"
/> />
<span class="click-wrapper" @click="toggleShowPassword"> <show-password @show-password="toggleShowPassword" :iconName='iconName' />
<span class="icon-wrapper" :data-test="iconName">
<base-icon class="toggle-icon" :name="iconName" />
</span>
</span>
</div> </div>
<nuxt-link to="/password-reset/request"> <nuxt-link to="/password-reset/request">
{{ $t('login.forgotPassword') }} {{ $t('login.forgotPassword') }}
@ -59,10 +55,12 @@
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch' import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
import links from '~/constants/links.js' import links from '~/constants/links.js'
import metadata from '~/constants/metadata.js' import metadata from '~/constants/metadata.js'
import ShowPassword from '../ShowPassword/ShowPassword.vue'
export default { export default {
components: { components: {
LocaleSwitch, LocaleSwitch,
ShowPassword
}, },
data() { data() {
return { return {
@ -98,9 +96,8 @@ export default {
} }
} }
}, },
toggleShowPassword(event) { toggleShowPassword() {
this.showPassword = !this.showPassword this.showPassword = !this.showPassword
event.preventDefault()
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.password.$el.children[1].children[1].focus() this.$refs.password.$el.children[1].children[1].focus()
this.$emit('focus') this.$emit('focus')
@ -114,7 +111,7 @@ export default {
.login-form { .login-form {
width: 80vw; width: 80vw;
max-width: 620px; max-width: 620px;
margin: auto; /* margin: auto; */
.base-button { .base-button {
display: block; display: block;
@ -145,28 +142,6 @@ export default {
outline: none; outline: none;
transition: all $duration-short $ease-out; transition: all $duration-short $ease-out;
.icon-wrapper {
margin-right: 2px;
}
.click-wrapper {
padding: 8px;
align-content: center;
color: $text-color-disabled;
cursor: pointer;
}
.click-wrapper:hover {
&:focus-within {
background-color: $background-color-base;
border: $input-border-size solid $border-color-active;
.toggle-icon {
color: $text-color-base;
}
}
}
&:focus-within { &:focus-within {
background-color: $background-color-base; background-color: $background-color-base;
border: $input-border-size solid $border-color-active; border: $input-border-size solid $border-color-active;