diff --git a/frontend/views/containers/access/PasswordForm.vue b/frontend/views/containers/access/PasswordForm.vue index 6dd8efffb6..52e90f69ba 100644 --- a/frontend/views/containers/access/PasswordForm.vue +++ b/frontend/views/containers/access/PasswordForm.vue @@ -74,8 +74,8 @@ export default ({ diff --git a/frontend/views/containers/access/SignupForm.vue b/frontend/views/containers/access/SignupForm.vue index 47521f17ff..3344f0f52d 100644 --- a/frontend/views/containers/access/SignupForm.vue +++ b/frontend/views/containers/access/SignupForm.vue @@ -31,6 +31,18 @@ form(data-test='signup' @submit.prevent='') password-form(:label='L("Confirm Password")' name='passwordConfirm' :$v='$v') + label.checkbox + input.input( + type='checkbox' + name='terms' + v-model='form.terms' + data-test='signTerms' + @click.stop='' + ) + i18n( + :args='{ a_: ``, _a: ""}' + ) I agree to the {a_}terms and conditions{_a} + banner-scoped(ref='formMsg' allow-a) .buttons.is-centered @@ -63,6 +75,7 @@ import { noUppercase, noWhitespace } from '@model/contracts/shared/validators.js' +import ALLOWED_URLS from '@view-utils/allowedUrls.js' // Returns a function that returns the function's argument const wrapValueInFunction = (v) => () => v @@ -107,11 +120,13 @@ export default ({ return { form: { username: '', + email: '', password: '', passwordConfirm: '', - email: '', + terms: false, pictureBase64: '' }, + linkToTerms: ALLOWED_URLS.TERMS_PAGE, usernameAsyncValidation: { timer: null, resolveFn: null @@ -186,6 +201,11 @@ export default ({ email: { [L('An email is required.')]: required, [L('Please enter a valid email.')]: email + }, + terms: { + [L('You need to agree to the terms and conditions.')]: (value) => { + return Boolean(value) + } } } } @@ -207,5 +227,9 @@ export default ({ align-items: flex-start; gap: 1.5rem; } + + @include phone { + margin-bottom: 1.5rem; + } } diff --git a/frontend/views/utils/allowedUrls.js b/frontend/views/utils/allowedUrls.js index 849d6f9dab..183bd4996a 100644 --- a/frontend/views/utils/allowedUrls.js +++ b/frontend/views/utils/allowedUrls.js @@ -14,6 +14,7 @@ const ALLOWED_URLS: Object = Object.freeze(Object.fromEntries([ ['DONATE_PAGE', 'https://groupincome.org/donate'], ['FAQ_PAGE', 'https://groupincome.org/faq'], ['COMMUNITY_PAGE', 'https://groupincome.org/community'], + ['TERMS_PAGE', 'https://groupincome.org/terms-and-conditions'], ['WIKIPEDIA_DUNBARS_NUMBER', "https://en.wikipedia.org/wiki/Dunbar's_number"] ])) diff --git a/test/cypress/integration/signup-and-login.spec.js b/test/cypress/integration/signup-and-login.spec.js index 33be3df570..ecf8b649a5 100644 --- a/test/cypress/integration/signup-and-login.spec.js +++ b/test/cypress/integration/signup-and-login.spec.js @@ -56,7 +56,7 @@ describe('Signup, Profile and Login', () => { cy.giLogout() }) - it('sign up button remains disabled if passwords are not the same', () => { + it('sign up button remains disabled if passwords are not the same or terms are not agreed', () => { const user2 = `user2-${userId}` const password = '123456789' const wrongPassword = 'wRoNgPaSsWoRd123' @@ -67,9 +67,14 @@ describe('Signup, Profile and Login', () => { cy.getByDT('signEmail').type(`${user2}@email.com`) cy.getByDT('password').type(password) cy.getByDT('passwordConfirm').type(wrongPassword) + cy.getByDT('signTerms').check({ force: true }).should('be.checked') cy.getByDT('signSubmit').should('be.disabled') cy.getByDT('passwordConfirm').clear().type(password) + cy.getByDT('signTerms').uncheck({ force: true }).should('not.be.checked') + cy.getByDT('signSubmit').should('be.disabled') + + cy.getByDT('signTerms').check({ force: true }).should('be.checked') cy.getByDT('signSubmit').should('not.be.disabled') cy.closeModal() diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js index dc3b459556..befe4c9467 100644 --- a/test/cypress/support/commands.js +++ b/test/cypress/support/commands.js @@ -178,6 +178,7 @@ Cypress.Commands.add('giSignup', (username, { cy.getByDT('signEmail').clear().type(email) cy.getByDT('password').type(password) cy.getByDT('passwordConfirm').type(password) + cy.getByDT('signTerms').check({ force: true }).should('be.checked') cy.getByDT('signSubmit').click() cy.getByDT('closeModal').should('not.exist')