Add reset password page

noebuerki · May 29, 2024 · c411270 · c411270
1 parent 76cfd1a
commit c411270
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 11 deletions.
diff --git a/docker-compose.local.yml b/docker-compose.local.yml
@@ -28,6 +28,8 @@ services:
       - 8000:8000
     volumes:
       - ./backend:/app/backend
+    env_file:
+      - ./.env
   frontend:
     build:
       context: frontend
@@ -40,4 +42,4 @@ services:
     ports:
       - 80:80
     volumes:
-      - ./frontend/build:/app/serve-folder
+      - ./frontend/build:/app/frontend
diff --git a/frontend/.docker/nginx/default.conf b/frontend/.docker/nginx/default.conf
@@ -12,9 +12,12 @@ server {
         proxy_set_header X-Forwarded-Proto $scheme;
     }
 
-    # Serve static files from /app/serve-folder
+    # Serve static files from /app/frontend
     location / {
-        root /app/serve-folder;
-        try_files $uri $uri/ /index.html;
+        root /app/frontend;
+
+        index index.html index.htm;
+
+        try_files $uri $uri.html $uri/ /index.html;
     }
 }
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -5,7 +5,7 @@ FROM node:18-alpine AS build
 WORKDIR /app
 
 # Copy remaining code
-COPY . /app
+COPY . .
 
 # Install dependecies
 RUN npm install
@@ -19,4 +19,4 @@ FROM nginx:alpine-perl
 COPY .docker/nginx/nginx.conf /etc/nginx/nginx.conf
 COPY .docker/nginx/default.conf /etc/nginx/conf.d/default.conf
 
-COPY --from=build /app/build /app/serve-folder
+COPY --from=build /app/build /app/frontend
diff --git a/frontend/src/lib/components/Header.svelte b/frontend/src/lib/components/Header.svelte
@@ -20,12 +20,16 @@
         <div class="flex">
             <DarkMode class="my-auto" />
             <NavHamburger />
-            {#if $user && $user.loggedIn}
-                <NavUl>
-                    <NavLi href="/dashboard">Dashboard</NavLi>
+            <NavUl>
+                {#if $user && $user.loggedIn}
+                    <NavLi href="/">Dashboard</NavLi>
                     <NavLi href="/logout">Logout</NavLi>
-                </NavUl>
-            {/if}
+                {:else if $user && !$user.loggedIn}
+                    <NavLi href="/login">Login</NavLi>
+                    <NavLi href="/register">Register</NavLi>
+                    <NavLi href="/forgot-password">Forgot Password</NavLi>
+                {/if}
+            </NavUl>
         </div>
     </NavContainer>
 </Navbar>

diff --git a/frontend/src/routes/forgot-password/+page.svelte b/frontend/src/routes/forgot-password/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Button, Card, Input, P } from "flowbite-svelte";
+    import { axios } from "$lib";
+    let form: HTMLFormElement;
+
+    async function handleSubmit() {
+        const formData = new FormData(form);
+        const email = formData.get("email") as string;
+        try {
+            await axios.post("/password_reset/", { email });
+            alert("Password reset link sent to your email");
+        } catch (error) {
+            alert("An error occurred. Please try again later.");
+        }
+    }
+    
+</script>
+<div class="container flex">
+    <div class="mx-auto container">
+        <h1 class="text-3xl font-semibold text-center mt-8 inline-block"> Password</h1>
+        <Card>
+            <P>Enter your email address and we will send you a link to reset your password.</P>
+            <form class="center mt-4" bind:this={form} on:submit|preventDefault={handleSubmit}>
+                <Input class="mb-4" type="email" label="Email" name="email" />
+                <Button class="ml-auto" type="submit">Submit</Button>
+            </form>
+        </Card>
+    </div>
+</div>