pocketbase/ui/src/components/records/PageRecordConfirmEmailChang...

79 lines
2.5 KiB
Svelte
Raw Normal View History

2022-07-07 05:19:05 +08:00
<script>
2022-10-30 16:28:14 +08:00
import PocketBase, { getTokenPayload } from "pocketbase";
2022-07-07 05:19:05 +08:00
import ApiClient from "@/utils/ApiClient";
import CommonHelper from "@/utils/CommonHelper";
import FullPage from "@/components/base/FullPage.svelte";
import Field from "@/components/base/Field.svelte";
export let params;
let password = "";
let isLoading = false;
let success = false;
$: newEmail = CommonHelper.getJWTPayload(params?.token).newEmail || "";
async function submit() {
if (isLoading) {
return;
}
isLoading = true;
2024-09-30 00:23:19 +08:00
// init a custom client to avoid interfering with the superuser state
const client = new PocketBase(import.meta.env.PB_BACKEND_URL);
2022-07-07 05:19:05 +08:00
try {
2022-10-30 16:28:14 +08:00
const payload = getTokenPayload(params?.token);
await client.collection(payload.collectionId).confirmEmailChange(params?.token, password);
2022-07-07 05:19:05 +08:00
success = true;
} catch (err) {
2023-05-14 03:10:14 +08:00
ApiClient.error(err);
2022-07-07 05:19:05 +08:00
}
isLoading = false;
}
</script>
<FullPage nobranding>
{#if success}
<div class="alert alert-success">
<div class="icon"><i class="ri-checkbox-circle-line" /></div>
<div class="content txt-bold">
<p>Successfully changed the user email address.</p>
2022-07-07 05:19:05 +08:00
<p>You can now sign in with your new email address.</p>
</div>
</div>
<button type="button" class="btn btn-transparent btn-block" on:click={() => window.close()}>
2022-07-07 05:19:05 +08:00
Close
</button>
{:else}
<form on:submit|preventDefault={submit}>
<div class="content txt-center m-b-base">
<h5>
2022-07-07 05:19:05 +08:00
Type your password to confirm changing your email address
{#if newEmail}
to <strong class="txt-nowrap">{newEmail}</strong>
{/if}
</h5>
2022-07-07 05:19:05 +08:00
</div>
<Field class="form-field required" name="password" let:uniqueId>
<label for={uniqueId}>Password</label>
<!-- svelte-ignore a11y-autofocus -->
<input type="password" id={uniqueId} required autofocus bind:value={password} />
</Field>
<button
type="submit"
class="btn btn-lg btn-block"
class:btn-loading={isLoading}
disabled={isLoading}
>
<span class="txt">Confirm new email</span>
</button>
</form>
{/if}
</FullPage>