165 lines
3.4 KiB
Vue
165 lines
3.4 KiB
Vue
<template>
|
|
<div id="register">
|
|
<!-- login title -->
|
|
<div id="registerTitle">
|
|
<div>Register</div>
|
|
</div>
|
|
|
|
<!-- username and password forms -->
|
|
<form id="registerBox" @submit.prevent="submit">
|
|
<!-- username -->
|
|
<input class="input" type="text" v-model="email" placeholder="email" required/>
|
|
|
|
<!-- password -->
|
|
<input class="input" type="password" v-model="password" placeholder="Password" required/>
|
|
|
|
<!-- re-enter passoword -->
|
|
<input class="input" type="password" v-model="password2" placeholder="Re-enter password" required/>
|
|
|
|
<!-- submit button; position: fixed -->
|
|
<button class="button" type="submit">Submit</button>
|
|
|
|
</form>
|
|
|
|
<!-- back to login button: position: fixed -->
|
|
<button class="button2" @click.prevent="switchView">Back to login</button>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {
|
|
defineComponent,
|
|
ref,
|
|
} from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import { useIpc } from "@/modules/ipc";
|
|
import { useAuth } from "@/modules/auth";
|
|
|
|
interface RegisterPayload {
|
|
request: string;
|
|
email: string;
|
|
password: string;
|
|
}
|
|
|
|
export default defineComponent({
|
|
name: "Register",
|
|
setup() {
|
|
const email = ref("");
|
|
const password = ref("");
|
|
const password2 = ref("");
|
|
|
|
const { invoke } = useIpc();
|
|
const { setToken } = useAuth();
|
|
const router = useRouter();
|
|
|
|
const re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
|
|
|
|
const passwordMatch = () => {
|
|
let match = false;
|
|
if (password.value == password2.value) {
|
|
match = true;
|
|
}
|
|
return match;
|
|
}
|
|
|
|
const validate = () => {
|
|
let valid = false;
|
|
if (re.test(email.value) && passwordMatch()) {
|
|
valid = true;
|
|
}
|
|
return valid;
|
|
}
|
|
|
|
const submit = async () => {
|
|
|
|
const payload: RegisterPayload = {
|
|
request: "register",
|
|
email: email.value,
|
|
password: password.value,
|
|
};
|
|
|
|
if (validate()) {
|
|
try {
|
|
const res = await invoke('auth-session', payload);
|
|
setToken(res);
|
|
router.push({ name: "home" });
|
|
} catch(e) {
|
|
console.log('Failed to register.')
|
|
}
|
|
}
|
|
};
|
|
|
|
const switchView = () => {
|
|
router.push({ name: "login" });
|
|
};
|
|
|
|
return {
|
|
email,
|
|
password,
|
|
password2,
|
|
switchView,
|
|
submit,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#register {
|
|
width: 350px;
|
|
height: 500px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #e6e6e6;
|
|
}
|
|
|
|
#registerTitle {
|
|
min-width: 181px;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
}
|
|
|
|
#registerBox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.input {
|
|
background-color: #B9B9B9;
|
|
border: none;
|
|
color: white;
|
|
padding: 16px;
|
|
text-decoration: none;
|
|
margin: 4px 2px;
|
|
cursor: pointer;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.button {
|
|
position: fixed;
|
|
margin-top: 165px;
|
|
background-color: #58C4FD;
|
|
border: none;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
text-decoration: none;
|
|
border-radius: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.button2 {
|
|
position: fixed;
|
|
margin-top: 225px;
|
|
border: none;
|
|
background-color: #e6e6e6;
|
|
text-decoration: none;
|
|
color: #58C4FD;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|