mirror of
https://github.com/IT4Change/gradido.git
synced 2026-03-01 12:44:43 +00:00
Merge pull request #160 from gradido/30-Password-policies-not-aligned
fix register
This commit is contained in:
Alexander Friedland
GitHub
commit
5c1415401d
2
.github/workflows/test.yml
vendored
2
.github/workflows/test.yml
vendored
@ -159,7 +159,7 @@ jobs:
|
||||
with:
|
||||
type: lcov
|
||||
result_path: ./coverage/lcov.info
|
||||
min_coverage: 10
|
||||
min_coverage: 11
|
||||
token: ${{ github.token }}
|
||||
|
||||
#test:
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
"sender":"Absender",
|
||||
"firstname":"Vorname",
|
||||
"lastname":"Nachname",
|
||||
"email":"eMail",
|
||||
"email":"E-Mail",
|
||||
"email_repeat":"eMail wiederholen",
|
||||
"password":"Passwort",
|
||||
"password_repeat":"Passwort wiederholen",
|
||||
@ -59,9 +59,12 @@
|
||||
"signup": {
|
||||
"title": "Erstelle dein Gradido-Konto",
|
||||
"subtitle": "Werde Teil der Gemeinschaft!",
|
||||
"strength":"Passwortsicherheit:",
|
||||
"strong":"stark",
|
||||
"agree":"habe ich gelesen und verstanden und stimme diesen zu."
|
||||
"agree":"Ich stimme der <a href='https://gradido.net/de/datenschutz/' target='_blank' >Datenschutzerklärung</a> zu.",
|
||||
"lowercase":"Ein Kleinbuchstabe erforderlich.",
|
||||
"uppercase":"Ein Großbuchstabe erforderlich.",
|
||||
"minimum":"Mindestens 8 Zeichen.",
|
||||
"one_number":"Eine Zahl erforderlich.",
|
||||
"dont_match":"Die Passwörter stimmen nicht überein."
|
||||
},
|
||||
"password": {
|
||||
"title": "Passwort zurücksetzen",
|
||||
|
||||
@ -59,9 +59,12 @@
|
||||
"signup": {
|
||||
"title": "Create your Gradido account",
|
||||
"subtitle": "Become a part of the community!",
|
||||
"strength":"Password strength:",
|
||||
"strong":"strong",
|
||||
"agree":"I have read and understood and agree to them"
|
||||
"agree":"I agree to the <a href='https://gradido.net/en/datenschutz/' target='_blank' > privacy policy</a>.",
|
||||
"lowercase":"One lowercase letter required.",
|
||||
"uppercase":"One uppercase letter required.",
|
||||
"minimum":"8 characters minimum.",
|
||||
"one_number":"One number required.",
|
||||
"dont_match":"Passwords don't match."
|
||||
},
|
||||
"password": {
|
||||
"title": "Reset password",
|
||||
|
||||
107
frontend/src/views/Pages/Register.spec.js
Normal file
107
frontend/src/views/Pages/Register.spec.js
Normal file
@ -0,0 +1,107 @@
|
||||
import { mount, RouterLinkStub } from '@vue/test-utils'
|
||||
import Vuex from 'vuex'
|
||||
import flushPromises from 'flush-promises'
|
||||
|
||||
import Register from './Register'
|
||||
|
||||
const localVue = global.localVue
|
||||
|
||||
describe('Register', () => {
|
||||
let wrapper
|
||||
|
||||
let mocks = {
|
||||
$i18n: {
|
||||
locale: 'en',
|
||||
},
|
||||
$t: jest.fn((t) => t),
|
||||
}
|
||||
|
||||
let state = {
|
||||
// loginfail: false,
|
||||
}
|
||||
|
||||
let store = new Vuex.Store({
|
||||
state,
|
||||
})
|
||||
|
||||
let stubs = {
|
||||
RouterLink: RouterLinkStub,
|
||||
}
|
||||
|
||||
const Wrapper = () => {
|
||||
return mount(Register, { localVue, mocks, store, stubs })
|
||||
}
|
||||
|
||||
describe('mount', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
|
||||
it('renders the Register form', () => {
|
||||
expect(wrapper.find('div.register-form').exists()).toBeTruthy()
|
||||
})
|
||||
|
||||
describe('Register header', () => {
|
||||
it('has a welcome message', () => {
|
||||
expect(wrapper.find('div.header').text()).toBe('site.signup.title site.signup.subtitle')
|
||||
})
|
||||
})
|
||||
|
||||
describe('links', () => {
|
||||
it('has a link "Back"', () => {
|
||||
expect(wrapper.findAllComponents(RouterLinkStub).at(0).text()).toEqual('back')
|
||||
})
|
||||
|
||||
it('links to /login when clicking "Back"', () => {
|
||||
expect(wrapper.findAllComponents(RouterLinkStub).at(0).props().to).toBe('/login')
|
||||
})
|
||||
})
|
||||
|
||||
describe('Register form', () => {
|
||||
it('has a register form', () => {
|
||||
expect(wrapper.find('form').exists()).toBeTruthy()
|
||||
})
|
||||
|
||||
it('has 3 text input fields', () => {
|
||||
expect(wrapper.findAll('input[type="text"]').length).toBe(3)
|
||||
})
|
||||
|
||||
it('has 2 password input fields', () => {
|
||||
expect(wrapper.findAll('input[type="password"]').length).toBe(2)
|
||||
})
|
||||
|
||||
it('has 1 checkbox input fields', () => {
|
||||
expect(wrapper.findAll('input[type="checkbox"]').length).toBe(1)
|
||||
})
|
||||
|
||||
it('has no submit button when not completely filled', () => {
|
||||
expect(wrapper.find('button[type="submit"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('shows a warning when no valid Email is entered', async () => {
|
||||
wrapper.findAll('input[type="text"]').at(2).setValue('no_valid@Email')
|
||||
await flushPromises()
|
||||
await expect(wrapper.find('.invalid-feedback').text()).toEqual(
|
||||
'The Email field must be a valid email',
|
||||
)
|
||||
})
|
||||
|
||||
it('shows 4 warnings when no password is set', async () => {
|
||||
const passwords = wrapper.findAll('input[type="password"]')
|
||||
passwords.at(0).setValue('')
|
||||
passwords.at(1).setValue('')
|
||||
await flushPromises()
|
||||
await expect(wrapper.find('div.hints').text()).toContain(
|
||||
'site.signup.lowercase',
|
||||
'site.signup.uppercase',
|
||||
'site.signup.minimum',
|
||||
'site.signup.one_number',
|
||||
)
|
||||
})
|
||||
|
||||
// TODO test different invalid password combinations
|
||||
})
|
||||
|
||||
// TODO test submit button
|
||||
})
|
||||
})
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="register-form">
|
||||
<!-- Header -->
|
||||
<div class="header p-4">
|
||||
<b-container class="container">
|
||||
@ -26,52 +26,81 @@
|
||||
<validation-observer v-slot="{ handleSubmit }" ref="formValidator">
|
||||
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
|
||||
<base-input
|
||||
:label="$t('form.firstname')"
|
||||
alternative
|
||||
class="mb-3"
|
||||
prepend-icon="ni ni-hat-3"
|
||||
:placeholder="$t('form.firstname')"
|
||||
name="Vorname"
|
||||
:rules="{ required: true }"
|
||||
name="firstname"
|
||||
:rules="{ required: true, min: 3 }"
|
||||
v-model="model.firstname"
|
||||
></base-input>
|
||||
<base-input
|
||||
:label="$t('form.lastname')"
|
||||
alternative
|
||||
class="mb-3"
|
||||
prepend-icon="ni ni-hat-3"
|
||||
:placeholder="$t('form.lastname')"
|
||||
name="Nachname"
|
||||
:rules="{ required: true }"
|
||||
name="lastname"
|
||||
:rules="{ required: true, min: 2 }"
|
||||
v-model="model.lastname"
|
||||
></base-input>
|
||||
|
||||
<base-input
|
||||
:label="$t('form.email')"
|
||||
alternative
|
||||
class="mb-3"
|
||||
prepend-icon="ni ni-email-83"
|
||||
:placeholder="$t('form.email')"
|
||||
name="Email"
|
||||
:rules="{ required: true, email: true }"
|
||||
v-model="model.email"
|
||||
></base-input>
|
||||
|
||||
<hr />
|
||||
<b-form-group :label="$t('form.password')">
|
||||
<b-input-group>
|
||||
<b-form-input
|
||||
class="mb-0"
|
||||
v-model="password"
|
||||
name="password"
|
||||
:class="{ valid: passwordValidation.valid }"
|
||||
:type="passwordVisible ? 'text' : 'password'"
|
||||
prepend-icon="ni ni-lock-circle-open"
|
||||
:placeholder="$t('form.password')"
|
||||
></b-form-input>
|
||||
|
||||
<b-input-group-append>
|
||||
<b-button variant="outline-primary">
|
||||
<b-icon
|
||||
:icon="passwordVisible ? 'eye' : 'eye-slash'"
|
||||
@click="togglePasswordVisibility"
|
||||
/>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-form-group>
|
||||
|
||||
<base-input
|
||||
alternative
|
||||
class="mb-3"
|
||||
prepend-icon="ni ni-lock-circle-open"
|
||||
:placeholder="$t('form.password')"
|
||||
:label="$t('form.password_repeat')"
|
||||
type="password"
|
||||
name="Password"
|
||||
:rules="{ required: true, min: 6 }"
|
||||
v-model="model.password"
|
||||
></base-input>
|
||||
<div class="text-muted font-italic">
|
||||
<small>
|
||||
{{ $t('site.signup.strength') }}
|
||||
<span class="text-success font-weight-700">
|
||||
{{ $t('site.signup.strong') }}
|
||||
</span>
|
||||
</small>
|
||||
</div>
|
||||
name="password-repeat"
|
||||
:placeholder="$t('form.password_repeat')"
|
||||
prepend-icon="ni ni-lock-circle-open"
|
||||
v-model.lazy="checkPassword"
|
||||
:class="{ valid: passwordValidation.valid }"
|
||||
/>
|
||||
|
||||
<transition name="hint" appear>
|
||||
<div v-if="passwordValidation.errors.length > 0 && !submitted" class="hints">
|
||||
<ul>
|
||||
<li v-for="error in passwordValidation.errors" :key="error">
|
||||
<small>{{ error }}</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="matches" v-else-if="!samePasswords">
|
||||
<p>
|
||||
{{ $t('site.signup.dont_match') }}
|
||||
<i class="ni ni-active-40" color="danger"></i>
|
||||
</p>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<b-row class="my-4">
|
||||
<b-col cols="12">
|
||||
<base-input
|
||||
@ -79,17 +108,22 @@
|
||||
name="Privacy Policy"
|
||||
>
|
||||
<b-form-checkbox v-model="model.agree">
|
||||
<span class="text-muted">
|
||||
<a href="https://gradido.net/de/datenschutz/" target="_blank">
|
||||
{{ $t('privacy_policy') }}
|
||||
</a>
|
||||
- {{ $t('site.signup.agree') }}
|
||||
</span>
|
||||
<span class="text-muted" v-html="$t('site.signup.agree')"></span>
|
||||
</b-form-checkbox>
|
||||
</base-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="text-center"
|
||||
v-if="
|
||||
passwordsFilled &&
|
||||
samePasswords &&
|
||||
passwordValidation.valid &&
|
||||
namesFilled &&
|
||||
emailFilled &&
|
||||
model.agree
|
||||
"
|
||||
>
|
||||
<b-button type="submit" variant="secondary" class="mt-4">
|
||||
{{ $t('signup') }}
|
||||
</b-button>
|
||||
@ -101,7 +135,7 @@
|
||||
</b-col>
|
||||
</b-row>
|
||||
<div class="text-center py-lg-4">
|
||||
<router-link to="/Login" class="mt-3">{{ $t('back') }}</router-link>
|
||||
<router-link to="/login" class="mt-3">{{ $t('back') }}</router-link>
|
||||
</div>
|
||||
</b-container>
|
||||
</div>
|
||||
@ -115,15 +149,25 @@ export default {
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password2: '',
|
||||
agree: false,
|
||||
},
|
||||
rules: [
|
||||
{ message: this.$t('site.signup.lowercase'), regex: /[a-z]+/ },
|
||||
{ message: this.$t('site.signup.uppercase'), regex: /[A-Z]+/ },
|
||||
{ message: this.$t('site.signup.minimum'), regex: /.{8,}/ },
|
||||
{ message: this.$t('site.signup.one_number'), regex: /[0-9]+/ },
|
||||
],
|
||||
password: '',
|
||||
checkPassword: '',
|
||||
passwordVisible: false,
|
||||
submitted: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
togglePasswordVisibility() {
|
||||
this.passwordVisible = !this.passwordVisible
|
||||
},
|
||||
onSubmit() {
|
||||
// console.log("this.modals =>", this.modals)
|
||||
this.$store.dispatch('createUser', {
|
||||
email: this.model.email,
|
||||
first_name: this.model.firstname,
|
||||
@ -138,6 +182,37 @@ export default {
|
||||
this.$router.push('/thx')
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
samePasswords() {
|
||||
return this.password === this.checkPassword
|
||||
},
|
||||
passwordsFilled() {
|
||||
return this.password !== '' && this.checkPassword !== ''
|
||||
},
|
||||
namesFilled() {
|
||||
return (
|
||||
this.model.firstname !== '' &&
|
||||
this.model.firstname.length > 2 &&
|
||||
this.model.lastname !== '' &&
|
||||
this.model.lastname.length > 1
|
||||
)
|
||||
},
|
||||
emailFilled() {
|
||||
return this.model.email !== ''
|
||||
},
|
||||
passwordValidation() {
|
||||
let errors = []
|
||||
for (let condition of this.rules) {
|
||||
if (!condition.regex.test(this.password)) {
|
||||
errors.push(condition.message)
|
||||
}
|
||||
}
|
||||
if (errors.length === 0) {
|
||||
return { valid: true, errors }
|
||||
}
|
||||
return { valid: false, errors }
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user