From 71e94d88c6fde65641c4b60b6f142ad9026faf4c Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Fri, 4 Oct 2019 22:13:46 +0200
Subject: [PATCH] feat: add page component for public registration

---
 webapp/components/PasswordReset/Request.vue |  21 ++--
 webapp/components/Registration/Signup.vue   | 106 ++++++++++----------
 webapp/locales/de.json                      |   2 +
 webapp/locales/en.json                      |   2 +
 webapp/nuxt.config.js                       |   5 +-
 webapp/pages/admin/invite.vue               |   4 +-
 webapp/pages/login.vue                      |  18 ++--
 webapp/pages/registration/enter-nonce.vue   |   7 ++
 webapp/pages/registration/signup.vue        |  42 ++++++++
 9 files changed, 129 insertions(+), 78 deletions(-)
 create mode 100644 webapp/pages/registration/enter-nonce.vue
 create mode 100644 webapp/pages/registration/signup.vue

diff --git a/webapp/components/PasswordReset/Request.vue b/webapp/components/PasswordReset/Request.vue
index aa7e67fcf..052be2f6c 100644
--- a/webapp/components/PasswordReset/Request.vue
+++ b/webapp/components/PasswordReset/Request.vue
@@ -10,9 +10,6 @@
         </ds-space>
       </ds-flex-item>
       <ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
-        <ds-space margin="small">
-          <ds-text size="small" align="left">{{ $t('login.copy') }}</ds-text>
-        </ds-space>
         <ds-form
           v-if="!submitted"
           @input="handleInput"
@@ -21,14 +18,16 @@
           :schema="formSchema"
           @submit="handleSubmit"
         >
-          <ds-input
-            :placeholder="$t('login.email')"
-            type="email"
-            id="email"
-            model="email"
-            name="email"
-            icon="envelope"
-          />
+          <ds-space margin="small">
+            <ds-input
+              :placeholder="$t('login.email')"
+              type="email"
+              id="email"
+              model="email"
+              name="email"
+              icon="envelope"
+            />
+          </ds-space>
           <ds-space margin-botton="large">
             <ds-text align="left">{{ $t('password-reset.form.description') }}</ds-text>
           </ds-space>
diff --git a/webapp/components/Registration/Signup.vue b/webapp/components/Registration/Signup.vue
index 36a43f180..2924183da 100644
--- a/webapp/components/Registration/Signup.vue
+++ b/webapp/components/Registration/Signup.vue
@@ -1,59 +1,57 @@
 <template>
-  <ds-card class="signup">
-    <ds-space margin="large">
-      <ds-form
-        v-if="!success && !error"
-        @input="handleInput"
-        @input-valid="handleInputValid"
-        v-model="formData"
-        :schema="formSchema"
-        @submit="handleSubmit"
+  <ds-space margin="large">
+    <ds-form
+      v-if="!success && !error"
+      @input="handleInput"
+      @input-valid="handleInputValid"
+      v-model="formData"
+      :schema="formSchema"
+      @submit="handleSubmit"
+    >
+      <h1>{{ invitation ? $t('profile.invites.title') : $t('registration.signup.title') }}</h1>
+      <ds-space v-if="token" margin-botton="large">
+        <ds-text v-html="$t('registration.signup.form.invitation-code', { code: token })" />
+      </ds-space>
+      <ds-space margin-botton="large">
+        <ds-text>
+          {{
+            invitation
+              ? $t('profile.invites.description')
+              : $t('registration.signup.form.description')
+          }}
+        </ds-text>
+      </ds-space>
+      <ds-input
+        :placeholder="invitation ? $t('profile.invites.emailPlaceholder') : $t('login.email')"
+        type="email"
+        id="email"
+        model="email"
+        name="email"
+        icon="envelope"
+      />
+      <ds-button
+        :disabled="disabled"
+        :loading="$apollo.loading"
+        primary
+        fullwidth
+        name="submit"
+        type="submit"
+        icon="envelope"
       >
-        <h1>{{ invitation ? $t('profile.invites.title') : $t('registration.signup.title') }}</h1>
-        <ds-space v-if="token" margin-botton="large">
-          <ds-text v-html="$t('registration.signup.form.invitation-code', { code: token })" />
-        </ds-space>
-        <ds-space margin-botton="large">
-          <ds-text>
-            {{
-              invitation
-                ? $t('profile.invites.description')
-                : $t('registration.signup.form.description')
-            }}
-          </ds-text>
-        </ds-space>
-        <ds-input
-          :placeholder="invitation ? $t('profile.invites.emailPlaceholder') : $t('login.email')"
-          type="email"
-          id="email"
-          model="email"
-          name="email"
-          icon="envelope"
-        />
-        <ds-button
-          :disabled="disabled"
-          :loading="$apollo.loading"
-          primary
-          fullwidth
-          name="submit"
-          type="submit"
-          icon="envelope"
-        >
-          {{ $t('registration.signup.form.submit') }}
-        </ds-button>
-      </ds-form>
-      <div v-else>
-        <template v-if="!error">
-          <sweetalert-icon icon="info" />
-          <ds-text align="center" v-html="submitMessage" />
-        </template>
-        <template v-else>
-          <sweetalert-icon icon="error" />
-          <ds-text align="center">{{ error.message }}</ds-text>
-        </template>
-      </div>
-    </ds-space>
-  </ds-card>
+        {{ $t('registration.signup.form.submit') }}
+      </ds-button>
+    </ds-form>
+    <div v-else>
+      <template v-if="!error">
+        <sweetalert-icon icon="info" />
+        <ds-text align="center" v-html="submitMessage" />
+      </template>
+      <template v-else>
+        <sweetalert-icon icon="error" />
+        <ds-text align="center">{{ error.message }}</ds-text>
+      </template>
+    </div>
+  </ds-space>
 </template>
 
 <script>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index b7965062b..09c723545 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -55,6 +55,8 @@
     "email": "Deine E-Mail",
     "password": "Dein Passwort",
     "forgotPassword": "Passwort vergessen?",
