diff --git a/frontend/svelte/package-lock.json b/frontend/svelte/package-lock.json index b9406a7..63551ad 100644 --- a/frontend/svelte/package-lock.json +++ b/frontend/svelte/package-lock.json @@ -8,6 +8,7 @@ "name": "svelte_pages", "version": "0.0.1", "dependencies": { + "bootstrap-icons": "^1.9.1", "nookies": "^2.5.2" }, "devDependencies": { @@ -465,6 +466,11 @@ "file-uri-to-path": "1.0.0" } }, + "node_modules/bootstrap-icons": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.9.1.tgz", + "integrity": "sha512-d4ZkO30MIkAhQ2nNRJqKXJVEQorALGbLWTuRxyCTJF96lRIV6imcgMehWGJUiJMJhglN0o2tqLIeDnMdiQEE9g==" + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -2744,6 +2750,11 @@ "file-uri-to-path": "1.0.0" } }, + "bootstrap-icons": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.9.1.tgz", + "integrity": "sha512-d4ZkO30MIkAhQ2nNRJqKXJVEQorALGbLWTuRxyCTJF96lRIV6imcgMehWGJUiJMJhglN0o2tqLIeDnMdiQEE9g==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/frontend/svelte/package.json b/frontend/svelte/package.json index 441ef4a..7ea33f8 100644 --- a/frontend/svelte/package.json +++ b/frontend/svelte/package.json @@ -22,6 +22,7 @@ }, "type": "module", "dependencies": { - "nookies": "^2.5.2" + "nookies": "^2.5.2", + "bootstrap-icons": "^1.9.1" } } diff --git a/frontend/svelte/src/models/PomeloUtils.ts b/frontend/svelte/src/models/PomeloUtils.ts index 62c9903..5d290ae 100644 --- a/frontend/svelte/src/models/PomeloUtils.ts +++ b/frontend/svelte/src/models/PomeloUtils.ts @@ -1,3 +1,5 @@ +import {parseCookies} from "nookies"; + /** * Capitalises first letter of string. * @param str @@ -18,4 +20,15 @@ export async function bearerFetch(endpoint: string, jwt: string, baseUrl: string Authorization: `Bearer ${jwt}` } }); -} \ No newline at end of file +} + + +const getJwtCookie = () => { + // @ts-ignore + return parseCookies("/").jwt; +}; + +/** + * JWT Cookie + */ +export const jwt: string = getJwtCookie(); \ No newline at end of file diff --git a/frontend/svelte/src/models/types.ts b/frontend/svelte/src/models/types.ts new file mode 100644 index 0000000..5ded795 --- /dev/null +++ b/frontend/svelte/src/models/types.ts @@ -0,0 +1,11 @@ +export interface Note { + id: number; + attributes: Attribute; +} + +export interface Attribute { + title: string; + content: string; + + lastViewed: Date; +} \ No newline at end of file diff --git a/frontend/svelte/src/routes/+layout.js b/frontend/svelte/src/routes/+layout.js deleted file mode 100644 index 5829b7e..0000000 --- a/frontend/svelte/src/routes/+layout.js +++ /dev/null @@ -1 +0,0 @@ -export const ssr = false; \ No newline at end of file diff --git a/frontend/svelte/src/routes/+page.svelte b/frontend/svelte/src/routes/+page.svelte index 871b615..f52d418 100644 --- a/frontend/svelte/src/routes/+page.svelte +++ b/frontend/svelte/src/routes/+page.svelte @@ -1,43 +1,28 @@ @@ -153,35 +122,44 @@ -
- -
- +
+
+ +
+ +
-
- -
    - {#each notes as note} -
  • handleMouseOverLi(note.id)} - on:mouseout={() => handleMouseOutLi(note.id)}> -
    -
    onNoteLiClick(note)}> - - {note.title}
    - {note.lastOpened} -     -
    -
    - -
    -
    -
    • - {/each} -
+
+
+ {#if notes} + +
    + {#each notes as note} +
  • handleMouseOverLi(note.id)} + on:mouseout={() => handleMouseOutLi(note.id)}> +
    +
    onNoteLiClick(note)}> +
    + {note.attributes.title} +
    +
    + {note.attributes.lastViewed.toLocaleDateString()} +
    +
    + +
    + +
    +
    +
    • + {/each} +
+ {/if} +
@@ -191,6 +169,7 @@ html, :root { --main-txt-color: black; + --sub-txt-color: gray; --cross-txt-color: red; --color-primary: #fff494; @@ -207,19 +186,23 @@ background-color: #ffffff; } - a { - color: var(--main-txt-color); - text-decoration: none; - } - li { list-style: none; padding: 6px 10px; + margin-bottom: 5px; + margin-top: 5px; border-bottom: 1px solid #ddd; + border-top: 1px solid #ddd; + border-radius: 10px; border-bottom-color: var(--color-primary-900); + border-top-color: var(--color-primary-900); background-color: var(--color-primary-600); } + li:hover { + background-color: var(--color-primary-700); + } + li button { float: right; border: none; @@ -228,10 +211,11 @@ margin: 0; font-size: 18px; cursor: pointer; + transform: scale(1.5); } li button:hover { - transform: scale(1.7); + transform: scale(2); } li:last-child { @@ -257,4 +241,9 @@ border: var(--color-primary-900); color: var(--main-txt-color); } + + .list-date-text { + color: var(--sub-txt-color); + font-size: 0.8314159265358979323846264338rem; + } \ No newline at end of file diff --git a/frontend/svelte/src/routes/+page.ts b/frontend/svelte/src/routes/+page.ts new file mode 100644 index 0000000..49e20b3 --- /dev/null +++ b/frontend/svelte/src/routes/+page.ts @@ -0,0 +1,20 @@ +import {bearerFetch, jwt} from "../models/PomeloUtils"; + +/** @type {import('./$types').PageLoad} */ +export async function load() { + let invalid = !jwt; + + if (!invalid) { + const request = await bearerFetch("/users/me", jwt); + const response = await request.json(); + + invalid = "error" in response; + } + + if (invalid) { + if (typeof window !== 'undefined') { + // @ts-ignore + window.location = "/login"; + } + } +} \ No newline at end of file diff --git a/frontend/svelte/src/routes/editor/+page.svelte b/frontend/svelte/src/routes/editor/+page.svelte index 3df1f70..b8f0b1a 100644 --- a/frontend/svelte/src/routes/editor/+page.svelte +++ b/frontend/svelte/src/routes/editor/+page.svelte @@ -1,31 +1,24 @@ - {"Pomelonote | Edit "} + {"Pomelonote | Edit " + currNote.title} -
-
- -
+
+ {currNote.content}
- \ No newline at end of file + diff --git a/frontend/svelte/src/types.ts b/frontend/svelte/src/types.ts deleted file mode 100644 index 9814953..0000000 --- a/frontend/svelte/src/types.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface Note { - id: number; - title: string; - content: string; - lastOpened: string; -} \ No newline at end of file