Move buttons and create separate form styles
This commit is contained in:
parent
66dafca64f
commit
fc9aa54f8a
|
@ -13,13 +13,13 @@ insert_final_newline = true
|
||||||
[*.css]
|
[*.css]
|
||||||
indent_size = 2
|
indent_size = 2
|
||||||
indent_style = space
|
indent_style = space
|
||||||
trim_trailing_whitespace = true
|
trim_trailing_whitespace = false
|
||||||
|
|
||||||
# HTML
|
# HTML
|
||||||
[*.{htm,html}]
|
[*.{htm,html}]
|
||||||
indent_size = 2
|
indent_size = 2
|
||||||
indent_style = space
|
indent_style = space
|
||||||
trim_trailing_whitespace = true
|
trim_trailing_whitespace = false
|
||||||
|
|
||||||
# GNU make
|
# GNU make
|
||||||
[Makefile]
|
[Makefile]
|
||||||
|
|
|
@ -0,0 +1,60 @@
|
||||||
|
@mixin form-styles() {
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 32px 32px 0;
|
||||||
|
line-height: normal;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
//margin-right: 300px;
|
||||||
|
|
||||||
|
>.optional {
|
||||||
|
font-size: 75%;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
padding-bottom: 24px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, auto);
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
&.first-section {
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
padding: 8px;
|
||||||
|
line-height: 24px;
|
||||||
|
width: 300px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -127,8 +127,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="oauth-btns">
|
<div class="oauth-btns">
|
||||||
<button class="authorize-btn" on:click|preventDefault={runAuthorize}>Authorize</button>
|
|
||||||
<button class="cancel-btn secondary" on:click|preventDefault={runCancel}>Cancel</button>
|
<button class="cancel-btn secondary" on:click|preventDefault={runCancel}>Cancel</button>
|
||||||
|
<button class="authorize-btn" on:click|preventDefault={runAuthorize}>Authorize</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
|
|
|
@ -2,12 +2,13 @@
|
||||||
import {ExternalLink} from "lucide-svelte";
|
import {ExternalLink} from "lucide-svelte";
|
||||||
import {createEventDispatcher} from "svelte";
|
import {createEventDispatcher} from "svelte";
|
||||||
import {navigate} from "svelte-navigator";
|
import {navigate} from "svelte-navigator";
|
||||||
|
import PasswordConstraints from "~/lib/PasswordConstraints.svelte";
|
||||||
|
|
||||||
export let err: {message: string; log_id: string};
|
export let err: {message: string; log_id: string};
|
||||||
|
|
||||||
// Account
|
// Account
|
||||||
let inputEmail: string = "";
|
let inputEmail: string = "";
|
||||||
let inputTag: string = "";
|
let inputUsername: string = "";
|
||||||
let inputPassword: string = "";
|
let inputPassword: string = "";
|
||||||
let inputRepeat: string = "";
|
let inputRepeat: string = "";
|
||||||
|
|
||||||
|
@ -22,7 +23,7 @@
|
||||||
function submitLogin() {
|
function submitLogin() {
|
||||||
dispatch("submit", {
|
dispatch("submit", {
|
||||||
email: inputEmail,
|
email: inputEmail,
|
||||||
username: inputTag,
|
username: inputUsername,
|
||||||
password: inputPassword,
|
password: inputPassword,
|
||||||
repeatPassword: inputRepeat,
|
repeatPassword: inputRepeat,
|
||||||
displayName: inputDisplayName,
|
displayName: inputDisplayName,
|
||||||
|
@ -31,10 +32,6 @@
|
||||||
birthday: inputBirthday,
|
birthday: inputBirthday,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function conDone(v: boolean): string {
|
|
||||||
return v ? "follows-constraint" : "missing-constraint";
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<form class="register-widget" method="post" on:submit|preventDefault={submitLogin}>
|
<form class="register-widget" method="post" on:submit|preventDefault={submitLogin}>
|
||||||
|
@ -45,10 +42,10 @@
|
||||||
|
|
||||||
<section class="first-section">
|
<section class="first-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="email" required bind:value={inputEmail} />
|
||||||
|
|
||||||
<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="tag" placeholder=" " autocomplete="uesrname" required bind:value={inputUsername} />
|
||||||
|
|
||||||
<label for="new-password">Password</label>
|
<label for="new-password">Password</label>
|
||||||
<input
|
<input
|
||||||
|
@ -74,15 +71,7 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<div id="password-constraints">
|
<PasswordConstraints password={inputPassword} />
|
||||||
<ul>
|
|
||||||
<li class={conDone(inputPassword.length >= 8)}>Eight or more characters</li>
|
|
||||||
<li class={conDone(inputPassword.toLocaleLowerCase() != inputPassword)}>Uppercase characters</li>
|
|
||||||
<li class={conDone(inputPassword.toLocaleUpperCase() != inputPassword)}>Lowercase characters</li>
|
|
||||||
<li class={conDone(/\d/.test(inputPassword))}>Numeric digit</li>
|
|
||||||
<li class={conDone(/\W/.test(inputPassword))}>Special symbol</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<h2>Profile <span class="optional">(optional)</span></h2>
|
<h2>Profile <span class="optional">(optional)</span></h2>
|
||||||
|
@ -136,6 +125,7 @@
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "../../assets/panel.scss";
|
@import "../../assets/panel.scss";
|
||||||
|
@import "../../assets/form.scss";
|
||||||
|
|
||||||
.register-widget {
|
.register-widget {
|
||||||
@include panel;
|
@include panel;
|
||||||
|
@ -148,64 +138,7 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
> h1 {
|
@include form-styles();
|
||||||
margin: 0;
|
|
||||||
padding: 32px 32px 0;
|
|
||||||
line-height: normal;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
> h2 {
|
|
||||||
//margin-right: 300px;
|
|
||||||
|
|
||||||
> .optional {
|
|
||||||
font-size: 75%;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> section {
|
|
||||||
padding-bottom: 24px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, auto);
|
|
||||||
gap: 16px;
|
|
||||||
|
|
||||||
&.first-section {
|
|
||||||
padding-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
> label {
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
> input {
|
|
||||||
padding: 8px;
|
|
||||||
line-height: 24px;
|
|
||||||
width: 300px;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
> .register-action {
|
> .register-action {
|
||||||
|
@ -228,18 +161,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#password-constraints > ul {
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
> li.follows-constraint {
|
|
||||||
color: darken(#bdd358, 5);
|
|
||||||
}
|
|
||||||
|
|
||||||
> li.missing-constraint {
|
|
||||||
color: darken(#e5625e, 5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-message {
|
.error-message {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
background-color: darken(#e5625e, 10);
|
background-color: darken(#e5625e, 10);
|
||||||
|
|
|
@ -1,12 +1,23 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import LazyDelay from "~/lib/LazyDelay.svelte";
|
import LazyDelay from "~/lib/LazyDelay.svelte";
|
||||||
|
import PasswordConstraints from "~/lib/PasswordConstraints.svelte";
|
||||||
import {profileStore} from "~/stores/login";
|
import {profileStore} from "~/stores/login";
|
||||||
|
|
||||||
|
let inputEmail: string = "";
|
||||||
|
let inputPassword: string = "";
|
||||||
|
let inputNewPassword: string = "";
|
||||||
|
let inputRepeatPassword: string = "";
|
||||||
|
|
||||||
|
function conDone(v: boolean): string {
|
||||||
|
return v ? "follows-constraint" : "missing-constraint";
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="settings-widget">
|
<div class="settings-widget">
|
||||||
<div class="settings-content">
|
<div class="settings-content">
|
||||||
{#if $profileStore}
|
{#if $profileStore}
|
||||||
<div>Honestly I'm just too lazy to make this yet</div>
|
<h1>Settings</h1>
|
||||||
|
<section>Honestly I'm just too lazy to make this yet</section>
|
||||||
{:else}
|
{:else}
|
||||||
<LazyDelay delayMs={500}>Loading...</LazyDelay>
|
<LazyDelay delayMs={500}>Loading...</LazyDelay>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -15,6 +26,7 @@
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "../../assets/panel.scss";
|
@import "../../assets/panel.scss";
|
||||||
|
@import "../../assets/form.scss";
|
||||||
|
|
||||||
.settings-widget {
|
.settings-widget {
|
||||||
@include panel;
|
@include panel;
|
||||||
|
@ -26,6 +38,8 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
|
|
||||||
|
@include form-styles();
|
||||||
|
|
||||||
/*> .icon {
|
/*> .icon {
|
||||||
margin: 0 auto 12px auto;
|
margin: 0 auto 12px auto;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
|
|
|
@ -0,0 +1,31 @@
|
||||||
|
<script lang="ts">
|
||||||
|
export let password: string;
|
||||||
|
|
||||||
|
function conDone(v: boolean): string {
|
||||||
|
return v ? "follows-constraint" : "missing-constraint";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div id="password-constraints">
|
||||||
|
<ul>
|
||||||
|
<li class={conDone(password.length >= 8)}>Eight or more characters</li>
|
||||||
|
<li class={conDone(password.toLocaleLowerCase() != password)}>Uppercase characters</li>
|
||||||
|
<li class={conDone(password.toLocaleUpperCase() != password)}>Lowercase characters</li>
|
||||||
|
<li class={conDone(/\d/.test(password))}>Numeric digit</li>
|
||||||
|
<li class={conDone(/\W/.test(password))}>Special symbol</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
#password-constraints > ul {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
> li.follows-constraint {
|
||||||
|
color: darken(#bdd358, 5);
|
||||||
|
}
|
||||||
|
|
||||||
|
> li.missing-constraint {
|
||||||
|
color: darken(#e5625e, 5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Reference in New Issue