frontend: initial commit
This commit is contained in:
$(pass /github/name)
12
frontend/README.md
Normal file
12
frontend/README.md
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
# Frontend
|
||||||
|
|
||||||
|
## Run locally
|
||||||
|
|
||||||
|
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# or start the server and open the app in a new browser tab
|
||||||
|
npm run dev -- --open
|
||||||
|
```
|
||||||
64
frontend/src/app.d.ts
vendored
Normal file
64
frontend/src/app.d.ts
vendored
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
// See https://kit.svelte.dev/docs/types#app
|
||||||
|
|
||||||
|
interface Subscription {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
details: string;
|
||||||
|
conditions: string | null;
|
||||||
|
monthly_fee: number;
|
||||||
|
hourly_rate: number;
|
||||||
|
included_hours_per_year: number | null;
|
||||||
|
included_hours_per_month: number | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Membership {
|
||||||
|
id: string;
|
||||||
|
status: string;
|
||||||
|
start_date: string;
|
||||||
|
end_date: string;
|
||||||
|
parent_member_id: number | null;
|
||||||
|
subscription_model: Subscription | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface BankAccount {
|
||||||
|
id: string;
|
||||||
|
mandate_date_signed: string;
|
||||||
|
bank: string;
|
||||||
|
account_holder_name: string;
|
||||||
|
iban: string;
|
||||||
|
bic: string;
|
||||||
|
mandate_reference: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface User {
|
||||||
|
email: string;
|
||||||
|
first_name: string;
|
||||||
|
last_name: string;
|
||||||
|
phone: string | null;
|
||||||
|
notes: string;
|
||||||
|
address: string;
|
||||||
|
zip_code: string;
|
||||||
|
city: string;
|
||||||
|
status: number;
|
||||||
|
id: string;
|
||||||
|
role_id: number;
|
||||||
|
date_of_birth: string;
|
||||||
|
membership: Membership;
|
||||||
|
bank_account: BankAccount;
|
||||||
|
company: string | null;
|
||||||
|
profile_picture: string | null;
|
||||||
|
payment_status: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
namespace App {
|
||||||
|
// interface Error {}
|
||||||
|
interface Locals {
|
||||||
|
user: User;
|
||||||
|
}
|
||||||
|
// interface PageData {}
|
||||||
|
// interface Platform {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export {};
|
||||||
18
frontend/src/app.html
Normal file
18
frontend/src/app.html
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Poiret+One&family=Quicksand:wght@400;500;600;700&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
%sveltekit.head%
|
||||||
|
</head>
|
||||||
|
<body data-sveltekit-preload-data="hover">
|
||||||
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
58
frontend/src/hooks.server.js
Normal file
58
frontend/src/hooks.server.js
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
import { BASE_API_URI } from "$lib/utils/constants.js";
|
||||||
|
|
||||||
|
/** @type {import('@sveltejs/kit').Handle} */
|
||||||
|
export async function handle({ event, resolve }) {
|
||||||
|
if (event.locals.user) {
|
||||||
|
// if there is already a user in session load page as normal
|
||||||
|
return await resolve(event);
|
||||||
|
}
|
||||||
|
|
||||||
|
// get cookies from browser
|
||||||
|
const jwt = event.cookies.get("jwt");
|
||||||
|
|
||||||
|
if (!jwt) {
|
||||||
|
// if there is no jwt load page as normal
|
||||||
|
return await resolve(event);
|
||||||
|
}
|
||||||
|
const response = await fetch(`${BASE_API_URI}/users/backend/current-user`, {
|
||||||
|
credentials: "include",
|
||||||
|
headers: {
|
||||||
|
Cookie: `jwt=${jwt}`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
// Clear the invalid JWT cookie
|
||||||
|
event.cookies.delete("jwt", { path: "/" });
|
||||||
|
return await resolve(event);
|
||||||
|
}
|
||||||
|
// find the user based on the jwt
|
||||||
|
|
||||||
|
const userData = await response.json();
|
||||||
|
|
||||||
|
event.locals.user = userData;
|
||||||
|
// event.locals.user = await response.json();
|
||||||
|
if (event.locals.user.date_of_birth) {
|
||||||
|
event.locals.user.date_of_birth =
|
||||||
|
event.locals.user.date_of_birth.split("T")[0];
|
||||||
|
}
|
||||||
|
if (event.locals.user.membership) {
|
||||||
|
if (event.locals.user.membership.start_date) {
|
||||||
|
event.locals.user.membership.start_date =
|
||||||
|
event.locals.user.membership.start_date.split("T")[0];
|
||||||
|
}
|
||||||
|
if (event.locals.user.membership.end_date) {
|
||||||
|
event.locals.user.membership.end_date =
|
||||||
|
event.locals.user.membership.end_date.split("T")[0];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
event.locals.user.bank_account &&
|
||||||
|
event.locals.user.bank_account.mandate_date_signed
|
||||||
|
) {
|
||||||
|
event.locals.user.bank_account.mandate_date_signed =
|
||||||
|
event.locals.user.bank_account.mandate_date_signed.split("T")[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
// load page as normal
|
||||||
|
return await resolve(event);
|
||||||
|
}
|
||||||
7
frontend/src/index.test.js
Normal file
7
frontend/src/index.test.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { describe, it, expect } from 'vitest';
|
||||||
|
|
||||||
|
describe('sum test', () => {
|
||||||
|
it('adds 1 + 2 to equal 3', () => {
|
||||||
|
expect(1 + 2).toBe(3);
|
||||||
|
});
|
||||||
|
});
|
||||||
24
frontend/src/lib/components/Footer.svelte
Normal file
24
frontend/src/lib/components/Footer.svelte
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<script>
|
||||||
|
// import Developer from "$lib/img/hero-image.png";
|
||||||
|
|
||||||
|
const year = new Date().getFullYear();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<footer class="footer-container">
|
||||||
|
<div class="footer-branding-container">
|
||||||
|
<div class="footer-branding">
|
||||||
|
<a class="footer-crafted-by-container" href="https://github.com/Sirneij">
|
||||||
|
<span>Developed by</span>
|
||||||
|
<!-- <img
|
||||||
|
class="footer-branded-crafted-img"
|
||||||
|
src={Developer}
|
||||||
|
alt="Alexander Stölting"
|
||||||
|
/> -->
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<span class="footer-copyright"
|
||||||
|
>© {year} Alexander Stölting. All Rights Reserved.</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
79
frontend/src/lib/components/Header.svelte
Normal file
79
frontend/src/lib/components/Header.svelte
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
<script>
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
import { applyAction, enhance } from "$app/forms";
|
||||||
|
import { page } from "$app/stores";
|
||||||
|
// import Developer from "$lib/img/hero-image.png";
|
||||||
|
import Avatar from "$lib/img/teamavatar.png";
|
||||||
|
onMount(() => {
|
||||||
|
console.log("Page data in Header:", $page);
|
||||||
|
});
|
||||||
|
|
||||||
|
$: {
|
||||||
|
console.log("Page data updated:", $page);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<header class="header">
|
||||||
|
<div class="header-container">
|
||||||
|
<div class="header-left">
|
||||||
|
<div class="header-crafted-by-container">
|
||||||
|
<!-- <a href="https://tiny-bits.net/">
|
||||||
|
<span>Developed by</span><img
|
||||||
|
src={Developer}
|
||||||
|
alt="Alexander Stölting"
|
||||||
|
/> -->
|
||||||
|
<!-- </a> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<div class="header-nav-item" class:active={$page.url.pathname === "/"}>
|
||||||
|
<a href="/">home</a>
|
||||||
|
</div>
|
||||||
|
{#if !$page.data.user}
|
||||||
|
<div
|
||||||
|
class="header-nav-item"
|
||||||
|
class:active={$page.url.pathname === "/auth/login"}
|
||||||
|
>
|
||||||
|
<a href="/auth/login">login</a>
|
||||||
|
</div>
|
||||||
|
<!-- <div
|
||||||
|
class="header-nav-item"
|
||||||
|
class:active={$page.url.pathname === "/auth/register"}
|
||||||
|
>
|
||||||
|
<a href="/auth/register">register</a>
|
||||||
|
</div> -->
|
||||||
|
{:else}
|
||||||
|
<div class="header-nav-item">
|
||||||
|
<a href="/auth/about/{$page.data.user.id}">
|
||||||
|
<img
|
||||||
|
src={$page.data.user.thumbnail
|
||||||
|
? $page.data.user.thumbnail
|
||||||
|
: Avatar}
|
||||||
|
alt={`${$page.data.user.first_name} ${$page.data.user.last_name}`}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<!-- {#if $page.data.user.is_superuser}
|
||||||
|
<div
|
||||||
|
class="header-nav-item"
|
||||||
|
class:active={$page.url.pathname.startsWith("/auth/admin")}
|
||||||
|
>
|
||||||
|
<a href="/auth/admin">admin</a>
|
||||||
|
</div>
|
||||||
|
{/if} -->
|
||||||
|
<form
|
||||||
|
class="header-nav-item"
|
||||||
|
action="/auth/logout"
|
||||||
|
method="POST"
|
||||||
|
use:enhance={async () => {
|
||||||
|
return async ({ result }) => {
|
||||||
|
await applyAction(result);
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<button type="submit">logout</button>
|
||||||
|
</form>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
14
frontend/src/lib/components/Transition.svelte
Normal file
14
frontend/src/lib/components/Transition.svelte
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<script>
|
||||||
|
import { slide } from "svelte/transition";
|
||||||
|
/** @type {string} */
|
||||||
|
export let key;
|
||||||
|
|
||||||
|
/** @type {number} */
|
||||||
|
export let duration = 300;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#key key}
|
||||||
|
<div in:slide={{ duration, delay: duration }} out:slide={{ duration }}>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
{/key}
|
||||||
521
frontend/src/lib/css/styles.css
Normal file
521
frontend/src/lib/css/styles.css
Normal file
@@ -0,0 +1,521 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "Roboto Mono";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
src: url(https://fonts.gstatic.com/s/robotomono/v22/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_gPq_ROW9.ttf)
|
||||||
|
format("truetype");
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "Roboto Mono";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url(https://fonts.gstatic.com/s/robotomono/v22/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_ROW9.ttf)
|
||||||
|
format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
padding: 0 30px;
|
||||||
|
background-color: black;
|
||||||
|
color: #9b9b9b;
|
||||||
|
font-family: "Quicksand", sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 5em auto 0 auto;
|
||||||
|
}
|
||||||
|
pre,
|
||||||
|
code {
|
||||||
|
display: inline;
|
||||||
|
font-family: "Roboto Mono", monospace;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
font-family: "Roboto Mono", monospace;
|
||||||
|
color: white;
|
||||||
|
border-style: none;
|
||||||
|
height: 21px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
margin: 0 0 45px 0;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
margin: 0 0 2rem 0;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 0 0 45px;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
margin: 0 0 32px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
transition: border 0.2s ease-in-out;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #00b7ef;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
border-bottom-color: #00b7ef;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
li strong {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.image {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 0 32px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.image img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.optanon-alert-box-wrapper {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.hide-mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@media (min-width: 680px) {
|
||||||
|
body {
|
||||||
|
margin: 8em auto 0 auto;
|
||||||
|
}
|
||||||
|
.hide-mobile {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
padding: 3em 0 0;
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
.header.top-banner-open {
|
||||||
|
margin-top: 5px;
|
||||||
|
transition: all 0.2s linear;
|
||||||
|
}
|
||||||
|
.header .header-container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: calc(1200px + 10em);
|
||||||
|
height: 5em;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.header .header-container .header-left {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
.header .header-container .header-left .header-crafted-by-container {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
.header .header-container .header-left .header-crafted-by-container a {
|
||||||
|
display: flex;
|
||||||
|
color: #9b9b9b;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.header .header-container .header-left .header-crafted-by-container a img {
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
.header .header-container .header-left .header-crafted-by-container a span {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 2px 1ch 0 0;
|
||||||
|
}
|
||||||
|
.header .header-container .header-left .header-crafted-by-container .auth0 {
|
||||||
|
margin-left: 1ch;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.header .header-container .header-right {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
justify-content: space-between;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.header .header-container .header-right .header-nav-item {
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.header .header-container .header-right .header-nav-item button {
|
||||||
|
all: unset;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.header .header-container .header-right .header-nav-item.active a,
|
||||||
|
.header .header-container .header-right .header-nav-item.active button {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .header-container .header-right a img {
|
||||||
|
margin-top: -0.4rem;
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .header-container .header-right .header-nav-item a,
|
||||||
|
.header .header-container .header-right .header-nav-item button {
|
||||||
|
transition: color 0.3s ease-in-out;
|
||||||
|
display: block;
|
||||||
|
padding: 20px 0;
|
||||||
|
border: none;
|
||||||
|
color: #9b9b9b;
|
||||||
|
}
|
||||||
|
.header .header-container .header-right .header-nav-item:hover a,
|
||||||
|
.header .header-container .header-right .header-nav-item:hover button {
|
||||||
|
color: #fdfff5;
|
||||||
|
}
|
||||||
|
@media (min-width: 680px) {
|
||||||
|
.header {
|
||||||
|
padding: 3em 5rem 0;
|
||||||
|
}
|
||||||
|
.header.top-banner-open {
|
||||||
|
margin-top: 48px;
|
||||||
|
}
|
||||||
|
.header .header-container {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.header .header-container .header-right {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.header .header-container .header-right .header-nav-item {
|
||||||
|
margin-left: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.button-dark {
|
||||||
|
transition:
|
||||||
|
border-color 0.3s ease-in-out,
|
||||||
|
background-color 0.3s ease-in-out;
|
||||||
|
color: white;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 18px 28px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid #595b5c;
|
||||||
|
}
|
||||||
|
.button-dark:hover {
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
.button-colorful {
|
||||||
|
transition:
|
||||||
|
border-color 0.3s ease-in-out,
|
||||||
|
background-color 0.3s ease-in-out;
|
||||||
|
color: white;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 18px 28px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #d43aff;
|
||||||
|
border: 1px solid #d43aff;
|
||||||
|
}
|
||||||
|
.button-colorful:hover {
|
||||||
|
background-color: #c907ff;
|
||||||
|
border-color: #c907ff;
|
||||||
|
}
|
||||||
|
.button-orange {
|
||||||
|
transition:
|
||||||
|
border-color 0.3s ease-in-out,
|
||||||
|
background-color 0.3s ease-in-out;
|
||||||
|
color: white;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 18px 28px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #eb5424;
|
||||||
|
border: 1px solid #eb5424;
|
||||||
|
}
|
||||||
|
.button-orange:hover {
|
||||||
|
background-color: #ca3f12;
|
||||||
|
border-color: #ca3f12;
|
||||||
|
}
|
||||||
|
.button-colorful:disabled {
|
||||||
|
transition:
|
||||||
|
border-color 0.3s ease-in-out,
|
||||||
|
background-color 0.3s ease-in-out;
|
||||||
|
color: white;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 18px 28px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #9a9a9a;
|
||||||
|
border: 1px solid #9a9a9a;
|
||||||
|
}
|
||||||
|
.hero-container {
|
||||||
|
max-width: 795px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 auto 70px auto;
|
||||||
|
}
|
||||||
|
.hero-container .hero-logo {
|
||||||
|
margin-top: 88px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
.hero-container .hero-subtitle {
|
||||||
|
font-size: 20px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 32px;
|
||||||
|
margin: 0 0 45px 0;
|
||||||
|
}
|
||||||
|
.hero-container .hero-buttons-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.hero-container .hero-buttons-container button {
|
||||||
|
margin: 0 8px;
|
||||||
|
}
|
||||||
|
@media (min-width: 680px) {
|
||||||
|
.hero-container {
|
||||||
|
margin: 0 auto 140px auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
transition: opacity 0.2s ease-in-out;
|
||||||
|
color: white;
|
||||||
|
letter-spacing: 0;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .content {
|
||||||
|
width: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
.container .content .step-title {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 86px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.container .content .step-subtitle {
|
||||||
|
position: relative;
|
||||||
|
top: -5px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 680px) {
|
||||||
|
.container .content {
|
||||||
|
margin-top: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 680px) {
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
left: 100px;
|
||||||
|
display: flex;
|
||||||
|
width: calc(100% - 100px);
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.container .content {
|
||||||
|
max-width: 795px;
|
||||||
|
padding-left: 116px;
|
||||||
|
}
|
||||||
|
.container .content .step-title {
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.input-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 0 20px;
|
||||||
|
width: 100%;
|
||||||
|
height: 73px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #2f2f2f;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-family: "Roboto Mono", monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.input-box .label {
|
||||||
|
text-transform: lowercase;
|
||||||
|
margin: 0 1ch 0 0;
|
||||||
|
}
|
||||||
|
.input-box .input {
|
||||||
|
background-color: #494848;
|
||||||
|
border-radius: 6px;
|
||||||
|
outline: none;
|
||||||
|
border: 3px solid #494848;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 444px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
@media (min-width: 680px) {
|
||||||
|
.input-box {
|
||||||
|
padding: 0 30px;
|
||||||
|
margin: 32px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: first baseline;
|
||||||
|
}
|
||||||
|
@media (max-width: 680px) {
|
||||||
|
.btn-container {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.btn-container p {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.warning {
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: rgb(255 228 230);
|
||||||
|
border: 1px solid rgb(225 29 72);
|
||||||
|
border-radius: 6px;
|
||||||
|
color: rgb(225 29 72);
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.warning a {
|
||||||
|
color: rgb(225 29 72);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.warning.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
margin-top: 10rem;
|
||||||
|
padding: 30px 40px;
|
||||||
|
background: #2f3132;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.error p {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
.error p.intro {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
.error .button-colorful {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
@media (min-width: 680px) {
|
||||||
|
.error {
|
||||||
|
padding: 65px 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-branding-container {
|
||||||
|
color: white;
|
||||||
|
font-weight: 300;
|
||||||
|
margin-bottom: 73px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-branding-container .footer-branding {
|
||||||
|
display: flex;
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
.footer-branding-container .footer-branding {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
margin: 30px 0 0;
|
||||||
|
}
|
||||||
|
.footer-branding-container .footer-branding .footer-crafted-by-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.footer-branding-container .footer-branding .footer-crafted-by-container span {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 3px 1ch 0 0;
|
||||||
|
}
|
||||||
|
.footer-branding-container
|
||||||
|
.footer-branding
|
||||||
|
.footer-crafted-by-container
|
||||||
|
.footer-branded-crafted-img {
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-branding-container .footer-branding .footer-copyright {
|
||||||
|
color: #696969;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
.footer-container {
|
||||||
|
width: 100%;
|
||||||
|
color: white;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 680px) {
|
||||||
|
.footer-container {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple-loader {
|
||||||
|
--b: 20px; /* border thickness */
|
||||||
|
--n: 15; /* number of dashes*/
|
||||||
|
--g: 7deg; /* gap between dashes*/
|
||||||
|
--c: #d43aff; /* the color */
|
||||||
|
|
||||||
|
width: 40px; /* size */
|
||||||
|
aspect-ratio: 1;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 1px; /* get rid of bad outlines */
|
||||||
|
background: conic-gradient(#0000, var(--c)) content-box;
|
||||||
|
--_m: /* we use +/-1deg between colors to avoid jagged edges */ repeating-conic-gradient(
|
||||||
|
#0000 0deg,
|
||||||
|
#000 1deg calc(360deg / var(--n) - var(--g) - 1deg),
|
||||||
|
#0000 calc(360deg / var(--n) - var(--g)) calc(360deg / var(--n))
|
||||||
|
),
|
||||||
|
radial-gradient(
|
||||||
|
farthest-side,
|
||||||
|
#0000 calc(98% - var(--b)),
|
||||||
|
#000 calc(100% - var(--b))
|
||||||
|
);
|
||||||
|
-webkit-mask: var(--_m);
|
||||||
|
mask: var(--_m);
|
||||||
|
-webkit-mask-composite: destination-in;
|
||||||
|
mask-composite: intersect;
|
||||||
|
animation: load 1s infinite steps(var(--n));
|
||||||
|
}
|
||||||
|
@keyframes load {
|
||||||
|
to {
|
||||||
|
transform: rotate(1turn);
|
||||||
|
}
|
||||||
|
}
|
||||||
505
frontend/src/lib/css/styles.min.css
vendored
Normal file
505
frontend/src/lib/css/styles.min.css
vendored
Normal file
@@ -0,0 +1,505 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "Roboto Mono";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
src: url(https://fonts.gstatic.com/s/robotomono/v22/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_gPq_ROW9.ttf)
|
||||||
|
format("truetype");
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "Roboto Mono";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url(https://fonts.gstatic.com/s/robotomono/v22/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_ROW9.ttf)
|
||||||
|
format("truetype");
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
padding: 0 30px;
|
||||||
|
background-color: #000;
|
||||||
|
color: #9b9b9b;
|
||||||
|
font-family: Quicksand, sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 5em auto 0 auto;
|
||||||
|
}
|
||||||
|
code,
|
||||||
|
pre {
|
||||||
|
display: inline;
|
||||||
|
font-family: "Roboto Mono", monospace;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
font-family: "Roboto Mono", monospace;
|
||||||
|
color: #fff;
|
||||||
|
border-style: none;
|
||||||
|
height: 21px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
margin: 0 0 45px 0;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
margin: 0 0 2rem 0;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 0 0 45px;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
margin: 0 0 32px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
transition: border 0.2s ease-in-out;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #00b7ef;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
border-bottom-color: #00b7ef;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
li strong {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.image {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 0 32px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.image img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.optanon-alert-box-wrapper {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.hide-mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@media (min-width: 680px) {
|
||||||
|
body {
|
||||||
|
margin: 8em auto 0 auto;
|
||||||
|
}
|
||||||
|
.hide-mobile {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
padding: 3em 0 0;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
.header.top-banner-open {
|
||||||
|
margin-top: 5px;
|
||||||
|
transition: all 0.2s linear;
|
||||||
|
}
|
||||||
|
.header .header-container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: calc(1200px + 10em);
|
||||||
|
height: 5em;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.header .header-container .header-left {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
.header .header-container .header-left .header-crafted-by-container {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
.header .header-container .header-left .header-crafted-by-container a {
|
||||||
|
display: flex;
|
||||||
|
color: #9b9b9b;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.header .header-container .header-left .header-crafted-by-container a img {
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
.header .header-container .header-left .header-crafted-by-container a span {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 2px 1ch 0 0;
|
||||||
|
}
|
||||||
|
.header .header-container .header-left .header-crafted-by-container .auth0 {
|
||||||
|
margin-left: 1ch;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.header .header-container .header-right {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
justify-content: space-between;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.header .header-container .header-right .header-nav-item {
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.header .header-container .header-right .header-nav-item button {
|
||||||
|
all: unset;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.header .header-container .header-right .header-nav-item.active a,
|
||||||
|
.header .header-container .header-right .header-nav-item.active button {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.header .header-container .header-right a img {
|
||||||
|
margin-top: -0.4rem;
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
.header .header-container .header-right .header-nav-item a,
|
||||||
|
.header .header-container .header-right .header-nav-item button {
|
||||||
|
transition: color 0.3s ease-in-out;
|
||||||
|
display: block;
|
||||||
|
padding: 20px 0;
|
||||||
|
border: none;
|
||||||
|
color: #9b9b9b;
|
||||||
|
}
|
||||||
|
.header .header-container .header-right .header-nav-item:hover a,
|
||||||
|
.header .header-container .header-right .header-nav-item:hover button {
|
||||||
|
color: #fdfff5;
|
||||||
|
}
|
||||||
|
@media (min-width: 680px) {
|
||||||
|
.header {
|
||||||
|
padding: 3em 5rem 0;
|
||||||
|
}
|
||||||
|
.header.top-banner-open {
|
||||||
|
margin-top: 48px;
|
||||||
|
}
|
||||||
|
.header .header-container {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.header .header-container .header-right {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.header .header-container .header-right .header-nav-item {
|
||||||
|
margin-left: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.button-dark {
|
||||||
|
transition:
|
||||||
|
border-color 0.3s ease-in-out,
|
||||||
|
background-color 0.3s ease-in-out;
|
||||||
|
color: #fff;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 18px 28px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid #595b5c;
|
||||||
|
}
|
||||||
|
.button-dark:hover {
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
.button-colorful {
|
||||||
|
transition:
|
||||||
|
border-color 0.3s ease-in-out,
|
||||||
|
background-color 0.3s ease-in-out;
|
||||||
|
color: #fff;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 18px 28px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #d43aff;
|
||||||
|
border: 1px solid #d43aff;
|
||||||
|
}
|
||||||
|
.button-colorful:hover {
|
||||||
|
background-color: #c907ff;
|
||||||
|
border-color: #c907ff;
|
||||||
|
}
|
||||||
|
.button-orange {
|
||||||
|
transition:
|
||||||
|
border-color 0.3s ease-in-out,
|
||||||
|
background-color 0.3s ease-in-out;
|
||||||
|
color: #fff;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 18px 28px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #eb5424;
|
||||||
|
border: 1px solid #eb5424;
|
||||||
|
}
|
||||||
|
.button-orange:hover {
|
||||||
|
background-color: #ca3f12;
|
||||||
|
border-color: #ca3f12;
|
||||||
|
}
|
||||||
|
.button-colorful:disabled {
|
||||||
|
transition:
|
||||||
|
border-color 0.3s ease-in-out,
|
||||||
|
background-color 0.3s ease-in-out;
|
||||||
|
color: #fff;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 18px 28px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #9a9a9a;
|
||||||
|
border: 1px solid #9a9a9a;
|
||||||
|
}
|
||||||
|
.hero-container {
|
||||||
|
max-width: 795px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 auto 70px auto;
|
||||||
|
}
|
||||||
|
.hero-container .hero-logo {
|
||||||
|
margin-top: 88px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
.hero-container .hero-subtitle {
|
||||||
|
font-size: 20px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 32px;
|
||||||
|
margin: 0 0 45px 0;
|
||||||
|
}
|
||||||
|
.hero-container .hero-buttons-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.hero-container .hero-buttons-container button {
|
||||||
|
margin: 0 8px;
|
||||||
|
}
|
||||||
|
@media (min-width: 680px) {
|
||||||
|
.hero-container {
|
||||||
|
margin: 0 auto 140px auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
transition: opacity 0.2s ease-in-out;
|
||||||
|
color: #fff;
|
||||||
|
letter-spacing: 0;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.container .content {
|
||||||
|
width: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
.container .content .step-title {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 86px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.container .content .step-subtitle {
|
||||||
|
position: relative;
|
||||||
|
top: -5px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
@media (max-width: 680px) {
|
||||||
|
.container .content {
|
||||||
|
margin-top: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 680px) {
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
left: 100px;
|
||||||
|
display: flex;
|
||||||
|
width: calc(100% - 100px);
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.container .content {
|
||||||
|
max-width: 795px;
|
||||||
|
padding-left: 116px;
|
||||||
|
}
|
||||||
|
.container .content .step-title {
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.input-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 0 20px;
|
||||||
|
width: 100%;
|
||||||
|
height: 73px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #2f2f2f;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-family: "Roboto Mono", monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.input-box .label {
|
||||||
|
text-transform: lowercase;
|
||||||
|
margin: 0 1ch 0 0;
|
||||||
|
}
|
||||||
|
.input-box .input {
|
||||||
|
background-color: #494848;
|
||||||
|
border-radius: 6px;
|
||||||
|
outline: 0;
|
||||||
|
border: 3px solid #494848;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 444px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
@media (min-width: 680px) {
|
||||||
|
.input-box {
|
||||||
|
padding: 0 30px;
|
||||||
|
margin: 32px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: first baseline;
|
||||||
|
}
|
||||||
|
@media (max-width: 680px) {
|
||||||
|
.btn-container {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.btn-container p {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.warning {
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: rgb(255 228 230);
|
||||||
|
border: 1px solid rgb(225 29 72);
|
||||||
|
border-radius: 6px;
|
||||||
|
color: rgb(225 29 72);
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.warning a {
|
||||||
|
color: rgb(225 29 72);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.warning.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.error {
|
||||||
|
margin-top: 10rem;
|
||||||
|
padding: 30px 40px;
|
||||||
|
background: #2f3132;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.error p {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
.error p.intro {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
.error .button-colorful {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
@media (min-width: 680px) {
|
||||||
|
.error {
|
||||||
|
padding: 65px 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footer-branding-container {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 300;
|
||||||
|
margin-bottom: 73px;
|
||||||
|
}
|
||||||
|
.footer-branding-container .footer-branding {
|
||||||
|
display: flex;
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
.footer-branding-container .footer-branding {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
margin: 30px 0 0;
|
||||||
|
}
|
||||||
|
.footer-branding-container .footer-branding .footer-crafted-by-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.footer-branding-container .footer-branding .footer-crafted-by-container span {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 3px 1ch 0 0;
|
||||||
|
}
|
||||||
|
.footer-branding-container
|
||||||
|
.footer-branding
|
||||||
|
.footer-crafted-by-container
|
||||||
|
.footer-branded-crafted-img {
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
.footer-branding-container .footer-branding .footer-copyright {
|
||||||
|
color: #696969;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
.footer-container {
|
||||||
|
width: 100%;
|
||||||
|
color: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
@media (min-width: 680px) {
|
||||||
|
.footer-container {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.simple-loader {
|
||||||
|
--b: 20px;
|
||||||
|
--n: 15;
|
||||||
|
--g: 7deg;
|
||||||
|
--c: #d43aff;
|
||||||
|
width: 40px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 1px;
|
||||||
|
background: conic-gradient(#0000, var(--c)) content-box;
|
||||||
|
--_m: repeating-conic-gradient(
|
||||||
|
#0000 0deg,
|
||||||
|
#000 1deg calc(360deg / var(--n) - var(--g) - 1deg),
|
||||||
|
#0000 calc(360deg / var(--n) - var(--g)) calc(360deg / var(--n))
|
||||||
|
),
|
||||||
|
radial-gradient(
|
||||||
|
farthest-side,
|
||||||
|
#0000 calc(98% - var(--b)),
|
||||||
|
#000 calc(100% - var(--b))
|
||||||
|
);
|
||||||
|
-webkit-mask: var(--_m);
|
||||||
|
mask: var(--_m);
|
||||||
|
-webkit-mask-composite: destination-in;
|
||||||
|
mask-composite: intersect;
|
||||||
|
animation: load 1s infinite steps(var(--n));
|
||||||
|
}
|
||||||
|
@keyframes load {
|
||||||
|
to {
|
||||||
|
transform: rotate(1turn);
|
||||||
|
}
|
||||||
|
}
|
||||||
3
frontend/src/lib/utils/constants.js
Normal file
3
frontend/src/lib/utils/constants.js
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export const BASE_API_URI = import.meta.env.DEV
|
||||||
|
? import.meta.env.VITE_BASE_API_URI_DEV
|
||||||
|
: import.meta.env.VITE_BASE_API_URI_PROD;
|
||||||
105
frontend/src/lib/utils/helpers.js
Normal file
105
frontend/src/lib/utils/helpers.js
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
// @ts-nocheck
|
||||||
|
import { quintOut } from "svelte/easing";
|
||||||
|
import { crossfade } from "svelte/transition";
|
||||||
|
|
||||||
|
export const [send, receive] = crossfade({
|
||||||
|
duration: (d) => Math.sqrt(d * 200),
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
fallback(node, params) {
|
||||||
|
const style = getComputedStyle(node);
|
||||||
|
const transform = style.transform === "none" ? "" : style.transform;
|
||||||
|
|
||||||
|
return {
|
||||||
|
duration: 600,
|
||||||
|
easing: quintOut,
|
||||||
|
css: (t) => `
|
||||||
|
transform: ${transform} scale(${t});
|
||||||
|
opacity: ${t}
|
||||||
|
`,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Validates an email field
|
||||||
|
* @file lib/utils/helpers/input.validation.ts
|
||||||
|
* @param {string} email - The email to validate
|
||||||
|
*/
|
||||||
|
export const isValidEmail = (email) => {
|
||||||
|
const EMAIL_REGEX =
|
||||||
|
/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
|
||||||
|
return EMAIL_REGEX.test(email.trim());
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Validates a strong password field
|
||||||
|
* @file lib/utils/helpers/input.validation.ts
|
||||||
|
* @param {string} password - The password to validate
|
||||||
|
*/
|
||||||
|
export const isValidPasswordStrong = (password) => {
|
||||||
|
const strongRegex = new RegExp(
|
||||||
|
"^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})"
|
||||||
|
);
|
||||||
|
|
||||||
|
return strongRegex.test(password.trim());
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Validates a medium password field
|
||||||
|
* @file lib/utils/helpers/input.validation.ts
|
||||||
|
* @param {string} password - The password to validate
|
||||||
|
*/
|
||||||
|
export const isValidPasswordMedium = (password) => {
|
||||||
|
const mediumRegex = new RegExp(
|
||||||
|
"^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})"
|
||||||
|
);
|
||||||
|
|
||||||
|
return mediumRegex.test(password.trim());
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Test whether or not an object is empty.
|
||||||
|
* @param {Record<string, string>} obj - The object to test
|
||||||
|
* @returns `true` or `false`
|
||||||
|
*/
|
||||||
|
|
||||||
|
export function isEmpty(obj) {
|
||||||
|
for (const _i in obj) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Test whether or not an object is empty.
|
||||||
|
* @param {any} obj - The object to test
|
||||||
|
* @returns `true` or `false`
|
||||||
|
*/
|
||||||
|
|
||||||
|
export function formatError(obj) {
|
||||||
|
const errors = [];
|
||||||
|
if (typeof obj === "object" && obj !== null) {
|
||||||
|
if (Array.isArray(obj)) {
|
||||||
|
obj.forEach((/** @type {Object} */ error) => {
|
||||||
|
Object.keys(error).map((k) => {
|
||||||
|
errors.push({
|
||||||
|
error: error[k],
|
||||||
|
id: Math.random() * 1000,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
Object.keys(obj).map((k) => {
|
||||||
|
errors.push({
|
||||||
|
error: obj[k],
|
||||||
|
id: Math.random() * 1000,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
errors.push({
|
||||||
|
error: obj.charAt(0).toUpperCase() + obj.slice(1),
|
||||||
|
id: 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return errors;
|
||||||
|
}
|
||||||
105
frontend/src/lib/utils/utils.js
Normal file
105
frontend/src/lib/utils/utils.js
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
// @ts-nocheck
|
||||||
|
import { quintOut } from "svelte/easing";
|
||||||
|
import { crossfade } from "svelte/transition";
|
||||||
|
|
||||||
|
export const [send, receive] = crossfade({
|
||||||
|
duration: (d) => Math.sqrt(d * 200),
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
fallback(node, params) {
|
||||||
|
const style = getComputedStyle(node);
|
||||||
|
const transform = style.transform === "none" ? "" : style.transform;
|
||||||
|
|
||||||
|
return {
|
||||||
|
duration: 600,
|
||||||
|
easing: quintOut,
|
||||||
|
css: (t) => `
|
||||||
|
transform: ${transform} scale(${t});
|
||||||
|
opacity: ${t}
|
||||||
|
`,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Validates an email field
|
||||||
|
* @file lib/utils/helpers/input.validation.ts
|
||||||
|
* @param {string} email - The email to validate
|
||||||
|
*/
|
||||||
|
export const isValidEmail = (email) => {
|
||||||
|
const EMAIL_REGEX =
|
||||||
|
/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
|
||||||
|
return EMAIL_REGEX.test(email.trim());
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Validates a strong password field
|
||||||
|
* @file lib/utils/helpers/input.validation.ts
|
||||||
|
* @param {string} password - The password to validate
|
||||||
|
*/
|
||||||
|
export const isValidPasswordStrong = (password) => {
|
||||||
|
const strongRegex = new RegExp(
|
||||||
|
"^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})"
|
||||||
|
);
|
||||||
|
|
||||||
|
return strongRegex.test(password.trim());
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Validates a medium password field
|
||||||
|
* @file lib/utils/helpers/input.validation.ts
|
||||||
|
* @param {string} password - The password to validate
|
||||||
|
*/
|
||||||
|
export const isValidPasswordMedium = (password) => {
|
||||||
|
const mediumRegex = new RegExp(
|
||||||
|
"^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})"
|
||||||
|
);
|
||||||
|
|
||||||
|
return mediumRegex.test(password.trim());
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Test whether or not an object is empty.
|
||||||
|
* @param {Record<string, string>} obj - The object to test
|
||||||
|
* @returns `true` or `false`
|
||||||
|
*/
|
||||||
|
|
||||||
|
export function isEmpty(obj) {
|
||||||
|
for (const _i in obj) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Test whether or not an object is empty.
|
||||||
|
* @param {any} obj - The object to test
|
||||||
|
* @returns `true` or `false`
|
||||||
|
*/
|
||||||
|
|
||||||
|
export function formatError(obj) {
|
||||||
|
const errors = [];
|
||||||
|
if (typeof obj === "object" && obj !== null) {
|
||||||
|
if (Array.isArray(obj)) {
|
||||||
|
obj.forEach((/** @type {Object} */ error) => {
|
||||||
|
Object.keys(error).map((k) => {
|
||||||
|
errors.push({
|
||||||
|
error: error[k],
|
||||||
|
id: Math.random() * 1000,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
Object.keys(obj).map((k) => {
|
||||||
|
errors.push({
|
||||||
|
error: obj[k],
|
||||||
|
id: Math.random() * 1000,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
errors.push({
|
||||||
|
error: obj.charAt(0).toUpperCase() + obj.slice(1),
|
||||||
|
id: 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return errors;
|
||||||
|
}
|
||||||
5
frontend/src/routes/+layout.js
Normal file
5
frontend/src/routes/+layout.js
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
/** @type {import('./$types').LayoutLoad} */
|
||||||
|
export async function load({ fetch, url, data }) {
|
||||||
|
const { user } = data;
|
||||||
|
return { fetch, url: url.pathname, user };
|
||||||
|
}
|
||||||
6
frontend/src/routes/+layout.server.js
Normal file
6
frontend/src/routes/+layout.server.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
/** @type {import('./$types').LayoutServerLoad} */
|
||||||
|
export async function load({ locals }) {
|
||||||
|
return {
|
||||||
|
user: locals.user,
|
||||||
|
};
|
||||||
|
}
|
||||||
17
frontend/src/routes/+layout.svelte
Normal file
17
frontend/src/routes/+layout.svelte
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<script>
|
||||||
|
import Footer from "$lib/components/Footer.svelte";
|
||||||
|
import Header from "$lib/components/Header.svelte";
|
||||||
|
import Transition from "$lib/components/Transition.svelte";
|
||||||
|
import "$lib/css/styles.min.css";
|
||||||
|
|
||||||
|
/** @type {import('./$types').PageData} */
|
||||||
|
export let data;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Transition key={data.url} duration={600}>
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</Transition>
|
||||||
19
frontend/src/routes/+page.svelte
Normal file
19
frontend/src/routes/+page.svelte
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
<!-- <script>
|
||||||
|
import Developer from "$lib/img/hero-image.png";
|
||||||
|
</script> -->
|
||||||
|
|
||||||
|
<div class="hero-container">
|
||||||
|
<!-- <div class="hero-logo"><img src={Developer} alt="Alexander Stölting" /></div> -->
|
||||||
|
<h3 class="hero-subtitle subtitle">
|
||||||
|
This application is the demonstration of a series of tutorials on
|
||||||
|
session-based authentication using Go at the backend and JavaScript
|
||||||
|
(SvelteKit) on the front-end.
|
||||||
|
</h3>
|
||||||
|
<div class="hero-buttons-container">
|
||||||
|
<a
|
||||||
|
class="button-dark"
|
||||||
|
href="https://dev.to/sirneij/series/23239"
|
||||||
|
data-learn-more>Learn more</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
98
frontend/src/routes/auth/login/+page.server.js
Normal file
98
frontend/src/routes/auth/login/+page.server.js
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
import { BASE_API_URI } from "$lib/utils/constants";
|
||||||
|
import { formatError } from "$lib/utils/helpers";
|
||||||
|
import { fail, redirect } from "@sveltejs/kit";
|
||||||
|
|
||||||
|
/** @type {import('./$types').PageServerLoad} */
|
||||||
|
export async function load({ locals }) {
|
||||||
|
// redirect user if logged in
|
||||||
|
if (locals.user) {
|
||||||
|
throw redirect(302, "/");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @type {import('./$types').Actions} */
|
||||||
|
export const actions = {
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param request - The request object
|
||||||
|
* @param fetch - Fetch object from sveltekit
|
||||||
|
* @param cookies - SvelteKit's cookie object
|
||||||
|
* @returns Error data or redirects user to the home page or the previous page
|
||||||
|
*/
|
||||||
|
login: async ({ request, fetch, cookies }) => {
|
||||||
|
const data = await request.formData();
|
||||||
|
const email = String(data.get("email"));
|
||||||
|
const password = String(data.get("password"));
|
||||||
|
const next = String(data.get("next"));
|
||||||
|
|
||||||
|
/** @type {RequestInit} */
|
||||||
|
const requestInitOptions = {
|
||||||
|
method: "POST",
|
||||||
|
credentials: "include",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
email: email,
|
||||||
|
password: password,
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
|
||||||
|
const res = await fetch(`${BASE_API_URI}/users/login/`, requestInitOptions);
|
||||||
|
|
||||||
|
console.log("Login response status:", res.status);
|
||||||
|
console.log("Login response headers:", Object.fromEntries(res.headers));
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
let errorMessage = `HTTP error! status: ${res.status}`;
|
||||||
|
try {
|
||||||
|
const errorData = await res.json();
|
||||||
|
errorMessage = errorData.error || errorMessage;
|
||||||
|
} catch (parseError) {
|
||||||
|
console.error("Failed to parse error response:", parseError);
|
||||||
|
errorMessage = await res.text(); // Get the raw response text if JSON parsing fails
|
||||||
|
}
|
||||||
|
console.error("Login failed:", errorMessage);
|
||||||
|
return fail(res.status, {
|
||||||
|
errors: [{ error: errorMessage, id: Date.now() }],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const responseBody = await res.json();
|
||||||
|
console.log("Login response body:", responseBody);
|
||||||
|
|
||||||
|
// Check for the cookie in the response headers
|
||||||
|
const setCookieHeader = res.headers.get("set-cookie");
|
||||||
|
console.log("Set-Cookie header:", setCookieHeader);
|
||||||
|
|
||||||
|
if (setCookieHeader) {
|
||||||
|
// Parse the Set-Cookie header to get the JWT
|
||||||
|
const jwtCookie = setCookieHeader.split(";")[0];
|
||||||
|
const [cookieName, cookieValue] = jwtCookie.split("=");
|
||||||
|
if (cookieName.trim() === "jwt") {
|
||||||
|
console.log("JWT cookie found in response");
|
||||||
|
cookies.set("jwt", cookieValue.trim(), {
|
||||||
|
path: "/",
|
||||||
|
httpOnly: true,
|
||||||
|
sameSite: "strict",
|
||||||
|
secure: process.env.NODE_ENV === "production",
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
console.log("JWT cookie not found in response");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log("No Set-Cookie header in response");
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Redirecting to:", next || "/");
|
||||||
|
throw redirect(303, next || "/");
|
||||||
|
},
|
||||||
|
// if (!res.ok) {
|
||||||
|
// const response = await res.json();
|
||||||
|
// const errors = formatError(response.error);
|
||||||
|
// return fail(400, { errors: errors });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// throw redirect(303, next || "/");
|
||||||
|
// },
|
||||||
|
};
|
||||||
76
frontend/src/routes/auth/login/+page.svelte
Normal file
76
frontend/src/routes/auth/login/+page.svelte
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
<script>
|
||||||
|
import { applyAction, enhance } from "$app/forms";
|
||||||
|
import { page } from "$app/stores";
|
||||||
|
import { receive, send } from "$lib/utils/helpers";
|
||||||
|
|
||||||
|
/** @type {import('./$types').ActionData} */
|
||||||
|
export let form;
|
||||||
|
|
||||||
|
/** @type {import('./$types').SubmitFunction} */
|
||||||
|
const handleLogin = async () => {
|
||||||
|
return async ({ result }) => {
|
||||||
|
await applyAction(result);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
let message = "";
|
||||||
|
if ($page.url.searchParams.get("message")) {
|
||||||
|
message = $page.url.search.split("=")[1].replaceAll("%20", " ");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<form
|
||||||
|
class="content"
|
||||||
|
method="POST"
|
||||||
|
action="?/login"
|
||||||
|
use:enhance={handleLogin}
|
||||||
|
>
|
||||||
|
<h1 class="step-title">Login User</h1>
|
||||||
|
{#if form?.errors}
|
||||||
|
{#each form?.errors as error (error.id)}
|
||||||
|
<h4
|
||||||
|
class="step-subtitle warning"
|
||||||
|
in:receive={{ key: error.id }}
|
||||||
|
out:send={{ key: error.id }}
|
||||||
|
>
|
||||||
|
{error.error}
|
||||||
|
</h4>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if message}
|
||||||
|
<h4 class="step-subtitle">{message}</h4>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="hidden"
|
||||||
|
name="next"
|
||||||
|
value={$page.url.searchParams.get("next")}
|
||||||
|
/>
|
||||||
|
<div class="input-box">
|
||||||
|
<span class="label">Email:</span>
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
placeholder="Email address"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="input-box">
|
||||||
|
<span class="label">Password:</span>
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
type="password"
|
||||||
|
name="password"
|
||||||
|
placeholder="Password"
|
||||||
|
/>
|
||||||
|
<a href="/auth/password/request-change" style="margin-left: 1rem;"
|
||||||
|
>Forgot password?</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="btn-container">
|
||||||
|
<button class="button-dark">Login</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
43
frontend/src/routes/auth/logout/+page.server.js
Normal file
43
frontend/src/routes/auth/logout/+page.server.js
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
import { BASE_API_URI } from "$lib/utils/constants";
|
||||||
|
import { fail, redirect } from "@sveltejs/kit";
|
||||||
|
|
||||||
|
/** @type {import('./$types').PageServerLoad} */
|
||||||
|
export async function load({ locals }) {
|
||||||
|
// redirect user if not logged in
|
||||||
|
if (!locals.user) {
|
||||||
|
throw redirect(302, `/auth/login?next=/auth/logout`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @type {import('./$types').Actions} */
|
||||||
|
export const actions = {
|
||||||
|
default: async ({ fetch, cookies }) => {
|
||||||
|
/** @type {RequestInit} */
|
||||||
|
const requestInitOptions = {
|
||||||
|
method: "POST",
|
||||||
|
credentials: "include",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
Cookie: `jwt=${cookies.get("jwt")}`,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const res = await fetch(
|
||||||
|
`${BASE_API_URI}/users/backend/logout/`,
|
||||||
|
requestInitOptions
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
const response = await res.json();
|
||||||
|
const errors = [];
|
||||||
|
errors.push({ error: response.error, id: 0 });
|
||||||
|
return fail(400, { errors: errors });
|
||||||
|
}
|
||||||
|
|
||||||
|
// eat the cookie
|
||||||
|
cookies.delete("jwt", { path: "/" });
|
||||||
|
|
||||||
|
// redirect the user
|
||||||
|
throw redirect(302, "/auth/login");
|
||||||
|
},
|
||||||
|
};
|
||||||
16
frontend/svelte.config.js
Normal file
16
frontend/svelte.config.js
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
// import adapter from '@sveltejs/adapter-auto';
|
||||||
|
import adapter from '@sveltejs/adapter-vercel';
|
||||||
|
|
||||||
|
/** @type {import('@sveltejs/kit').Config} */
|
||||||
|
const config = {
|
||||||
|
kit: {
|
||||||
|
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
||||||
|
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
|
||||||
|
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
||||||
|
adapter: adapter({
|
||||||
|
runtime: 'edge'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
9
frontend/vite.config.js
Normal file
9
frontend/vite.config.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import { sveltekit } from '@sveltejs/kit/vite';
|
||||||
|
import { defineConfig } from 'vitest/config';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [sveltekit()],
|
||||||
|
test: {
|
||||||
|
include: ['src/**/*.{test,spec}.{js,ts}']
|
||||||
|
}
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user