diff options
| -rw-r--r-- | ui/lib/components/ChangePassword.svelte | 60 | ||||
| -rw-r--r-- | ui/lib/components/Invite.svelte | 5 | ||||
| -rw-r--r-- | ui/lib/components/Invites.svelte | 13 | ||||
| -rw-r--r-- | ui/lib/components/LogOut.svelte | 18 | ||||
| -rw-r--r-- | ui/routes/(app)/me/+page.svelte | 84 |
5 files changed, 97 insertions, 83 deletions
diff --git a/ui/lib/components/ChangePassword.svelte b/ui/lib/components/ChangePassword.svelte new file mode 100644 index 0000000..1e48bee --- /dev/null +++ b/ui/lib/components/ChangePassword.svelte @@ -0,0 +1,60 @@ +<script> + import { changePassword } from '$lib/apiServer.js'; + + let currentPassword = $state(''), + newPassword = $state(''), + confirmPassword = $state(''), + pending = $state(false), + form; + let valid = $derived(newPassword === confirmPassword && newPassword !== currentPassword); + let disabled = $derived(pending || !valid); + + async function onsubmit(event) { + event.preventDefault(); + pending = true; + let response = await changePassword(currentPassword, newPassword); + switch (response.status) { + case 200: + form.reset(); + break; + } + pending = false; + } +</script> + +<form {onsubmit} bind:this={form}> + <label + >current password + <input + class="input" + name="currentPassword" + type="password" + placeholder="password" + bind:value={currentPassword} + /> + </label> + + <label + >new password + <input + class="input" + name="newPassword" + type="password" + placeholder="password" + bind:value={newPassword} + /> + </label> + + <label + >confirm new password + <input + class="input" + name="confirmPassword" + type="password" + placeholder="password" + bind:value={confirmPassword} + /> + </label> + + <button class="btn bg-orange-500 mt-4" type="submit" {disabled}>change password</button> +</form> diff --git a/ui/lib/components/Invite.svelte b/ui/lib/components/Invite.svelte index 35e00b4..381f483 100644 --- a/ui/lib/components/Invite.svelte +++ b/ui/lib/components/Invite.svelte @@ -5,8 +5,5 @@ let inviteUrl = $derived(new URL(`/invite/${id}`, document.location)); </script> -<button - class="border-slate-500 border-solid border-2 font-bold p-1 rounded" - use:clipboard={inviteUrl}>Copy</button -> +<button class="btn bg-secondary-500" use:clipboard={inviteUrl}>Copy</button> <span data-clipboard="inviteUrl">{inviteUrl}</span> diff --git a/ui/lib/components/Invites.svelte b/ui/lib/components/Invites.svelte index cc14f3b..314782a 100644 --- a/ui/lib/components/Invites.svelte +++ b/ui/lib/components/Invites.svelte @@ -4,7 +4,7 @@ let invites = $state([]); - async function onSubmit(event) { + async function onsubmit(event) { event.preventDefault(); let response = await createInvite(); if (response.status == 200) { @@ -13,11 +13,12 @@ } </script> -<ul> +<form {onsubmit}> + <button class="btn bg-primary-500" type="submit"> Create Invitation </button> +</form> + +<ul class="mt-4"> {#each invites as invite} - <li><Invite id={invite.id} /></li> + <li class="my-1"><Invite id={invite.id} /></li> {/each} </ul> -<form onsubmit={onSubmit}> - <button class="btn variant-filled" type="submit"> Create Invitation </button> -</form> diff --git a/ui/lib/components/LogOut.svelte b/ui/lib/components/LogOut.svelte new file mode 100644 index 0000000..25dd5e9 --- /dev/null +++ b/ui/lib/components/LogOut.svelte @@ -0,0 +1,18 @@ +<script> + import { goto } from '$app/navigation'; + import { logOut } from '$lib/apiServer.js'; + import { currentUser } from '$lib/store'; + + async function onsubmit(event) { + event.preventDefault(); + const response = await logOut(); + if (200 <= response.status && response.status < 300) { + currentUser.update(() => null); + goto('/login'); + } + } +</script> + +<form {onsubmit}> + <button class="btn bg-orange-400" type="submit">log out</button> +</form> diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte index 8d24a61..e02bde5 100644 --- a/ui/routes/(app)/me/+page.svelte +++ b/ui/routes/(app)/me/+page.svelte @@ -1,79 +1,17 @@ <script> - import { goto } from '$app/navigation'; - import { changePassword, logOut } from '$lib/apiServer.js'; - import { currentUser } from '$lib/store'; - + import LogOut from '$lib/components/LogOut.svelte'; import Invites from '$lib/components/Invites.svelte'; - - let currentPassword = $state(''), - newPassword = $state(''), - confirmPassword = $state(''), - passwordForm; - let pending = $state(false); - let valid = $derived(newPassword === confirmPassword && newPassword !== currentPassword); - let disabled = $derived(pending || !valid); - - async function onLogOut(event) { - event.preventDefault(); - const response = await logOut(); - if (200 <= response.status && response.status < 300) { - currentUser.update(() => null); - goto('/login'); - } - } - - async function onPasswordChange(event) { - event.preventDefault(); - pending = true; - let response = await changePassword(currentPassword, newPassword); - switch (response.status) { - case 200: - passwordForm.reset(); - break; - } - pending = false; - } + import ChangePassword from '$lib/components/ChangePassword.svelte'; </script> -<form onsubmit={onLogOut}> - <button class="btn variant-filled" type="submit">log out</button> -</form> - -<form onsubmit={onPasswordChange} bind:this={passwordForm}> - <label - >current password - <input - class="input" - name="currentPassword" - type="password" - placeholder="password" - bind:value={currentPassword} - /> - </label> - - <label - >new password - <input - class="input" - name="newPassword" - type="password" - placeholder="password" - bind:value={newPassword} - /> - </label> - - <label - >confirm new password - <input - class="input" - name="confirmPassword" - type="password" - placeholder="password" - bind:value={confirmPassword} - /> - </label> +<div class="my-4"> + <ChangePassword /> +</div> - <button class="btn variant-filled" type="submit" {disabled}> change password </button> -</form> +<div class="my-4"> + <Invites /> +</div> -<Invites /> +<div class="my-4"> + <LogOut /> +</div> |