Resolve conflicts

package.json

@@ -20,6 +20,7 @@
     "@quasar/extras": "^1.13.5",
     "@types/katex": "^0.14.0",
     "@types/uuid": "^8.3.4",
+    "@types/validator": "^13.7.2",
     "@vuetify/vite-plugin": "1.0.0-alpha.10",
     "chart.js": "^3.7.1",
     "dependency-graph": "^0.11.0",
@@ -28,6 +29,7 @@
     "mathjs": "^10.4.3",
     "quasar": "^2.6.6",
     "uuid": "^8.3.2",
+    "validator": "^13.7.0",
     "vue": "^3.2.25",
     "vue-chart-3": "^3.1.8",
     "vue-router": "^4.0.14",

pnpm-lock.yaml

@@ -7,6 +7,7 @@ specifiers:
   '@quasar/vite-plugin': ^1.0.9
   '@types/katex': ^0.14.0
   '@types/uuid': ^8.3.4
+  '@types/validator': ^13.7.2
   '@typescript-eslint/eslint-plugin': ^5.18.0
   '@typescript-eslint/parser': ^5.18.0
   '@vitejs/plugin-vue': ^2.3.1
@@ -22,6 +23,7 @@ specifiers:
   sass: 1.32.0
   typescript: ^4.5.4
   uuid: ^8.3.2
+  validator: ^13.7.0
   vite: ^2.9.0
   vue: ^3.2.25
   vue-chart-3: ^3.1.8
@@ -34,6 +36,7 @@ dependencies:
   '@quasar/extras': 1.13.5
   '@types/katex': 0.14.0
   '@types/uuid': 8.3.4
+  '@types/validator': 13.7.2
   '@vuetify/vite-plugin': 1.0.0-alpha.10_vite@2.9.1+vuetify@3.0.0-beta.0
   chart.js: 3.7.1
   dependency-graph: 0.11.0
@@ -42,6 +45,7 @@ dependencies:
   mathjs: 10.4.3
   quasar: 2.6.6
   uuid: 8.3.2
+  validator: 13.7.0
   vue: 3.2.31
   vue-chart-3: 3.1.8_chart.js@3.7.1+vue@3.2.31
   vue-router: 4.0.14_vue@3.2.31
@@ -393,6 +397,10 @@ packages:
     resolution: {integrity: sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==}
     dev: false
 
+  /@types/validator/13.7.2:
+    resolution: {integrity: sha512-KFcchQ3h0OPQgFirBRPZr5F/sVjxZsOrQHedj3zi8AH3Zv/hOLx2OLR4hxR5HcfoU+33n69ZuOfzthKVdMoTiw==}
+    dev: false
+
   /@types/vfile-message/2.0.0:
     resolution: {integrity: sha512-GpTIuDpb9u4zIO165fUy9+fXcULdD8HFRNli04GehoMVbeNq7D6OBnqSmg3lxZnC+UvgUhEWKxdKiwYUkGltIw==}
     deprecated: This is a stub types definition. vfile-message provides its own type definitions, so you do not need this installed.
@@ -3761,6 +3769,11 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
+  /validator/13.7.0:
+    resolution: {integrity: sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw==}
+    engines: {node: '>= 0.10'}
+    dev: false
+
   /vfile-message/1.1.1:
     resolution: {integrity: sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==}
     dependencies:

src/App.vue

@@ -1,14 +1,55 @@
 <script setup lang="ts">
-import Home from "./pages/Login.vue";
+import Home from "./pages/Home.vue";
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import HelloWorld from "./components/HelloWorld.vue";
 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";
+import { Dark } from "quasar";
 
 (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: "/" });
+};
+Dark.set(true)
+
 </script>
 
 <template>
@@ -16,18 +57,22 @@ import { ref } from "vue";
     <q-header elevated class="bg-primary text-white" height-hint="98">
       <q-toolbar>
         <q-toolbar-title>
-          <q-avatar>
+          <q-avatar size="50px">
-            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
+            <img src="./assets/l2.svg" />
           </q-avatar>
