sam/pronounscc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: use fediverse icon on login page

Browse source
This commit is contained in:
Sam 2023-03-16 17:01:21 +01:00
parent c6484ef066
commit 1843f58d96
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
3 changed files with 41 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/routes/auth/login/+page.svelte
View file

@ -17,6 +17,7 @@
ModalFooter, ModalFooter,
} from "sveltestrap"; } from "sveltestrap";
import type { PageData } from "./$types"; import type { PageData } from "./$types";
import fediverse from "./fediverse.svg";
export let data: PageData; export let data: PageData;
@ -57,10 +58,10 @@
<div class="container"> <div class="container">
<h1>Log in or sign up</h1> <h1>Log in or sign up</h1>
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4 mb-1">
<ListGroup> <ListGroup>
<ListGroupItem tag="button" on:click={toggleModal}> <ListGroupItem tag="button" on:click={toggleModal}>
<Icon name="mastodon" /> Log in with Fediverse <img height="16px" src={fediverse} alt="Fediverse logo" aria-hidden /> Log in with the Fediverse
</ListGroupItem> </ListGroupItem>
<ListGroupItem tag="a" href={data.discord}> <ListGroupItem tag="a" href={data.discord}>
<Icon name="discord" /> Log in with Discord <Icon name="discord" /> Log in with Discord
@ -68,6 +69,9 @@
</ListGroup> </ListGroup>
<Modal header="Pick an instance" isOpen={modalOpen} toggle={toggleModal}> <Modal header="Pick an instance" isOpen={modalOpen} toggle={toggleModal}>
<ModalBody> <ModalBody>
<p>
<strong>Note:</strong> Misskey (and derivatives) are not supported yet, sorry.
</p>
<Input placeholder="Instance (e.g. mastodon.social)" bind:value={instance} /> <Input placeholder="Instance (e.g. mastodon.social)" bind:value={instance} />
{#if error} {#if error}
<div class="mt-2"> <div class="mt-2">
@ -77,7 +81,7 @@
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<Button color="primary" disabled={fediDisabled || instance === ""} on:click={fediLogin} <Button color="primary" disabled={fediDisabled || instance === ""} on:click={fediLogin}
>Fediverse login</Button >Log in</Button
> >
</ModalFooter> </ModalFooter>
</Modal> </Modal>

32
frontend/src/routes/auth/login/fediverse.svg Normal file
View file

@ -0,0 +1,32 @@
<svg width="173.23mm" height="173.28mm" version="1.1" viewBox="0 0 173.23 173.28" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-8.5263 -40.668)" display="none">
<circle cx="91.581" cy="130.76" r="87.76" fill="currentColor" fill-opacity=".99597" stroke="currentColor" stroke-width="11"/>
<path transform="matrix(.75494 0 0 .75475 13.252 29.556)" d="m153.37 219.98-115.51-12.141-24.149-113.61 100.59-58.074 86.315 77.718z" display="inline" fill="currentColor" stroke="currentColor" stroke-width="9.8895"/>
</g>
<g transform="translate(-15.205 -8.1725)" display="none" fill="none" stroke-width="11">
<path transform="translate(6.679 -32.496)" d="m165.18 119.35-126.54 64.133" display="inline" stroke="currentColor"/>
<path transform="translate(6.679 -32.496)" d="m25.097 96.875 100.12 100.5" display="inline" stroke="currentColor"/>
<path transform="translate(6.679 -32.496)" d="m38.637 183.49 64.669-126.25" display="inline" stroke="currentColor"/>
<path transform="translate(6.679 -32.496)" d="m125.21 197.38-21.908-140.14" display="inline" stroke="currentColor"/>
<path transform="translate(6.679 -32.496)" d="m25.097 106.16 140.08 22.479" display="inline" stroke="currentColor"/>
</g>
<g transform="translate(-8.5263 -40.668)" shape-rendering="auto">
<path transform="matrix(.26458 0 0 .26458 -6.679 32.496)" d="m181.13 275.14a68.892 68.892 0 0 1-29.465 29.328l161.76 162.39 38.998-19.764zm213.36 214.19-38.998 19.764 81.963 82.283a68.892 68.892 0 0 1 29.471-29.332z" color="currentColor" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-color="currentColor" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:currentColor;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
<path transform="matrix(.26458 0 0 .26458 -6.679 32.496)" d="m581.65 339.39-91.576 46.41 6.752 43.189 103.62-52.514a68.892 68.892 0 0 1-18.791-37.086zm-144.74 73.352-216.53 109.73a68.892 68.892 0 0 1 18.795 37.09l204.48-103.63z" color="currentColor" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-color="currentColor" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:currentColor;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
<path transform="matrix(.26458 0 0 .26458 -6.679 32.496)" d="m367.28 142.44-104.48 203.97 30.848 30.967 110.62-215.96a68.892 68.892 0 0 1-36.99-18.98zm-131.65 257.02-52.922 103.31a68.892 68.892 0 0 1 36.986 18.979l46.781-91.328z" color="currentColor" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-color="currentColor" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:currentColor;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
<path transform="matrix(.26458 0 0 .26458 -6.679 32.496)" d="m150.77 304.92a68.892 68.892 0 0 1-34.416 7.1953 68.892 68.892 0 0 1-6.6504-0.69531l30.902 197.66a68.892 68.892 0 0 1 34.416-7.1953 68.892 68.892 0 0 1 6.6465 0.69531z" color="currentColor" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-color="currentColor" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:currentColor;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
<path transform="matrix(.26458 0 0 .26458 -6.679 32.496)" d="m239.34 560.54a68.892 68.892 0 0 1 0.7207 13.877 68.892 68.892 0 0 1-7.2676 27.18l197.63 31.713a68.892 68.892 0 0 1-0.72266-13.879 68.892 68.892 0 0 1 7.2695-27.178z" color="currentColor" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-color="currentColor" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
<path transform="matrix(.26458 0 0 .26458 -6.679 32.496)" d="m601.13 377.2-91.219 178.08a68.892 68.892 0 0 1 36.994 18.982l91.217-178.08a68.892 68.892 0 0 1-36.992-18.984z" color="currentColor" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-color="currentColor" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:currentColor;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
<path transform="matrix(.26458 0 0 .26458 -6.679 32.496)" d="m476.72 125.33a68.892 68.892 0 0 1-29.471 29.332l141.27 141.81a68.892 68.892 0 0 1 29.469-29.332z" color="currentColor" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-color="currentColor" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:currentColor;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
<path transform="matrix(.26458 0 0 .26458 -6.679 32.496)" d="m347.79 104.63-178.58 90.498a68.892 68.892 0 0 1 18.793 37.086l178.57-90.502a68.892 68.892 0 0 1-18.791-37.082z" color="currentColor" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-color="currentColor" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:currentColor;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
<path transform="matrix(.26458 0 0 .26458 -6.679 32.496)" d="m446.93 154.83a68.892 68.892 0 0 1-34.982 7.4824 68.892 68.892 0 0 1-6.0293-0.63281l15.818 101.29 43.162 6.9258zm-16 167.03 37.4 239.48a68.892 68.892 0 0 1 33.914-6.9434 68.892 68.892 0 0 1 7.207 0.79101l-35.357-226.41z" color="currentColor" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-color="currentColor" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:currentColor;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
<path transform="matrix(.26458 0 0 .26458 -6.679 32.496)" d="m188.13 232.97a68.892 68.892 0 0 1 0.75781 14.096 68.892 68.892 0 0 1-7.1602 26.982l101.37 16.281 19.924-38.908zm173.74 27.9-19.926 38.912 239.51 38.467a68.892 68.892 0 0 1-0.69531-13.719 68.892 68.892 0 0 1 7.3496-27.324z" color="currentColor" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-color="currentColor" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
</g>
<g transform="translate(-8.5263 -40.668)" fill-opacity=".99597">
<circle transform="rotate(3.1178)" cx="106.27" cy="51.536" r="16.571"/>
<circle transform="rotate(3.1178)" cx="171.43" cy="110.19" r="16.571"/>
<circle transform="rotate(3.1178)" cx="135.76" cy="190.28" r="16.571"/>
<circle transform="rotate(3.1178)" cx="48.559" cy="181.11" r="16.571"/>
<circle transform="rotate(3.1178)" cx="30.329" cy="95.367" r="16.571"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 8.9 KiB

4
frontend/src/routes/auth/login/mastodon/[instance]/+page.svelte
View file

@ -70,10 +70,10 @@
</script> </script>
<svelte:head> <svelte:head>
<title>Log in with Mastodon - pronouns.cc</title> <title>Log in with the Fediverse - pronouns.cc</title>
</svelte:head> </svelte:head>
<h1>Log in with Mastodon</h1> <h1>Log in with the Fediverse</h1>
{#if data.error} {#if data.error}
<ErrorAlert error={data.error} /> <ErrorAlert error={data.error} />