mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
Merge branch 'master' of https://github.com/Ocelot-Social-Community/Ocelot-Social into 4432-fix-header-logo-rebrand-replacement
# Conflicts: # webapp/components/LoginForm/LoginForm.vue
This commit is contained in:
Wolfgang Huß
commit
7da8cef5ab
@ -31,11 +31,7 @@
|
||||
ref="password"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
/>
|
||||
<span class="click-wrapper" @click="toggleShowPassword">
|
||||
<span class="icon-wrapper" :data-test="iconName">
|
||||
<base-icon class="toggle-icon" :name="iconName" />
|
||||
</span>
|
||||
</span>
|
||||
<show-password @show-password="toggleShowPassword" :iconName="iconName" />
|
||||
</div>
|
||||
<nuxt-link to="/password-reset/request">
|
||||
{{ $t('login.forgotPassword') }}
|
||||
@ -60,11 +56,13 @@ import links from '~/constants/links.js'
|
||||
import metadata from '~/constants/metadata.js'
|
||||
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
|
||||
import Logo from '~/components/Logo/Logo'
|
||||
import ShowPassword from '../ShowPassword/ShowPassword.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LocaleSwitch,
|
||||
Logo,
|
||||
ShowPassword,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -100,9 +98,8 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
toggleShowPassword(event) {
|
||||
toggleShowPassword() {
|
||||
this.showPassword = !this.showPassword
|
||||
event.preventDefault()
|
||||
this.$nextTick(() => {
|
||||
this.$refs.password.$el.children[1].children[1].focus()
|
||||
this.$emit('focus')
|
||||
@ -116,7 +113,7 @@ export default {
|
||||
.login-form {
|
||||
width: 80vw;
|
||||
max-width: 620px;
|
||||
margin: auto;
|
||||
/* margin: auto; */
|
||||
|
||||
.base-button {
|
||||
display: block;
|
||||
@ -144,28 +141,6 @@ export default {
|
||||
outline: none;
|
||||
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 {
|
||||
background-color: $background-color-base;
|
||||
border: $input-border-size solid $border-color-active;
|
||||
|
||||
@ -40,24 +40,43 @@
|
||||
:label="$t('settings.data.labelName')"
|
||||
:placeholder="$t('settings.data.namePlaceholder')"
|
||||
/>
|
||||
<ds-input
|
||||
id="password"
|
||||
model="password"
|
||||
type="password"
|
||||
autocomplete="off"
|
||||
:label="$t('settings.security.change-password.label-new-password')"
|
||||
/>
|
||||
<ds-input
|
||||
id="passwordConfirmation"
|
||||
model="passwordConfirmation"
|
||||
type="password"
|
||||
autocomplete="off"
|
||||
:label="$t('settings.security.change-password.label-new-password-confirm')"
|
||||
/>
|
||||
<label for="password">
|
||||
{{ $t('settings.security.change-password.label-new-password') }}
|
||||
</label>
|
||||
<div class="password-wrapper">
|
||||
<ds-input
|
||||
id="password"
|
||||
model="password"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
autocomplete="off"
|
||||
class="password-field"
|
||||
ref="password"
|
||||
/>
|
||||
<show-password
|
||||
@show-password="toggleShowPassword('password')"
|
||||
:iconName="iconNamePassword"
|
||||
/>
|
||||
</div>
|
||||
<label for="passwordConfirmation">
|
||||
{{ $t('settings.security.change-password.label-new-password-confirm') }}
|
||||
</label>
|
||||
<div class="password-wrapper">
|
||||
<ds-input
|
||||
id="passwordConfirmation"
|
||||
model="passwordConfirmation"
|
||||
:type="showPasswordConfirm ? 'text' : 'password'"
|
||||
autocomplete="off"
|
||||
class="password-field"
|
||||
ref="confirmPassword"
|
||||
/>
|
||||
<show-password
|
||||
@show-password="toggleShowPassword('confirmPassword')"
|
||||
:iconName="iconNamePasswordConfirm"
|
||||
/>
|
||||
</div>
|
||||
<password-strength class="password-strength" :password="formData.password" />
|
||||
|
||||
<email-display-and-verify :email="sliderData.collectedInputData.email" />
|
||||
|
||||
<ds-text>
|
||||
<input
|
||||
id="checkbox0"
|
||||
@ -106,6 +125,7 @@ import EmailDisplayAndVerify from './EmailDisplayAndVerify'
|
||||
import { SweetalertIcon } from 'vue-sweetalert-icons'
|
||||
import PasswordForm from '~/components/utils/PasswordFormHelper'
|
||||
import { SignupVerificationMutation } from '~/graphql/Registration.js'
|
||||
import ShowPassword from '../ShowPassword/ShowPassword.vue'
|
||||
|
||||
export default {
|
||||
name: 'RegistrationSlideCreate',
|
||||
@ -113,6 +133,7 @@ export default {
|
||||
PasswordStrength,
|
||||
EmailDisplayAndVerify,
|
||||
SweetalertIcon,
|
||||
ShowPassword,
|
||||
},
|
||||
props: {
|
||||
sliderData: { type: Object, required: true },
|
||||
@ -140,6 +161,8 @@ export default {
|
||||
// have checkmarks available.
|
||||
termsAndConditionsConfirmed: false,
|
||||
recieveCommunicationAsEmailsEtcConfirmed: false,
|
||||
showPassword: false,
|
||||
showPasswordConfirm: false,
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
@ -180,6 +203,12 @@ export default {
|
||||
this.recieveCommunicationAsEmailsEtcConfirmed
|
||||
)
|
||||
},
|
||||
iconNamePassword() {
|
||||
return this.showPassword ? 'eye-slash' : 'eye'
|
||||
},
|
||||
iconNamePasswordConfirm() {
|
||||
return this.showPasswordConfirm ? 'eye-slash' : 'eye'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
termsAndConditionsConfirmed() {
|
||||
@ -251,6 +280,21 @@ export default {
|
||||
this.submit()
|
||||
return true
|
||||
},
|
||||
toggleShowPassword(e) {
|
||||
if (e === 'password') {
|
||||
this.showPassword = !this.showPassword
|
||||
this.$nextTick(() => {
|
||||
this.$refs.password.$el.children[1].children[0].focus()
|
||||
this.$emit('focus')
|
||||
})
|
||||
} else {
|
||||
this.showPasswordConfirm = !this.showPasswordConfirm
|
||||
this.$nextTick(() => {
|
||||
this.$refs.confirmPassword.$el.children[1].children[0].focus()
|
||||
this.$emit('focus')
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -259,4 +303,44 @@ export default {
|
||||
.password-strength {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.password-wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
padding: $input-padding-vertical $space-x-small;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
height: $input-height;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
color: $text-color-base;
|
||||
background: $background-color-disabled;
|
||||
|
||||
border: $input-border-size solid $border-color-softer;
|
||||
border-left: none;
|
||||
border-radius: $border-radius-base;
|
||||
outline: none;
|
||||
transition: all $duration-short $ease-out;
|
||||
|
||||
&:focus-within {
|
||||
background-color: $background-color-base;
|
||||
border: $input-border-size solid $border-color-active;
|
||||
|
||||
.toggle-icon {
|
||||
color: $text-color-base;
|
||||
}
|
||||
}
|
||||
|
||||
.password-field {
|
||||
position: relative;
|
||||
padding-top: 16px;
|
||||
border: none;
|
||||
border-style: none;
|
||||
appearance: none;
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
33
webapp/components/ShowPassword/ShowPassword.spec.js
Normal file
33
webapp/components/ShowPassword/ShowPassword.spec.js
Normal file
@ -0,0 +1,33 @@
|
||||
import Vue from 'vue'
|
||||
import { mount } from '@vue/test-utils'
|
||||
|
||||
import ShowPassword from './ShowPassword.vue'
|
||||
|
||||
describe('ShowPassword', () => {
|
||||
describe('State of show password icon', () => {
|
||||
const wrapper = mount(ShowPassword, {
|
||||
propsData: {
|
||||
iconName: 'eye',
|
||||
},
|
||||
})
|
||||
|
||||
it('Shows eye icon by default', () => {
|
||||
expect(wrapper.find('.icon-wrapper').attributes('data-test')).toEqual('eye')
|
||||
})
|
||||
|
||||
describe('After click', () => {
|
||||
it('Password wrapper emits show-password event', async () => {
|
||||
wrapper.find('.click-wrapper').trigger('click')
|
||||
await Vue.nextTick()
|
||||
expect(wrapper.emitted()).toBeTruthy()
|
||||
})
|
||||
|
||||
it('Shows the slash-eye icon after click', async () => {
|
||||
wrapper.find('.click-wrapper').trigger('click')
|
||||
wrapper.setProps({ iconName: 'eye-slash' })
|
||||
await Vue.nextTick()
|
||||
expect(wrapper.find('.icon-wrapper').attributes('data-test')).toEqual('eye-slash')
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
44
webapp/components/ShowPassword/ShowPassword.vue
Normal file
44
webapp/components/ShowPassword/ShowPassword.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<span class="click-wrapper" @click="togglePassword">
|
||||
<span class="icon-wrapper" :data-test="iconName">
|
||||
<base-icon class="toggle-icon" :name="iconName" />
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['iconName'],
|
||||
emits: ['toggle-password'],
|
||||
methods: {
|
||||
togglePassword(event) {
|
||||
event.preventDefault()
|
||||
this.$emit('show-password')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user