146 lines
2.9 KiB
Vue
146 lines
2.9 KiB
Vue
<template>
|
|
<div id="register">
|
|
<!-- login title -->
|
|
<div id="registerTitle">
|
|
<div>Register</div>
|
|
</div>
|
|
|
|
<!-- username and password forms -->
|
|
<div id="registerBox">
|
|
<!-- username -->
|
|
<input class="input" type="text" v-model="email" placeholder="email" />
|
|
|
|
<!-- password -->
|
|
<input class="input" type="password" v-model="password" placeholder="Password" />
|
|
|
|
<!-- firstName -->
|
|
<input class="input" type="text" v-model="password2" placeholder="Re-enter password" />
|
|
</div>
|
|
|
|
<!-- submit button; position: fixed -->
|
|
<button class="button" @click="submit">Submit</button>
|
|
|
|
<!-- back to login button: position: fixed -->
|
|
<button class="button2" @click="submit">Back to login</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {
|
|
computed,
|
|
defineComponent,
|
|
onErrorCaptured,
|
|
reactive,
|
|
ref,
|
|
toRefs,
|
|
} from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import { useIpc } from "@/modules/ipc";
|
|
import { useAuth } from "@/modules/auth";
|
|
|
|
interface RegisterPayload {
|
|
email?: string;
|
|
password?: string;
|
|
firstName?: string;
|
|
lastName?: string;
|
|
}
|
|
|
|
export default defineComponent({
|
|
name: "Register",
|
|
setup() {
|
|
const email = ref("");
|
|
const password = ref("");
|
|
const firstName = ref("");
|
|
const lastName = ref("");
|
|
const rememberMe = ref("");
|
|
|
|
const { invoke, data,} = useIpc("auth-user");
|
|
const { setToken } = useAuth();
|
|
const router = useRouter();
|
|
|
|
const payload: RegisterPayload = {
|
|
email: email.value,
|
|
password: password.value,
|
|
firstName: firstName.value,
|
|
lastName: lastName.value,
|
|
};
|
|
|
|
const submit = async () => {
|
|
try {
|
|
await invoke(payload);
|
|
setToken(data.value, true);
|
|
router.push({ name: "home" });
|
|
} catch(e) {
|
|
console.log('Failed to register.')
|
|
}
|
|
};
|
|
|
|
return {
|
|
email,
|
|
password,
|
|
firstName,
|
|
lastName,
|
|
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>
|