FreakU
/
pronounsfu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(frontend): make fediverse login modals forms (fixes #97)

This commit is contained in:
sam 2023-09-11 15:48:48 +02:00
parent a1b2fce9af
commit 467069c898
No known key found for this signature in database
GPG Key ID: B4EF20DDE721CAA1
2 changed files with 43 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/routes/auth/login/+page.svelte
View File

@ -34,7 +34,9 @@
} }
}); });
const fediLogin = async () => { const fediLogin = async (e: Event) => {
e.preventDefault();
fediDisabled = true; fediDisabled = true;
try { try {
const resp = await apiFetch<{ url: string }>( const resp = await apiFetch<{ url: string }>(
@ -71,26 +73,28 @@
{/if} {/if}
</ListGroup> </ListGroup>
<Modal header="Pick an instance" isOpen={modalOpen} toggle={toggleModal}> <Modal header="Pick an instance" isOpen={modalOpen} toggle={toggleModal}>
<ModalBody> <form on:submit={(e) => fediLogin(e)}>
<Input placeholder="Instance (e.g. mastodon.social)" bind:value={instance} /> <ModalBody>
<p class="text-muted mt-2"> <Input placeholder="Instance (e.g. mastodon.social)" bind:value={instance} />
<Icon name="info-circle-fill" aria-label="Info" /> This should be the domain you use to access <p class="text-muted mt-2">
posts. For example, if your username is <code>@timmie@mastodon.example</code>, but your <Icon name="info-circle-fill" aria-label="Info" /> This should be the domain you use to
user <em>page</em> is at access posts. For example, if your username is <code>@timmie@mastodon.example</code>,
<code>social.mastodon.example/timmie</code>, you should fill in but your user <em>page</em> is at
<code>social.mastodon.example</code>. <code>social.mastodon.example/timmie</code>, you should fill in
</p> <code>social.mastodon.example</code>.
{#if error} </p>
<div class="mt-2"> {#if error}
<ErrorAlert {error} /> <div class="mt-2">
</div> <ErrorAlert {error} />
{/if} </div>
</ModalBody> {/if}
<ModalFooter> </ModalBody>
<Button color="primary" disabled={fediDisabled || instance === ""} on:click={fediLogin} <ModalFooter>
>Log in</Button <Button type="submit" color="primary" disabled={fediDisabled || instance === ""}
> >Log in</Button
</ModalFooter> >
</ModalFooter>
</form>
</Modal> </Modal>
<p class="text-muted mt-2 mx-1"> <p class="text-muted mt-2 mx-1">
<Icon name="info-circle-fill" aria-hidden /> By signing in, you consent to pronouns.cc storing <Icon name="info-circle-fill" aria-hidden /> By signing in, you consent to pronouns.cc storing

32
frontend/src/routes/settings/auth/+page.svelte
View File

@ -44,7 +44,9 @@
let googleUnlinkModalOpen = false; let googleUnlinkModalOpen = false;
let toggleGoogleUnlinkModal = () => (googleUnlinkModalOpen = !googleUnlinkModalOpen); let toggleGoogleUnlinkModal = () => (googleUnlinkModalOpen = !googleUnlinkModalOpen);
const fediLogin = async () => { const fediLogin = async (e: Event) => {
e.preventDefault();
fediDisabled = true; fediDisabled = true;
try { try {
const resp = await apiFetch<{ url: string }>( const resp = await apiFetch<{ url: string }>(
@ -205,19 +207,21 @@
</div> </div>
{/if} {/if}
<Modal header="Pick an instance" isOpen={fediLinkModalOpen} toggle={toggleFediLinkModal}> <Modal header="Pick an instance" isOpen={fediLinkModalOpen} toggle={toggleFediLinkModal}>
<ModalBody> <form on:submit={(e) => fediLogin(e)}>
<Input placeholder="Instance (e.g. mastodon.social)" bind:value={instance} /> <ModalBody>
{#if error} <Input placeholder="Instance (e.g. mastodon.social)" bind:value={instance} />
<div class="mt-2"> {#if error}
<ErrorAlert {error} /> <div class="mt-2">
</div> <ErrorAlert {error} />
{/if} </div>
</ModalBody> {/if}
<ModalFooter> </ModalBody>
<Button color="primary" disabled={fediDisabled || instance === ""} on:click={fediLogin} <ModalFooter>
>Log in</Button <Button type="submit" color="primary" disabled={fediDisabled || instance === ""}
> >Log in</Button
</ModalFooter> >
</ModalFooter>
</form>
</Modal> </Modal>
<Modal <Modal