Add checkbox to SignUp form

frontend/views/containers/access/PasswordForm.vue

@@ -74,8 +74,8 @@ export default ({
 </script>
 
 <style lang="scss" scoped>
-  .icon {
-    cursor: pointer;
-    pointer-events: initial !important;
-  }
+.icon {
+  cursor: pointer;
+  pointer-events: initial !important;
+}
 </style>

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 class="link" target="_blank" href="${linkToTerms}">`, _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;
+  }
 }
 </style>

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"]
 ]))
 

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()

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')