From 00a752173df80d7097071a72e625cf13f9e1eb67 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Tue, 18 Apr 2023 15:24:41 +1000
Subject: [PATCH] added new formcard

---
 resources/js/components/SMFormCard.vue |  8 ++++-
 resources/js/views/Login.vue           |  2 +-
 resources/js/views/Register.vue        | 48 ++++++++++++++------------
 3 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/resources/js/components/SMFormCard.vue b/resources/js/components/SMFormCard.vue
index a3f061b..f7fe9de 100644
--- a/resources/js/components/SMFormCard.vue
+++ b/resources/js/components/SMFormCard.vue
@@ -10,6 +10,11 @@
         <div v-if="slots.footer" class="footer">
             <slot name="footer"></slot>
         </div>
+        <div
+            v-if="slots['footer-space-between']"
+            class="footer justify-content-space-between">
+            <slot name="footer-space-between"></slot>
+        </div>
     </div>
 </template>
 
@@ -44,9 +49,10 @@ const slots = useSlots();
     }
 
     .footer {
+        margin-top: 32px;
         display: flex;
         align-items: center;
-        justify-content: space-between;
+        justify-content: center;
     }
 
     h1,
diff --git a/resources/js/views/Login.vue b/resources/js/views/Login.vue
index 3bac378..a74b074 100644
--- a/resources/js/views/Login.vue
+++ b/resources/js/views/Login.vue
@@ -20,7 +20,7 @@
                         >
                     </SMInput>
                 </template>
-                <template #footer>
+                <template #footer-space-between>
                     <small>
                         <span class="pr-1">Need an account?</span
                         ><router-link to="/register">Register</router-link>
diff --git a/resources/js/views/Register.vue b/resources/js/views/Register.vue
index d7f4d29..1f433fa 100644
--- a/resources/js/views/Register.vue
+++ b/resources/js/views/Register.vue
@@ -1,9 +1,13 @@
 <template>
-    <SMContainer>
-        <SMForm v-model="form" @submit="handleSubmit">
-            <SMCard class="form-wide">
+    <SMContainer :center="true">
+        <SMForm v-if="!userRegistered" v-model="form" @submit="handleSubmit">
+            <SMFormCard full>
                 <template #header>
                     <h2>Register</h2>
+                    <p>
+                        Create an account to access STEMMechanics courses and
+                        features.
+                    </p>
                 </template>
                 <template #body>
                     <SMRow>
@@ -35,40 +39,38 @@
                         </SMColumn>
                     </SMRow>
                 </template>
-                <template #footer>
+                <template #footer-space-between>
                     <div class="small">
                         <span class="pr-1">Already have an account?</span
                         ><router-link to="/login">Log in</router-link>
                     </div>
                     <SMButton type="submit" label="Register" />
                 </template>
-            </SMCard>
+            </SMFormCard>
         </SMForm>
-        <!-- </template>
-        <template v-else>
-            <h1>Email Sent!</h1>
-            <p class="text-center">
-                An email has been sent to you to confirm your details and to
-                finish registering your account.
-            </p>
-            <SMFormFooter>
-                <template #right>
-                    <SMButton :to="{ name: 'home' }" label="Home" />
-                </template>
-            </SMFormFooter>
-        </template>
-    </SMCard> -->
+        <SMFormCard v-else>
+            <template #header>
+                <h2>Email Sent!</h2>
+            </template>
+            <template #body>
+                <p>
+                    An email has been sent to you to confirm your details and to
+                    finish registering your account.
+                </p>
+            </template>
+            <template #footer>
+                <SMButton type="primary" :to="{ name: 'home' }" label="Home" />
+            </template>
+        </SMFormCard>
     </SMContainer>
 </template>
 
 <script setup lang="ts">
 import { reactive, ref } from "vue";
 import { useReCaptcha } from "vue-recaptcha-v3";
-import SMCard from "../components/SMCard.vue";
 import SMButton from "../components/SMButton.vue";
 import SMFormCard from "../components/SMFormCard.vue";
 import SMForm from "../components/SMForm.vue";
-import SMFormFooter from "../components/SMFormFooter.vue";
 import SMInput from "../depreciated/SMInput-old.vue";
 import { api } from "../helpers/api";
 import { Form, FormControl } from "../helpers/form";
@@ -114,7 +116,7 @@ const checkUsername = async (value: string): Promise<boolean | string> => {
     }
 };
 
-const formDone = ref(false);
+const userRegistered = ref(false);
 const lastUsernameCheck = ref("");
 let form = reactive(
     Form({
@@ -147,7 +149,7 @@ const handleSubmit = async () => {
             },
         });
 
-        formDone.value = true;
+        userRegistered.value = true;
     } catch (error) {
         form.apiErrors(error);
     } finally {