Abandoning Auth0 and creating our own login/registration

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",
     "dependency-graph": "^0.11.0",
     "install": "^0.13.0",
@@ -27,6 +28,7 @@
     "mathjs": "^10.4.3",
     "quasar": "^2.6.6",
     "uuid": "^8.3.2",
+    "validator": "^13.7.0",
     "vue": "^3.2.25",
     "vue-router": "^4.0.14",
     "vuetify": "3.0.0-beta.0"

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
@@ -21,6 +22,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-router: ^4.0.14
@@ -32,6 +34,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
   dependency-graph: 0.11.0
   install: 0.13.0
@@ -39,6 +42,7 @@ dependencies:
   mathjs: 10.4.3
   quasar: 2.6.6
   uuid: 8.3.2
+  validator: 13.7.0
   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 +393,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.
@@ -3745,6 +3753,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,8 +1,7 @@
 <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";

src/components/Login.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import validator from 'validator'
+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 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);
+}
+</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>
+</template>
+

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'
@@ -54,7 +54,7 @@ app.use(
     createAuth0({
         domain: 'dev-ge84r-eu.us.auth0.com',
         client_id: 'zHjZGg1uPws0DkQg5bRdKcDX8m6AuTZl', // eslint-disable-line camelcase
-        redirect_uri: window.location.origin + '/auth', // eslint-disable-line camelcase
+        redirect_uri: window.location.origin + '/api/login/callback', // eslint-disable-line camelcase
     }),
 )
 

src/pages/Auth.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-
-import { useAuth0 } from '@auth0/auth0-vue';
-import router from '../router';
-
-const { user, isAuthenticated, logout } = useAuth0();
-isAuthenticated
-const route = router.resolve({ path: '/'})
-const absoluteURL = new URL(route.href, window.location.href).href
-const leave = () => logout({ returnTo: absoluteURL })
-
-</script>
-<template>
-    <div>
-        <h2>User Profile</h2>
-         <code>{{ user }}</code>
-         <button @click="leave">Log out</button>
-    </div>
-</template>

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: #4484c4;
-  border: none;
-  color: white;
-  padding: 15px 32px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 32px;
-  border-radius: 5px;
-}
-</style>

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 = [
     {
@@ -17,11 +17,6 @@ const routes = [
         name: 'Editor',
         component: () => import('./pages/Editor.vue'),
     },
-    {
-        path:'/auth',
-        name: 'Auth',
-        component: () => import('./pages/Auth.vue'),
-    },
 ]
 
 const router = createRouter({