Auth frontend

scenes/layout/components/Layout.tsx

@@ -1,5 +1,6 @@
 import { Link } from "solid-app-router";
 import { createSignal, For, JSXElement } from "solid-js";
+import { DiscordIcon } from "../../../components/icons/Discord";
 import s from "../styles/Layout.module.css";
 import { navItems } from "../utils";
 import { HamburgerButton } from "./HamburgerButton";
@@ -26,10 +27,18 @@ export function Layout(p: { children: JSXElement }) {
         </div>
         <div class={s.rightContainer}>
           <HamburgerButton isExpanded={menuExpanded()} onClick={toggleMenu} />
-          <img
+          {/* <img
             class={s.avatar}
             src="https://cdn.discordapp.com/avatars/79237403620945920/fcfd65a3bea598905abb9ca25296816b.png?size=80"
-          />
+          /> */}
+          <form
+            action={`${import.meta.env.VITE_BACKEND_URL}/auth/discord`}
+            method="post"
+          >
+            <button type="submit" class={s.logInButton}>
+              <DiscordIcon /> Log in
+            </button>
+          </form>
         </div>
       </header>
       <MobileNav isExpanded={menuExpanded()} />

scenes/layout/service.ts

@@ -21,6 +21,8 @@ export async function upsertUser({
       discordName: loggedInUser.username,
       discordDiscriminator: loggedInUser.discriminator,
       discordAvatar: loggedInUser.avatar,
+      discordRefreshToken: refreshToken,
+      ...parseConnections(loggedInUser.connections),
     },
     where: {
       discordId: loggedInUser.id,

scenes/layout/styles/Layout.module.css

@@ -2,7 +2,7 @@
   --item-size: 3rem;
   position: relative;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 2fr;
   align-items: center;
   padding: var(--s-4);
   z-index: 10;
@@ -29,6 +29,32 @@
   max-height: 100%;
 }
 
+.logInButton {
+  text-decoration: none;
+  font-weight: var(--bold);
+  font-size: var(--fonts-xs);
+  display: flex;
+  height: var(--item-size);
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  border: 2px solid;
+  border-color: var(--bg-lighter);
+  background-color: transparent;
+  border-radius: var(--rounded);
+  color: inherit;
+  cursor: pointer;
+  gap: var(--s-2);
+}
+
+.logInButton > svg {
+  width: 1rem;
+}
+
+.logInButton:active {
+  transform: translateY(1px);
+}
+
 .avatar {
   border-radius: var(--rounded);
   width: var(--item-size);

scenes/tournament/components/TeamsTab.tsx

@@ -66,10 +66,12 @@ function TeamsList(p: {
               <div class={s.teamName}>{team.name}</div>
               <div class={s.membersContainer}>
                 <For each={team.members}>
-                  {({ member, captain }, i) => (
+                  {(data, i) => (
                     <div class={s.member}>
-                      <div class={s.orderNumber}>{captain ? "C" : i()}</div>
-                      <AvatarWithName {...member} />
+                      <div class={s.orderNumber}>
+                        {data.captain ? "C" : i()}
+                      </div>
+                      <AvatarWithName {...data.member} />
                     </div>
                   )}
                 </For>