1
0
Fork 0

add connection icons

This commit is contained in:
Julian 2023-04-28 16:09:12 -04:00
parent 4315459e87
commit aec287c003
Signed by untrusted user: NotNite
GPG Key ID: BD91A5402CCEB08A
11 changed files with 186 additions and 38 deletions

View File

@ -18,6 +18,8 @@ import Toast from "@/components/Toast";
import { AuthProviderState } from "@/auth/AuthProvider";
import inputStyles from "@/components/Input.module.css";
import Connection from "@/components/Connection";
import DiscordIcon from "@/components/icons/DiscordIcon";
import GitHubIcon from "@/components/icons/GitHubIcon";
type UpdateResponse = {
ok: boolean;
@ -202,8 +204,16 @@ export default function AboutMe({
<div className={styles.connections}>
<Label>Connections</Label>
<Connection service="Discord" authState={discordState} />
<Connection service="GitHub" authState={githubState} />
<Connection
service="Discord"
authState={discordState}
icon={DiscordIcon}
/>
<Connection
service="GitHub"
authState={githubState}
icon={GitHubIcon}
/>
<Connection service="Tailscale" unavailable />
<Connection service="Migadu" unavailable />
</div>

View File

@ -53,6 +53,16 @@ export async function GET(request: Request) {
const [user, authTicket] = await authTicketOAuth(userId);
if (user?.username !== null) {
return new Response(null, {
status: 302,
headers: {
"Set-Cookie": `ticket=${authTicket.ticket}; Path=/;`,
Location: "/me"
}
});
}
const username = await provider.getDisplayName();
const email = await provider.getEmail();
const avatarUrl = await provider.getAvatar();

View File

@ -7,21 +7,32 @@
height: 100vh;
}
.form {
.content {
margin-top: 2rem;
display: flex;
flex-direction: column;
font-stretch: expanded;
line-height: 1.5;
}
.form div {
.content p {
text-align: center;
}
.icons {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.form div label {
margin-right: 1rem;
.icons svg {
width: 4rem;
height: 4rem;
padding: 0.5rem;
}
.form div input {
width: 15rem;
.icons svg:hover {
background-color: var(--bg-dark);
border-radius: 0.25rem;
}

View File

@ -1,25 +1,31 @@
import Logo from "@/components/Logo";
import styles from "./page.module.css";
import NotNetIcon from "@/components/icons/NotNetIcon";
import GitHubIcon from "@/components/icons/GitHubIcon";
import DiscordIcon from "@/components/icons/DiscordIcon";
export default function Home() {
return (
<main className={styles.main}>
<Logo />
<p
style={{
marginTop: "2rem",
display: "flex",
flexDirection: "column",
fontStretch: "expanded",
lineHeight: 1.5
}}
>
<a href="/login">login</a>
<br />
<a href="/oauth/discord/login">register with discord</a>
<a href="/oauth/github/login">register with github</a>
</p>
<div className={styles.content}>
<p>login with</p>
<div className={styles.icons}>
<a href="/login" title="NotNet">
<NotNetIcon />
</a>
<a href="/oauth/discord/login" title="Discord">
<DiscordIcon />
</a>
<a href="/oauth/github/login" title="GitHub">
<GitHubIcon />
</a>
</div>
</div>
</main>
);
}

View File

@ -20,10 +20,6 @@ function avatarUrlSource(url: URL): ValidAuthProvider | null {
return null;
}
function avatarUrlAllowed(url: URL): boolean {
return avatarUrlSource(url) !== null;
}
export default async function Page({
searchParams
}: {

View File

@ -12,13 +12,25 @@
}
.connection svg {
height: 1.5rem;
width: 3rem;
height: 3rem;
margin-left: auto;
}
.connection .dot {
width: 1rem;
height: 1rem;
margin: 1rem;
background-color: var(--fg);
border-radius: 50%;
}
.iconContainer {
font-size: 2.5em;
margin-right: 0.75rem;
display: flex;
align-items: center;
}
.info {

View File

@ -9,11 +9,13 @@ import { useRouter } from "next/navigation";
export default function Connection({
service,
unavailable = false,
authState
authState,
icon
}: {
service: string;
unavailable?: boolean;
authState?: AuthProviderState;
icon?: () => JSX.Element;
}) {
const router = useRouter();
const [changing, setChanging] = React.useState(false);
@ -50,7 +52,9 @@ export default function Connection({
onClick={handleClick}
disabled={changing}
>
<div className={styles.iconContainer}>&#9679;</div>
<div className={styles.iconContainer}>
{icon ? icon() : <span className={styles.dot}></span>}
</div>
<div className={styles.info}>
<div className={styles.serviceName}>{service}</div>
{authState?.connected !== false ? (

View File

@ -38,13 +38,7 @@ export default function Logo() {
height="21.4354612"
></rect>
</defs>
<g
id="Logo"
stroke="none"
stroke-width="1"
fill="none"
fill-rule="evenodd"
>
<g id="Logo" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g
id="Logos/Ari-Inspired-Dark"
transform="translate(-73.669529, -60.500000)"
@ -88,7 +82,7 @@ export default function Logo() {
</mask>
<path
stroke="currentColor"
stroke-width="2"
strokeWidth="2"
d="M13.2928824,-1 C14.9133577,-1 15.4869268,-0.795928047 16.0755776,-0.481114142 C16.7413126,-0.125075161 17.2637854,0.397397573 17.6198244,1.06313259 C17.9346383,1.65178341 18.1387102,2.22535247 18.1387102,3.8458278 L18.1387102,50.4723403 C18.1387102,52.0928156 17.9346383,52.6663846 17.6198244,53.2550355 C17.2637854,53.9207705 16.7413126,54.4432432 16.0755776,54.7992822 C15.4869268,55.1140961 14.9133577,55.3181681 13.2928824,55.3181681 L3.8458278,55.3181681 C2.22535247,55.3181681 1.65178341,55.1140961 1.06313259,54.7992822 C0.397397573,54.4432432 -0.125075161,53.9207705 -0.481114142,53.2550355 C-0.795928047,52.6663846 -1,52.0928156 -1,50.4723403 L-1,3.8458278 C-1,2.22535247 -0.795928047,1.65178341 -0.481114142,1.06313259 C-0.125075161,0.397397573 0.397397573,-0.125075161 1.06313259,-0.481114142 C1.65178341,-0.795928047 2.22535247,-1 3.8458278,-1 Z"
></path>
</g>

View File

@ -0,0 +1,13 @@
import React from "react";
// https://discord.com/branding
export default function DiscordIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36">
<path
fill="currentColor"
d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
/>
</svg>
);
}

View File

@ -0,0 +1,20 @@
import React from "react";
// https://github.com/logos
export default function GitHubIcon() {
return (
<svg
width="98"
height="96"
viewBox="0 0 98 96"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
fill="currentColor"
/>
</svg>
);
}

View File

@ -0,0 +1,72 @@
import React from "react";
export default function NotNetIcon() {
return (
<svg
width="4"
height="4"
viewBox="0 0 4 4"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
>
<g id="notnet">
<g id="red">
<rect
fill="currentColor"
id="rect1"
width="2"
height="1"
x="1"
y="0"
/>
<rect
fill="currentColor"
id="rect2"
width="1"
height="2"
x="0"
y="1"
/>
<rect
fill="currentColor"
id="rect3"
width="1"
height="1"
x="1"
y="2"
/>
</g>
<g id="blue">
<rect
fill="currentColor"
id="rect4"
width="2"
height="1"
x="-3"
y="-4"
transform="scale(-1)"
/>
<rect
fill="currentColor"
id="rect5"
width="1"
height="2"
x="-4"
y="-3"
transform="scale(-1)"
/>
<rect
fill="currentColor"
id="rect6"
width="1"
height="1"
x="-3"
y="-2"
transform="scale(-1)"
/>
</g>
</g>
</svg>
);
}