Login View

diff --git a/client/components/SearchInput.vue b/client/components/SearchInput.vue
index 3a07bcbc71af7f4412eeffdbd0205f24163b5ecd..b496d243746391f469af579798e168d44b64b703 100644 (file)
--- a/client/components/SearchInput.vue
+++ b/client/components/SearchInput.vue
@@ -1,10 +1,6 @@
 <template>\r
-  <form class="flex w-full max-w-[500px]" v-on:submit.prevent="search">\r
-    <input\r
-      type="text"\r
-      class="rounded rounded-r-none border border-theme-border bg-theme-background-elevated px-3 py-2 w-full focus:outline-none focus:ring-1"\r
-      placeholder="Search"\r
-    />\r
+  <form class="flex w-full max-w-[500px]" @submit.prevent="search">\r
+    <TextInput placeholder="Search" class="rounded-r-none" />\r
     <ButtonComponent\r
       :iconPath="mdilMagnify"\r
       iconSize="1.75em"\r
@@ -17,6 +13,7 @@
 import { mdilMagnify } from "@mdi/light-js";\r
 \r
 import ButtonComponent from "./ButtonComponent.vue";\r
+import TextInput from "./TextInput.vue";\r
 \r
 function search() {\r
   console.log("searching...");  // TODO: Implement search functionality\r

diff --git a/client/components/TextInput.vue b/client/components/TextInput.vue
new file mode 100644 (file)
index 0000000..2178e86
--- /dev/null
+++ b/client/components/TextInput.vue
@@ -0,0 +1,7 @@
+<template>
+  <input
+    type="text"
+    class="w-full rounded rounded-r-none border border-theme-border bg-theme-background-elevated px-3 py-2 focus:outline-none focus:ring-1"
+    placeholder="Search"
+  />
+</template>

diff --git a/client/views/LoginView.vue b/client/views/LoginView.vue
index 000dad46052ae513143fc0163113960a58e023dd..ccd421db30b4afb63b6d36cf971dbf5af2a35b56 100644 (file)
--- a/client/views/LoginView.vue
+++ b/client/views/LoginView.vue
@@ -1 +1,35 @@
-<template>Login</template>
+<template>
+  <div class="flex h-full flex-col items-center justify-center">
+    <Logo class="mb-5" />
+    <form @submit.prevent="login" class="flex max-w-80 flex-col items-center">
+      <TextInput placeholder="Username" class="mb-1" required />
+      <TextInput placeholder="Password" type="password" class="mb-1" required />
+      <TextInput placeholder="2FA Code" class="mb-1" required />
+      <div class="mb-4 flex">
+        <input
+          type="checkbox"
+          id="remember-me"
+          v-model="rememberMe"
+          class="mr-1"
+        />
+        <label for="remember-me">Remember Me</label>
+      </div>
+      <ButtonComponent :iconPath="mdilLogin" label="Log In" />
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { mdilLogin } from "@mdi/light-js";
+import { ref } from "vue";
+
+import ButtonComponent from "../components/ButtonComponent.vue";
+import Logo from "../components/Logo.vue";
+import TextInput from "../components/TextInput.vue";
+
+const rememberMe = ref(false);
+
+function login() {
+  console.log("logging in..."); // TODO: Implement login functionality
+}
+</script>