Reformatting, removing auth0, add login status checks for redirects and logout button visibility, and fixing api call parameters

src/components/Login.vue

@@ -1,47 +1,126 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import validator from 'validator'
+import { checkLoggedIn, loggedIn } from '../support/auth'
+import router from '../router'
 const name = ref<string>('')
 const email = ref<string>('')
 const password = ref<string>('')
 const passwordConfirm = ref<string>('')
 const btnDisabled = ref<boolean>(true)
-const isRegistration =ref<boolean>(false)
+const isRegistration = ref<boolean>(false)
+const error = ref<string>('')
 
 const checkForm = () => {
-    btnDisabled.value = 
-    (isRegistration.value 
-    && (password.value != passwordConfirm.value
-    || name.value.length == 0))
-    || password.value.length < 8
-    || email.value.length == 0
-    || !validator.isEmail(email.value);
+    btnDisabled.value =
+        (isRegistration.value
+            && (password.value != passwordConfirm.value
+                || name.value.length == 0))
+        || password.value.length < 8
+        || email.value.length == 0
+        || !validator.isEmail(email.value);
 }
+
+const submit = async () => {
+    if (isRegistration.value == true) {
+        error.value = await register()
+    } else {
+        error.value = await login()
+    }
+}
+
+const login = async () => {
+    const response = await fetch('/api/login/', {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ email: email.value, password: password.value })
+    })
+
+    const user = (await response.json()) as unknown as any
+    if (!user.success) {
+        return user.message
+    }
+    loggedIn()
+    router.push({ path: '/Editor'})
+}
+
+const register = async () => {
+    const response = await fetch('/api/register', {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ name:name.value, email:email.value, password:password.value })
+    })
+    const user = (await response.json()) as unknown as any
+    if (!user.success) {
+        return user.message
+    }
+    loggedIn()
+    router.push({ path: '/Editor'})
+}
+
+onMounted(() => {
+    if ( checkLoggedIn() ) {
+        router.push({ path: '/Editor'})
+    }
+})
+
 </script>
 
 <template>
-    
-        <q-card-section v-if="!isRegistration">
-            <q-form class="q-gutter-md">
-                <q-input v-model="email" v-on:keyup="checkForm()" type="email" label="email" />
-                <q-input v-model="password" v-on:keyup="checkForm()" type="password" label="password" />
-            </q-form>
-        </q-card-section>
-        <q-card-section v-else>
-            <q-form class="q-gutter-md">
-                <q-input v-model="name" v-on:keyup="checkForm()" type="text" label="name" />
-                <q-input v-model="email" v-on:keyup="checkForm()" type="email" label="email" />
-                <q-input v-model="password" v-on:keyup="checkForm()" type="password" label="password" />
-                <q-input v-model="passwordConfirm" v-on:keyup="checkForm()" type="password" label="password confirmation" />
-
-            </q-form>
-        </q-card-section>
-        <q-card-actions class="q-px-md">
-            <q-btn unelevated color="primary" size="lg" :disable=btnDisabled class="full-width" :label="isRegistration? 'Register' : 'Login'" />
-        </q-card-actions>
-        <q-card-section class="text-center q-pa-none">
-            
-            <p class="text-grey-6">{{isRegistration? 'Have an account?' :'Not reigistered?'}} <a href="#" @click="isRegistration = !isRegistration; checkForm()">{{isRegistration? 'Login':'Created an Account'}}</a></p>
-        </q-card-section>
+    <q-card-section v-if="!isRegistration">
+        <q-form class="q-gutter-md">
+            <q-input v-model="email" v-on:keyup="checkForm()" type="email" label="email" />
+            <q-input v-model="password" v-on:keyup="checkForm()" type="password" label="password" />
+        </q-form>
+    </q-card-section>
+    <q-card-section v-else>
+        <q-form class="q-gutter-md">
+            <q-input v-model="name" v-on:keyup="checkForm()" type="text" label="name" />
+            <q-input v-model="email" v-on:keyup="checkForm()" type="email" label="email" />
+            <q-input v-model="password" v-on:keyup="checkForm()" type="password" label="password" />
+            <q-input
+                v-model="passwordConfirm"
+                v-on:keyup="checkForm()"
+                type="password"
+                label="password confirmation"
+            />
+        </q-form>
+    </q-card-section>
+    <q-card-section v-if="error">
+        <p class="error">
+            <b>{{ error }}</b>
+        </p>
+    </q-card-section>
+    <q-card-actions class="q-px-md">
+        <q-btn
+            unelevated
+            color="primary"
+            size="lg"
+            :disable="btnDisabled"
+            class="full-width"
+            :label="isRegistration ? 'Register' : 'Login'"
+            @click="submit()"
+        />
+    </q-card-actions>
+    <q-card-section class="text-center q-pa-none">
+        <p class="text-grey-6">
+            {{ isRegistration ? 'Have an account?' : 'Not reigistered?' }}
+            <a
+                href="#"
+                @click="isRegistration = !isRegistration; checkForm()"
+            >{{ isRegistration ? 'Login' : 'Created an Account' }}</a>
+        </p>
+    </q-card-section>
 </template>
+<style>
+.error {
+    color: red;
+}
+</style>