add login, register, and auth

src/views/login.vue

@@ -1,17 +1,110 @@
 <template>
-    <LoginComponent />
+  <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";
 
-import { defineComponent } from "vue";
-import LoginComponent from "@/components/login/index.vue";
+interface LoginPayload {
+  email: string;
+  password: string;
+  rememberMe: boolean;
+}
 
 export default defineComponent({
-
   name: "Login",
-  components: { LoginComponent },
+  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({
+        email: payload.email,
+        password: payload.password,
+      });
+      console.log(data.value, "login");
+      // setUser(data.value, payload.rememberMe);
+      // router.push({ name: "home" });
+    };
+
+    watch(loading, () => {
+      console.log("loading changed");
+      console.log(data.value, "post laoding");
+    });
+
+    return {
+      loading,
+      submit,
+      errorMessage,
+      ...toRefs(payload),
+    };
+  },
 });
+</script>
 
-</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>