Merged in fix/logout-in-dropdown (pull request #264)

fix: add logout button in mobile dropdown and name in desktop

Approved-by: Michael Zetterberg

components/Current/Header/LanguageSwitcher/Desktop/desktop.module.css

@@ -106,7 +106,7 @@
   text-decoration: none;
 }
 
-@media (min-width: 950px) {
+@media (min-width: 1366px) {
   .desktop {
     display: block;
   }

components/Current/Header/LanguageSwitcher/Mobile/index.tsx

@@ -19,11 +19,7 @@ export default function Mobile({
   const urlKeys = Object.keys(urls)
 
   if (urlKeys.length === 1 && urlKeys[0] === currentLanguage) {
-    return (
-      <div className={styles.languageSwitcher}>
-        {languages[currentLanguage]}
-      </div>
-    )
+    return <div className={styles.toggle}>{languages[currentLanguage]}</div>
   }
 
   return (

components/Current/Header/LanguageSwitcher/Mobile/mobile.module.css

@@ -67,8 +67,8 @@
   text-decoration: none;
 }
 
-@media (min-width: 950px) {
+@media (min-width: 1366px) {
   .mobile {
     display: none;
   }
-}
+}

components/Current/Header/LoginButton.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { usePathname } from "next/navigation"
+import { useIntl } from "react-intl"
+
+import { login } from "@/constants/routes/handleAuth"
+
+import Link from "@/components/TempDesignSystem/Link"
+
+import { LangParams } from "@/types/params"
+
+export default function LoginButton({
+  className,
+  lang,
+}: LangParams & { className: string }) {
+  const { formatMessage } = useIntl()
+  const pathName = usePathname()
+
+  return (
+    <Link
+      href={`${login[lang]}?redirectTo=${encodeURIComponent(`/${lang}${pathName}`)}`}
+      className={className}
+    >
+      {formatMessage({ id: "Log in" })}
+    </Link>
+  )
+}

components/Current/Header/MainMenu/index.tsx

@@ -1,8 +1,7 @@
 "use client"
-import { useState } from "react"
 import { useIntl } from "react-intl"
 
-import { login } from "@/constants/routes/handleAuth"
+import { logout } from "@/constants/routes/handleAuth"
 import { myPages } from "@/constants/routes/myPages"
 import useDropdownStore from "@/stores/main-menu"
 
@@ -11,6 +10,7 @@ import Avatar from "@/components/MyPages/Avatar"
 import Link from "@/components/TempDesignSystem/Link"
 
 import BookingButton from "../BookingButton"
+import LoginButton from "../LoginButton"
 
 import styles from "./mainMenu.module.css"
 
@@ -103,12 +103,10 @@ export function MainMenu({
                     />
                   </li>
                   <li className={styles.mobileLinkRow}>
-                    <Link
+                    <LoginButton
                       className={styles.mobileLinkButton}
-                      href={login[lang]}
-                    >
-                      {intl.formatMessage({ id: "Log in" })}
-                    </Link>
+                      lang={lang}
+                    />
                   </li>
                 </>
               )}
@@ -141,10 +139,16 @@ export function MainMenu({
                 </li>
               ))}
             </ul>
-
             {languageSwitcher ? (
               <li className={styles.mobileLi}>{languageSwitcher}</li>
             ) : null}
+            {!!user ? (
+              <li className={`${styles.mobileLi} ${styles.logout}`}>
+                <Link href={logout[lang]} className={styles.mobileLink}>
+                  {intl.formatMessage({ id: "Log out" })}
+                </Link>
+              </li>
+            ) : null}
           </ul>
           <div className={styles.buttonContainer}>
             <div className={styles.myPagesDesktopLink}>

components/Current/Header/MainMenu/mainMenu.module.css

@@ -219,10 +219,14 @@
   padding: 5px 0;
 }
 
+.mobileLi.logout {
+  padding: 0;
+}
+
 .mobileLink {
   color: #000;
   display: block;
-  font-family: Helvetica;
+  font-family: Helvetica !important;
   font-size: 14px;
   text-decoration: none;
 }

components/Current/Header/TopMenu/index.tsx

@@ -1,11 +1,20 @@
-import { login, logout } from "@/constants/routes/handleAuth"
+import { logout } from "@/constants/routes/handleAuth"
+import { serverClient } from "@/lib/trpc/server"
 
 import { auth } from "@/auth"
+import Link from "@/components/TempDesignSystem/Link"
+import { getIntl } from "@/i18n"
+
+import LoginButton from "../LoginButton"
 
 import styles from "./topMenu.module.css"
 
 import type { TopMenuProps } from "@/types/components/current/header/topMenu"
 
+function capitalize(str: string) {
+  return str.charAt(0).toUpperCase().toUpperCase() + str.slice(1).toLowerCase()
+}
+
 export default async function TopMenu({
   frontpageLinkText,
   homeHref,
@@ -13,7 +22,9 @@ export default async function TopMenu({
   languageSwitcher,
   lang,
 }: TopMenuProps) {
+  const { formatMessage } = await getIntl()
   const session = await auth()
+  const user = session ? await serverClient().user.get() : null
 
   return (
     <div className={styles.topMenu}>
@@ -34,15 +45,24 @@ export default async function TopMenu({
               </a>
             </li>
           ))}
-          <li className={styles.loginContainer}>
+          <li className={styles.sessionContainer}>
             {session ? (
-              <a href={logout[lang]} className={styles.loginLink}>
-                Log out
-              </a>
+              <>
+                {user ? (
+                  <Link href={logout[lang]} className={styles.sessionLink}>
+                    {capitalize(user.firstName)}
+                  </Link>
+                ) : null}
+                <div className={styles.loginSeparator} />
+                <Link href={logout[lang]} className={styles.sessionLink}>
+                  {formatMessage({ id: "Log out" })}
+                </Link>
+              </>
             ) : (
-              <a href={login[lang]} className={styles.loginLink}>
-                Log in
-              </a>
+              <LoginButton
+                lang={lang}
+                className={`${styles.sessionLink} ${styles.loginLink}`}
+              />
             )}
           </li>
         </ul>

components/Current/Header/TopMenu/topMenu.module.css

@@ -78,9 +78,14 @@
     padding-left: 30px;
     padding-right: 30px;
     color: #000;
+    font-family:
+      Helvetica Neue,
+      Helvetica,
+      Arial,
+      sans-serif !important;
   }
 
-  .loginContainer {
+  .sessionContainer {
     margin-left: 10px;
     background-color: #f3f2f1;
     height: 100%;
@@ -88,15 +93,19 @@
     align-items: center;
   }
 
-  .loginLink {
-    padding-left: 30px;
-    padding-right: 30px;
+  .loginSeparator {
+    height: 15px;
+    border-right: 1px solid #000;
+  }
+
+  .sessionLink {
+    padding: 4px 15px;
     color: #000;
     font-family:
       Helvetica Neue,
       Helvetica,
       Arial,
-      sans-serif;
+      sans-serif !important;
     font-size: 13px;
     font-weight: 400;
     -webkit-font-smoothing: antialiased;
@@ -106,4 +115,9 @@
     text-align: center;
     text-decoration: none;
   }
+
+  .sessionLink.loginLink {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
 }