-          Title
+          <span style="font-family: 'Cinzel Decorative', cursive;">
+            Crystal Math Worktable
+          </span>
+          <q-tab v-if="status" @click="logout()" label="Logout" />
+
         </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-tabs> -->
     </q-header>
 
     <q-page-container style="display: flex;padding-top: 20px;">
@@ -37,12 +82,19 @@ import { ref } from "vue";
 </template>
 
 <style>
+@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap");
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
+  color: #4484c4;
   margin-top: 60px;
 }
+.titleBar {
+  font-family: "Cinzel Decorative";
+}
+
+
 </style>

src/assets/l2.svg

@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 210 297"
+   version="1.1"
+   id="svg13372"
+   inkscape:version="1.2-beta (1b65182ce9, 2022-04-05)"
+   sodipodi:docname="l2.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview13374"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.51843089"
+     inkscape:cx="-180.35191"
+     inkscape:cy="555.52245"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     inkscape:window-x="-7"
+     inkscape:window-y="-7"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer2">
+    <inkscape:grid
+       type="xygrid"
+       id="grid59924" />
+  </sodipodi:namedview>
+  <defs
+     id="defs13369" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       inkscape:groupmode="layer"
+       id="layer2"
+       inkscape:label="Text"
+       transform="matrix(0.26458333,0,0,0.26458333,10.166581,13.777983)"
+       style="fill:#550000">
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:969.291px;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative Bold';fill:#ffffff;stroke:#ffffff;stroke-width:0;stroke-miterlimit:4.8;stroke-dasharray:none;stroke-opacity:1"
+         x="-37.659836"
+         y="831.96069"
+         id="text6305"
+         transform="scale(0.96764101,1.0334411)"><tspan
+           sodipodi:role="line"
+           id="tspan6303"
+           x="-37.659836"
+           y="831.96069"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:969.291px;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative';fill:#ffffff;stroke-width:0;stroke:#ffffff;stroke-opacity:1;stroke-dasharray:none">C</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:463.256px;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative';fill:#ffffff;stroke:#ffffff;stroke-width:0;stroke-miterlimit:4.8;stroke-dasharray:none;stroke-opacity:1"
+         x="120.35316"
+         y="634.82605"
+         id="text6413"
+         transform="scale(0.97653789,1.0240258)"><tspan
+           sodipodi:role="line"
+           id="tspan6411"
+           x="120.35316"
+           y="634.82605"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Cinzel Decorative';-inkscape-font-specification:'Cinzel Decorative Bold';fill:#ffffff;stroke-width:0;stroke:#ffffff;stroke-opacity:1;stroke-dasharray:none">M</tspan></text>
+    </g>
+  </g>
+</svg>

src/components/Login.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+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 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);
+}
+
+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-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

@@ -12,7 +12,7 @@ import router from './router'
                     App UI
 --------------------------------------------------
 */
-import { Quasar } from 'quasar'
+import { Dark, Quasar  } from 'quasar'
 
 // Import icon libraries
 import '@quasar/extras/roboto-font-latin-ext/roboto-font-latin-ext.css'
@@ -20,8 +20,8 @@ import '@quasar/extras/material-icons/material-icons.css'
 import '@quasar/extras/fontawesome-v6/fontawesome-v6.css'
 
 // A few examples for animations from Animate.css:
-// import @quasar/extras/animate/fadeIn.css
+import '@quasar/extras/animate/fadeInUp.css'
-// import @quasar/extras/animate/fadeOut.css
+import '@quasar/extras/animate/fadeOutUp.css'
 
 // Import Quasar css
 import 'quasar/src/css/index.sass'
