From dd6fce18e1747bdaba64dc84ba23b221ea87b28c Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 30 Mar 2022 16:40:42 +0200
Subject: [PATCH] change auth area pages for auth-templates

---
 frontend/src/pages/ForgotPassword.vue |  49 ++---
 frontend/src/pages/Login.vue          | 110 +++++-----
 frontend/src/pages/Register.vue       | 304 +++++++++++---------------
 frontend/src/pages/ResetPassword.vue  |  62 ++----
 4 files changed, 207 insertions(+), 318 deletions(-)

diff --git a/frontend/src/pages/ForgotPassword.vue b/frontend/src/pages/ForgotPassword.vue
index 81121fbe7..7883dc996 100644
--- a/frontend/src/pages/ForgotPassword.vue
+++ b/frontend/src/pages/ForgotPassword.vue
@@ -1,41 +1,20 @@
 <template>
-  <div class="forgot-password">
-    <div class="header p-4">
-      <b-container class="container">
-        <div class="header-body text-center mb-7">
-          <b-row class="justify-content-center">
-            <b-col xl="5" lg="6" md="8" class="px-2">
-              <h1>{{ $t('settings.password.reset') }}</h1>
-              <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
-              <p class="text-lead">{{ $t(subtitle) }}</p>
-            </b-col>
-          </b-row>
+  <div class="forgot-password p-4">
+    <div class="pb-5">Bitte gib deine E-Mail an mit der du bei Gradido angemeldet bist.</div>
+    <validation-observer ref="observer" v-slot="{ handleSubmit }">
+      <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
+        <input-email v-model="form.email"></input-email>
+        <div class="text-center">
+          <b-button type="submit" variant="gradido">
+            {{ $t('settings.password.send_now') }}
+          </b-button>
         </div>
-      </b-container>
+      </b-form>
+    </validation-observer>
+
+    <div class="text-center py-lg-4">
+      <router-link to="/login" class="mt-3">{{ $t('back') }}</router-link>
     </div>
-    <b-container class="mt--8 p-1">
-      <b-row class="justify-content-center">
-        <b-col lg="6" md="8">
-          <b-card no-body class="border-0 gradido-custom-background">
-            <b-card-body class="p-4">
-              <validation-observer ref="observer" v-slot="{ handleSubmit }">
-                <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
-                  <input-email v-model="form.email"></input-email>
-                  <div class="text-center">
-                    <b-button type="submit" variant="primary">
-                      {{ $t('settings.password.send_now') }}
-                    </b-button>
-                  </div>
-                </b-form>
-              </validation-observer>
-            </b-card-body>
-          </b-card>
-        </b-col>
-      </b-row>
-      <div class="text-center py-lg-4">
-        <router-link to="/login" class="mt-3">{{ $t('back') }}</router-link>
-      </div>
-    </b-container>
   </div>
 </template>
 <script>
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index 79532cb21..32a0352a6 100755
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -1,62 +1,55 @@
 <template>
-  <div class="login-form">
-    <!-- Header -->
-    <div class="p-3">
-      <b-container>
-        <div class="text-center mb-7 header">
-          <b-row class="justify-content-center">
-            <b-col xl="5" lg="6" md="8" class="px-2">
-              <h1>{{ $t('site.login.heading') }}</h1>
-              <p class="text-lead">{{ $t('site.login.community') }}</p>
-            </b-col>
-          </b-row>
-        </div>
-      </b-container>
-    </div>
-    <b-container class="mt--8">
-      <b-row class="justify-content-center">
-        <b-col lg="5" md="7">
-          <b-card no-body class="border-0 mb-0 gradido-custom-background">
-            <b-card-body class="p-4">
-              <div class="text-center text-muted mb-4 test-communitydata">
-                <b>{{ $store.state.community.name }}</b>
-                <p class="text-lead">
-                  {{ $store.state.community.description }}
-                </p>
-                {{ $t('login') }}
-              </div>
+  <div class="login-form p-4">
+    <div class="pb-5">Melde dich mit deinen Zugangsdaten an. Bewahre sie stet's sicher auf!</div>
+    <!-- <div class="text-center mb-4 test-communitydata">
+          <b>{{ $store.state.community.name }}</b>
+          <p class="text-lead">
+            {{ $store.state.community.description }}
+          </p>
+          {{ $t('login') }}
+        </div> -->
+    <label>Wähle deine Community</label>
+    <b-form-select
+      v-model="selected"
+      :options="options"
+      class="selectedLanguage mb-3"
+    ></b-form-select>
 
