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

src/App.vue

@@ -4,10 +4,51 @@ import Home from "./pages/Home.vue";
 // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
 import { MathStatement } from "./support/parse";
 import { MathPage } from "./support/page";
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
+import { checkLoggedIn, loggedOut, loggedIn } from "./support/auth";
+import router from "./router";
 
 (window as any).Stmt = MathStatement;
 (window as any).Pg = MathPage;
+
+const status = ref(checkLoggedIn())
+
+; (async () => {
+    const response = await fetch('/api/login/status/', {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+      },
+    })
+    const res = (await response.json()) as unknown as any
+    if (res.data.hasUser) {
+      loggedIn()
+    }
+    status.value = checkLoggedIn()
+  })()
+
+onMounted(() => {
+  status.value = checkLoggedIn()
+  console.log(status.value)
+})
+
+router.afterEach(() => {
+  status.value = checkLoggedIn()
+  console.log(status.value)
+})
+
+const logout = async () => {
+  const response = await fetch('/api/logout/', {
+    method: 'POST',
+    headers: {
+      'Accept': 'application/json',
+    },
+  })
+  loggedOut()
+  status.value = checkLoggedIn()
+  router.push({path: '/'})
+}
+
 </script>
 
 <template>
@@ -17,15 +58,14 @@ import { ref } from "vue";
         <q-toolbar-title>
           <q-avatar>
             <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
-          </q-avatar>
-          Title
+          </q-avatar>Title
         </q-toolbar-title>
       </q-toolbar>
 
-      <q-tabs align="left">
+      <q-tabs>
         <q-route-tab to="/Scratch" label="Scratch" />
         <q-route-tab to="/Editor" label="Editor" />
-
+        <q-tab v-if="status" @click="logout()" label="Logout" />
       </q-tabs>
     </q-header>
 

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>
 

src/main.ts

@@ -32,7 +32,6 @@ import 'quasar/src/css/index.sass'
 --------------------------------------------------
 */
 import { DraggablePlugin } from '@braks/revue-draggable'
-import { createAuth0 } from '@auth0/auth0-vue'
 
 import 'katex/dist/katex.min.css'
 import 'katex/dist/contrib/auto-render.min'
@@ -50,14 +49,6 @@ app.use(Quasar, {
     plugins: {}, // import Quasar plugins and add here
 })
 
-app.use(
-    createAuth0({
-        domain: 'dev-ge84r-eu.us.auth0.com',
-        client_id: 'zHjZGg1uPws0DkQg5bRdKcDX8m6AuTZl', // eslint-disable-line camelcase
-        redirect_uri: window.location.origin + '/api/login/callback', // eslint-disable-line camelcase
-    }),
-)
-
 app.use(router)
 
 app.use(DraggablePlugin)

src/pages/Editor.vue

@@ -12,6 +12,8 @@ import ExpressionEditor from './ExpressionEditor.vue'
 import TextBox from '../components/TextBox.vue'
 import {RichTextBox} from "../support/types";
 import { stepX, stepY } from "../support/const";
+import { checkLoggedIn, loggedOut } from '../support/auth'
+import router from '../router'
 
 const math = new MathPage(uuidv4());
 const statements = ref<MathStatement[]>([]);
@@ -78,7 +80,9 @@ const updateStatements = () => {
   statementsKey.value = uuidv4();
 };
 
