From 9fa2ddac1e0f676d64dc41d88fe581307aca4fd0 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 28 Mar 2022 12:10:30 +0200
Subject: [PATCH] add components for slots

---
 frontend/src/components/Auth/Header.vue   |  80 ++++++++
 frontend/src/components/Auth/Login.vue    | 105 ++++++++++
 frontend/src/components/Auth/Register.vue | 230 ++++++++++++++++++++++
 3 files changed, 415 insertions(+)
 create mode 100644 frontend/src/components/Auth/Header.vue
 create mode 100644 frontend/src/components/Auth/Login.vue
 create mode 100644 frontend/src/components/Auth/Register.vue

diff --git a/frontend/src/components/Auth/Header.vue b/frontend/src/components/Auth/Header.vue
new file mode 100644
index 000000000..38a817d0f
--- /dev/null
+++ b/frontend/src/components/Auth/Header.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="auth-header">
+    <b-navbar toggleable="lg" class="p-0">
+      <div class="g-logo-radius bg-white p-3">
+        <img :src="logo" height="40" alt="..." />
+      </div>
+      <b-img-lazy
+        class="header-img d-block d-lg-none"
+        src="/img/template/Blaetter.png"
+      ></b-img-lazy>
+      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+      <b-collapse id="nav-collapse" is-nav>
+        <!-- Right aligned nav items -->
+        <b-navbar-nav class="ml-auto" right>
+          <b-nav-item-dropdown text="über Gradido">
+            <b-dropdown-item href="#">EN</b-dropdown-item>
+            <b-dropdown-item href="#">ES</b-dropdown-item>
+            <b-dropdown-item href="#">RU</b-dropdown-item>
+            <b-dropdown-item href="#">FA</b-dropdown-item>
+          </b-nav-item-dropdown>
+
+          <b-nav-item-dropdown text="Great Cooperation">
+            <b-dropdown-item href="#">EN</b-dropdown-item>
+            <b-dropdown-item href="#">ES</b-dropdown-item>
+            <b-dropdown-item href="#">RU</b-dropdown-item>
+            <b-dropdown-item href="#">FA</b-dropdown-item>
+          </b-nav-item-dropdown>
+
+          <b-nav-item href="#">Podcast</b-nav-item>
+
+          <b-nav-item-dropdown text="Presse">
+            <b-dropdown-item href="#">EN</b-dropdown-item>
+            <b-dropdown-item href="#">ES</b-dropdown-item>
+            <b-dropdown-item href="#">RU</b-dropdown-item>
+            <b-dropdown-item href="#">FA</b-dropdown-item>
+          </b-nav-item-dropdown>
+
+          <b-nav-item href="#">Kontakt</b-nav-item>
+
+          <b-nav-item href="#">Anmelden | Registrieen</b-nav-item>
+        </b-navbar-nav>
+      </b-collapse>
+    </b-navbar>
+  </div>
+</template>
+<script>
+export default {
+  name: 'AuthHeader',
+  data() {
+    return {
+      logo: 'img/brand/green.png',
+    }
+  },
+}
+</script>
+<style lang="scss">
+.auth-header {
+  position: sticky;
+}
+
+.header-img {
+  position: absolute;
+  bottom: -180%;
+  right: 0px;
+  width: 70%;
+}
+
+.g-logo-radius {
+  -webkit-border-top-right-radius: 77px;
+  -webkit-border-bottom-right-radius: 137px;
+  -webkit-border-bottom-left-radius: 0px;
+  -moz-border-radius-topright: 77px;
+  -moz-border-radius-bottomright: 137px;
+  -moz-border-radius-bottomleft: 0px;
+  border-top-right-radius: 77px;
+  border-bottom-right-radius: 137px;
+  border-bottom-left-radius: 0px;
+}
+</style>
diff --git a/frontend/src/components/Auth/Login.vue b/frontend/src/components/Auth/Login.vue
new file mode 100644
index 000000000..f59a97a5e
--- /dev/null
+++ b/frontend/src/components/Auth/Login.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="auth-login">
+    <b-card no-body class="border-0 mb-0 gradido-custom-background">
+      <b-card-body class="p-4">
+        <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>
+
+        <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>
+  </div>
+</template>
+<script>
+import InputPassword from '@/components/Inputs/InputPassword'
+import InputEmail from '@/components/Inputs/InputEmail'
+import { login } from '@/graphql/queries'
+import { getCommunityInfoMixin } from '@/mixins/getCommunityInfo'
+
+export default {
+  name: 'AuthLogin',
+  components: {
+    InputPassword,
+    InputEmail,
+  },
+  mixins: [getCommunityInfoMixin],
+  data() {
+    return {
+      form: {
+        email: '',
+        password: '',
+      },
+      passwordVisible: false,
+    }
+  },
+  methods: {
+    async onSubmit() {
+      const loader = this.$loading.show({
+        container: this.$refs.submitButton,
+      })
+      this.$apollo
+        .query({
+          query: login,
+          variables: {
+            email: this.form.email,
+            password: this.form.password,
+            publisherId: this.$store.state.publisherId,
+          },
+          fetchPolicy: 'network-only',
+        })
+        .then(async (result) => {
+          const {
+            data: { login },
+          } = result
+          this.$store.dispatch('login', login)
+          await loader.hide()
+          if (this.$route.params.code) {
+            this.$router.push(`/redeem/${this.$route.params.code}`)
+          } else {
+            this.$router.push('/overview')
+          }
+        })
+        .catch((error) => {
+          this.toastError(this.$t('error.no-account'))
+          if (error.message.includes('User email not validated')) {
+            this.$router.push('/thx/login')
+          } else if (error.message.includes('User has no password set yet')) {
+            this.$router.push('/reset-password/login')
+          }
+          loader.hide()
+        })
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/Auth/Register.vue b/frontend/src/components/Auth/Register.vue
new file mode 100644
index 000000000..7f007a190
--- /dev/null
+++ b/frontend/src/components/Auth/Register.vue
@@ -0,0 +1,230 @@
+<template>
+  <div class="auth-register">
+    <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>
+        </div>
+
+        <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>
+  </div>
+</template>
+<script>
+import InputEmail from '@/components/Inputs/InputEmail.vue'
+import LanguageSwitchSelect from '@/components/LanguageSwitchSelect.vue'
+import { createUser } from '@/graphql/mutations'
+import { getCommunityInfoMixin } from '@/mixins/getCommunityInfo'
+
+export default {
+  name: 'AuthRegister',
+  components: { InputEmail, LanguageSwitchSelect },
+  mixins: [getCommunityInfoMixin],
+  data() {
+    return {
+      form: {
+        firstname: '',
+        lastname: '',
+        email: '',
+        agree: false,
+      },
+      language: '',
+      submitted: false,
+      showError: false,
+      messageError: '',
+      register: true,
+      publisherId: this.$store.state.publisherId,
+      redeemCode: this.$route.params.code,
+    }
+  },
+  methods: {
+    updateLanguage(e) {
+      this.language = e
+      this.$store.commit('language', this.language)
+    },
+    getValidationState({ dirty, validated, valid = null }) {
+      return dirty || validated ? valid : null
+    },
+    commitStorePublisherId(val) {
+      this.$store.commit('publisherId', val)
+    },
+    async onSubmit() {
+      this.$apollo
+        .mutate({
+          mutation: createUser,
+          variables: {
+            email: this.form.email,
+            firstName: this.form.firstname,
+            lastName: this.form.lastname,
+            language: this.language,
+            publisherId: this.$store.state.publisherId,
+            redeemCode: this.redeemCode,
+          },
+        })
+        .then(() => {
+          this.$router.push('/thx/register')
+        })
+        .catch((error) => {
+          this.showError = true
+          this.messageError = error.message
+        })
+    },
+    closeAlert() {
+      this.showError = false
+      this.messageError = ''
+      this.form.email = ''
+      this.form.firstname = ''
+      this.form.lastname = ''
+    },
+  },
+  computed: {
+    namesFilled() {
+      return (
+        this.form.firstname !== '' &&
+        this.form.firstname.length > 2 &&
+        this.form.lastname !== '' &&
+        this.form.lastname.length > 1
+      )
+    },
+    emailFilled() {
+      return this.form.email !== ''
+    },
+    disabled() {
+      return !(this.namesFilled && this.emailFilled && this.form.agree && !!this.language)
+    },
+  },
+}
+</script>