feat: Allow users to set password while registering for order (#5431)

fossasia · Oct 30, 2020 · 8421b09 · 8421b09 · vercel · Oct 30, 2020
1 parent af11e15
commit 8421b09
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 9 deletions.
diff --git a/app/components/forms/orders/guest-order-form.js b/app/components/forms/orders/guest-order-form.js
@@ -1,8 +1,14 @@
 import Component from '@ember/component';
+import { computed } from '@ember/object';
 import FormMixin from 'open-event-frontend/mixins/form';
 
 export default Component.extend(FormMixin, {
-  autoScrollToErrors: false,
+  autoScrollToErrors : false,
+  showPasswordForm   : false,
+
+  nextStep: computed('userExists', 'showPasswordForm', function() {
+    return this.userExists || this.showPasswordForm;
+  }),
 
   getValidationRules() {
     return {
@@ -23,12 +29,27 @@ export default Component.extend(FormMixin, {
             }
           ]
         },
+
         password: {
           identifier : 'password',
           rules      : [
             {
               type   : 'empty',
               prompt : this.l10n.t('Please enter your password')
+            },
+            {
+              type   : 'minLength[8]',
+              prompt : this.l10n.t('Your password must have at least {ruleValue} characters')
+            }
+          ]
+        },
+
+        passwordRepeat: {
+          identifier : 'password_repeat',
+          rules      : [
+            {
+              type   : 'match[password]',
+              prompt : this.l10n.t('Passwords do not match')
             }
           ]
         }
@@ -37,13 +58,24 @@ export default Component.extend(FormMixin, {
   },
   actions: {
     submit() {
-      this.onValid(() => {
+      this.onValid(async() => {
         if (this.userExists) {
           this.loginExistingUser(this.email, this.password);
+        } else if (this.password) {
+          this.createNewUserViaEmail(this.email, this.password);
         } else {
-          this.createNewUserViaEmail(this.email);
+          const result = await this.loader.post('users/check_email', { email: this.email });
+          this.set('userExists', result.exists);
+          if (!result.exists) {
+            this.set('showPasswordForm', true);
+          }
         }
       });
+    },
+    reset() {
+      this.set('userExists', false);
+      this.set('showPasswordForm', false);
+      this.set('password', null);
     }
   }
 });
diff --git a/app/controllers/public/index.js b/app/controllers/public/index.js
@@ -16,12 +16,12 @@ export default class IndexController extends Controller {
   }
 
   @action
-  async createNewUserViaEmail(email) {
+  async createNewUserViaEmail(email, password) {
     this.set('isLoading', true);
     const newUser = this.store.createRecord('user', {
       email,
-      'password'               : (Math.random() * 10).toString(16),
-      'wasRegisteredWithOrder' : true
+      password,
+      'wasRegisteredWithOrder': true
     });
     newUser.save()
       .then(() => {

diff --git a/app/templates/components/forms/orders/guest-order-form.hbs b/app/templates/components/forms/orders/guest-order-form.hbs
@@ -7,9 +7,9 @@
   <h4 class="ui header">{{t 'Please enter your email address to continue.'}}</h4>
   <div class="field">
     <div class="ui icon input">
-      <Input @type="text" @name="email" @value={{this.email}} @disabled={{this.userExists}} placeholder={{t "Email Address"}} />
-      {{#if this.userExists}}
-        <i class="circular undo link icon" role="button" onclick={{action (mut this.userExists) false}}></i>
+      <Input @type="text" @name="email" @value={{this.email}} @disabled={{this.nextStep}} placeholder={{t "Email Address"}} />
+      {{#if this.nextStep}}
+        <i class="circular undo link icon" role="button" onclick={{action 'reset'}}></i>
       {{/if}}
     </div>
   </div>
@@ -25,6 +25,19 @@
     <button type="submit" class="ui blue button">
       {{t 'Sign In'}}
     </button>
+  {{else if this.showPasswordForm}}
+    <div class="ui text muted">{{t 'Please set up a password to continue.'}}</div>
+    <div class="field">
+      <label class="required" for="password">{{t 'Password'}}</label>
+      <Input @type="password" @name="password" @value={{this.password}} />
+    </div>
+    <div class="field">
+      <label class="required" for="password_repeat">{{t 'Confirm Password'}}</label>
+      <Input @type="password" @name="password_repeat" />
+    </div>
+    <button type="submit" class="ui blue button">
+      {{t 'Register'}}
+    </button>
   {{else}}
     <button type="submit" class="ui green button">
       {{t 'Continue'}}