-onMounted(updateStatements)
+onMounted(() => {
+  updateStatements() 
+  })
 
 const saveNewVariable = (stmt: MathStatement) => {
   math.addStatement(stmt);
@@ -123,6 +127,31 @@ function richUpdateValue() {
 const removeRichTextBox = (id: number) => {
   richTextStatements.value.splice(id, 1);
 };
+
+/*
+  Auth
+*/
+const status = ref(checkLoggedIn())
+const logout = async () => {
+  const response = await fetch('/api/logout/', {
+    method: 'POST',
+    headers: {
+      'Accept': 'application/json',
+    },
+  })
+  loggedOut()
+  status.value = checkLoggedIn()
+  router.push('/')
+}
+
+onMounted(() => {
+  status.value = checkLoggedIn()
+  console.log(status.value)
+  if (status.value == false ) {
+    router.push({path: '/'})
+  }
+})
+
 </script>
 
 <template>
@@ -138,9 +167,10 @@ const removeRichTextBox = (id: number) => {
           Title
         </q-toolbar-title>
       </q-toolbar>
-      <q-tabs align="left">
+      <q-tabs>
         <q-route-tab to="/Scratch" label="Scratch" />
         <q-route-tab to="/Editor" label="Editor" />
+        <q-tab v-if="status" @click="logout()" label="Logout" />
       </q-tabs>
     </q-header>
 

src/pages/Scratch.vue

@@ -1,40 +1,43 @@
 <script setup lang="ts">
-  import {MathPage} from '../support/page'
-  import {v4 as uuidv4} from 'uuid'
-  import Statement from '../components/Statement.vue'
-  import {MathStatement} from '../support/parse'
-  import {onMounted, ref} from 'vue'
-  import Katex from '../components/Katex.vue'
+import { MathPage } from '../support/page'
+import { v4 as uuidv4 } from 'uuid'
+import Statement from '../components/Statement.vue'
+import { MathStatement } from '../support/parse'
+import { onMounted, ref } from 'vue'
+import Katex from '../components/Katex.vue'
+import { checkLoggedIn, loggedOut } from '../support/auth'
+import router from '../router'
 
-  const page = new MathPage(uuidv4())
-  const stmt1Id = page.addRaw('x = y+3/4')
-  const stmt2Id = page.addRaw('y = 9')
-  const evaluation = page.evaluate()
+const page = new MathPage(uuidv4())
+const stmt1Id = page.addRaw('x = y+3/4')
+const stmt2Id = page.addRaw('y = 9')
+const evaluation = page.evaluate()
 
-  const stmt = page.getStatement(stmt1Id)
-  console.log({page, stmt1Id})
+const stmt = page.getStatement(stmt1Id)
+console.log({ page, stmt1Id })
 
-  let editModal = ref(false)
-  let editExpression = ref('')
-  let editPreview = ref(MathStatement.temp(''))
-  let activeStatement!: MathStatement
+let editModal = ref(false)
+let editExpression = ref('')
+let editPreview = ref(MathStatement.temp(''))
+let activeStatement!: MathStatement
 
-  const editStatement = (stmt: MathStatement) => {
-    console.log('editing statement', stmt, editModal)
-    activeStatement = stmt
-    editPreview.value = MathStatement.temp(stmt.raw)
-    editModal.value = true
-    editExpression.value = stmt.raw
+const editStatement = (stmt: MathStatement) => {
+  console.log('editing statement', stmt, editModal)
+  activeStatement = stmt
+  editPreview.value = MathStatement.temp(stmt.raw)
+  editModal.value = true
+  editExpression.value = stmt.raw
+}
+
+let key = ref(uuidv4())
+const updateEditRender = () => {
+  const previewStmt = MathStatement.temp(editExpression.value)
+  if (previewStmt.isValid()) {
+    editPreview.value = MathStatement.temp(editExpression.value)
+    key.value = uuidv4()
   }
+}
 
-  let key = ref(uuidv4())
-  const updateEditRender = () => {
-    const previewStmt = MathStatement.temp(editExpression.value)
-    if ( previewStmt.isValid() ) {
-      editPreview.value = MathStatement.temp(editExpression.value)
-      key.value = uuidv4()
-    }
-  }
 </script>
 
 <template>
@@ -43,7 +46,7 @@
     <q-card>
       <q-card-section>
         <div style="display: flex; justify-content: center">
-          <Katex :statement="editPreview" :key="key"/>
+          <Katex :statement="editPreview" :key="key" />
         </div>
       </q-card-section>
       <q-card-section>

src/support/auth.ts

@@ -0,0 +1,10 @@
+let isLoggedIn = false
+export const checkLoggedIn = () => {
+    return isLoggedIn
+}
+export const loggedIn = () => {
+    isLoggedIn = true
+}
+export const loggedOut = () => {
+    isLoggedIn = false
+}