Merge pull request #733 from Program-AR/termsConditions

Starting to work in terms and conditions.
Program-AR · Apr 14, 2021 · e2aa4a3 · e2aa4a3
2 parents 3c40df7 + 0e3bd65
commit e2aa4a3
Show file tree

Hide file tree

Showing 12 changed files with 145 additions and 31 deletions.
diff --git a/app/components/collapsable.js b/app/components/collapsable.js
@@ -0,0 +1,11 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  isExpanded: false,
+
+  actions: {
+    toggle: function() {
+      this.set('isExpanded', !this.get('isExpanded'));
+    }
+  }
+});
diff --git a/app/components/personal-survey.js b/app/components/personal-survey.js
@@ -21,7 +21,7 @@ export default Component.extend({
     },
     {
       id: 2,
-      title: "Edad y Género",
+      title: "Edad y género",
       logo: "imagenes/surveyLogoLita.png",
       pages: [{
         name: "ageAndGender", questions: [
@@ -32,7 +32,7 @@ export default Component.extend({
     },
     {
       id: 3,
-      title: "Escuela y Provincia",
+      title: "Escuela y provincia",
       logo: "imagenes/surveyLogoAlien.png",
       pages: [{
         name: "schoolAndProvince", questions: [
@@ -43,7 +43,7 @@ export default Component.extend({
     },
     {
       id: 4,
-      title: "Clase o Tarea",
+      title: "Clase o tarea",
       logo: "imagenes/surveyLogoHeroin.png",
       pages: [{
         name: "classOrHomework", questions: [
@@ -55,7 +55,7 @@ export default Component.extend({
     },
     {
       id: 5,
-      title: "Escuela y Compañía",
+      title: "Escuela y compañía",
       logo: "imagenes/surveyLogoCoty.png",
       pages: [{
         name: "schoolAndCompany", questions: [
@@ -77,7 +77,7 @@ export default Component.extend({
 
   //TODO: Param window for testing?
   showSurveyDialog(question) {
-    if (window.surveyWindow) return; // don't create other surveyWindow if it exists.
+    if (window.surveyWindow && window.surveyWindow.isShowing) return; // don't create other surveyWindow if it exists.
     Survey.StylesManager.applyTheme("winterstone")
     window.surveyWindow = new Survey.SurveyWindow(question)
     window.surveyWindow.isExpanded = true

diff --git a/app/components/terms-and-conditions-link.js b/app/components/terms-and-conditions-link.js
@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  classNames: ['terms-and-conditions-link']
+});
diff --git a/app/controllers/register.js b/app/controllers/register.js
@@ -5,22 +5,48 @@ import Controller from '@ember/controller';
 export default Controller.extend({
   avatardb: service(),
   pilasBloquesApi: service(),
-  registerData: {},
+  registerData: {email:''},
   validUsername: true,
-
-  avatars: computed('avatardb', function() {
+  
+  avatars: computed('avatardb', function () {
     return this.avatardb.allAvatars()
   }),
 
+  mailValidation:[{
+    message: 'Este no es un email válido',
+    validate: (mail) => {
+      // https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript
+      const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+      return re.test(mail) || mail == ''
+    }
+  }],
+
+  parentNameValidation:[{
+    message: 'Se requiere nombre y apellido',
+    validate: (parentName) => {
+      const re = /.+ .+/
+      return re.test(parentName)
+    }
+  }],
+
+  DNIValidation:[{
+    message: 'El DNI es invalido',
+    validate: (DNI) =>{
+      // any string with at least 6 numbers
+      const re = new RegExp('(\\D*\\d\\D*){6,}')
+      return re.test(DNI)
+    }
+  }],
+
   actions: {
     doRegister() {
       this.pilasBloquesApi.register(this.registerData)
-      .then(() => this.transitionToRoute("/"))
+        .then(() => this.transitionToRoute("/"))
     },
 
     checkUsername() {
       this.pilasBloquesApi.userExists(this.registerData.username)
         .then(exist => this.set("validUsername", !exist))
     },
-  }
+  },
 })
diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -467,6 +467,10 @@ a:hover {
   text-align: center;
 }
 
+.left {
+  text-align: left;
+}
+
 .aplicar-modo-lectura-simple,
 .aplicar-modo-lectura-simple button // esta regla es necesaria para evitar que la sobreescriba Bootstrap
 {

diff --git a/app/styles/link.scss b/app/styles/link.scss
@@ -1,4 +1,8 @@
 .link {
     color: #4ec2df;
     text-decoration: none;
-} 
+} 
+
+.terms-and-conditions-link {
+    display: inline;
+}
diff --git a/app/styles/session.scss b/app/styles/session.scss
@@ -35,4 +35,20 @@
 .register-form {
   max-width: 20rem;
   display: inline-block;
+}
+
+.register-form md-input-container {
+  width: 300px; // Makes the input labels readable
+}
+
+// TODO: Move to someplace component-specific
+.collapsable-title { 
+  color: var(--theme-font-color);
+  font-style: italic;
+  cursor: pointer;
+  margin-bottom: 18px;
+}
+
+.collapsable-title:hover {
+  background-color: var(--theme-background-color);
 }
diff --git a/app/templates/components/collapsable.hbs b/app/templates/components/collapsable.hbs
@@ -0,0 +1,11 @@
+<div class='collapsable-title' {{action 'toggle'}}>
+  {{title}}
+  {{#if isExpanded}}
+    {{paper-icon "keyboard_arrow_up"}}
+  {{else}}
+    {{paper-icon "keyboard_arrow_down"}}
+  {{/if}}
+</div>
+{{#if isExpanded}}
+  {{yield}}
+{{/if}}
diff --git a/app/templates/components/terms-and-conditions-link.hbs b/app/templates/components/terms-and-conditions-link.hbs
@@ -0,0 +1,3 @@
+<Link 
+  @openOnNewTab={{true}} 
+  @href={{"https://docs.google.com/document/d/e/2PACX-1vTNX9zl8txZmuINNz2qODrodoQhvr0o2-r3T_6yFp6quEpidmPz6ORx1HSjo2KNUg6MnyHPN-Ti44z1/pub"}}>términos y condiciones de uso</Link>
diff --git a/app/templates/password-recovery.hbs b/app/templates/password-recovery.hbs
@@ -26,11 +26,11 @@
       {{#step.body}}
         <PaperForm @onSubmit={{action "changePassword" step.nextStep}} as |form|>
 
-          <PbInput @label="CUIL de madre, padre o tutor/a"
+          <PbInput @label="DNI de madre, padre o tutor/a"
             @model={{ credentials.parentCUIL }} 
             @required={{ true }}
             @onKeyDown={{ action (mut wrongCredentials) false }}
-            @error={{ if wrongCredentials "CUIL incorrecto" }} />
+            @error={{ if wrongCredentials "DNI incorrecto" }} />
 
           <PbInput @type="password" @label="Nueva contraseña"
             @model={{ credentials.password }} 

diff --git a/app/templates/register.hbs b/app/templates/register.hbs
@@ -16,16 +16,9 @@
 
     <PasswordConfirmation @password={{ registerData.password }} />
 
-    <PbInput @label="Nombre de madre, padre o tutor/a"
-      @model={{ registerData.parentName }} 
-      @required={{ true }} />
-
-    <PbInput @label="CUIL de madre, padre o tutor/a"
-      @model={{ registerData.parentCUIL }} 
-      @required={{ true }} />
-
-    <PbInput @type="email" @label="Email (opcional)"
-      @model={{ registerData.email }} />
+    <PbInput @type="email" @label="Email"
+      @model={{ registerData.email }}
+      @customValidations={{ mailValidation }} />
 
     <p for="avatarURL">
       <label>Elegí tu avatar:</label>
@@ -41,16 +34,32 @@
       {{/each}}
     </PaperGridList>
 
-    <p for="Terms & Conditions"> Términos y condiciones </p>
-    <Textarea @value={{ "Acá van los términos y condiciones" }} disabled={{true}} />
-    <br>
-    <Link>Ver todos los términos y condiciones</Link>
-    <br><br>
-    <Input @type={{"checkbox"}} required /> <span>He leído y acepto los términos y condiciones.</span>
+    <p>Consentimiento parental</p>
+
+    <PbInput @label="Nombre completo de madre, padre o tutor/a"
+      @model={{ registerData.parentName }} 
+      @required={{ true }}
+      @customValidations={{ parentNameValidation }} />
+
+    <PbInput @label="DNI de madre, padre o tutor/a" 
+      @model={{ registerData.parentDNI }} 
+      @required={{ true }} 
+      @customValidations={{ DNIValidation }} />
+
+    <Collapsable @class="left" @title="¿Por qué solicitamos estos datos?">
+      <p>Para la FUNDACIÓN SADOSKY tu privacidad y la de tus hijas/os es muy importante.</p>
+      <p>Identificamos la cuenta con los datos de madre, padre o tutor/a para poder saber de quién se trata en caso de que quiera hacer uso de los derechos emergentes de la Ley de Protección de Datos Personales del menor tutelado. Podés ver más en el punto 8.4 de los <TermsAndConditionsLink />.</p>
+      <p>Las madres, padres o tutores podrán comunicarse por email a <a href="mailto:pilasbloques@program.ar">pilasbloques@program.ar</a> para conocer cuáles son los datos almacenados de los menores a su cargo y solicitar que se efectúen modificaciones en los datos suministrados.</p>
+
+    </Collapsable>
+
+    <Input @type={{"checkbox"}} required /> <span>Leí y acepto los <TermsAndConditionsLink /></span>
 
     <br><br>
-    <ProgressButton class="link" type="submit" @isDisabled={{not validUsername}} @loading={{ pilasBloquesApi.loading.register }}>
-      Registrar
+    <ProgressButton class="link" type="submit" 
+      @isDisabled={{not validUsername}} 
+      @loading={{ pilasBloquesApi.loading.register }}>
+        Registrar
     </ProgressButton>
   </PaperForm>
 </div>
diff --git a/tests/integration/components/collapsable-test.js b/tests/integration/components/collapsable-test.js
@@ -0,0 +1,25 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, click } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | collapsable', function(hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(async () => {
+    await render(hbs`
+      <Collapsable>
+        content
+      </Collapsable>
+    `);
+  })
+
+  test('Initial collapsable does not show content', async function(assert) {
+    assert.notOk(this.element.textContent.includes("content"));
+  });
+
+  test('Content appears when clicked', async function(assert) {
+    await click('.collapsable-title');    
+    assert.ok(this.element.textContent.includes("content"));
+  });
+});