From 1da9d430a51de78f88793b1f017d135649a43441 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Sat, 10 Apr 2021 17:51:19 +0200
Subject: [PATCH] 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 <a href='https://gradido.net/de/datenschutz/' target='_blank' >Datenschutzerklärung</a> 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 <a href='https://gradido.net/en/datenschutz/' target='_blank' > privacy policy</a>.",
+      "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 @@
               <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
                 <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
                   <base-input
+                    :label="$t('form.firstname')"
                     alternative
                     class="mb-3"
-                    prepend-icon="ni ni-hat-3"
-                    :placeholder="$t('form.firstname')"
-                    name="Vorname"
-                    :rules="{ required: true }"
+                    name="firstname"
+                    :rules="{ required: true, min: 3 }"
                     v-model="model.firstname"
                   ></base-input>
                   <base-input
+                    :label="$t('form.lastname')"
                     alternative
                     class="mb-3"
-                    prepend-icon="ni ni-hat-3"
-                    :placeholder="$t('form.lastname')"
-                    name="Nachname"
-                    :rules="{ required: true }"
+                    name="lastname"
+                    :rules="{ required: true, min: 2 }"
                     v-model="model.lastname"
                   ></base-input>
 
                   <base-input
+                    :label="$t('form.email')"
                     alternative
                     class="mb-3"
-                    prepend-icon="ni ni-email-83"
-                    :placeholder="$t('form.email')"
-                    name="Email"
+                    name="email"
                     :rules="{ required: true, email: true }"
                     v-model="model.email"
                   ></base-input>
 
+                  <hr />
+                  <b-form-group :label="$t('form.password')">
+                    <b-input-group>
+                      <b-form-input
+                        class="mb-0"
+                        v-model="password"
+                        :class="{ valid: passwordValidation.valid }"
+                        :type="passwordVisible ? 'text' : 'password'"
+                        prepend-icon="ni ni-lock-circle-open"
+                        :placeholder="$t('form.password')"
+                      ></b-form-input>
+
+                      <b-input-group-append>
+                        <b-button variant="outline-primary">
+                          <b-icon
+                            :icon="passwordVisible ? 'eye' : 'eye-slash'"
+                            @click="togglePasswordVisibility"
+                          />
+                        </b-button>
+                      </b-input-group-append>
+                    </b-input-group>
+                  </b-form-group>
+
                   <base-input
-                    alternative
-                    class="mb-3"
-                    prepend-icon="ni ni-lock-circle-open"
-                    :placeholder="$t('form.password')"
+                    :label="$t('form.password_repeat')"
                     type="password"
-                    name="Password"
-                    :rules="{ required: true, min: 6 }"
-                    v-model="model.password"
-                  ></base-input>
-                  <div class="text-muted font-italic">
-                    <small>
-                      {{ $t('site.signup.strength') }}
-                      <span class="text-success font-weight-700">
-                        {{ $t('site.signup.strong') }}
-                      </span>
-                    </small>
-                  </div>
+                    :placeholder="$t('form.password_repeat')"
+                    prepend-icon="ni ni-lock-circle-open"
+                    v-model.lazy="checkPassword"
+                    :class="{ valid: passwordValidation.valid }"
+                  />
+
+                  <transition name="hint" appear>
+                    <div v-if="passwordValidation.errors.length > 0 && !submitted" class="hints">
+                      <ul>
+                        <li v-for="error in passwordValidation.errors" :key="error">
+                          <small>{{ error }}</small>
+                        </li>
+                      </ul>
+                    </div>
+                    <div class="matches" v-else-if="notSamePasswords">
+                      <p>
+                        {{ $t('site.signup.dont_match') }}
+                        <i class="ni ni-active-40" color="danger"></i>
+                      </p>
+                    </div>
+                  </transition>
+
                   <b-row class="my-4">
                     <b-col cols="12">
                       <base-input
@@ -79,17 +106,22 @@
                         name="Privacy Policy"
                       >
                         <b-form-checkbox v-model="model.agree">
-                          <span class="text-muted">
-                            <a href="https://gradido.net/de/datenschutz/" target="_blank">
-                              {{ $t('privacy_policy') }}
-                            </a>
-                            - {{ $t('site.signup.agree') }}
-                          </span>
+                          <span class="text-muted" v-html="$t('site.signup.agree')"></span>
                         </b-form-checkbox>
                       </base-input>
                     </b-col>
                   </b-row>
-                  <div class="text-center">
+                  <div
+                    class="text-center"
+                    v-if="
+                      passwordsFilled &&
+                      !notSamePasswords &&
+                      passwordValidation.valid &&
+                      namesFilled &&
+                      emailFilled &&
+                      model.agree
+                    "
+                  >
                     <b-button type="submit" variant="secondary" class="mt-4">
                       {{ $t('signup') }}
                     </b-button>
@@ -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 }
+      }
+    },
+  },
 }
 </script>
 <style></style>