add connection icons

src/app/me/AboutMe.tsx

@@ -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>

src/app/oauth/github/redirect/route.ts

@@ -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();

src/app/page.module.css

@@ -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;
 }

src/app/page.tsx

@@ -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>
   );
 }

src/app/register/page.tsx

@@ -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
 }: {

src/components/Connection.module.css

@@ -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 {

src/components/Connection.tsx

@@ -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 ? (

src/components/Logo.tsx

@@ -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>

src/components/icons/DiscordIcon.tsx

@@ -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>
+  );
+}

src/components/icons/GitHubIcon.tsx

@@ -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>
+  );
+}

src/components/icons/NotNetIcon.tsx

@@ -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>
+  );
+}