Reformatting, removing auth0, add login status checks for redirects and logout button visibility, and fixing api call parameters
parent
5dc568bc86
commit
7e016ad147
@ -1,47 +1,126 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import validator from 'validator'
|
import validator from 'validator'
|
||||||
|
import { checkLoggedIn, loggedIn } from '../support/auth'
|
||||||
|
import router from '../router'
|
||||||
const name = ref<string>('')
|
const name = ref<string>('')
|
||||||
const email = ref<string>('')
|
const email = ref<string>('')
|
||||||
const password = ref<string>('')
|
const password = ref<string>('')
|
||||||
const passwordConfirm = ref<string>('')
|
const passwordConfirm = ref<string>('')
|
||||||
const btnDisabled = ref<boolean>(true)
|
const btnDisabled = ref<boolean>(true)
|
||||||
const isRegistration =ref<boolean>(false)
|
const isRegistration = ref<boolean>(false)
|
||||||
|
const error = ref<string>('')
|
||||||
|
|
||||||
const checkForm = () => {
|
const checkForm = () => {
|
||||||
btnDisabled.value =
|
btnDisabled.value =
|
||||||
(isRegistration.value
|
(isRegistration.value
|
||||||
&& (password.value != passwordConfirm.value
|
&& (password.value != passwordConfirm.value
|
||||||
|| name.value.length == 0))
|
|| name.value.length == 0))
|
||||||
|| password.value.length < 8
|
|| password.value.length < 8
|
||||||
|| email.value.length == 0
|
|| email.value.length == 0
|
||||||
|| !validator.isEmail(email.value);
|
|| !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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<q-card-section v-if="!isRegistration">
|
||||||
<q-card-section v-if="!isRegistration">
|
<q-form class="q-gutter-md">
|
||||||
<q-form class="q-gutter-md">
|
<q-input v-model="email" v-on:keyup="checkForm()" type="email" label="email" />
|
||||||
<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="password" v-on:keyup="checkForm()" type="password" label="password" />
|
</q-form>
|
||||||
</q-form>
|
</q-card-section>
|
||||||
</q-card-section>
|
<q-card-section v-else>
|
||||||
<q-card-section v-else>
|
<q-form class="q-gutter-md">
|
||||||
<q-form class="q-gutter-md">
|
<q-input v-model="name" v-on:keyup="checkForm()" type="text" label="name" />
|
||||||
<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="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="password" v-on:keyup="checkForm()" type="password" label="password" />
|
<q-input
|
||||||
<q-input v-model="passwordConfirm" v-on:keyup="checkForm()" type="password" label="password confirmation" />
|
v-model="passwordConfirm"
|
||||||
|
v-on:keyup="checkForm()"
|
||||||
</q-form>
|
type="password"
|
||||||
</q-card-section>
|
label="password confirmation"
|
||||||
<q-card-actions class="q-px-md">
|
/>
|
||||||
<q-btn unelevated color="primary" size="lg" :disable=btnDisabled class="full-width" :label="isRegistration? 'Register' : 'Login'" />
|
</q-form>
|
||||||
</q-card-actions>
|
</q-card-section>
|
||||||
<q-card-section class="text-center q-pa-none">
|
<q-card-section v-if="error">
|
||||||
|
<p class="error">
|
||||||
<p class="text-grey-6">{{isRegistration? 'Have an account?' :'Not reigistered?'}} <a href="#" @click="isRegistration = !isRegistration; checkForm()">{{isRegistration? 'Login':'Created an Account'}}</a></p>
|
<b>{{ error }}</b>
|
||||||
</q-card-section>
|
</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>
|
</template>
|
||||||
|
<style>
|
||||||
|
.error {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
@ -0,0 +1,10 @@
|
|||||||
|
let isLoggedIn = false
|
||||||
|
export const checkLoggedIn = () => {
|
||||||
|
return isLoggedIn
|
||||||
|
}
|
||||||
|
export const loggedIn = () => {
|
||||||
|
isLoggedIn = true
|
||||||
|
}
|
||||||
|
export const loggedOut = () => {
|
||||||
|
isLoggedIn = false
|
||||||
|
}
|
Loading…
Reference in new issue