@@ -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'
@@ -47,16 +46,22 @@ import App from './App.vue'
 const app = createApp(App)
 
 app.use(Quasar, {
-    plugins: {}, // import Quasar plugins and add here
+    plugins: {Dark}, // import Quasar plugins and add here
-})
+    config: {
+        brand: {
+            primary: '#553564',
+            secondary: '#c1eeff',
+            accent: '#9C27B0',
 
-app.use(
+            dark: '#1d1d1d',
-    createAuth0({
+
-        domain: 'dev-ge84r-eu.us.auth0.com',
+            positive: '#21BA45',
-        client_id: 'zHjZGg1uPws0DkQg5bRdKcDX8m6AuTZl', // eslint-disable-line camelcase
+            negative: '#C10015',
-        redirect_uri: window.location.origin, // eslint-disable-line camelcase
+            info: '#31CCEC',
-    }),
+            warning: '#F2C037',
-)
+        },
+    },
+})
 
 app.use(router)
 

src/pages/Editor.vue

@@ -8,11 +8,13 @@ import Statement from '../components/Statement.vue'
 import VarDeclEditor from './VarDeclEditor.vue'
 import ExpressionEditor from './ExpressionEditor.vue'
 import TextBox from '../components/TextBox.vue'
-import {RichTextBox} from '../support/types'
-import { stepX, stepY } from '../support/const'
 import FunctionEditor from '../components/FunctionEditor.vue'
 import RangeChart from '../components/RangeChart.vue'
 import RangeChartEditor from './RangeChartEditor.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[]>([]);
@@ -20,6 +22,9 @@ const evaluation = ref<EvaluationResult | undefined>();
 const statementsKey = ref<string>(uuidv4());
 const leftDrawerOpen = ref(false);
 
