@ -1,12 +1,15 @@
< script setup lang = "ts" >
import { ref } from 'vue'
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 =
@ -17,10 +20,59 @@ const checkForm = () => {
|| 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" / >
@ -32,16 +84,43 @@ const checkForm = () => {
< 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 -input
v - model = "passwordConfirm"
v - on : keyup = "checkForm()"
type = "password"
label = "password confirmation"
/ >
< / q - f o r m >
< / q - c a r d - s e c t i o n >
< q -card -section v-if ="error" >
< p class = "error" >
< b > { { error } } < / b >
< / p >
< / q - c a r d - s e c t i o n >
< q -card -actions class = "q-px-md" >
< q -btn unelevated color = "primary" size = "lg" : disable = btnDisabled class = "full-width" : label = "isRegistration? 'Register' : 'Login'" / >
< q -btn
unelevated
color = "primary"
size = "lg"
: disable = "btnDisabled"
class = "full-width"
: label = "isRegistration ? 'Register' : 'Login'"
@ click = "submit()"
/ >
< / q - c a r d - a c t i o n s >
< 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 >
< 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 - c a r d - s e c t i o n >
< / template >
< style >
. error {
color : red ;
}
< / style >