From 0b215954bace5590f6619294172d270e4e46db1f Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 29 Mar 2022 17:02:57 +0200
Subject: [PATCH] add slots AuthItem, add templates auth components

---
 frontend/src/components/Auth/AuthItem.vue | 16 +++++++
 frontend/src/layouts/AuthTemplate.vue     | 55 +++++++++++++++++------
 2 files changed, 58 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/components/Auth/AuthItem.vue

diff --git a/frontend/src/components/Auth/AuthItem.vue b/frontend/src/components/Auth/AuthItem.vue
new file mode 100644
index 000000000..53bc52093
--- /dev/null
+++ b/frontend/src/components/Auth/AuthItem.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <slot :name="type"></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'AuthItem',
+  props: {
+    type: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>
diff --git a/frontend/src/layouts/AuthTemplate.vue b/frontend/src/layouts/AuthTemplate.vue
index c3bc39f92..9340ed4dd 100644
--- a/frontend/src/layouts/AuthTemplate.vue
+++ b/frontend/src/layouts/AuthTemplate.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="auth-template h-100 w-100">
-    <auth-header />
-    <b-row class="auth-template-">
+  <div class="auth-template">
+    <auth-header @setAuthItem="setAuthItem" />
+    <b-row class="auth-template-content">
       <b-col lg="6" md="none" sm="none">
         <div class="bg-img-box d-none d-lg-block">
           <!-- <b-img class="bg-img" src="/img/template/Foto_01.jpg"></b-img>-->
@@ -14,22 +14,33 @@
         </div>
       </b-col>
       <b-col lg="6" md="12" sm="12">
-        <auth-login />
-        <br />
-        <br />
-        <auth-register />
-        <br />
-        <br />
-        <auth-forgot-password />
-        <br />
-        <br />
-        <auth-reset-password />
+        <auth-item :type="itemType">
+          <template #AUTH_LOGIN>
+            <auth-login @setAuthItem="setAuthItem" />
+          </template>
+          <br />
+          <br />
+          <template #AUTH_REGISTER>
+            <auth-register :itemType="itemType" />
+          </template>
+          <br />
+          <br />
+          <template #AUTH_FORGOT_PASSWORD>
+            <auth-forgot-password :itemType="itemType" />
+          </template>
+          <br />
+          <br />
+          <template #AUTH_RESET_PASSWORD>
+            <auth-reset-password :itemType="itemType" />
+          </template>
+        </auth-item>
       </b-col>
     </b-row>
     <!-- <auth-layout-gdd />-->
   </div>
 </template>
 <script>
+import AuthItem from '@/components/Auth/AuthItem'
 import AuthHeader from '@/components/Auth/Header.vue'
 import AuthLogin from '@/components/Auth/Login.vue'
 import AuthRegister from '@/components/Auth/Register.vue'
@@ -41,6 +52,7 @@ import AuthResetPassword from '@/components/Auth/ResetPassword.vue'
 export default {
   name: 'AuthTemplate',
   components: {
+    AuthItem,
     AuthHeader,
     AuthLogin,
     AuthRegister,
@@ -48,9 +60,26 @@ export default {
     AuthResetPassword,
     // AuthLayoutGdd,
   },
+  data() {
+    return {
+      itemType: 'AUTH_LOGIN',
+    }
+  },
+  methods: {
+    setAuthItem(item) {
+      // console.log('item', item)
+      this.itemType = item
+    },
+  },
 }
 </script>
 <style lang="scss">
+.auth-template {
+  height: 92%;
+}
+.auth-template-content {
+  height: 100%;
+}
 .auth-header {
   z-index: 1000;
 }