-              <validation-observer ref="observer" v-slot="{ handleSubmit }">
-                <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
-                  <input-email v-model="form.email"></input-email>
-                  <input-password
-                    :label="$t('form.password')"
-                    :placeholder="$t('form.password')"
-                    :name="$t('form.password')"
-                    v-model="form.password"
-                  ></input-password>
-                  <div class="text-center mt-4">
-                    <b-button type="submit" variant="primary">{{ $t('login') }}</b-button>
-                  </div>
-                </b-form>
-              </validation-observer>
-            </b-card-body>
-          </b-card>
-          <b-row class="mt-3">
-            <b-col cols="6" class="text-center text-sm-left col-12 col-sm-6 pb-5">
-              <router-link to="/forgot-password" class="mt-3">
-                {{ $t('settings.password.forgot_pwd') }}
-              </router-link>
-            </b-col>
-            <b-col cols="6" class="text-center text-sm-right col-12 col-sm-6">
-              <router-link to="/register" class="mt-3">
-                {{ $t('site.login.new_wallet') }}
-              </router-link>
-            </b-col>
-          </b-row>
-        </b-col>
-      </b-row>
-    </b-container>
+    <validation-observer ref="observer" v-slot="{ handleSubmit }">
+      <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
+        <b-row>
+          <b-col><input-email v-model="form.email"></input-email></b-col>
+          <b-col>
+            <input-password
+              :label="$t('form.password')"
+              :placeholder="$t('form.password')"
+              :name="$t('form.password')"
+              v-model="form.password"
+            ></input-password>
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col>
+            <b-form-checkbox
+              v-model="status"
+              name="checkbox-1"
+              value="saved"
+              unchecked-value="not_saved"
+            >
+              Anmeldung speichern
+            </b-form-checkbox>
+          </b-col>
+          <b-col>
+            <router-link to="/forgot-password" class="mt-3">
+              {{ $t('settings.password.forgot_pwd') }}
+            </router-link>
+          </b-col>
+        </b-row>
+        <div class="mt-4">
+          <b-button type="submit" variant="gradido">{{ $t('login') }}</b-button>
+        </div>
+      </b-form>
+    </validation-observer>
   </div>
 </template>
 <script>
@@ -79,6 +72,9 @@ export default {
         password: '',
       },
       passwordVisible: false,
