Merge branch 'main' of https://github.com/hackku22/Mathy

package.json

@@ -20,14 +20,18 @@
     "@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",
     "install": "^0.13.0",
     "katex": "^0.15.3",
     "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",
     "vuetify": "3.0.0-beta.0"
   },

pnpm-lock.yaml

@@ -7,11 +7,13 @@ 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
   '@volar/vue-language-service': ^0.33.9
   '@vuetify/vite-plugin': 1.0.0-alpha.10
+  chart.js: ^3.7.1
   dependency-graph: ^0.11.0
   eslint: ^8.13.0
   install: ^0.13.0
@@ -21,8 +23,10 @@ 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
   vue-router: ^4.0.14
   vue-tsc: ^0.33.9
   vuetify: 3.0.0-beta.0
@@ -32,14 +36,18 @@ 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
   install: 0.13.0
   katex: 0.15.3
   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
   vuetify: 3.0.0-beta.0_vue@3.2.31
 
@@ -389,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.
@@ -1069,6 +1081,10 @@ packages:
       is-regex: 1.1.4
     dev: true
 
+  /chart.js/3.7.1:
+    resolution: {integrity: sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==}
+    dev: false
+
   /chokidar/3.5.3:
     resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
     engines: {node: '>= 8.10.0'}
@@ -1214,6 +1230,10 @@ packages:
     resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
     dev: false
 
+  /csstype/3.0.11:
+    resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==}
+    dev: false
+
   /currently-unhandled/0.4.1:
     resolution: {integrity: sha1-mI3zP+qxke95mmE2nddsF635V+o=}
     engines: {node: '>=0.10.0'}
@@ -2447,6 +2467,10 @@ packages:
     dependencies:
       p-locate: 4.1.0
 
+  /lodash-es/4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
+
   /lodash.iteratee/4.7.0:
     resolution: {integrity: sha1-vkF32yiajMw8CZDx2ya1si/BVUw=}
     dev: true
@@ -3745,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:
@@ -3907,6 +3936,20 @@ packages:
     resolution: {integrity: sha512-EcswR2S8bpR7fD0YPeS7r2xXExrScVMxg4MedACaWHEtx9ftCF/qHG1xGkolzTPcEmjTavCQgbVzHUIdTMzFGA==}
     dev: true
 
+  /vue-chart-3/3.1.8_chart.js@3.7.1+vue@3.2.31:
+    resolution: {integrity: sha512-zX5ajjQi/PocEqLETlej3vp92q/tnI/Fvu2RVb++Kap8qOrXu6PXCpodi73BFrWzEGZIAnqoUxC3OIkRWD657g==}
+    peerDependencies:
+      chart.js: '=> ^3.1.0'
+      vue: '>= 3'
+    dependencies:
+      '@vue/runtime-core': 3.2.31
+      '@vue/runtime-dom': 3.2.31
+      chart.js: 3.7.1
+      csstype: 3.0.11
+      lodash-es: 4.17.21
+      vue: 3.2.31
+    dev: false
+
   /vue-demi/0.12.5_vue@3.2.31:
     resolution: {integrity: sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==}
     engines: {node: '>=12'}

src/App.vue

@@ -1,14 +1,54 @@
 <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";
 
 (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>
@@ -25,10 +65,10 @@ import { ref } from "vue";
         </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>
 
@@ -39,12 +79,17 @@ import { ref } from "vue";
 </template>
 
 <style>
+body {
+  margin-top: 0px;
+  height: 100%;
+  background: #1e2361;
+}
 #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;
 }
 </style>

