Frontend: Hide Elements based on Login (#167)

* fix: prevent default

* Feat: Loading login page now deletes cookie, allowing user effectively log out.

* Feat: Upload script checks cookie to see if user is logged in. Redirects if they are not.

* Feat: Added user svelte store to keep track of login status

* Feat: Hide upload button if user not logged in

* Login changes to logout if user signs in

* Feat: Hide edit button if user not logged in. Redirect from edit page if user not logged in.

* Made the header check to see if there is an auth cookie to check if there should be a login session - If there is one, then it sets the site login status to true.

* Refactor: Small code change

* Refactor: Changed user store variables from int to bool

* Refactor: Removed unused imports from router.svelte

* Changed test user password from hunter2 to test, to make it easier to type.

* fix: svelte/store comes with svelte

---------

Co-authored-by: xnought <bertuccd@oregonstate.edu>

backend/init.sql

@@ -54,5 +54,7 @@ INSERT INTO species(name) VALUES ('unknown');
 
 /*
  * Inserts test user into user table
+ * Email: test
+ * Password: test
  */
-INSERT INTO users(username, email, pword, admin) VALUES ('test', 'garvina@oregonstate.edu', '$2b$12$2Z74k3vqzchWB..McZbdUOp4BXd6RGsWcS0atZJfVVheGexvH7i0O', '1');
+INSERT INTO users(username, email, pword, admin) VALUES ('test', 'test', '$2b$12$PFoNf7YM0KNIPP8WGsJjveIOhiJjitsMtfwRcCjdcyTuqjdk/q//u', '1');

frontend/src/lib/Header.svelte

@@ -1,12 +1,23 @@
 <script lang="ts">
  import logo from "../images/logo.svg";
  import { links } from "svelte-routing";
+ import { onMount } from "svelte";
  import {
  UploadOutline,
  UserOutline,
  TableRowOutline,
  BookOutline,
  } from "flowbite-svelte-icons";
+ import {user} from "./stores/user"
+ import Cookies from "js-cookie"
+
+ // Checking if the user has a cookie.
+ // If they do, set user status for the whole site.
+ onMount(async () => {
+ if (Cookies.get("auth")) {
+ $user.loggedIn = true
+ }
+ });
 </script>
 
 <header class="flex justify-between" use:links>
@@ -20,17 +31,25 @@
  <a href="/search" class="flex items-center gap-1"
  ><TableRowOutline size="lg" />Search</a
  >
+ {#if $user.loggedIn}
  <a href="/upload" class="flex items-center gap-1">
  <UploadOutline size="lg" />Upload</a
  >
+ {/if}
  <a href="/tutorials" class="flex items-center gap-1">
  <BookOutline size="lg" />Tutorials</a
  >
  </div>
  </div>
 
  <a href="/login" class="flex items-center gap-1 mr-5">
- <UserOutline size="lg" />Login</a
+ <UserOutline size="lg" />
+ {#if $user.loggedIn}
+ Logout
+ {:else}
+ Login
+ {/if}
+ </a
  >
 </header>
 <div style="height: 60px;" />

frontend/src/lib/stores/user.ts

@@ -0,0 +1,7 @@
+import {writable} from 'svelte/store';
+
+export const user = writable({
+ loggedIn: false,
+ username: "",
+ admin: true
+})

frontend/src/routes/Edit.svelte

@@ -4,6 +4,7 @@
  import { navigate } from "svelte-routing";
  import { onMount } from "svelte";
  import ArticleEditor from "../lib/ArticleEditor.svelte";
+ import {user} from "../lib/stores/user"
 
  // key difference, here we get the information, then populate it in the upload form that can be edited
  // and reuploaded/edited
@@ -26,6 +27,11 @@
 
  // when this component mounts, request protein wikipedia entry from backend
  onMount(async () => {
+ if (!$user.loggedIn) {
+ alert("You are not logged in. You are being redirected to home. TODO: Make this better.")
+ navigate("/")
+ }
+
  // Request the protein from backend given ID
  console.log("Requesting", urlId, "info from backend");
 

frontend/src/routes/Error.svelte

@@ -10,4 +10,4 @@
 
 <style>
  /* put stuff here */
-</style>
+</style>

frontend/src/routes/Login.svelte

@@ -2,6 +2,20 @@
  import { Backend, type LoginResponse } from "../lib/backend";
  import { Button, Label, Input } from "flowbite-svelte";
  import Cookies from "js-cookie";
+ import { onMount } from "svelte";
+ import { navigate } from "svelte-routing";
+ import { user } from "../lib/stores/user"
+
+ /*
+ * Deletes the cookie upon entering the login page.
+ * We want to do this to avoid bugs, and to let the user log out.
+ */
+ onMount(async () => {
+ Cookies.remove("auth")
+ $user.loggedIn = false
+ $user.username = ""
+ $user.admin = true
+ });
 
  let email: string = "";
  let password: string = "";
@@ -32,18 +46,22 @@
  // User entered wrong username or password, or account doesn't exist.
  // @todo Display this error message to the user.
  console.log("Response received. Error: " + result["error"]);
+ alert(result["error"])
  } else if (result["token"] != "") {
  // User entered the correct username / password and got a result.
  // @todo Store this in a cookie.
  console.log("Response received. Token: " + result["token"]);
  Cookies.set("auth", result["token"]);
+ $user.loggedIn = true
+ navigate(`/search`);
  } else {
  // User got a result, but both fields are null. This should never happen.
  console.log(
  "Unexpected edge cage regarding user authentication."
  );
  }
  } catch (e) {
+ alert([e])
  console.log(e);
  }
  }
@@ -53,7 +71,7 @@
  <title>Login</title>
 </svelte:head>
 
-<form on:submit={submitForm} class="flex gap-5 flex-col p-5">
+<form on:submit|preventDefault={submitForm} class="flex gap-5 flex-col p-5">
  <div>
  <Label for="email">Email</Label>
  <Input

frontend/src/routes/Protein.svelte

@@ -11,6 +11,7 @@
  import EntryCard from "../lib/EntryCard.svelte";
  import SimilarProteins from "../lib/SimilarProteins.svelte";
  import DelayedSpinner from "../lib/DelayedSpinner.svelte";
+ import { user } from "../lib/stores/user";
 
  const fileDownloadDropdown = ["pdb", "fasta"];
 
@@ -92,11 +93,14 @@
  >
  {/each}
  </Dropdown>
- <Button
- on:click={async () => {
- navigate(`/edit/${entry?.name}`);
- }}><PenOutline class="mr-2" size="lg" />Edit Entry</Button
- >
+ {#if $user.loggedIn}
+ <Button
+ on:click={async () => {
+ navigate(`/edit/${entry?.name}`);
+ }}
+ ><PenOutline class="mr-2" size="lg" />Edit Entry</Button
+ >
+ {/if}
  </div>
 
  <EntryCard title="Provided Information">

frontend/src/routes/Upload.svelte

@@ -12,10 +12,18 @@
  import { fileToString } from "../lib/format";
  import ArticleEditor from "../lib/ArticleEditor.svelte";
  import { onMount } from "svelte";
+ import Cookies from "js-cookie";
+ import {user} from "../lib/stores/user"
 
  let species: string[] | null;
  let selectedSpecies: string = "unknown";
+
+ const authToken = Cookies.get("auth")
  onMount(async () => {
+ if (!$user.loggedIn) {
+ alert("You are not logged in. You are being redirected to home. TODO: Make this better.")
+ navigate("/")
+ }
  species = await Backend.searchSpecies();
  });