fix(frontend): refactor Nav into layout

wale · wale · commit 043bc1486495 · 2024-03-02T15:23:06.000+11:00
feat(frontend): login page skeleton
fix(server): refactor Prisma/JWT utils into `server/` directory
diff --git a/components/Layout.vue b/components/Layout.vue
@@ -1,7 +1,10 @@
 <template>
-    <body class="bg-grayscale-300 text-grayscale-950">
+    <div
+        class="flex flex-col flex-grow h-screen bg-grayscale-300 text-grayscale-950"
+    >
+        <Nav />
         <slot />
-    </body>
+    </div>
 </template>
 
 <script setup lang="ts">
diff --git a/components/home/Hero.vue b/components/home/Hero.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="flex h-full items-center justify-center flex-col gap-4 md:gap-8 pt-24"
+        class="flex h-full items-center justify-center flex-col gap-4 md:gap-8"
     >
         <h1 class="text-4xl md:text-7xl font-black">Readconquista</h1>
         <h3 class="text-lg md:text-3xl font-medium">
diff --git a/package.json b/package.json
@@ -46,4 +46,4 @@
     "typescript": "^5.3.3"
   },
   "license": "Zlib"
-}
+}
diff --git a/pages/index.vue b/pages/index.vue
@@ -3,7 +3,6 @@
         title="Readconquista"
         description="Library card collection for Melbourne, AU"
     >
-        <Nav />
         <Hero />
     </Layout>
 </template>
diff --git a/pages/login.vue b/pages/login.vue
@@ -0,0 +1,18 @@
+<template>
+    <Layout title="Login | Readconquista" description="Login to Readconquista">
+        <div
+            class="flex h-full items-center justify-center flex-col gap-4 md:gap-8 pt-24"
+        >
+            <h2 class="text-xl md:text-2xl font-semibold">Login</h2>
+        </div>
+    </Layout>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+
+import { useAuthStore } from "~/utils/authStore";
+import { pinia } from "~/utils/pinia";
+
+const { authenticated } = storeToRefs(useAuthStore(pinia));
+</script>
diff --git a/server/api/auth/login.post.ts b/server/api/auth/login.post.ts
@@ -2,9 +2,9 @@ import * as argon2 from "argon2";
 import { v4 } from "uuid";
 import { z } from "zod";
 
-import db from "~/utils/db";
-import { generateTokens } from "~/utils/jwt";
-import { addRefreshToken } from "~/utils/refreshToken";
+import db from "~/server/utils/db";
+import { generateTokens } from "~/server/utils/jwt";
+import { addRefreshToken } from "~/server/utils/refreshToken";
 
 const schema = z.object({
     username: z.string().min(3).optional(),
diff --git a/server/api/auth/register.post.ts b/server/api/auth/register.post.ts
@@ -2,9 +2,9 @@ import * as argon2 from "argon2";
 import { v4 } from "uuid";
 import { z } from "zod";
 
-import db from "~/utils/db";
-import { generateTokens } from "~/utils/jwt";
-import { addRefreshToken } from "~/utils/refreshToken";
+import db from "~/server/utils/db";
+import { generateTokens } from "~/server/utils/jwt";
+import { addRefreshToken } from "~/server/utils/refreshToken";
 
 const schema = z.object({
     username: z.string().min(3),
diff --git a/server/utils/db.ts b/server/utils/db.ts
@@ -3,7 +3,7 @@
 
 import { PrismaClient, type LibraryService } from "@prisma/client";
 
-import type { Library } from "./types/library";
+import type { Library } from "../../utils/types/library";
 
 const prisma = new PrismaClient().$extends({
     model: {
diff --git a/server/utils/jwt.ts b/server/utils/jwt.ts
@@ -3,19 +3,19 @@ import jwt from "jsonwebtoken";
 
 import crypto from "node:crypto";
 
-const runtimeConfig = useRuntimeConfig();
-
 export function hashToken(token: string) {
     return crypto.createHash("sha512").update(token).digest("hex");
 }
 
 export function generateAccessToken(user: User): string {
+    const runtimeConfig = useRuntimeConfig();
     return jwt.sign({ userId: user.id }, runtimeConfig.jwtAccessSecret, {
         expiresIn: "5m",
     });
 }
 
 export function generateRefreshToken(user: User, jti: string) {
+    const runtimeConfig = useRuntimeConfig();
     return jwt.sign(
         {
             userId: user.id,
diff --git a/server/utils/refreshToken.ts b/server/utils/refreshToken.ts
diff --git a/utils/pinia.ts b/utils/pinia.ts
@@ -0,0 +1,3 @@
+import { createPinia } from "pinia";
+
+export const pinia = createPinia();
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`<template>`
`2`	`2`	`<div`
`3`		`- class="flex h-full items-center justify-center flex-col gap-4 md:gap-8 pt-24"`
	`3`	`+ class="flex h-full items-center justify-center flex-col gap-4 md:gap-8"`
`4`	`4`	`>`
`5`	`5`	`<h1 class="text-4xl md:text-7xl font-black">Readconquista</h1>`
`6`	`6`	`<h3 class="text-lg md:text-3xl font-medium">`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,6 @@`
`3`	`3`	`title="Readconquista"`
`4`	`4`	`description="Library card collection for Melbourne, AU"`
`5`	`5`	`>`
`6`		`- <Nav />`
`7`	`6`	`<Hero />`
`8`	`7`	`</Layout>`
`9`	`8`	`</template>`
Original file line number	Diff line number	Diff line change
`@@ -3,19 +3,19 @@ import jwt from "jsonwebtoken";`
`3`	`3`
`4`	`4`	`import crypto from "node:crypto";`
`5`	`5`
`6`		`-const runtimeConfig = useRuntimeConfig();`
`7`		`-`
`8`	`6`	`export function hashToken(token: string) {`
`9`	`7`	`return crypto.createHash("sha512").update(token).digest("hex");`
`10`	`8`	`}`
`11`	`9`
`12`	`10`	`export function generateAccessToken(user: User): string {`
	`11`	`+ const runtimeConfig = useRuntimeConfig();`
`13`	`12`	`return jwt.sign({ userId: user.id }, runtimeConfig.jwtAccessSecret, {`
`14`	`13`	`expiresIn: "5m",`
`15`	`14`	`});`
`16`	`15`	`}`
`17`	`16`
`18`	`17`	`export function generateRefreshToken(user: User, jti: string) {`
	`18`	`+ const runtimeConfig = useRuntimeConfig();`
`19`	`19`	`return jwt.sign(`
`20`	`20`	`{`
`21`	`21`	`userId: user.id,`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { createPinia } from "pinia";`
	`2`	`+`
	`3`	`+export const pinia = createPinia();`