diff --git a/src/app/me/AboutMe.tsx b/src/app/me/AboutMe.tsx
index b347c43..90ff8a5 100644
--- 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({
-
-
+
+
diff --git a/src/app/oauth/github/redirect/route.ts b/src/app/oauth/github/redirect/route.ts
index b4563d7..d0e0d0b 100644
--- 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();
diff --git a/src/app/page.module.css b/src/app/page.module.css
index 9e8bee0..965ea47 100644
--- 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;
}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index dd5880e..7cdcc21 100644
--- 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 (
-
- login
-
- register with discord
- register with github
-
+
);
}
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
index 437ea29..7e0de96 100644
--- 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
}: {
diff --git a/src/components/Connection.module.css b/src/components/Connection.module.css
index 923d8cc..84b454d 100644
--- 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 {
diff --git a/src/components/Connection.tsx b/src/components/Connection.tsx
index 9443ead..5db0066 100644
--- 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}
>
- ●
+
+ {icon ? icon() : }
+
{service}
{authState?.connected !== false ? (
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
index 24ec7fc..fa310fb 100644
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@@ -38,13 +38,7 @@ export default function Logo() {
height="21.4354612"
>
-
+
diff --git a/src/components/icons/DiscordIcon.tsx b/src/components/icons/DiscordIcon.tsx
new file mode 100644
index 0000000..6db3993
--- /dev/null
+++ b/src/components/icons/DiscordIcon.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+// https://discord.com/branding
+export default function DiscordIcon() {
+ return (
+
+ );
+}
diff --git a/src/components/icons/GitHubIcon.tsx b/src/components/icons/GitHubIcon.tsx
new file mode 100644
index 0000000..8134d0d
--- /dev/null
+++ b/src/components/icons/GitHubIcon.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+// https://github.com/logos
+export default function GitHubIcon() {
+ return (
+
+ );
+}
diff --git a/src/components/icons/NotNetIcon.tsx b/src/components/icons/NotNetIcon.tsx
new file mode 100644
index 0000000..0a4afe2
--- /dev/null
+++ b/src/components/icons/NotNetIcon.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+
+export default function NotNetIcon() {
+ return (
+
+ );
+}