feat: add page component for public registration

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,6 +18,7 @@
           :schema="formSchema"
           @submit="handleSubmit"
         >
+          <ds-space margin="small">
             <ds-input
               :placeholder="$t('login.email')"
               type="email"
@@ -29,6 +27,7 @@
               name="email"
               icon="envelope"
             />
+          </ds-space>
           <ds-space margin-botton="large">
             <ds-text align="left">{{ $t('password-reset.form.description') }}</ds-text>
           </ds-space>

webapp/components/Registration/Signup.vue

@@ -1,5 +1,4 @@
 <template>
-  <ds-card class="signup">
   <ds-space margin="large">
     <ds-form
       v-if="!success && !error"
@@ -53,7 +52,6 @@
       </template>
     </div>
   </ds-space>
-  </ds-card>
 </template>
 
 <script>

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",

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",

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',
-      // 'registration-signup-by-invitation-code',
+      'registration-enter-nonce',
-      // 'registration-verify-nonce',
       'registration-create-user-account',
       'pages-slug',
       'terms-and-conditions',

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>
+    <ds-card class="signup">
       <signup :invitation="true" />
+    </ds-card>
   </ds-section>
 </template>
 

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">
+              <ds-space margin-top="large" margin-bottom="x-small">
-                <a
+                {{ $t('login.no-account') }}
-                  :href="$t('login.moreInfoURL')"
+                <nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
-                  :title="$t('login.moreInfoHint')"
-                  target="_blank"
-                >
-                  {{ $t('login.moreInfo') }}
-                </a>
               </ds-space>
             </form>
           </ds-flex-item>

webapp/pages/registration/enter-nonce.vue

@@ -0,0 +1,7 @@
+<template>
+  <h1>Enter nonce</h1>
+</template>
+
+<script>
+export default {}
+</script>

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>