commit
b3108715b1
After Width: | Height: | Size: 3.2 KiB |
After Width: | Height: | Size: 2.7 MiB |
@ -0,0 +1,126 @@
|
|||||||
|
<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>
|
||||||
|
|
@ -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>
|
@ -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: #215b8a; /* Green */
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
padding: 15px 32px;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 32px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
</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