110 lines
2.3 KiB
Vue
110 lines
2.3 KiB
Vue
<template>
|
|
<form id="login" @submit.prevent="submit">
|
|
<!-- login title -->
|
|
<div id="loginTitle">Crimata Messenger</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>
|
|
|
|
<!-- submit button -->
|
|
<button class="button" type="submit">Login</button>
|
|
</form>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, toRefs, reactive, watch } 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 { setUser, user } = useAuth();
|
|
const router = useRouter();
|
|
|
|
const payload = reactive<LoginPayload>({
|
|
email: "",
|
|
password: "",
|
|
rememberMe: true,
|
|
});
|
|
|
|
const { loading, data, send, errorMessage } = useIpc("auth-login");
|
|
|
|
const submit = async () => {
|
|
// console.log(toRefs(payload));
|
|
send({
|
|
request: "register",
|
|
email: payload.email,
|
|
password: payload.password,
|
|
});
|
|
console.log(data.value, "login");
|
|
};
|
|
|
|
watch(loading, () => {
|
|
console.log(data.value)
|
|
setUser(data.value, payload.rememberMe);
|
|
router.push({ name: "home" });
|
|
});
|
|
|
|
return {
|
|
loading,
|
|
submit,
|
|
errorMessage,
|
|
...toRefs(payload),
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#login {
|
|
width: 350px;
|
|
height: 500px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #e6e6e6;
|
|
}
|
|
|
|
#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 {
|
|
background-color: #58C4FD;
|
|
border: none;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
text-decoration: none;
|
|
border-radius: 20px;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|