From: Adam Dullage <redacted>
Date: Thu, 25 Apr 2024 21:37:26 +0000 (+0100)
Subject: Login View
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=0061e1812312bbd9cc56f929e87f8cdf7af6809a;p=flatnotes.git

Login View
---

diff --git a/client/components/SearchInput.vue b/client/components/SearchInput.vue
index 3a07bcb..b496d24 100644
--- a/client/components/SearchInput.vue
+++ b/client/components/SearchInput.vue
@@ -1,10 +1,6 @@
 <template>
-  <form class="flex w-full max-w-[500px]" v-on:submit.prevent="search">
-    <input
-      type="text"
-      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"
-      placeholder="Search"
-    />
+  <form class="flex w-full max-w-[500px]" @submit.prevent="search">
+    <TextInput placeholder="Search" class="rounded-r-none" />
     <ButtonComponent
       :iconPath="mdilMagnify"
       iconSize="1.75em"
@@ -17,6 +13,7 @@
 import { mdilMagnify } from "@mdi/light-js";
 
 import ButtonComponent from "./ButtonComponent.vue";
+import TextInput from "./TextInput.vue";
 
 function search() {
   console.log("searching...");  // TODO: Implement search functionality
diff --git a/client/components/TextInput.vue b/client/components/TextInput.vue
new file mode 100644
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 000dad4..ccd421d 100644
--- 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>