Created
September 16, 2020 15:16
-
-
Save danawoodman/1aba56c63e2c268ae840b4a9d66f869a to your computer and use it in GitHub Desktop.
Example of using Svelte (with Typescript) to make a simple login form with basic validation. Lot is missing but shows how a few useful concepts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script lang="ts"> | |
export let label: string | |
export let type: string = "text" | |
export let value: string = "" | |
export let disabled: boolean = false | |
export let validate: (val: string) => boolean | |
export let valid: boolean = false | |
let id = `field-${Math.floor(Math.random() * 1000)}` | |
function handleInput(e) { | |
value = e.target.value | |
if (validate) valid = validate(value) | |
} | |
</script> | |
<p class:valid> | |
{#if label} | |
<label for={id}>{label}{#if valid}<span>✔</span>{/if}</label> | |
{/if} | |
<input {disabled} {type} {id} on:input={handleInput} /> | |
</p> | |
<style lang="postcss"> | |
label { | |
font-size: 15px; | |
font-family: sans-serif; | |
font-weight: bold; | |
display: block; | |
line-height: 1.2; | |
margin: 0.5rem 0; | |
} | |
label span { | |
margin-left: 0.5rem; | |
} | |
.valid label { | |
color: rgb(0, 180, 96); | |
} | |
input { | |
border: 1px solid #dedede; | |
border-radius: 0.25rem; | |
padding: 0.8rem 1.2rem; | |
font-size: 16px; | |
display: block; | |
width: 100%; | |
} | |
.valid input { | |
border-color: rgb(0, 180, 96); | |
} | |
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script lang="ts"> | |
import Field from "./Field.svelte" | |
import { blur } from "svelte/transition" | |
let username = "" | |
let password = "" | |
let passwordValid: boolean = false | |
let usernameValid: boolean = false | |
let submitting: boolean = false | |
let valid = false | |
$: { | |
valid = usernameValid && passwordValid | |
} | |
function handleSubmit() { | |
submitting = true | |
console.log("username:", username) | |
console.log("password:", password) | |
// TODO: implement login logic here | |
setTimeout(() => { | |
submitting = false | |
}, 1000) | |
} | |
function handleValidateUsername(val: string) { | |
return val?.length > 3 | |
} | |
function handleValidatePassword(val: string) { | |
return val?.length > 3 | |
} | |
</script> | |
<section transition:blur={{ delay: 300, duration: 800 }}> | |
<form on:submit|preventDefault={handleSubmit}> | |
<h1>Login</h1> | |
<Field | |
label="Username" | |
disabled={submitting} | |
bind:value={username} | |
bind:valid={usernameValid} | |
validate={handleValidateUsername} /> | |
<Field | |
disabled={submitting} | |
label="Password" | |
bind:value={password} | |
type="password" | |
bind:valid={passwordValid} | |
validate={handleValidatePassword} /> | |
<p><button type="submit" disabled={!valid || submitting}>Login</button></p> | |
</form> | |
</section> | |
<style lang="postcss"> | |
h1 { | |
font-family: sans-serif; | |
font-size: 32px; | |
color: black; | |
} | |
section { | |
margin: 0 auto; | |
width: 300px; | |
} | |
form { | |
margin: 80px 0 0 0; | |
} | |
button { | |
margin-top: 1rem; | |
background: rgb(0, 180, 96); | |
color: white; | |
border-radius: 0.25rem; | |
border: 0 none; | |
font-size: 18px; | |
padding: 0.6rem 1.2rem; | |
} | |
button:disabled { | |
background: #ddd; | |
} | |
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Form from "./Form.svelte" | |
new Form({ target: document.querySelector("#form"), props: {}, intro: true }) | |
export default {} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment