140 lines
2.9 KiB
Vue
140 lines
2.9 KiB
Vue
<template>
|
|
<form id="login" @submit.prevent="submit">
|
|
<!-- login title -->
|
|
<div id="loginTitle">
|
|
<div>Login</div>
|
|
</div>
|
|
|
|
<!-- username and password forms -->
|
|
<div id="loginBox">
|
|
<!-- username -->
|
|
<input class="input" type="text" v-model="email" placeholder="username" />
|
|
|
|
<!-- password -->
|
|
<input class="input" type="password" v-model="password" placeholder="Password" />
|
|
</div>
|
|
|
|
<!-- <input type="checkbox" id="checkbox" v-model="rememberMe" />
|
|
<label for="checkbox">Remember Me</label> -->
|
|
|
|
<!-- submit button; position: fixed -->
|
|
<button class="button" @click="submit">Submit</button>
|
|
|
|
<!-- back to login button: position: fixed -->
|
|
<button class="button2" @click="switchView">Create an account</button>
|
|
</form>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref } from "vue";
|
|
import { useAuth } from "@/modules/auth";
|
|
import { useIpc } from "@/modules/ipc";
|
|
import { useRouter } from "vue-router";
|
|
|
|
interface LoginPayload {
|
|
email: string;
|
|
password: string;
|
|
rememberMe: boolean;
|
|
}
|
|
|
|
export default defineComponent({
|
|
name: "Login",
|
|
setup() {
|
|
const { setToken } = useAuth();
|
|
const router = useRouter();
|
|
|
|
const email = ref("");
|
|
const password = ref("");
|
|
const rememberMe = ref(false);
|
|
|
|
const { data, invoke } = useIpc('auth-user');
|
|
|
|
const submit = async () => {
|
|
const payload = {
|
|
request: "login",
|
|
email: email.value,
|
|
password: password.value
|
|
};
|
|
try {
|
|
await invoke(payload);
|
|
console.log('testing incoke', data.value)
|
|
setToken(data.value, rememberMe.value);
|
|
router.push({ name: "home" });
|
|
} catch(e){
|
|
console.log('Error loging in.')
|
|
}
|
|
};
|
|
|
|
const switchView = () => {
|
|
router.push({ name: "register" });
|
|
};
|
|
|
|
return {
|
|
submit,
|
|
email,
|
|
password,
|
|
rememberMe,
|
|
switchView
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#login {
|
|
width: 350px;
|
|
height: 500px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #e6e6e6;
|
|
}
|
|
|
|
#loginTitle {
|
|
min-width: 181px;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
}
|
|
|
|
#loginBox {
|
|
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: 141px;
|
|
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>
|