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

HTML for login adapted and register created

Browse source
This commit is contained in:
sprechtl 2022-10-03 23:10:37 +02:00
parent cf6ba862d6
commit 05735972ae
3 changed files with 102 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

13
frontend/svelte/package-lock.json generated
View file

@ -7,9 +7,6 @@
"": {
"name": "svelte_pages",
"version": "0.0.1",
"dependencies": {
"bootstrap-icons": "^1.9.1"
},
"dependencies": {
"nookies": "^2.5.2"
},
@ -468,11 +465,6 @@
"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",
@ -2752,11 +2744,6 @@
"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",

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

@ -83,6 +83,7 @@
</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>
<p class="mt-5 mb-3 text-muted">&copy;2022</p>
</main>

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

@ -0,0 +1,101 @@
<script lang="ts">
import logo from "../../resources/images/logo2.svg";
import {SvelteToast} from "@zerodevx/svelte-toast";
let user: string;
let password: string;
let email: string;
/**
* Handles the button click.
*/
async function handleSubmit() {
}
</script>
<html
lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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">
</head>
<body>
<main class="form-signin w-100 m-auto">
<img class="img-fluid" src="{logo}" alt="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}>
<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}>
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password" bind:value={password}>
<label for="floatingPassword">Password</label>
</div>
<button class="w-100 btn btn-lg btn-primary" disabled="{(!user || !email || !password)}" on:click={handleSubmit}>
Register user
{#if user}: {user} {/if}
</button>
<p class="mt-5 mb-3 text-muted">&copy;2022</p>
</main>
<SvelteToast></SvelteToast>
</body>
</html>
<style>
html,
body {
height: 100%;
}
body {
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
max-width: 330px;
padding: 15px;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.img-fluid {
margin-bottom: 15px;
}
</style>