src/components/FunctionEditor.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import {MathStatement} from '../support/parse'
+import {onMounted, ref} from 'vue'
+import {v4 as uuidv4} from 'uuid'
+import {StatementID} from '../support/types'
+import Katex from './Katex.vue'
+
+const props = defineProps<{
+  statement?: MathStatement,
+}>()
+
+const emit = defineEmits<{
+  (eventName: 'save', statement: MathStatement): void,
+}>()
+
+const functionPreview = ref(MathStatement.temp(''))
+let functionPreviewKey = ref(uuidv4())
+const functionError = ref<string|undefined>(undefined)
+const functionValue = ref('')
+
+const updateFunctionPreview = () => {
+  const previewStmt = MathStatement.temp(functionValue.value)
+  if ( previewStmt.isValid() ) {
+    functionPreview.value = MathStatement.temp(functionValue.value)
+    functionPreviewKey.value = uuidv4()
+  }
+}
+
+const validateFunction = () => {
+  if ( !functionValue.value ) {
+    return 'Missing function declaration'
+  }
+
+  const stmt = MathStatement.temp(functionValue.value)
+  if ( !stmt.isValid() || !stmt.isFunctionDeclaration() ) {
+    return 'Function definition is invalid'
+  }
+
+  if ( !stmt.isNotRecursive() ) {
+    return 'A function may not reference itself'
+  }
+}
+
+const saveFunction = () => {
+  functionError.value = validateFunction()
+  if ( functionError.value ) {
+    return
+  }
+
+  if ( props.statement ) {
+    props.statement.raw = functionValue.value
+    emit('save', props.statement)
+  } else {
+    emit('save', new MathStatement(
+        uuidv4() as StatementID,
+        functionValue.value
+    ))
+  }
+}
+
+onMounted(() => {
+  if ( props.statement ) {
+    functionValue.value = props.statement.raw
+    updateFunctionPreview()
+  }
+})
+</script>
+
+<template>
+  <q-card>
+    <q-card-section>
+      <div style="display: flex; justify-content: center">
+        <Katex
+          :key="functionPreviewKey"
+          :statement="functionPreview"
+        />
+      </div>
+    </q-card-section>
+    <q-card-section v-if="functionError">
+      <div style="color: darkred; font-weight: bold">{{ functionError }}</div>
+    </q-card-section>
+    <q-card-section>
+      <q-input
+        v-model="functionValue"
+        v-on:update:model-value="() => updateFunctionPreview()"
+        outlined
+        type="textarea"
+        autogrow
+        label="Value"
+      />
+    </q-card-section>
+    <q-card-actions align="right" class="text-primary">
+      <q-btn flat label="Cancel" v-close-popup></q-btn>
+      <q-btn flat label="Save" @click="() => saveFunction()"></q-btn>
+    </q-card-actions>
+  </q-card>
+</template>

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

@@ -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'
@@ -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, // eslint-disable-line camelcase
-    }),
-)
-
 app.use(router)
 
 app.use(DraggablePlugin)

src/pages/Editor.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
-import {onMounted, ref} from 'vue'
+import { onMounted, ref } from 'vue'
 import { v4 as uuidv4 } from 'uuid'
-import {MathPage} from '../support/page'
+import { MathPage } from '../support/page'
-import {MathStatement} from '../support/parse'
+import { MathStatement } from '../support/parse'
-import {EvaluationResult, hasOwnProperty} from '../support/types'
+import { EvaluationResult, hasOwnProperty } from '../support/types'
 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 FunctionEditor from '../components/FunctionEditor.vue'
+import { RichTextBox } from '../support/types'
 import { stepX, stepY } from '../support/const'
-import { cos } from 'mathjs'
+import { checkLoggedIn, loggedOut } from '../support/auth'
+import router from '../router'
 
 const math = new MathPage(uuidv4());
 const statements = ref<MathStatement[]>([]);
@@ -32,7 +35,7 @@ const variableListingColumns = [
   },
 ]
 
