feat: use fediverse icon on login page
This commit is contained in:
parent
c6484ef066
commit
1843f58d96
GPG key ID:
B4EF20DDE721CAA1
3 changed files with 41 additions and 5 deletions
|
|
@ -17,6 +17,7 @@
|
|||
ModalFooter,
|
||||
} from "sveltestrap";
|
||||
import type { PageData } from "./$types";
|
||||
import fediverse from "./fediverse.svg";
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
|
|
@ -57,10 +58,10 @@
|
|||
<div class="container">
|
||||
<h1>Log in or sign up</h1>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-4 mb-1">
|
||||
<ListGroup>
|
||||
<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 tag="a" href={data.discord}>
|
||||
<Icon name="discord" /> Log in with Discord
|
||||
|
|
@ -68,6 +69,9 @@
|
|||
</ListGroup>
|
||||
<Modal header="Pick an instance" isOpen={modalOpen} toggle={toggleModal}>
|
||||
<ModalBody>
|
||||
<p>
|
||||
<strong>Note:</strong> Misskey (and derivatives) are not supported yet, sorry.
|
||||
</p>
|
||||
<Input placeholder="Instance (e.g. mastodon.social)" bind:value={instance} />
|
||||
{#if error}
|
||||
<div class="mt-2">
|
||||
|
|
@ -77,7 +81,7 @@
|
|||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button color="primary" disabled={fediDisabled || instance === ""} on:click={fediLogin}
|
||||
>Fediverse login</Button
|
||||
>Log in</Button
|
||||
>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
|
|
|
|||
32
frontend/src/routes/auth/login/fediverse.svg
Normal file
32
frontend/src/routes/auth/login/fediverse.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 8.9 KiB |
|
|
@ -70,10 +70,10 @@
|
|||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Log in with Mastodon - pronouns.cc</title>
|
||||
<title>Log in with the Fediverse - pronouns.cc</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Log in with Mastodon</h1>
|
||||
<h1>Log in with the Fediverse</h1>
|
||||
|
||||
{#if data.error}
|
||||
<ErrorAlert error={data.error} />
|
||||
|
|
|
|||
Loading…
Reference in a new issue