You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
3.7 KiB
127 lines
3.7 KiB
<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>
|
|
|