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

14
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,12 +73,13 @@
{/if} {/if}
</ListGroup> </ListGroup>
<Modal header="Pick an instance" isOpen={modalOpen} toggle={toggleModal}> <Modal header="Pick an instance" isOpen={modalOpen} toggle={toggleModal}>
<form on:submit={(e) => fediLogin(e)}>
<ModalBody> <ModalBody>
<Input placeholder="Instance (e.g. mastodon.social)" bind:value={instance} /> <Input placeholder="Instance (e.g. mastodon.social)" bind:value={instance} />
<p class="text-muted mt-2"> <p class="text-muted mt-2">
<Icon name="info-circle-fill" aria-label="Info" /> This should be the domain you use to access <Icon name="info-circle-fill" aria-label="Info" /> This should be the domain you use to
posts. For example, if your username is <code>@timmie@mastodon.example</code>, but your access posts. For example, if your username is <code>@timmie@mastodon.example</code>,
user <em>page</em> is at but your user <em>page</em> is at
<code>social.mastodon.example/timmie</code>, you should fill in <code>social.mastodon.example/timmie</code>, you should fill in
<code>social.mastodon.example</code>. <code>social.mastodon.example</code>.
</p> </p>
@ -87,10 +90,11 @@
{/if} {/if}
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<Button color="primary" disabled={fediDisabled || instance === ""} on:click={fediLogin} <Button type="submit" color="primary" disabled={fediDisabled || instance === ""}
>Log in</Button >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

8
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,6 +207,7 @@
</div> </div>
{/if} {/if}
<Modal header="Pick an instance" isOpen={fediLinkModalOpen} toggle={toggleFediLinkModal}> <Modal header="Pick an instance" isOpen={fediLinkModalOpen} toggle={toggleFediLinkModal}>
<form on:submit={(e) => fediLogin(e)}>
<ModalBody> <ModalBody>
<Input placeholder="Instance (e.g. mastodon.social)" bind:value={instance} /> <Input placeholder="Instance (e.g. mastodon.social)" bind:value={instance} />
{#if error} {#if error}
@ -214,10 +217,11 @@
{/if} {/if}
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<Button color="primary" disabled={fediDisabled || instance === ""} on:click={fediLogin} <Button type="submit" color="primary" disabled={fediDisabled || instance === ""}
>Log in</Button >Log in</Button
> >
</ModalFooter> </ModalFooter>
</form>
</Modal> </Modal>
<Modal <Modal