Add register form styling
ci/woodpecker/push/build Pipeline was successful
Details
ci/woodpecker/push/build Pipeline was successful
Details
This commit is contained in:
parent
effa14442d
commit
a5b0b4ddd9
GPG Key ID:
6C9D970C50D26A25
|
|
@ -1,3 +1,6 @@
|
|||
VITE_API_URL=https://api.example.com
|
||||
VITE_TITLE=Title
|
||||
VITE_CSS_VAR=https://example.com/path/to/vars # automatically add `.{light,dark}.css`
|
||||
|
||||
VITE_LINK_TERMS=https://example.com/terms
|
||||
VITE_LINK_PRIVACY=https://example.com/privacy
|
||||
|
|
|
|||
13
index.html
13
index.html
|
|
@ -3,10 +3,21 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
|
||||
<title>Summer UI</title>
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
|
||||
<script>
|
||||
// overwrite these options
|
||||
window.CONFIG = {
|
||||
API_URL: undefined,
|
||||
TITLE: undefined,
|
||||
CSS_VAR: undefined,
|
||||
LINK_TERMS: undefined,
|
||||
LINK_PRIVACY: undefined,
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
import {sendSessionRequest} from "./api";
|
||||
export async function postRegister(data: object, token?: string) {
|
||||
let headers = new Headers();
|
||||
headers.set("Accept", "application/json");
|
||||
headers.set("Content-Type", "application/json");
|
||||
if (token !== undefined) headers.set("Authorization", "Bearer " + token);
|
||||
|
||||
let z = await sendSessionRequest("/v1/marigold/auth/register", {method: "POST", headers, body: JSON.stringify(data)});
|
||||
return await z.json();
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import {createEventDispatcher} from "svelte";
|
||||
import {getEnv} from "~/utils/env";
|
||||
|
||||
let inputEmail: string = "";
|
||||
let inputUsername: string = "";
|
||||
|
|
@ -24,9 +25,9 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="register-form-wrapper">
|
||||
<form class="register-form" method="post" on:submit|preventDefault={submitLogin}>
|
||||
<h1>Sign In</h1>
|
||||
<form class="register-widget" method="post" on:submit|preventDefault={submitLogin}>
|
||||
<div class="register-content">
|
||||
<h1>Register</h1>
|
||||
|
||||
<section>
|
||||
<label for="email">Email</label>
|
||||
|
|
@ -81,20 +82,82 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div>
|
||||
You must agree to the <a href={getEnv("LINK_TERMS")} target="_blank">Terms</a> and
|
||||
<a href={getEnv("LINK_PRIVACY")} target="_blank">Privacy</a> documents.
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="register-action">
|
||||
<section>
|
||||
<button type="submit">Register</button>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<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;
|
||||
|
||||
> h1 {
|
||||
margin: 0;
|
||||
padding: 32px;
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> section {
|
||||
padding-bottom: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
> label {
|
||||
width: 80px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
> 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .register-action {
|
||||
background: var(--bg-panel-action);
|
||||
padding: 24px;
|
||||
border-radius: 0 0 var(--large-curve) var(--large-curve);
|
||||
}
|
||||
}
|
||||
|
||||
#password-constraints > ul {
|
||||
> li.follows-constraint {
|
||||
color: #bdd358;
|
||||
color: darken(#bdd358, 5);
|
||||
}
|
||||
|
||||
> li.missing-constraint {
|
||||
color: #e5625e;
|
||||
color: darken(#e5625e, 5);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
<script lang="ts">
|
||||
import Page from "~/lib/Page.svelte";
|
||||
import RegisterForm from "~/components/register/RegisterForm.svelte";
|
||||
import {postRegister} from "~/api/register";
|
||||
|
||||
type RegisterFormResp = {access_token?: string; refresh_token?: string};
|
||||
|
||||
async function submitRegister(e: {detail: object}) {
|
||||
console.info(e.detail);
|
||||
postRegister(e.detail, undefined);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
export function getEnv(key: string) {
|
||||
key = key.toUpperCase();
|
||||
return window.CONFIG[key] ?? import.meta.env["VITE_" + key];
|
||||
}
|
||||
Reference in New Issue