forge/Anvil
1
0
Fork 0
Code Pull requests Activity

Add octicons and use in account creation form

Browse source
This commit is contained in:
Pere Lev 2023-05-22 17:39:28 +03:00
parent 740ed4e16e
commit 4c252c83ca
No known key found for this signature in database
GPG key ID: 5252C5C863E5E57D
3 changed files with 27 additions and 2 deletions

7
package-lock.json generated
View file

@ -25,6 +25,7 @@
"prettier-plugin-svelte": "^2.8.1",
"svelte": "^3.54.0",
"svelte-check": "^3.0.1",
"svelte-octicons": "^18.3.0",
"tailwindcss": "^3.3.2",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
@ -3267,6 +3268,12 @@
"svelte": ">=3.19.0"
}
},
"node_modules/svelte-octicons": {
"version": "18.3.0",
"resolved": "https://registry.npmjs.org/svelte-octicons/-/svelte-octicons-18.3.0.tgz",
"integrity": "sha512-y6I2ABivAJHoL1q988u/5hm2nk7bcBa7aw7Do2bCFfAZARnRGcMJxxMLSsNMnN1f7iqvneSHRVKWCBvGObSIbQ==",
"dev": true
},
"node_modules/svelte-preprocess": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.0.3.tgz",

1
package.json
View file

@ -31,6 +31,7 @@
"prettier-plugin-svelte": "^2.8.1",
"svelte": "^3.54.0",
"svelte-check": "^3.0.1",
"svelte-octicons": "^18.3.0",
"tailwindcss": "^3.3.2",
"tslib": "^2.4.1",
"typescript": "^5.0.0",

21
src/routes/account/create/+page.svelte
View file

@ -1,3 +1,7 @@
<script lang='ts'>
import { AlertFill24, Mention24 } from "svelte-octicons";
</script>
<div class="w-full max-w-md h-full mx-auto flex justify-center items-center py-10">
<div class="space-y-10">
<h1 class="h1 font-bold">Create a new account</h1>
@ -16,11 +20,24 @@
</label>
<label class="label">
<span>Account name</span>
<input class="input" title="Account name" type="text" placeholder="alice" />
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
<div class="input-group-shim">
<Mention24 class="fill-primary-500" />
</div>
<input class="input" title="Account name" type="text" placeholder="alice" />
<a href="/" title="This username is already in use">
<AlertFill24 class="fill-warning-500 animate-pulse" />
</a>
</div>
</label>
<label class="label">
<span>Passphrase</span>
<input class="input" title="Passphrase" type="password" placeholder="psswrd" />
<div class="input-group input-group-divider grid-cols-[1fr_auto]">
<input class="input" title="Passphrase" type="password" placeholder="psswrd" />
<a href="/" title="Yer passw0rd is weak">
<AlertFill24 class="fill-warning-500 animate-pulse" />
</a>
</div>
</label>
<hr />
<label class="label">