sprechtl/PomeloNote
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'user-repo' into develop

Browse source
This commit is contained in:
sprechtl 2022-10-16 23:44:18 +02:00
commit fa91d5f670
10 changed files with 166 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

24
frontend/svelte/src/models/PomeloUtils.ts
View file

@ -1,4 +1,5 @@
import {parseCookies} from "nookies";
import type {Authentication} from "./authentication";
import {createErrorToast} from "./customToasts";
/**
* Capitalises first letter of string.
@ -22,13 +23,14 @@ export async function bearerFetch(endpoint: string, jwt: string, baseUrl: string
});
}
const getJwtCookie = () => {
// @ts-ignore
return parseCookies("/").jwt;
};
/**
* JWT Cookie
*/
export const jwt: string = getJwtCookie();
export function handleErrorsFromResponseWithToast(response: Authentication) {
if (response.error != null) {
if (response.error.details.errors) {
for (const error of response.error.details.errors) {
createErrorToast(error.message);
}
} else {
createErrorToast(response.error.message);
}
}
}

2
frontend/svelte/src/routes/login/models/authentication.ts → frontend/svelte/src/models/authentication.ts
View file

@ -1,4 +1,4 @@
import type {User} from "../../../models/user";
import type {User} from "./user";
/**
* User Login Auth.

2
frontend/svelte/src/models/NoteRepository.ts → frontend/svelte/src/models/repos/note/NoteRepository.ts
View file

@ -1,4 +1,4 @@
import type {Note} from "./types";
import type {Note} from "../../types";
export interface NoteRepository {
getNotes(): Promise<Note[]>;

6
frontend/svelte/src/models/StrapiNoteRepository.ts → frontend/svelte/src/models/repos/note/StrapiNoteRepository.ts
View file

@ -1,4 +1,4 @@
import type {Note} from "./types";
import type {Note} from "../../types";
import {parseCookies} from "nookies";
import type {NoteRepository} from "./NoteRepository";
import {currentNoteId} from "../stores";
@ -78,8 +78,8 @@ export class StrapiNoteRepository implements NoteRepository {
return "bearer TOKEN"
}
private static getAuthorizationHeader() {
const jwt = parseCookies().jwt;
static getAuthorizationHeader() {
const jwt = parseCookies('/').jwt;
return `bearer ${jwt}`
}
}

93
frontend/svelte/src/models/repos/user/StrapiUserRepo.ts Normal file
View file

@ -0,0 +1,93 @@
import type {UserRepository} from "./UserRepository";
import type {Authentication} from "../../authentication";
import type {HttpMethod} from "@sveltejs/kit/types/private";
import {StrapiNoteRepository} from "../note/StrapiNoteRepository";
import {error} from "@sveltejs/kit";
import {User} from "../../user";
export class StrapiUserRepo implements UserRepository {
private static instance: StrapiUserRepo;
public static getInstance(verification: boolean = true): StrapiUserRepo {
if (this.instance === undefined || this.instance === null) {
this.instance = new StrapiUserRepo();
this.instance.verify().then(() => {
if (verification && !this.instance.verified) {
window.location.href = "/login";
}
});
}
return this.instance;
}
private verified: boolean = false;
private constructor() {
}
private static api: string = "http://localhost:1337/api"
private static apiUserEndpoint: string = StrapiUserRepo.api + "/auth/local"
/**
* Verifies the current users jwt.
* @private
*/
private async verify() {
this.verified = false;
let result = await this.getMe();
if (!result.error) {
this.verified = true;
}
}
async getMe(): Promise<Authentication> {
const response = await StrapiUserRepo.fetchStrapi("/me", "GET", null, true, "/users")
return await response.json();
}
async registerUser(email: string, username: string, password: string): Promise<Authentication> {
const payload = {
email: email,
password: password,
username: username
};
const response = await StrapiUserRepo.fetchStrapi("/register", "POST", payload, false);
return await response.json();
}
async loginUser(identifier: string, password: string): Promise<Authentication> {
const payload = {
identifier: identifier,
password: password
};
const response = await StrapiUserRepo.fetchStrapi("/", "POST", payload, false);
return response.json();
}
private static async fetchStrapi(path: string, method: HttpMethod, body: any | null = null, authorization: boolean = true, customPath: any = null): Promise<Response> {
let requestInit: RequestInit = {
method: method,
};
if (authorization && body) {
requestInit["headers"] = {
authorization: StrapiNoteRepository.getAuthorizationHeader() ?? '',
'Accept': 'application/json',
'Content-Type': 'application/json'
}
} else if (authorization) {
requestInit["headers"] = {
authorization: StrapiNoteRepository.getAuthorizationHeader() ?? '',
}
} else if (body) {
requestInit["headers"] = {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
}
if (body) {
requestInit["body"] = JSON.stringify(body)
}
return await fetch((customPath) ? (this.api + customPath + path) : StrapiUserRepo.apiUserEndpoint + path, requestInit);
}
}

19
frontend/svelte/src/models/repos/user/UserRepository.ts Normal file
View file

@ -0,0 +1,19 @@
import type {Authentication} from "../../authentication";
export interface UserRepository {
/**
* Registers a new user.
* @param email
* @param username
* @param password
*/
registerUser(email: string, username: string, password: string): Promise<Authentication>;
/**
* Gets the current user.
* @param jwt
*/
getMe(jwt: string): Promise<Authentication>;
loginUser(identifier: string, password: string): Promise<Authentication>;
}

10
frontend/svelte/src/routes/+page.svelte
View file

@ -1,12 +1,14 @@
<script lang="ts">
import type {Note} from "../models/types";
import {onMount} from "svelte";
import {StrapiNoteRepository} from "../models/StrapiNoteRepository";
import {StrapiNoteRepository} from "../models/repos/note/StrapiNoteRepository";
import {StrapiUserRepo} from "../models/repos/user/StrapiUserRepo";
const noteRepo: StrapiNoteRepository = StrapiNoteRepository.getInstance();
let notes: Note[];
onMount(async () => {
StrapiUserRepo.getInstance();
notes = await noteRepo.getNotes();
notes.forEach(note => {
note.lastViewed = new Date(note.lastViewed);
@ -84,11 +86,11 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>PomeloNote | Home</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" rel="stylesheet">
</head>
<body>

18
frontend/svelte/src/routes/+page.ts
View file

@ -1,20 +1,6 @@
import {bearerFetch, jwt} from "../models/PomeloUtils";
import {StrapiUserRepo} from "../models/repos/user/StrapiUserRepo";
/** @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";
}
}
// StrapiUserRepo.getInstance();
}

55
frontend/svelte/src/routes/login/+page.svelte
View file

@ -1,9 +1,9 @@
<script lang="ts">
import {setCookie} from "nookies";
import type {Authentication} from "./models/authentication";
import { SvelteToast } from '@zerodevx/svelte-toast'
import {createErrorToast} from "../../models/customToasts";
import {SvelteToast} from '@zerodevx/svelte-toast'
import logo from "../../resources/images/logo2.svg";
import {handleErrorsFromResponseWithToast} from "../../models/PomeloUtils";
import {StrapiUserRepo} from "../../models/repos/user/StrapiUserRepo";
let user: string;
let password: string;
@ -14,31 +14,12 @@
* Handles the button click.
*/
async function handleSubmit() {
const endpoint = "http://localhost:1337/api/auth/local";
const payload = {
identifier: user,
password: password
};
const userRepo: StrapiUserRepo = StrapiUserRepo.getInstance(false);
const login = await fetch(endpoint, {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(payload)
})
const response = await userRepo.loginUser(user, password);
const response: Authentication = await login.json();
if (response.error != null){
if (response.error.details.errors){
for (const error of response.error.details.errors) {
createErrorToast(error.message);
}
} else{
createErrorToast(response.error.message);
}
if (response.error != null) {
handleErrorsFromResponseWithToast(response);
} else {
if (rememberMe) {
setCookie(null, 'jwt', response.jwt, {
@ -56,34 +37,34 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>PomeloNote | Login</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" rel="stylesheet">
</head>
<body>
<main class="form-signin w-100 m-auto">
<img class="img-fluid" src="{logo}" alt="Logo">
<img alt="Logo" class="img-fluid" src="{logo}">
<h1 class="h3 mb-3 fw-normal">Please sign in</h1>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInput" placeholder="name@example.com" bind:value={user}>
<input bind:value={user} class="form-control" id="floatingInput" placeholder="name@example.com" type="text">
<label for="floatingInput">Email address or username</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password" bind:value={password}>
<input bind:value={password} class="form-control" id="floatingPassword" placeholder="Password" type="password">
<label for="floatingPassword">Password</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="rememberMe" bind:checked={rememberMe}> Remember me
<input bind:checked={rememberMe} type="checkbox" value="rememberMe"> Remember me
</label>
</div>
<button class="w-100 btn btn-lg btn-primary" on:click={handleSubmit}>Sign in</button>
<a href="/register" class="opacity-75 d-flex justify-content-center text-center fs-6">No user yet? Register.</a>
<a class="opacity-75 d-flex justify-content-center text-center fs-6" href="/register">No user yet? Register.</a>
<p class="mt-5 mb-3 text-muted">&copy;2022</p>
</main>
@ -94,10 +75,4 @@
<style>
@import "../../userInput.css";
@import "../../customBootstrap.css";
.form-signin input[type="email"] {
margin-bottom: -1px !important;
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
</style>

46
frontend/svelte/src/routes/register/+page.svelte
View file

@ -1,8 +1,8 @@
<script lang="ts">
import logo from "../../resources/images/logo2.svg";
import {SvelteToast} from "@zerodevx/svelte-toast";
import type {Authentication} from "../login/models/authentication";
import {createErrorToast} from "../../models/customToasts";
import {StrapiUserRepo} from "../../models/repos/user/StrapiUserRepo";
import {handleErrorsFromResponseWithToast} from "../../models/PomeloUtils";
let user: string;
let password: string;
@ -13,32 +13,12 @@
* Handles the button click.
*/
async function handleSubmit() {
const endpoint = "http://localhost:1337/api/auth/local/register";
const payload = {
email: email,
password: password,
username: user
};
const userRepo: StrapiUserRepo = StrapiUserRepo.getInstance(false);
const login = await fetch(endpoint, {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(payload)
})
const response: Authentication = await login.json();
const response = await userRepo.registerUser(email, user, password);
if (response.error != null) {
if (response.error.details.errors) {
for (const error of response.error.details.errors) {
createErrorToast(error.message);
}
} else {
createErrorToast(response.error.message);
}
handleErrorsFromResponseWithToast(response);
} else {
window.location = "/login";
}
@ -49,29 +29,29 @@
lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>PomeloNote | Register</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" rel="stylesheet">
</head>
<body>
<main class="form-signin w-100 m-auto">
<img class="img-fluid" src="{logo}" alt="Logo">
<img alt="Logo" class="img-fluid" src="{logo}">
<h1 class="h3 mb-3 fw-normal">Register a new user</h1>
<div class="form-floating">
<input type="text" class="form-control" id="floatingUsr" placeholder="exampleUsername" bind:value={user}>
<input bind:value={user} class="form-control" id="floatingUsr" placeholder="exampleUsername" type="text">
<label for="floatingUsr">Username</label>
</div>
<div class="form-floating">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com" bind:value={email}>
<input bind:value={email} class="form-control" id="floatingInput" placeholder="name@example.com" type="email">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password" bind:value={password}>
<input bind:value={password} class="form-control" id="floatingPassword" placeholder="Password" type="password">
<label for="floatingPassword">Password</label>
</div>
@ -79,7 +59,7 @@
Register user
{#if user}: {user} {/if}
</button>
<a href="/login" class="opacity-75 d-flex justify-content-center text-center fs-6">Already registered? Login.</a>
<a class="opacity-75 d-flex justify-content-center text-center fs-6" href="/login">Already registered? Login.</a>
<p class="mt-5 mb-3 text-muted">&copy;2022</p>
</main>