+    "no-account": "Du hast noch keinen Benutzerkonto?",
+    "register": "Benutzerkonto erstellen",
     "moreInfo": "Was ist Human Connection?",
     "moreInfoURL": "https://human-connection.org",
     "moreInfoHint": "zur Präsentationsseite",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 162f1a0f0..42c41fe00 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -55,6 +55,8 @@
     "email": "Your Email",
     "password": "Your Password",
     "forgotPassword": "Forgot Password?",
+    "no-account": "Don't have an account?",
+    "register": "Sign up",
     "moreInfo": "What is Human Connection?",
     "moreInfoURL": "https://human-connection.org/en/",
     "moreInfoHint": "to the presentation page",
diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js
index 84602f7eb..f79e5982c 100644
--- a/webapp/nuxt.config.js
+++ b/webapp/nuxt.config.js
@@ -38,9 +38,8 @@ export default {
       'password-reset-request',
       'password-reset-verify-nonce',
       'password-reset-change-password',
-      // 'registration-signup', TODO: implement to open public registration
-      // 'registration-signup-by-invitation-code',
-      // 'registration-verify-nonce',
+      'registration-signup',
+      'registration-enter-nonce',
       'registration-create-user-account',
       'pages-slug',
       'terms-and-conditions',
diff --git a/webapp/pages/admin/invite.vue b/webapp/pages/admin/invite.vue
index 3f9b4d831..b45f8101c 100644
--- a/webapp/pages/admin/invite.vue
+++ b/webapp/pages/admin/invite.vue
@@ -5,7 +5,9 @@
       <ds-heading size="h3">{{ $t('admin.invites.title') }}</ds-heading>
       <ds-text>{{ $t('admin.invites.description') }}</ds-text>
     </ds-space>
-    <signup :invitation="true" />
+    <ds-card class="signup">
+      <signup :invitation="true" />
+    </ds-card>
   </ds-section>
 </template>
 
diff --git a/webapp/pages/login.vue b/webapp/pages/login.vue
index 46168f1ab..971754870 100644
--- a/webapp/pages/login.vue
+++ b/webapp/pages/login.vue
@@ -22,6 +22,11 @@
             </ds-space>
           </ds-flex-item>
           <ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
+            <ds-space margin="small">
+              <a :href="$t('login.moreInfoURL')" :title="$t('login.moreInfoHint')" target="_blank">
+                {{ $t('login.moreInfo') }}
+              </a>
+            </ds-space>
             <ds-space margin="small">
               <ds-text size="small">{{ $t('login.copy') }}</ds-text>
             </ds-space>
@@ -43,7 +48,7 @@
                 name="password"
                 type="password"
               />
-              <ds-space class="password-reset-link" margin-bottom="large">
+              <ds-space margin-bottom="large">
                 <nuxt-link to="/password-reset/request">{{ $t('login.forgotPassword') }}</nuxt-link>
               </ds-space>
               <ds-button
@@ -56,14 +61,9 @@
               >
                 {{ $t('login.login') }}
               </ds-button>
-              <ds-space margin="x-small">
-                <a
-                  :href="$t('login.moreInfoURL')"
-                  :title="$t('login.moreInfoHint')"
-                  target="_blank"
-                >
-                  {{ $t('login.moreInfo') }}
-                </a>
+              <ds-space margin-top="large" margin-bottom="x-small">
+                {{ $t('login.no-account') }}
+                <nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
               </ds-space>
             </form>
           </ds-flex-item>
diff --git a/webapp/pages/registration/enter-nonce.vue b/webapp/pages/registration/enter-nonce.vue
new file mode 100644
index 000000000..7efa86627
--- /dev/null
+++ b/webapp/pages/registration/enter-nonce.vue
@@ -0,0 +1,7 @@
+<template>
+  <h1>Enter nonce</h1>
+</template>
+
+<script>
+export default {}
+</script>
diff --git a/webapp/pages/registration/signup.vue b/webapp/pages/registration/signup.vue
new file mode 100644
index 000000000..943109d59
--- /dev/null
+++ b/webapp/pages/registration/signup.vue
@@ -0,0 +1,42 @@
+<template>
+  <ds-container width="medium">
+    <ds-card>
+      <ds-flex gutter="small">
+        <ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
+          <client-only>
+            <locale-switch class="login-locale-switch" offset="5" />
+          </client-only>
+          <ds-space margin-top="small" margin-bottom="xxx-small" centered>
+            <img class="signup-image" alt="Human Connection" src="/img/sign-up/nicetomeetyou.svg" />
+          </ds-space>
+        </ds-flex-item>
+        <ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
+          <signup :invitation="false" />
+        </ds-flex-item>
+      </ds-flex>
+    </ds-card>
+  </ds-container>
+</template>
+
+<script>
+import Signup from '~/components/Registration/Signup'
+import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+
+export default {
+  layout: 'no-header',
+  components: {
+    Signup,
+    LocaleSwitch,
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.signup-image {
+  width: 90%;
+  max-width: 200px;
+}
+.login-card {
+  position: relative;
+}
+</style>