+      selected: '01',
+      options: [{ value: '01', text: this.$store.state.community.name }],
+      status: false,
     }
   },
   methods: {
diff --git a/frontend/src/pages/Register.vue b/frontend/src/pages/Register.vue
index cadc0f34c..9510582b8 100755
--- a/frontend/src/pages/Register.vue
+++ b/frontend/src/pages/Register.vue
@@ -1,191 +1,131 @@
 <template>
-  <div id="registerform">
-    <!-- Header -->
-    <div class="header p-4">
-      <b-container class="container">
-        <div class="header-body text-center mb-7">
-          <b-row class="justify-content-center">
-            <b-col xl="5" lg="6" md="8" class="px-2">
-              <h1>{{ $t('site.signup.title') }}</h1>
-              <p class="text-lead">{{ $t('site.signup.subtitle') }}</p>
-            </b-col>
-          </b-row>
-        </div>
-      </b-container>
+  <div id="registerform p-4">
+    <div class="pb-5">
+      Registriere dich indem du alle Daten vollständig und in die richtigen Felder eingibst.
     </div>
+    <validation-observer ref="observer" v-slot="{ handleSubmit }">
+      <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
+        <b-row>
+          <b-col>
+            <validation-provider
+              :name="$t('form.firstname')"
+              :rules="{ required: true, min: 3 }"
+              v-slot="validationContext"
+            >
+              <b-form-group
+                class="mb-3"
+                :label="$t('form.firstname')"
+                label-for="registerFirstname"
+              >
+                <b-form-input
+                  id="registerFirstname"
+                  :name="$t('form.firstname')"
+                  v-model="form.firstname"
+                  :placeholder="$t('form.firstname')"
+                  :state="getValidationState(validationContext)"
+                  aria-describedby="registerFirstnameLiveFeedback"
+                ></b-form-input>
 
-    <!-- Page content -->
-    <b-container class="mt--8 p-1">
-      <!-- Table -->
+                <b-form-invalid-feedback id="registerFirstnameLiveFeedback">
+                  {{ validationContext.errors[0] }}
+                </b-form-invalid-feedback>
+              </b-form-group>
+            </validation-provider>
+          </b-col>
+          <b-col>
+            <validation-provider
+              :name="$t('form.lastname')"
+              :rules="{ required: true, min: 2 }"
+              v-slot="validationContext"
+            >
+              <b-form-group class="mb-3" :label="$t('form.lastname')" label-for="registerLastname">
+                <b-form-input
+                  id="registerLastname"
+                  :name="$t('form.lastname')"
+                  v-model="form.lastname"
+                  :placeholder="$t('form.lastname')"
+                  :state="getValidationState(validationContext)"
+                  aria-describedby="registerLastnameLiveFeedback"
+                ></b-form-input>
 
-      <b-row class="justify-content-center">
-        <b-col lg="6" md="8">
-          <b-card no-body class="border-0 gradido-custom-background">
-            <b-card-body class="p-4">
-              <div class="text-center text-muted mb-4 test-communitydata">
-                <b>{{ $store.state.community.name }}</b>
-                <p class="text-lead">
-                  {{ $store.state.community.description }}
-                </p>
-                <div>{{ $t('signup') }}</div>
+                <b-form-invalid-feedback id="registerLastnameLiveFeedback">
+                  {{ validationContext.errors[0] }}
+                </b-form-invalid-feedback>
+              </b-form-group>
+            </validation-provider>
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col><input-email v-model="form.email"></input-email></b-col>
+          <b-col>
+            <label>{{ $t('language') }}</label>
+            <language-switch-select @update-language="updateLanguage" />
+          </b-col>
+        </b-row>
+
+        <b-alert v-if="showError" show dismissible variant="danger" @dismissed="closeAlert">
+          <span class="alert-icon"><i class="ni ni-point"></i></span>
+          <span class="alert-text">
+            <strong>{{ $t('error.error') }}</strong>
+            {{ messageError }}
+          </span>
+        </b-alert>
+
+        <b-row v-b-toggle:my-collapse class="text-muted shadow-sm p-3 publisherCollaps mb-4">
+          <b-col>{{ $t('publisher.publisherId') }} {{ $store.state.publisherId }}</b-col>
+          <b-col class="text-right">
+            <b-icon icon="chevron-down" aria-hidden="true"></b-icon>
+          </b-col>
+        </b-row>
+
+        <b-row>
+          <b-col>
+            <b-collapse id="my-collapse" class="">
+              <b-input-group class="shadow-sm p-2 bg-white rounded">
+                <b-input-group-prepend is-text>
+                  <b-icon icon="person-fill"></b-icon>
+                </b-input-group-prepend>
+                <b-form-input
+                  id="publisherid"
+                  type="text"
+                  placeholder="Publisher ID"
+                  v-model="publisherId"
+                  @input="commitStorePublisherId(publisherId)"
+                ></b-form-input>
+              </b-input-group>
+              <div v-b-toggle:my-collapse class="text-center mt-1 shadow-lg p-3 mb-5 rounded">
+                {{ $t('publisher.infoText') }}
+                <div class="text-center">
+                  <b-icon icon="chevron-up" aria-hidden="true"></b-icon>
+                </div>
               </div>
+            </b-collapse>
+          </b-col>
+        </b-row>
 
-              <validation-observer ref="observer" v-slot="{ handleSubmit }">
-                <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
-                  <validation-provider
-                    :name="$t('form.firstname')"
-                    :rules="{ required: true, min: 3 }"
-                    v-slot="validationContext"
-                  >
-                    <b-form-group
-                      class="mb-3"
-                      :label="$t('form.firstname')"
-                      label-for="registerFirstname"
-                    >
-                      <b-form-input
-                        id="registerFirstname"
-                        :name="$t('form.firstname')"
-                        v-model="form.firstname"
-                        :placeholder="$t('form.firstname')"
-                        :state="getValidationState(validationContext)"
-                        aria-describedby="registerFirstnameLiveFeedback"
-                      ></b-form-input>
-
-                      <b-form-invalid-feedback id="registerFirstnameLiveFeedback">
-                        {{ validationContext.errors[0] }}
-                      </b-form-invalid-feedback>
-                    </b-form-group>
-                  </validation-provider>
-
-                  <validation-provider
-                    :name="$t('form.lastname')"
-                    :rules="{ required: true, min: 2 }"
-                    v-slot="validationContext"
-                  >
-                    <b-form-group
-                      class="mb-3"
-                      :label="$t('form.lastname')"
-                      label-for="registerLastname"
-                    >
-                      <b-form-input
-                        id="registerLastname"
-                        :name="$t('form.lastname')"
-                        v-model="form.lastname"
-                        :placeholder="$t('form.lastname')"
-                        :state="getValidationState(validationContext)"
-                        aria-describedby="registerLastnameLiveFeedback"
-                      ></b-form-input>
-
-                      <b-form-invalid-feedback id="registerLastnameLiveFeedback">
-                        {{ validationContext.errors[0] }}
-                      </b-form-invalid-feedback>
-                    </b-form-group>
-                  </validation-provider>
-
-                  <input-email v-model="form.email"></input-email>
-
-                  <hr />
-
-                  <b-row>
-                    <b-col cols="12">
-                      {{ $t('language') }}
-                      <language-switch-select @update-language="updateLanguage" />
-                    </b-col>
-                  </b-row>
-
-                  <b-row class="my-4">
-                    <b-col cols="12">
-                      <b-form-checkbox
-                        id="registerCheckbox"
-                        v-model="form.agree"
-                        :name="$t('site.signup.agree')"
-                      >
-                        <!-- eslint-disable-next-line @intlify/vue-i18n/no-v-html -->
-                        <span class="text-muted" v-html="$t('site.signup.agree')"></span>
-                      </b-form-checkbox>
-                    </b-col>
-                  </b-row>
-                  <b-alert
-                    v-if="showError"
-                    show
-                    dismissible
-                    variant="danger"
-                    @dismissed="closeAlert"
-                  >
-                    <span class="alert-icon"><i class="ni ni-point"></i></span>
-                    <span class="alert-text">
-                      <strong>{{ $t('error.error') }}</strong>
-                      {{ messageError }}
-                    </span>
-                  </b-alert>
-
-                  <b-row v-b-toggle:my-collapse class="text-muted shadow-sm p-3 publisherCollaps">
-                    <b-col>{{ $t('publisher.publisherId') }} {{ $store.state.publisherId }}</b-col>
-                    <b-col class="text-right">
-                      <b-icon icon="chevron-down" aria-hidden="true"></b-icon>
-                    </b-col>
-                  </b-row>
-
-                  <b-row>
-                    <b-col>
-                      <b-collapse id="my-collapse" class="">
-                        <b-input-group class="shadow-sm p-2 bg-white rounded">
-                          <b-input-group-prepend is-text>
-                            <b-icon icon="person-fill"></b-icon>
-                          </b-input-group-prepend>
-                          <b-form-input
-                            id="publisherid"
-                            type="text"
-                            placeholder="Publisher ID"
-                            v-model="publisherId"
-                            @input="commitStorePublisherId(publisherId)"
-                          ></b-form-input>
-                        </b-input-group>
-                        <div
-                          v-b-toggle:my-collapse
-                          class="text-center mt-1 shadow-lg p-3 mb-5 rounded"
-                        >
-                          {{ $t('publisher.infoText') }}
-                          <div class="text-center">
-                            <b-icon icon="chevron-up" aria-hidden="true"></b-icon>
-                          </div>
-                        </div>
-                      </b-collapse>
-                    </b-col>
-                  </b-row>
-
-                  <div class="text-center mt-5">
-                    <div class="text-center">
-                      <router-link class="test-button-back" to="/login">
-                        <b-button variant="outline-secondary" class="mr-4">
-                          {{ $t('back') }}
-                        </b-button>
-                      </router-link>
-                      <b-button
-                        :disabled="disabled"
-                        type="submit"
-                        :variant="disabled ? 'outline-light' : 'primary'"
-                      >
-                        {{ $t('signup') }}
-                      </b-button>
-                    </div>
-                  </div>
-                </b-form>
-              </validation-observer>
-            </b-card-body>
-          </b-card>
-        </b-col>
-      </b-row>
-    </b-container>
-    <!--
-    <div class="text-center pt-4">
-      <router-link class="test-button-another-community" to="/select-community">
-        <b-button variant="outline-secondary">
-          {{ $t('community.choose-another-community') }}
-        </b-button>
-      </router-link>
-    </div>
-    -->
+        <b-row>
+          <b-col cols="3">
+            <b-button
+              :disabled="disabled"
+              type="submit"
+              :variant="disabled ? 'outline-light' : 'gradido'"
+            >
+              {{ $t('signup') }}
+            </b-button>
+          </b-col>
+          <b-col cols="9">
+            <b-form-checkbox
+              id="registerCheckbox"
+              v-model="form.agree"
+              :name="$t('site.signup.agree')"
+            >
+              <!-- eslint-disable-next-line @intlify/vue-i18n/no-v-html -->
+              <span class="text-muted" v-html="$t('site.signup.agree')"></span>
+            </b-form-checkbox>
+          </b-col>
+        </b-row>
+      </b-form>
+    </validation-observer>
   </div>
 </template>
 <script>
diff --git a/frontend/src/pages/ResetPassword.vue b/frontend/src/pages/ResetPassword.vue
index 7771be5f6..8604e4b5e 100644
--- a/frontend/src/pages/ResetPassword.vue
+++ b/frontend/src/pages/ResetPassword.vue
@@ -1,49 +1,23 @@
 <template>
-  <div class="resetpwd-form">
-    <b-container>
-      <div class="header p-4" ref="header">
-        <div class="header-body text-center mb-7">
-          <b-row class="justify-content-center">
-            <b-col xl="5" lg="6" md="8" class="px-2">
-              <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
-              <h1>{{ $t(displaySetup.title) }}</h1>
-              <div class="pb-4">
-                <span>
-                  <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
-                  {{ $t(displaySetup.text) }}
-                </span>
-              </div>
-            </b-col>
-          </b-row>
+  <div class="resetpwd-form p-4">
+    <div class="pb-5">Trage bitte dein Passwort ein und wiederhole es.</div>
+    <validation-observer ref="observer" v-slot="{ handleSubmit }">
+      <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
+        <input-password-confirmation v-model="form" />
+        <div class="text-center">
+          <b-button type="submit" variant="primary" class="mt-4">
+            <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
+            {{ $t(displaySetup.button) }}
+          </b-button>
         </div>
-      </div>
-    </b-container>
-    <b-container class="mt--8 p-1">
-      <b-row class="justify-content-center">
-        <b-col lg="6" md="8">
-          <b-card no-body class="border-0 gradido-custom-background">
-            <b-card-body class="p-4">
-              <validation-observer ref="observer" v-slot="{ handleSubmit }">
-                <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
-                  <input-password-confirmation v-model="form" />
-                  <div class="text-center">
-                    <b-button type="submit" variant="primary" class="mt-4">
-                      <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
-                      {{ $t(displaySetup.button) }}
-                    </b-button>
-                  </div>
-                </b-form>
-              </validation-observer>
-            </b-card-body>
-          </b-card>
-        </b-col>
-      </b-row>
-      <b-row v-if="displaySetup.linkTo">
-        <b-col class="text-center py-lg-4">
-          <router-link :to="displaySetup.linkTo" class="mt-3">{{ $t('back') }}</router-link>
-        </b-col>
-      </b-row>
-    </b-container>
+      </b-form>
+    </validation-observer>
+
+    <b-row v-if="displaySetup.linkTo">
+      <b-col class="text-center py-lg-4">
+        <router-link :to="displaySetup.linkTo" class="mt-3">{{ $t('back') }}</router-link>
+      </b-col>
+    </b-row>
   </div>
 </template>
 <script>