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,14 +18,16 @@
           :schema="formSchema"
           @submit="handleSubmit"
         >
-          <ds-input
+          <ds-space margin="small">
-            :placeholder="$t('login.email')"
+            <ds-input
-            type="email"
+              :placeholder="$t('login.email')"
-            id="email"
+              type="email"
-            model="email"
+              id="email"
-            name="email"
+              model="email"
-            icon="envelope"
+              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,59 +1,57 @@
 <template>
-  <ds-card class="signup">
+  <ds-space margin="large">
-    <ds-space margin="large">
+    <ds-form
-      <ds-form
+      v-if="!success && !error"
-        v-if="!success && !error"
+      @input="handleInput"
-        @input="handleInput"
+      @input-valid="handleInputValid"
-        @input-valid="handleInputValid"
+      v-model="formData"
-        v-model="formData"
+      :schema="formSchema"
-        :schema="formSchema"
+      @submit="handleSubmit"
-        @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>
+        {{ $t('registration.signup.form.submit') }}
-        <ds-space v-if="token" margin-botton="large">
+      </ds-button>
-          <ds-text v-html="$t('registration.signup.form.invitation-code', { code: token })" />
+    </ds-form>
-        </ds-space>
+    <div v-else>
-        <ds-space margin-botton="large">
+      <template v-if="!error">
-          <ds-text>
+        <sweetalert-icon icon="info" />
-            {{
+        <ds-text align="center" v-html="submitMessage" />
-              invitation
+      </template>
-                ? $t('profile.invites.description')
+      <template v-else>
-                : $t('registration.signup.form.description')
+        <sweetalert-icon icon="error" />
-            }}
+        <ds-text align="center">{{ error.message }}</ds-text>
-          </ds-text>
+      </template>
-        </ds-space>
+    </div>
-        <ds-input
+  </ds-space>
-          :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>
 </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>
-    <signup :invitation="true" />
+    <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>