-const stmOnControlledDragStop = (stmt: MathStatement) => (e: {event: MouseEvent, data: {x: number, y: number}}) => {
+const stmOnControlledDragStop = (stmt: MathStatement) => (e: { event: MouseEvent, data: { x: number, y: number } }) => {
   console.log(e)
   console.log("moved stm5", stmt)
   const { x, y } = e.data;
@@ -41,23 +44,38 @@ const stmOnControlledDragStop = (stmt: MathStatement) => (e: {event: MouseEvent,
 }
 
 
-const variableListingRows = ref<({name: string, value: string})[]>([])
+const variableListingRows = ref<({ name: string, value: string })[]>([])
+
+const functionListingColumns = [
+  {
+    name: 'value',
+    field: 'value',
+    label: 'Function',
+  },
+]
+
+const functionListingRows = ref<({ name: string, value: string })[]>([])
 
 function toggleLeftDrawer() {
-  leftDrawerOpen.value = !leftDrawerOpen.value;
+  leftDrawerOpen.value = !leftDrawerOpen.value
 }
 
-const newVariableModalOpen = ref(false);
+const newVariableModalOpen = ref(false)
 const openNewVariableDeclModal = () => {
-  newVariableModalOpen.value = true;
+  newVariableModalOpen.value = true
 };
 
-const newExpressionModalOpen = ref(false);
+const newExpressionModalOpen = ref(false)
 const openNewExpressionModal = () => {
-  newExpressionModalOpen.value = true;
+  newExpressionModalOpen.value = true
 };
 
-const editingStatement = ref<MathStatement|undefined>()
+const newFunctionModalOpen = ref(false)
+const openNewFunctionModal = () => {
+  newFunctionModalOpen.value = true
+}
+
+const editingStatement = ref<MathStatement | undefined>()
 const editExpressionModalOpen = ref(false)
 const openEditExpressionModal = () => {
   editExpressionModalOpen.value = true
@@ -68,21 +86,27 @@ const openEditVarDeclModal = () => {
   editVarDeclModalOpen.value = true
 }
 
+const editFunctionModalOpen = ref(false)
+const openEditFunctionModal = () => {
+  editFunctionModalOpen.value = true
+}
+
 const updateStatements = () => {
   statements.value = math.getStatements();
   try {
     evaluation.value = math.evaluate()
-    const variableValues: ({name: string, value: string})[] = []
+    const variableValues: ({ name: string, value: string })[] = []
 
-    for ( const name in evaluation.value!.variables ) {
+    for (const name in evaluation.value!.variables) {
-      if ( !hasOwnProperty(evaluation.value!.variables, name) ) {
+      if (!hasOwnProperty(evaluation.value!.variables, name)) {
         continue
       }
 
       let value = String(evaluation.value!.variables[name] ?? '')
       try {
-        value = MathStatement.temp(value).toHTMLString()
+        const stmt = MathStatement.temp(value)
-      } catch (_) {}
+        value = stmt.toHTMLString()
+      } catch (_) { }
 
       variableValues.push({
         name,
@@ -91,32 +115,53 @@ const updateStatements = () => {
     }
 
     variableListingRows.value = variableValues
-  } catch (_) {
+
-    evaluation.value = undefined;
+    const functionValues: ({ name: string, value: string })[] = []
+    for (const stmt of math.functions()) {
+      const node = stmt.parse() as math.FunctionAssignmentNode
+      functionValues.push({
+        name: node.name,
+        value: stmt.toHTMLString(),
+      })
     }
-  statementsKey.value = uuidv4();
+
+    functionListingRows.value = functionValues
+  } catch (_) {
+    console.error(_)
+    evaluation.value = undefined
+  }
+  statementsKey.value = uuidv4()
 };
 
-onMounted(updateStatements)
+onMounted(() => {
+  updateStatements()
+})
 
 const saveNewVariable = (stmt: MathStatement) => {
-  math.addStatement(stmt);
+  math.addStatement(stmt)
-  newVariableModalOpen.value = false;
+  newVariableModalOpen.value = false
-  updateStatements();
+  updateStatements()
 };
 
 const saveNewExpression = (stmt: MathStatement) => {
-  math.addStatement(stmt);
+  math.addStatement(stmt)
-  newExpressionModalOpen.value = false;
+  newExpressionModalOpen.value = false
-  updateStatements();
+  updateStatements()
 };
 
+const saveNewFunction = (stmt: MathStatement) => {
+  math.addStatement(stmt)
+  newFunctionModalOpen.value = false
+  updateStatements()
+}
+
 const editStatement = (stmt: MathStatement) => {
   editingStatement.value = stmt
-  if ( stmt.isDeclaration() ) {
+  console.log('editStatement', stmt)
+  if (stmt.isFunctionDeclaration()) {
+    openEditFunctionModal()
+  } else if (stmt.isDeclaration()) {
     openEditVarDeclModal()
-  } else if ( stmt.isFunctionDeclaration() ) {
-
   } else {
     openEditExpressionModal()
   }
@@ -129,6 +174,8 @@ const removeStatement = (stmt: MathStatement) => {
 
 const finishEditStatement = () => {
   editExpressionModalOpen.value = false
+  editVarDeclModalOpen.value = false
+  editFunctionModalOpen.value = false
   updateStatements()
 }
 
@@ -137,28 +184,25 @@ const finishEditStatement = () => {
 */
 
 const makeNewRichTextBox = () => {
-  richTextStatements.value.push(new RichTextBox(""));
+  richTextStatements.value.push(new RichTextBox(''));
   richEditID.value = richTextStatements.value.length - 1;
   richEditExpression.value = richTextStatements.value[richEditID.value].text;
   richEditModal.value = true;
-  console.log("editing statement",richEditID.value, richEditModal);
 };
 
-const richTextStatements = ref([new RichTextBox("Hello World")]);
+const richTextStatements = ref<RichTextBox[]>([]);
 
 const richEditModal = ref(false);
 const richEditExpression = ref("");
 const richEditID = ref(0);
 
 const richEditStatement = (id: number) => {
-  console.log("editing Text", id, richEditModal);
   richEditModal.value = true;
   richEditID.value = id;
   richEditExpression.value = richTextStatements.value[richEditID.value].text;
 };
 
-const moveRichTextBox = (id: number,x:number,y:number) => {
+const moveRichTextBox = (id: number, x: number, y: number) => {
-  console.log("Moving Text", id, x,y);
   richEditID.value = id;
   richTextStatements.value[richEditID.value].x = x;
   richTextStatements.value[richEditID.value].y = y;
@@ -173,6 +217,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>
@@ -184,13 +253,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>
 
@@ -205,14 +274,12 @@ const removeRichTextBox = (id: number) => {
             row-key="name"
             hide-no-data
             hide-bottom
-            :pagination="{rowsPerPage: 10000}"
+            :pagination="{ rowsPerPage: 10000 }"
             style="height: 100%; border-radius: 0"
           >
             <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>
@@ -221,21 +288,21 @@ const removeRichTextBox = (id: number) => {
           </q-table>
         </div>
         <div class="col">
-<!--          <q-separator />-->
+          <!--          <q-separator />-->
           <q-table
             flat
             title="Functions"
+            :rows="functionListingRows"
+            :columns="functionListingColumns"
             row-key="name"
             hide-no-data
             hide-bottom
-            :pagination="{rowsPerPage: 10000}"
+            hide-header
+            :pagination="{ rowsPerPage: 10000 }"
             style="height: 100%; border-top: 1px solid lightgrey; border-radius: 0"
           >
             <template v-slot:body="props">
               <q-tr :props="props">
-                <q-td key="name" :props="props">
-                  {{ props.row.name }}
-                </q-td>
                 <q-td key="value" :props="props">
                   <div v-html="props.row.value"></div>
                 </q-td>
@@ -256,7 +323,7 @@ const removeRichTextBox = (id: number) => {
           :grid="[stepX, stepY]"
           :position="{ x: statement.x, y: statement.y }"
           :default-position="{ x: statement.x, y: statement.y }"
-          @stop="(e: {event: MouseEvent, data: {x: number, y: number}}) => stmOnControlledDragStop(statement)(e)"
+          @stop="(e: { event: MouseEvent, data: { x: number, y: number } }) => stmOnControlledDragStop(statement)(e)"
         >
           <div>
             <Statement
@@ -279,17 +346,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"
+      </q-dialog>
-          v-on:save="() => finishEditStatement()"
+
-        />
+      <q-dialog v-model="newFunctionModalOpen">
+        <FunctionEditor v-on:save="(s) => saveNewFunction(s)" />
+      </q-dialog>
+
+      <q-dialog v-model="editFunctionModalOpen">
+        <FunctionEditor :statement="editingStatement" v-on:save="() => finishEditStatement()" />
       </q-dialog>
 
       <q-page-sticky position="bottom-right" :offset="[32, 32]">
@@ -307,10 +376,16 @@ const removeRichTextBox = (id: number) => {
             title="Add an expression"
             @click="() => openNewExpressionModal()"
           />
+          <q-fab-action
+            color="secondary"
+            icon="functions"
+            title="Add a new function"
+            @click="() => openNewFunctionModal()"
+          />
           <q-fab-action
             color="secondary"
             icon="text"
-            title="Add a Text Box"
+            title="Add a text box"
             @click="() => makeNewRichTextBox()"
           />
         </q-fab>
@@ -321,12 +396,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/ExpressionEditor.vue

@@ -32,8 +32,8 @@ const validateExpression = () => {
     return 'The expression is invalid'
   }
 
-  if ( stmt.defines().length > 0 ) {
+  if ( stmt.defines().length > 0 || stmt.isFunctionDeclaration() ) {
-    return 'Expressions cannot declare variables'
+    return 'Expressions cannot declare variables or functions'
   }
 }
 

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

@@ -1,40 +1,43 @@
 <script setup lang="ts">
-  import {MathPage} from '../support/page'
+import { MathPage } from '../support/page'
-  import {v4 as uuidv4} from 'uuid'
+import { v4 as uuidv4 } from 'uuid'
-  import Statement from '../components/Statement.vue'
+import Statement from '../components/Statement.vue'
-  import {MathStatement} from '../support/parse'
+import { MathStatement } from '../support/parse'
-  import {onMounted, ref} from 'vue'
+import { onMounted, ref } from 'vue'
-  import Katex from '../components/Katex.vue'
+import Katex from '../components/Katex.vue'
+import { checkLoggedIn, loggedOut } from '../support/auth'
+import router from '../router'
 
-  const page = new MathPage(uuidv4())
+const page = new MathPage(uuidv4())
-  const stmt1Id = page.addRaw('x = y+3/4')
+const stmt1Id = page.addRaw('x = y+3/4')
-  const stmt2Id = page.addRaw('y = 9')
+const stmt2Id = page.addRaw('y = 9')
-  const evaluation = page.evaluate()
+const evaluation = page.evaluate()
 
-  const stmt = page.getStatement(stmt1Id)
+const stmt = page.getStatement(stmt1Id)
-  console.log({page, stmt1Id})
+console.log({ page, stmt1Id })
 
-  let editModal = ref(false)
+let editModal = ref(false)
-  let editExpression = ref('')
+let editExpression = ref('')
-  let editPreview = ref(MathStatement.temp(''))
+let editPreview = ref(MathStatement.temp(''))
-  let activeStatement!: MathStatement
+let activeStatement!: MathStatement
 
-  const editStatement = (stmt: 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
-  }
+}
 
-  let key = ref(uuidv4())
+let key = ref(uuidv4())
-  const updateEditRender = () => {
+const updateEditRender = () => {
   const previewStmt = MathStatement.temp(editExpression.value)
-    if ( previewStmt.isValid() ) {
+  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/pages/VarDeclEditor.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import * as math from 'mathjs'
 import {onMounted, ref} from 'vue'
 import {MathStatement} from '../support/parse'
 import {v4 as uuidv4} from 'uuid'
@@ -67,7 +68,9 @@ onMounted(() => {
   if ( props.statement ) {
     const [ define ] = props.statement.defines()
     newVariableName.value = define.name
-    newVariableValue.value = props.statement.raw
+
+    const [_, ...rest] = props.statement.raw.split('=')
+    newVariableValue.value = rest.join('=')
     updateNewVariablePreview()
   }
 })

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

@@ -2,7 +2,7 @@ import {MathStatement} from './parse'
 import * as math from 'mathjs'
 import {DepGraph} from 'dependency-graph'
 import { v4 as uuidv4 } from 'uuid'
-import {EvaluationResult, Maybe, StatementID, VariableName} from './types'
+import {EvaluationResult, hasOwnProperty, Maybe, StatementID, VariableName} from './types'
 
 /**
  * Wrapper for a page containing multiple interrelated mathematical statements.
@@ -82,6 +82,12 @@ export class MathPage {
     dependencies(): DepGraph<MathStatement> {
         const graph = new DepGraph<MathStatement>()
         const defined: Record<VariableName, MathStatement> = this.definers()
+        const definedFunctions: Record<VariableName, MathStatement> = {}
+
+        for ( const sym of this.functions() ) {
+            const node = sym.parse() as math.FunctionAssignmentNode
+            definedFunctions[node.name as VariableName] = sym
+        }
 
         for ( const statement of Object.values(this.statements) ) {
             graph.addNode(statement.id, statement)
@@ -89,6 +95,12 @@ export class MathPage {
 
         for ( const statement of Object.values(this.statements) ) {
             for ( const symbol of statement.uses() ) {
+                const functionProvider = definedFunctions[symbol.name as VariableName]
+                if ( functionProvider ) {
+                    graph.addDependency(statement.id, functionProvider.id)
+                    continue
+                }
+
                 const provider = defined[symbol.name as VariableName]
                 if ( !provider ) {
                     throw new Error('No provider for undefined symbol: ' + symbol.name)
@@ -101,11 +113,32 @@ export class MathPage {
         return graph
     }
 
+    /** Returns true if the given variable name is a function definition. */
+    isFunctionKey(name: VariableName): boolean {
+        return this.functions()
+            .some(stmt => {
+                const node = stmt.parse() as math.FunctionAssignmentNode
+                return node.name === name
+            })
+    }
+
+    /** Get all the statements defining functions. */
+    functions(): MathStatement[] {
+        return Object.values(this.statements)
+            .filter(x => x.isFunctionDeclaration())
+    }
+
     /** Evaluate the current state of the page and get the result. */
     evaluate(): EvaluationResult {
         const evaluations: Record<StatementID, any> = {}
         const scope: Record<VariableName, any> = {}
         const graph = this.dependencies()
+        const definers = this.definers()
+
+        for ( const stmt of this.functions() ) {
+            const node = stmt.parse() as math.FunctionAssignmentNode
+            scope[node.name as VariableName] = stmt.parse().evaluate()
+        }
 
         for ( const node of graph.overallOrder() ) {
             const stmt = this.statements[node as StatementID]
@@ -114,8 +147,19 @@ export class MathPage {
                 .evaluate(scope)
         }
 
+        const nonFunctionalScope: Record<VariableName, any> = {}
+        for ( const key in scope ) {
+            if ( !hasOwnProperty(scope, key) ) {
+                continue
+            }
+
+            if ( definers[key as VariableName] ) {
+                nonFunctionalScope[key as VariableName] = scope[key]
+            }
+        }
+
         return {
-            variables: scope,
+            variables: nonFunctionalScope,
             statements: evaluations,
         }
     }

src/support/parse.ts

@@ -117,6 +117,7 @@ export class SymbolWalk extends MathNodeWalk<math.SymbolNode[]> {
 
     walkFunctionAssignmentNode(node: math.FunctionAssignmentNode): math.SymbolNode[] {
         return this.walk(node.expr)
+            .filter(sym => !node.params.includes(sym.name))
     }
 
     walkFunctionNode(node: math.FunctionNode): math.SymbolNode[] {
@@ -350,6 +351,6 @@ export class MathStatement {
     }
 
     isFunctionDeclaration(): boolean {
-        return false
+        return math.isFunctionAssignmentNode(this.parse())
     }
 }