+
+
+
 const variableListingColumns = [
   {
     name: 'name',
@@ -34,6 +39,7 @@ const variableListingColumns = [
   },
 ]
 
+
 const stmOnControlledDragStop = (stmt: MathStatement) => (e: { event: MouseEvent, data: { x: number, y: number } }) => {
   console.log(e)
   console.log("moved stm5", stmt)
@@ -132,7 +138,9 @@ const updateStatements = () => {
   statementsKey.value = uuidv4()
 };
 
-onMounted(updateStatements)
+onMounted(() => {
+  updateStatements()
+})
 
 const saveNewVariable = (stmt: MathStatement) => {
   math.addStatement(stmt)
@@ -247,6 +255,31 @@ const removeRichTextBox = (id: number) => {
   console.log(richTextStatements.value[id]);
   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>
@@ -258,13 +291,13 @@ const removeRichTextBox = (id: number) => {
         <q-toolbar-title>
           <q-avatar>
             <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
-          </q-avatar>
+          </q-avatar>Title
-          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>
 
@@ -284,9 +317,7 @@ const removeRichTextBox = (id: number) => {
           >
             <template v-slot:body="props">
               <q-tr :props="props">
-                <q-td key="name" :props="props">
+                <q-td key="name" :props="props">{{ props.row.name }}</q-td>
-                  {{ props.row.name }}
-                </q-td>
                 <q-td key="value" :props="props">
                   <div v-html="props.row.value"></div>
                 </q-td>
@@ -327,7 +358,7 @@ const removeRichTextBox = (id: number) => {
 
       <span v-for="(chartBox, index) in chartBoxes" style="display: flex">
         <RangeChart
-          :fn="math.getFunctionByName(chartBox.fnName)"
+          :fn="math.getFunctionByNameOrFail(chartBox.fnName)"
           :key="chartBoxKey"
           :value="chartBox"
           v-on:move="(x, y) => moveChartBox(index, x, y)"
@@ -364,30 +395,19 @@ const removeRichTextBox = (id: number) => {
       </q-dialog>
 
       <q-dialog v-model="editExpressionModalOpen">
-        <ExpressionEditor
+        <ExpressionEditor :statement="editingStatement" v-on:save="() => finishEditStatement()" />
-          :statement="editingStatement"
-          v-on:save="() => finishEditStatement()"
-        />
       </q-dialog>
 
       <q-dialog v-model="editVarDeclModalOpen">
-        <VarDeclEditor
+        <VarDeclEditor :statement="editingStatement" v-on:save="() => finishEditStatement()" />
-          :statement="editingStatement"
-          v-on:save="() => finishEditStatement()"
-        />
       </q-dialog>
 
       <q-dialog v-model="newFunctionModalOpen">
-        <FunctionEditor
+        <FunctionEditor v-on:save="(s) => saveNewFunction(s)" />
-          v-on:save="(s) => saveNewFunction(s)"
-        />
       </q-dialog>
 
       <q-dialog v-model="editFunctionModalOpen">
-        <FunctionEditor
+        <FunctionEditor :statement="editingStatement" v-on:save="() => finishEditStatement()" />
-          :statement="editingStatement"
-          v-on:save="() => finishEditStatement()"
-        />
       </q-dialog>
 
       <q-dialog v-model="newChartModalOpen">
@@ -446,12 +466,7 @@ const removeRichTextBox = (id: number) => {
           <q-editor v-model="richEditExpression" min-height="5rem" />
           <q-card-actions align="right" class="text-primary">
             <q-btn flat label="Cancel" v-close-popup></q-btn>
-            <q-btn
+            <q-btn flat label="Save" @click="richUpdateValue" v-close-popup></q-btn>
-              flat
-              label="Save"
-              @click="richUpdateValue"
-              v-close-popup
-            ></q-btn>
           </q-card-actions>
         </q-card>
       </q-dialog>

src/pages/Home.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import Login from '../components/Login.vue'
+
+defineProps<{ msg: string }>()
+
+const show = ref<boolean>(true)
+</script>
+
+<template>
+  <q-layout>
+    <h1>{{ msg }}</h1>
+    <transition
+      appear
+      enter-active-class="animated fadeInUp"
+      leave-active-class="animated fadeOutUp"
+      mode="out-in"
+    >
+      <q-btn color="primary" text-color="white" @click="show = !show" v-if="show">Start</q-btn>
+      <div class="login" v-else>
+        <q-card square bordered class="q-pa-lg shadow-1">
+          <Login />
+        </q-card>
+      </div>
+    </transition>
+  </q-layout>
+</template>
+
+<style scoped>
+button {
+  background-color: #4484c4;
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 32px;
+  border-radius: 5px;
+}
+
+.login {
+  max-width: 30em;
+  margin: auto;
+}
+</style>

src/pages/Login.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useAuth0 } from '@auth0/auth0-vue';
-
-defineProps<{ msg: string }>()
-
-const { loginWithRedirect } = useAuth0();
-
-const login = () => {
-    loginWithRedirect();
-}
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <button @click="login">Log in</button>
-  
-</template>
-
-<style scoped>
-button {
-  background-color: #215b8a; /* Green */
-  border: none;
-  color: white;
-  padding: 15px 32px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 32px;
-  border-radius: 5px;
-}
-</style>

src/pages/Scratch.vue

@@ -5,6 +5,8 @@
 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')
@@ -35,6 +37,7 @@
     key.value = uuidv4()
   }
 }
+
 </script>
 
 <template>

src/quasar-variables.sass

@@ -1,8 +1,10 @@
-$primary   : #1976D2
+$primary   : #553564
 $secondary : #26A69A
 $accent    : #9C27B0
 
 $dark      : #1D1D1D
+// $dark-page: #333333;
+
 
 $positive  : #21BA45
 $negative  : #C10015

src/router.ts

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import Home from './pages/Login.vue'
+import Home from './pages/Home.vue'
 
 const routes = [
     {

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
+}

src/support/page.ts

@@ -138,6 +138,15 @@ export class MathPage {
         }
     }
 
+    /** Look up a function statement by name, if it exists. */
+    getFunctionByNameOrFail(name: string): MathStatement {
+        const fn = this.getFunctionByName(name)
+        if ( !fn ) {
+            throw new Error('Unable to find function with name: ' + name)
+        }
+        return fn
+    }
+
     /** Evaluate the current state of the page and get the result. */
     evaluate(): EvaluationResult {
         const evaluations: Record<StatementID, any> = {}