From 1da9d430a51de78f88793b1f017d135649a43441 Mon Sep 17 00:00:00 2001 From: ogerly Date: Sat, 10 Apr 2021 17:51:19 +0200 Subject: [PATCH 1/3] fix register --- frontend/src/locales/de.json | 11 +- frontend/src/locales/en.json | 9 +- frontend/src/views/Pages/Register.vue | 159 ++++++++++++++++++++------ 3 files changed, 136 insertions(+), 43 deletions(-) diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json index 3b9d2e217..8f6975889 100644 --- a/frontend/src/locales/de.json +++ b/frontend/src/locales/de.json @@ -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 Datenschutzerklärung 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", diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json index d05a9e0d5..849873cae 100644 --- a/frontend/src/locales/en.json +++ b/frontend/src/locales/en.json @@ -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 privacy policy.", + "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", diff --git a/frontend/src/views/Pages/Register.vue b/frontend/src/views/Pages/Register.vue index d207404d2..addafca1d 100755 --- a/frontend/src/views/Pages/Register.vue +++ b/frontend/src/views/Pages/Register.vue @@ -26,52 +26,79 @@ +
+ + + + + + + + + + + + -
- - {{ $t('site.signup.strength') }} - - {{ $t('site.signup.strong') }} - - -
+ :placeholder="$t('form.password_repeat')" + prepend-icon="ni ni-lock-circle-open" + v-model.lazy="checkPassword" + :class="{ valid: passwordValidation.valid }" + /> + + +
+
    +
  • + {{ error }} +
    • +
+
+
+

+ {{ $t('site.signup.dont_match') }} + +

+
+ + - - - {{ $t('privacy_policy') }} - - - {{ $t('site.signup.agree') }} - + -
+
{{ $t('signup') }} @@ -115,13 +147,32 @@ 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: { + resetPasswords() { + this.password = '' + this.checkPassword = '' + this.submitted = true + setTimeout(() => { + this.submitted = false + }, 2000) + }, + togglePasswordVisibility() { + this.passwordVisible = !this.passwordVisible + }, onSubmit() { // console.log("this.modals =>", this.modals) this.$store.dispatch('createUser', { @@ -138,6 +189,42 @@ export default { this.$router.push('/thx') }, }, + computed: { + notSamePasswords() { + if (this.passwordsFilled) { + return this.password !== this.checkPassword + } else { + return false + } + }, + 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 } + } else { + return { valid: false, errors } + } + }, + }, } From c28910994eeeba1d96d3dc405553455cf031587f Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 14 Apr 2021 23:39:44 +0200 Subject: [PATCH 2/3] implemented @Mogge 's idea to shorten code --- frontend/src/views/Pages/Register.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/views/Pages/Register.vue b/frontend/src/views/Pages/Register.vue index addafca1d..f5b3e817d 100755 --- a/frontend/src/views/Pages/Register.vue +++ b/frontend/src/views/Pages/Register.vue @@ -220,9 +220,8 @@ export default { } if (errors.length === 0) { return { valid: true, errors } - } else { - return { valid: false, errors } } + return { valid: false, errors } }, }, } From e1e92c6ea86af9cd0f2572eb9d1d97c374834f60 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Thu, 15 Apr 2021 01:22:31 +0200 Subject: [PATCH 3/3] Pages Register.vue Tests Increase coverage requirement to 11% --- .github/workflows/test.yml | 2 +- frontend/src/views/Pages/Register.spec.js | 107 ++++++++++++++++++++++ frontend/src/views/Pages/Register.vue | 29 ++---- 3 files changed, 117 insertions(+), 21 deletions(-) create mode 100644 frontend/src/views/Pages/Register.spec.js diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 78d381820..e43fd92ee 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -159,7 +159,7 @@ jobs: with: type: lcov result_path: ./coverage/lcov.info - min_coverage: 10 + min_coverage: 11 token: ${{ github.token }} #test: diff --git a/frontend/src/views/Pages/Register.spec.js b/frontend/src/views/Pages/Register.spec.js new file mode 100644 index 000000000..e9d09a242 --- /dev/null +++ b/frontend/src/views/Pages/Register.spec.js @@ -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 + }) +}) diff --git a/frontend/src/views/Pages/Register.vue b/frontend/src/views/Pages/Register.vue index f5b3e817d..b651d8144 100755 --- a/frontend/src/views/Pages/Register.vue +++ b/frontend/src/views/Pages/Register.vue @@ -1,5 +1,5 @@