add connection icons

2023-04-28 16:09:12 -04:00 · 2023-04-28 16:09:12 -04:00 · aec287c003
parent 4315459e87
commit aec287c003
11 changed files with 186 additions and 38 deletions
--- a/src/app/me/AboutMe.tsx
+++ b/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>
--- a/src/app/oauth/github/redirect/route.ts
+++ b/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();
--- a/src/app/page.module.css
+++ b/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;
 }
--- a/src/app/page.tsx
+++ b/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>
  );
 }
--- a/src/app/register/page.tsx
+++ b/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
 }: {
--- a/src/components/Connection.module.css
+++ b/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 {
--- a/src/components/Connection.tsx
+++ b/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 ? (
--- a/src/components/Logo.tsx
+++ b/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>
--- a/src/components/icons/DiscordIcon.tsx
+++ b/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>
+  );
+}
--- a/src/components/icons/GitHubIcon.tsx
+++ b/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>
+  );
+}
--- a/src/components/icons/NotNetIcon.tsx
+++ b/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>
+  );
+}