sam/Foxnouns.NET
sam/Foxnouns.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

feat: add email to existing account, change password

Browse source
This commit is contained in:
sam 2024-12-13 21:25:41 +01:00
parent 77c3047b1e
commit 1cf2619393
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
13 changed files with 227 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Foxnouns.Frontend/src/lib/components/settings/AuthMethodRow.svelte
View file

@ -8,7 +8,7 @@
let name = $derived(
method.type === "EMAIL" ? method.remote_id : (method.remote_username ?? method.remote_id),
);
let showId = $derived(method.type !== "FEDIVERSE");
let showId = $derived(method.type !== "EMAIL");
</script>
<div class="list-group-item">

73
Foxnouns.Frontend/src/lib/components/settings/EmailSettings.svelte Normal file
View file

@ -0,0 +1,73 @@
<script lang="ts">
import type { RawApiError } from "$api/error";
import type { MeUser } from "$api/models";
import FormStatusMarker from "$components/editor/FormStatusMarker.svelte";
import { t } from "$lib/i18n";
import AuthMethodRow from "./AuthMethodRow.svelte";
import EnvelopePlusFill from "svelte-bootstrap-icons/lib/EnvelopePlusFill.svelte";
type Props = {
user: MeUser;
canRemove: boolean;
max: number;
form: { error: RawApiError | null; ok: boolean } | null;
};
let { user, canRemove, max, form }: Props = $props();
let emails = $derived(user.auth_methods.filter((a) => a.type === "EMAIL"));
</script>
<h3>{$t("auth.email-password-title")}</h3>
{#if emails.length > 0}
<div class="row">
<div class="col-md">
<h4>Your email addresses</h4>
<div class="list-group">
{#each emails as method (method.id)}
<AuthMethodRow {method} {canRemove} />
{/each}
{#if emails.length < max}
<a class="list-group-item" href="/settings/auth/add-email">
<EnvelopePlusFill /> <strong>{$t("auth.add-email-address")}</strong>
</a>
{/if}
</div>
</div>
<div class="col-md">
<FormStatusMarker {form} />
<h4>Change password</h4>
<form method="POST" action="?/password">
<div class="mb-1">
<label for="current" class="form-label">Current password</label>
<input type="password" id="current" name="current" class="form-control" required />
</div>
<div class="mb-1">
<label for="password" class="form-label">New password</label>
<input type="password" id="password" name="password" class="form-control" required />
</div>
<div class="mb-1">
<label for="confirm-password" class="form-label">Confirm new password</label>
<input
type="password"
id="confirm-password"
name="confirm-password"
class="form-control"
required
/>
</div>
<div>
<button type="submit" class="btn btn-secondary mt-2">Change password</button>
</div>
</form>
</div>
</div>
{:else}
<p>{$t("auth.no-email-addresses")}</p>
<p>
<a class="btn btn-outline-secondary" href="/settings/auth/add-email">
<EnvelopePlusFill />
{$t("auth.add-email-address")}
</a>
</p>
{/if}

2
Foxnouns.Frontend/src/lib/components/settings/NewAuthMethod.svelte
View file

@ -19,6 +19,8 @@
return $t("auth.successful-link-tumblr");
case "FEDIVERSE":
return $t("auth.successful-link-fedi");
case "EMAIL":
return $t("auth.successful-link-email");
default:
return "<you shouldn't see this!>";
}

7
Foxnouns.Frontend/src/lib/i18n/locales/en.json
View file

@ -56,7 +56,12 @@
"register-with-google": "Register with a Google account",
"remote-google-account-label": "Your Google account",
"register-with-tumblr": "Register with a Tumblr account",
"remote-tumblr-account-label": "Your Tumblr account"
"remote-tumblr-account-label": "Your Tumblr account",
"email-password-title": "Email and password",
"add-email-address": "Add email address",
"no-email-addresses": "You haven't linked any email addresses yet.",
"check-inbox-for-link-hint": "Check your inbox for a link!",
"successful-link-email": "Your account has successfully been linked to the following email address:"
},
"error": {
"bad-request-header": "Something was wrong with your input",