From: Adam Dullage <redacted>
Date: Sat, 27 Apr 2024 16:37:45 +0000 (+0100)
Subject: Log In and Recently Modified
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=5dc81dd899751791a4abd9b549dba979d2ba089f;p=flatnotes.git

Log In and Recently Modified
---

diff --git a/client/App.vue b/client/App.vue
index cbc0cba..387db2a 100644
--- a/client/App.vue
+++ b/client/App.vue
@@ -12,6 +12,7 @@ import { RouterView, useRoute } from "vue-router";
 import NavBar from "./partials/NavBar.vue";
 import { getConfig } from "./api.js";
 import { useGlobalStore } from "./globalStore.js";
+import { loadStoredToken } from "./tokenStorage.js";
 
 const globalStore = useGlobalStore();
 const route = useRoute();
@@ -27,6 +28,7 @@ onBeforeMount(() => {
         console.error(error);
       }
     });
+  loadStoredToken();
 });
 
 const showNavBar = computed(() => {
diff --git a/client/api.js b/client/api.js
index d95884d..d56334d 100644
--- a/client/api.js
+++ b/client/api.js
@@ -1,7 +1,7 @@
 import * as constants from "./constants.js";
 
 import axios from "axios";
-import { getToken } from "./tokenStorage.js";
+import { getStoredToken } from "./tokenStorage.js";
 import router from "./router.js";
 
 const api = axios.create();
@@ -10,7 +10,7 @@ api.interceptors.request.use(
   // If the request is not for the token endpoint, add the token to the headers.
   function (config) {
     if (config.url !== "/api/token") {
-      const token = getToken();
+      const token = getStoredToken();
       config.headers.Authorization = `Bearer ${token}`;
     }
     return config;
@@ -43,3 +43,21 @@ api.interceptors.response.use(
 export function getConfig() {
   return api.get("/api/config");
 }
+
+export function getToken(username, password, totp) {
+  return api.post("/api/token", {
+    username: username,
+    password: totp ? password + totp : password,
+  });
+}
+
+export function getNotes(term, sort, order, limit) {
+  return api.get("/api/search", {
+    params: {
+      term: term,
+      sort: sort,
+      order: order,
+      limit: limit,
+    },
+  });
+}
diff --git a/client/components/TextInput.vue b/client/components/TextInput.vue
index 2178e86..080a6ef 100644
--- a/client/components/TextInput.vue
+++ b/client/components/TextInput.vue
@@ -3,5 +3,10 @@
     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"
+    v-model="model"
   />
 </template>
+
+<script setup>
+const model = defineModel()
+</script>
diff --git a/client/tokenStorage.js b/client/tokenStorage.js
index dc0fc08..2c4dc13 100644
--- a/client/tokenStorage.js
+++ b/client/tokenStorage.js
@@ -4,7 +4,7 @@ function getCookieString(token) {
   return `${tokenStorageKey}=${token}; path=/attachments; SameSite=Strict`;
 }
 
-export function setToken(token, persist = false) {
+export function storeToken(token, persist = false) {
   document.cookie = getCookieString(token);
   sessionStorage.setItem(tokenStorageKey, token);
   if (persist === true) {
@@ -12,18 +12,18 @@ export function setToken(token, persist = false) {
   }
 }
 
-export function getToken() {
+export function getStoredToken() {
   return sessionStorage.getItem(tokenStorageKey);
 }
 
-export function loadToken() {
+export function loadStoredToken() {
   const token = localStorage.getItem(tokenStorageKey);
   if (token != null) {
-    setToken(token, false);
+    storeToken(token, false);
   }
 }
 
-export function clearToken() {
+export function clearStoredToken() {
   sessionStorage.removeItem(tokenStorageKey);
   localStorage.removeItem(tokenStorageKey);
   document.cookie =
diff --git a/client/views/Home.vue b/client/views/Home.vue
index f3a4d4d..ad79b56 100644
--- a/client/views/Home.vue
+++ b/client/views/Home.vue
@@ -2,12 +2,31 @@
   <div class="h-full">
     <div class="flex h-full flex-col items-center justify-center">
       <Logo class="mb-5" />
-      <SearchInput class="shadow-[0_0_20px] shadow-theme-shadow" />
+      <SearchInput class="mb-5 shadow-[0_0_20px] shadow-theme-shadow" />
+      <div class="flex flex-col items-center min-h-56">
+        <p
+          v-if="notes.length > 0"
+          class="mb-2 text-xs font-bold text-theme-text-very-muted"
+        >
+          RECENTLY MODIFIED
+        </p>
+        <CustomButton v-for="note in notes" :label="note.title" />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { ref } from "vue";
+
+import { getNotes } from "../api.js";
+import CustomButton from "../components/CustomButton.vue";
 import Logo from "../components/Logo.vue";
 import SearchInput from "../partials/SearchInput.vue";
+
+const notes = ref([]);
+
+getNotes("*", "lastModified", "desc", 5).then((response) => {
+  notes.value = response.data;
+});
 </script>
diff --git a/client/views/LogIn.vue b/client/views/LogIn.vue
index 616e7c5..49db2ef 100644
--- a/client/views/LogIn.vue
+++ b/client/views/LogIn.vue
@@ -1,11 +1,23 @@
 <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 />
+    <form @submit.prevent="logIn" class="flex max-w-80 flex-col items-center">
+      <TextInput
+        v-model="username"
+        placeholder="Username"
+        class="mb-1"
+        required
+      />
+      <TextInput
+        v-model="password"
+        placeholder="Password"
+        type="password"
+        class="mb-1"
+        required
+      />
       <TextInput
         v-if="globalStore.authType == authTypes.totp"
+        v-model="totp"
         placeholder="2FA Code"
         class="mb-1"
         required
@@ -27,20 +39,40 @@
 <script setup>
 import { mdilLogin } from "@mdi/light-js";
 import { ref } from "vue";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 
+import { getToken } from "../api.js";
 import CustomButton from "../components/CustomButton.vue";
 import Logo from "../components/Logo.vue";
 import TextInput from "../components/TextInput.vue";
 import { authTypes } from "../constants.js";
 import { useGlobalStore } from "../globalStore.js";
+import { storeToken } from "../tokenStorage.js";
+import * as constants from "../constants.js";
 
 const router = useRouter();
+const route = useRoute();
 const globalStore = useGlobalStore();
+
+const username = ref("");
+const password = ref("");
+const totp = ref("");
 const rememberMe = ref(false);
 
-function login() {
-  router.push({ name: "home" });
-  // TODO: Implement login functionality
+function logIn() {
+  getToken(username.value, password.value, totp.value)
+    .then((response) => {
+      storeToken(response.data.access_token, rememberMe.value);
+      const redirectPath = route.query[constants.params.redirect];
+      if (redirectPath) {
+        router.push(redirectPath);
+      } else {
+        router.push({ name: "home" });
+      }
+    })
+    .catch((error) => {
+      console.error(error);
+      // TODO: Trigger error toast
+    });
 }
 </script>