CrystalMath/ui
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Abandoning Auth0 and creating our own login/registration

Browse Source
This commit is contained in:
QiTao Weng 2022-04-09 20:06:25 -05:00
parent 95b517d620
commit e9fb5ac088
9 changed files with 113 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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"

13
pnpm-lock.yaml
View File

@ -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:

3
src/App.vue
View File

@ -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";

47
src/components/Login.vue Normal file
View File

@ -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>

6
src/main.ts
View File

@ -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/fadeOut.css
import '@quasar/extras/animate/fadeInUp.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
}),
)

19
src/pages/Auth.vue
View File

@ -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>

46
src/pages/Home.vue Normal file
View File

@ -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>

33
src/pages/Login.vue
View File

@ -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>

7
src/router.ts
View File

@ -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({