Fix up register form and add styles to email code form
ci/woodpecker/push/build Pipeline was successful
Details
ci/woodpecker/push/build Pipeline was successful
Details
This commit is contained in:
parent
7e19706f0c
commit
21bee958c2
|
@ -10,15 +10,72 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<form class="login-form" method="post" on:submit|preventDefault={submitLogin}>
|
<form class="email-code-widget" method="post" on:submit|preventDefault={submitLogin}>
|
||||||
<h1>Email Code</h1>
|
<div class="email-code-content">
|
||||||
|
<h1>Email Code</h1>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<label for="email-code">Email</label>
|
<label for="email-code">Email</label>
|
||||||
<input id="email-code" type="text" name="email-code" placeholder=" " autocomplete="email-code" required bind:value={inputCode} />
|
<input id="email-code" type="text" name="email-code" placeholder=" " autocomplete="email-code" required bind:value={inputCode} />
|
||||||
</section>
|
</section>
|
||||||
|
</div>
|
||||||
<section>
|
<div class="email-code-action">
|
||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</section>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import "../../assets/panel.scss";
|
||||||
|
|
||||||
|
.email-code-widget {
|
||||||
|
@include panel;
|
||||||
|
|
||||||
|
> .email-code-content {
|
||||||
|
background: var(--bg-panel);
|
||||||
|
border-radius: var(--large-curve) var(--large-curve) 0 0;
|
||||||
|
padding: 0 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
> h1 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 32px;
|
||||||
|
line-height: normal;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
> section {
|
||||||
|
padding-bottom: 16px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, auto);
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
> label {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
> input {
|
||||||
|
padding: 8px;
|
||||||
|
line-height: 24px;
|
||||||
|
width: 260px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: var(--small-curve);
|
||||||
|
border: 2px solid var(--primary-hover);
|
||||||
|
transition: border-color 100ms;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border: 2px solid var(--primary-text);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .email-code-action {
|
||||||
|
background: var(--bg-panel-action);
|
||||||
|
padding: 24px;
|
||||||
|
border-radius: 0 0 var(--large-curve) var(--large-curve);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -18,9 +18,7 @@
|
||||||
<section>
|
<section>
|
||||||
<label for="email">Email</label>
|
<label for="email">Email</label>
|
||||||
<input id="email" type="email" name="email" placeholder=" " autocomplete="username" required bind:value={inputEmail} />
|
<input id="email" type="email" name="email" placeholder=" " autocomplete="username" required bind:value={inputEmail} />
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<label for="current-password">Password</label>
|
<label for="current-password">Password</label>
|
||||||
<input id="current-password" name="current-password" type="password" autocomplete="current-password" required bind:value={inputPassword} />
|
<input id="current-password" name="current-password" type="password" autocomplete="current-password" required bind:value={inputPassword} />
|
||||||
</section>
|
</section>
|
||||||
|
@ -43,6 +41,9 @@
|
||||||
background: var(--bg-panel);
|
background: var(--bg-panel);
|
||||||
border-radius: var(--large-curve) var(--large-curve) 0 0;
|
border-radius: var(--large-curve) var(--large-curve) 0 0;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
> h1 {
|
> h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -53,10 +54,12 @@
|
||||||
|
|
||||||
> section {
|
> section {
|
||||||
padding-bottom: 16px;
|
padding-bottom: 16px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, auto);
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
> label {
|
> label {
|
||||||
width: 100px;
|
align-self: center;
|
||||||
display: inline-block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
> input {
|
> input {
|
||||||
|
@ -65,6 +68,13 @@
|
||||||
width: 260px;
|
width: 260px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
border-radius: var(--small-curve);
|
border-radius: var(--small-curve);
|
||||||
|
border: 2px solid var(--primary-hover);
|
||||||
|
transition: border-color 100ms;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border: 2px solid var(--primary-text);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,11 +2,18 @@
|
||||||
import {createEventDispatcher} from "svelte";
|
import {createEventDispatcher} from "svelte";
|
||||||
import {getEnv} from "~/utils/env";
|
import {getEnv} from "~/utils/env";
|
||||||
|
|
||||||
|
export let err: {message: string; log_id: string};
|
||||||
|
|
||||||
|
// Account
|
||||||
let inputEmail: string = "";
|
let inputEmail: string = "";
|
||||||
let inputUsername: string = "";
|
let inputTag: string = "";
|
||||||
let inputDisplayName: string = "";
|
|
||||||
let inputPassword: string = "";
|
let inputPassword: string = "";
|
||||||
let inputRepeat: string = "";
|
let inputRepeat: string = "";
|
||||||
|
|
||||||
|
// Profile
|
||||||
|
let inputDisplayName: string = "";
|
||||||
|
let inputPronouns: number;
|
||||||
|
let inputGender: string;
|
||||||
let inputBirthday: Date;
|
let inputBirthday: Date;
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
@ -14,10 +21,13 @@
|
||||||
function submitLogin() {
|
function submitLogin() {
|
||||||
dispatch("submit", {
|
dispatch("submit", {
|
||||||
email: inputEmail,
|
email: inputEmail,
|
||||||
username: inputUsername,
|
username: inputTag,
|
||||||
displayName: inputDisplayName,
|
|
||||||
password: inputPassword,
|
password: inputPassword,
|
||||||
repeatPassword: inputRepeat,
|
repeatPassword: inputRepeat,
|
||||||
|
displayName: inputDisplayName,
|
||||||
|
pronouns: inputPronouns,
|
||||||
|
gender: inputGender,
|
||||||
|
birthday: inputBirthday,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -30,21 +40,15 @@
|
||||||
<div class="register-content">
|
<div class="register-content">
|
||||||
<h1>Register</h1>
|
<h1>Register</h1>
|
||||||
|
|
||||||
<section>
|
<h2>Account</h2>
|
||||||
<h2>Account</h2>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<label for="email">Email</label>
|
<label for="email">Email</label>
|
||||||
<input id="email" type="email" name="email" placeholder=" " autocomplete="username" required bind:value={inputEmail} />
|
<input id="email" type="email" name="email" placeholder=" " autocomplete="username" required bind:value={inputEmail} />
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
<label for="tag">Tag</label>
|
||||||
<label for="username">Username</label>
|
<input id="tag" type="text" name="tag" placeholder=" " autocomplete="off" required bind:value={inputTag} />
|
||||||
<input id="username" type="text" name="username" placeholder=" " autocomplete="off" required bind:value={inputUsername} />
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<label for="new-password">Password</label>
|
<label for="new-password">Password</label>
|
||||||
<input
|
<input
|
||||||
id="new-password"
|
id="new-password"
|
||||||
|
@ -55,9 +59,7 @@
|
||||||
required
|
required
|
||||||
bind:value={inputPassword}
|
bind:value={inputPassword}
|
||||||
/>
|
/>
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<label for="repeat-password">Repeat Password</label>
|
<label for="repeat-password">Repeat Password</label>
|
||||||
<input
|
<input
|
||||||
id="repeat-password"
|
id="repeat-password"
|
||||||
|
@ -82,23 +84,28 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<h2>Profile <span class="optional">(optional)</span></h2>
|
||||||
<h2>Profile <span class="optional">(optional)</span></h2>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<label for="display_name">Display Name</label>
|
<label for="display_name">Display Name</label>
|
||||||
<input id="display_name" type="text" name="display_name" placeholder=" " autocomplete="off" required bind:value={inputDisplayName} />
|
<input id="display_name" type="text" name="display_name" placeholder=" " autocomplete="off" bind:value={inputDisplayName} />
|
||||||
</section>
|
|
||||||
|
<label for="pronouns">Pronouns</label>
|
||||||
|
<select id="pronouns" name="pronouns" bind:value={inputPronouns}>
|
||||||
|
<option value={0}>unknown (they/them)</option>
|
||||||
|
<option value={1}>he/him</option>
|
||||||
|
<option value={2}>she/her</option>
|
||||||
|
<option value={3}>they/them</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<label for="gender">Gender</label>
|
||||||
|
<input id="gender" type="text" name="gender" placeholder="male/female/whatever..." autocomplete="off" bind:value={inputGender} />
|
||||||
|
|
||||||
<section>
|
|
||||||
<label for="birthday">Birthday</label>
|
<label for="birthday">Birthday</label>
|
||||||
<input id="birthday" type="date" name="birthday" bind:value={inputBirthday} />
|
<input id="birthday" type="date" name="birthday" bind:value={inputBirthday} />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<h2>Policy</h2>
|
||||||
<h2>Policy</h2>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<div>
|
<div>
|
||||||
|
@ -108,6 +115,13 @@
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<div class="register-action">
|
<div class="register-action">
|
||||||
|
{#if err}
|
||||||
|
<section class="error-message">
|
||||||
|
<div class="error-header">Error</div>
|
||||||
|
<div>{err.message}</div>
|
||||||
|
<div>Log ID: {err.log_id}</div>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
<section>
|
<section>
|
||||||
<button type="submit">Register</button>
|
<button type="submit">Register</button>
|
||||||
</section>
|
</section>
|
||||||
|
@ -116,6 +130,7 @@
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "../../assets/panel.scss";
|
@import "../../assets/panel.scss";
|
||||||
|
@import "../../assets/material-symbols.scss";
|
||||||
|
|
||||||
.register-widget {
|
.register-widget {
|
||||||
@include panel;
|
@include panel;
|
||||||
|
@ -124,40 +139,54 @@
|
||||||
background: var(--bg-panel);
|
background: var(--bg-panel);
|
||||||
border-radius: var(--large-curve) var(--large-curve) 0 0;
|
border-radius: var(--large-curve) var(--large-curve) 0 0;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
a[target="_blank"] {
|
||||||
|
margin-right: 20px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
@include mso;
|
||||||
|
position: absolute;
|
||||||
|
margin-left: 4px;
|
||||||
|
content: "open_in_new";
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
> h1 {
|
> h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 32px;
|
padding: 32px 32px 0;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> h2 {
|
||||||
|
//margin-right: 300px;
|
||||||
|
|
||||||
|
> .optional {
|
||||||
|
font-size: 75%;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
> section {
|
> section {
|
||||||
padding-bottom: 16px;
|
padding-bottom: 16px;
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-direction: row;
|
grid-template-columns: repeat(2, auto);
|
||||||
align-items: center;
|
gap: 16px;
|
||||||
|
|
||||||
> h2 {
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
> .optional {
|
|
||||||
font-size: 75%;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> label {
|
> label {
|
||||||
width: 80px;
|
align-self: center;
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
> input {
|
> input {
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
width: 260px;
|
width: 300px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
border-radius: var(--small-curve);
|
border-radius: var(--small-curve);
|
||||||
border: 2px solid var(--primary-hover);
|
border: 2px solid var(--primary-hover);
|
||||||
|
@ -168,6 +197,19 @@
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> select {
|
||||||
|
padding: 8px;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: var(--small-curve);
|
||||||
|
border: 2px solid var(--primary-hover);
|
||||||
|
transition: border-color 100ms;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border: 2px solid var(--primary-text);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -187,4 +229,16 @@
|
||||||
color: darken(#e5625e, 5);
|
color: darken(#e5625e, 5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
background-color: darken(#e5625e, 10);
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
> .error-header {
|
||||||
|
font-size: 120%;
|
||||||
|
font-weight: 1000;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -2,15 +2,58 @@
|
||||||
import Page from "~/lib/Page.svelte";
|
import Page from "~/lib/Page.svelte";
|
||||||
import RegisterForm from "~/components/register/RegisterForm.svelte";
|
import RegisterForm from "~/components/register/RegisterForm.svelte";
|
||||||
import {postRegister} from "~/api/register";
|
import {postRegister} from "~/api/register";
|
||||||
|
import {navigate} from "svelte-navigator";
|
||||||
|
|
||||||
type RegisterFormResp = {access_token?: string; refresh_token?: string};
|
type RegisterFormResp = {access_token?: string; refresh_token?: string};
|
||||||
|
|
||||||
|
let created: boolean = false;
|
||||||
|
let err: {message: string; log_id: string} = undefined;
|
||||||
|
|
||||||
async function submitRegister(e: {detail: object}) {
|
async function submitRegister(e: {detail: object}) {
|
||||||
console.info(e.detail);
|
console.info(e.detail);
|
||||||
postRegister(e.detail, undefined);
|
let x = await postRegister(e.detail, undefined);
|
||||||
|
if (x.message !== undefined) {
|
||||||
|
if (x.message === "Account Created") created = true;
|
||||||
|
else err = x;
|
||||||
|
} else err == undefined;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Page>
|
<Page>
|
||||||
<RegisterForm on:submit={submitRegister} />
|
{#if created}
|
||||||
|
<div class="register-widget">
|
||||||
|
<div class="register-content">
|
||||||
|
<h1>Register</h1>
|
||||||
|
<p>Account created, please login to continue.</p>
|
||||||
|
</div>
|
||||||
|
<div class="register-action">
|
||||||
|
<button on:click={() => navigate("/login")}>Login</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<RegisterForm on:submit={submitRegister} {err} />
|
||||||
|
{/if}
|
||||||
</Page>
|
</Page>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import "../../assets/panel.scss";
|
||||||
|
|
||||||
|
.register-widget {
|
||||||
|
@include panel;
|
||||||
|
|
||||||
|
> .register-content {
|
||||||
|
background: var(--bg-panel);
|
||||||
|
border-radius: var(--large-curve) var(--large-curve) 0 0;
|
||||||
|
padding: 0 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .register-action {
|
||||||
|
background: var(--bg-panel-action);
|
||||||
|
padding: 24px;
|
||||||
|
border-radius: 0 0 var(--large-curve) var(--large-curve);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
Reference in New Issue