uibee 3.3.0 → 3.3.1

package/dist/utils/auth/callback.d.ts

@@ -0,0 +1,14 @@
+import { AuthCallbackProps } from "uibee/utils";
+
+//#region src/utils/auth/callback.d.ts
+declare function authCallback({
+  req,
+  tokenURL,
+  clientID,
+  clientSecret,
+  redirectPath,
+  userInfoURL,
+  tokenRedirectPath
+}: AuthCallbackProps): Promise<Response>;
+//#endregion
+export { authCallback as default };

package/dist/utils/auth/callback.js

@@ -0,0 +1,53 @@
+import { getDomain } from "./getDomain.js";
+import { NextResponse } from "next/server.js";
+//#region src/utils/auth/callback.ts
+async function authCallback({ req, tokenURL, clientID, clientSecret, redirectPath, userInfoURL, tokenRedirectPath }) {
+	const domain = getDomain(req);
+	const searchParams = new URL(req.url).searchParams;
+	if (!searchParams) return NextResponse.json({ error: "No search parameters found." }, { status: 400 });
+	const code = searchParams.get("code");
+	if (!code) return NextResponse.json({ error: "No authorization code found." }, { status: 400 });
+	try {
+		const tokenResponse = await fetch(tokenURL, {
+			method: "POST",
+			headers: { "Content-Type": "application/x-www-form-urlencoded" },
+			body: new URLSearchParams({
+				client_id: clientID,
+				client_secret: clientSecret,
+				code,
+				redirect_uri: `${domain}${redirectPath}`,
+				grant_type: "authorization_code"
+			}).toString()
+		});
+		const tokenResponseBody = await tokenResponse.text();
+		if (!tokenResponse.ok) return new Response(JSON.stringify(`Failed to obtain token: ${tokenResponseBody}`), {
+			status: 500,
+			headers: { "Content-Type": "application/json" }
+		});
+		const token = JSON.parse(tokenResponseBody);
+		const userInfoResponse = await fetch(userInfoURL, { headers: { Authorization: `Bearer ${token.access_token}` } });
+		if (!userInfoResponse.ok) {
+			const userInfoError = await userInfoResponse.text();
+			return new Response(`No user info found: ${userInfoError}`, {
+				status: 500,
+				headers: { "Content-Type": "application/json" }
+			});
+		}
+		const userInfo = await userInfoResponse.json();
+		const redirectUrl = new URL(`${domain}${tokenRedirectPath}`);
+		redirectUrl.search = new URLSearchParams({
+			id: userInfo.sub,
+			name: userInfo.name,
+			username: userInfo.nickname,
+			email: userInfo.email,
+			groups: userInfo.groups.join(","),
+			access_token: token.access_token
+		}).toString();
+		return NextResponse.redirect(redirectUrl.toString());
+	} catch (err) {
+		console.error("Error during OAuth flow:", err.message);
+		return NextResponse.json({ error: "Authentication failed" }, { status: 500 });
+	}
+}
+//#endregion
+export { authCallback as default };

package/dist/utils/auth/getDomain.js

@@ -0,0 +1,6 @@
+//#region src/utils/auth/getDomain.ts
+function getDomain(req) {
+	return `${req.headers.get("x-forwarded-proto") ?? new URL(req.url).protocol.replace(":", "")}://${req.headers.get("host") ?? req.headers.get("x-forwarded-host") ?? new URL(req.url).host}`;
+}
+//#endregion
+export { getDomain };

package/dist/utils/auth/login.d.ts

@@ -0,0 +1,12 @@
+import { NextResponse } from "next/server.js";
+import { AuthLoginProps } from "uibee/utils";
+
+//#region src/utils/auth/login.d.ts
+declare function AuthLogin({
+  req,
+  clientID,
+  redirectPath,
+  authURL
+}: AuthLoginProps): Promise<NextResponse<unknown>>;
+//#endregion
+export { AuthLogin as default };

package/dist/utils/auth/login.js

@@ -0,0 +1,17 @@
+import { getDomain } from "./getDomain.js";
+import { NextResponse } from "next/server.js";
+//#region src/utils/auth/login.ts
+async function AuthLogin({ req, clientID, redirectPath, authURL }) {
+	const domain = getDomain(req);
+	const state = Math.random().toString(36).substring(5);
+	const authQueryParams = new URLSearchParams({
+		client_id: clientID,
+		redirect_uri: `${domain}${redirectPath}`,
+		response_type: "code",
+		scope: "openid profile email",
+		state
+	}).toString();
+	return NextResponse.redirect(`${authURL}?${authQueryParams}`);
+}
+//#endregion
+export { AuthLogin as default };

package/dist/utils/auth/logout.d.ts

@@ -0,0 +1,10 @@
+import { NextResponse } from "next/server.js";
+import { AuthLogoutProps } from "uibee/utils";
+
+//#region src/utils/auth/logout.d.ts
+declare function AuthLogout({
+  req,
+  path
+}: AuthLogoutProps): Promise<NextResponse<unknown>>;
+//#endregion
+export { AuthLogout as default };

package/dist/utils/auth/logout.js

@@ -0,0 +1,20 @@
+import { getDomain } from "./getDomain.js";
+import { NextResponse } from "next/server.js";
+//#region src/utils/auth/logout.ts
+async function AuthLogout({ req, path }) {
+	const domain = getDomain(req);
+	const response = NextResponse.redirect(new URL(path || "/", domain));
+	[
+		"access_token",
+		"user_id",
+		"user_name",
+		"user_nickname",
+		"user_email",
+		"user_groups"
+	].forEach((cookieName) => {
+		response.cookies.delete(cookieName);
+	});
+	return response;
+}
+//#endregion
+export { AuthLogout as default };

package/dist/utils/auth/token.d.ts

@@ -0,0 +1,10 @@
+import { NextResponse } from "next/server.js";
+import { AuthTokenProps } from "uibee/utils";
+
+//#region src/utils/auth/token.d.ts
+declare function AuthToken({
+  req,
+  redirectPath
+}: AuthTokenProps): Promise<NextResponse<unknown>>;
+//#endregion
+export { AuthToken as default };

package/dist/utils/auth/token.js

@@ -0,0 +1,30 @@
+import { getDomain } from "./getDomain.js";
+import { NextResponse } from "next/server.js";
+//#region src/utils/auth/token.ts
+async function AuthToken({ req, redirectPath }) {
+	const domain = getDomain(req);
+	const url = new URL(req.url);
+	const token = url.searchParams.get("access_token");
+	const btg = url.searchParams.get("btg");
+	const redirectCookie = req.cookies.get("redirect_after_login");
+	const redirect = redirectCookie ? redirectCookie.value : redirectPath || "/";
+	if (!token) return NextResponse.json({ error: "No access token provided" }, { status: 400 });
+	if (btg) return NextResponse.redirect(new URL(redirect, domain));
+	const accessToken = url.searchParams.get("access_token");
+	const userID = url.searchParams.get("id");
+	const username = url.searchParams.get("name");
+	const userNickname = url.searchParams.get("username");
+	const userEmail = url.searchParams.get("email");
+	const userGroups = url.searchParams.get("groups");
+	const response = NextResponse.redirect(new URL(redirect, domain));
+	response.cookies.set("access_token", accessToken);
+	response.cookies.set("user_id", userID);
+	response.cookies.set("user_name", username);
+	response.cookies.set("user_nickname", userNickname);
+	response.cookies.set("user_email", userEmail);
+	response.cookies.set("user_groups", userGroups);
+	if (redirectCookie) response.cookies.delete("redirect_after_login");
+	return response;
+}
+//#endregion
+export { AuthToken as default };

package/dist/utils/logoConsoleOutput/logoConsoleOutput.d.ts

@@ -0,0 +1,4 @@
+//#region src/utils/logoConsoleOutput/logoConsoleOutput.d.ts
+declare function LogoConsoleOutput(): void;
+//#endregion
+export { LogoConsoleOutput };

package/dist/utils/logoConsoleOutput/logoConsoleOutput.js

@@ -0,0 +1,11 @@
+//#region src/utils/logoConsoleOutput/logoConsoleOutput.ts
+function LogoConsoleOutput() {
+	const ua = navigator.userAgent;
+	if (!ua.includes("Chrome") && !ua.includes("Firefox") && !ua.includes("Safari")) {
+		console.log("Login - Linjeforeningen for IT");
+		return;
+	}
+	console.log("%c███████╗                              ███████╗\n██╔════╝                              ╚════██║\n██║%c ██╗     ██████╗  ██████╗ ██╗███╗   ██╗ %c██║\n╚═╝%c ██║    ██╔═══██╗██╔════╝ ██║████╗  ██║ %c╚═╝%c\n    ██║    ██║   ██║██║  ███╗██║██╔██╗ ██║\n    ██║    ██║   ██║██║   ██║██║██║╚██╗██║\n%c██╗%c ██████╗╚██████╔╝╚██████╔╝██║██║ ╚████║ %c██╗\n██║%c ╚═════╝ ╚═════╝  ╚═════╝ ╚═╝╚═╝  ╚═══╝ %c██║\n███████╗%c                              %c███████║\n╚══════╝                              ╚══════╝%c\n\n       - Laget av TekKom med 🍕 og ❤️", "color: #fd8738", "", "color: #fd8738", "", "color: #fd8738", "", "color: #fd8738", "", "color: #fd8738", "", "color: #fd8738", "", "color: #fd8738", "");
+}
+//#endregion
+export { LogoConsoleOutput };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {

package/src/components/buttons/button.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import Link from 'next/link'
 import type { JSX } from 'react'
 

package/src/components/footer/footer.tsx

@@ -32,6 +32,41 @@ function t(s: BilingualString, lang: Lang): string {
     return typeof s === 'string' ? s : s[lang]
 }
 
+function Column({ col, lang }: { col: FooterColumn; lang: Lang }) {
+    return (
+        <div>
+            <h4 className='pb-2 text-sm font-medium tracking-widest text-login-100'>
+                {t(col.heading, lang)}
+            </h4>
+            {col.items.map((item, j) =>
+                item.href ? (
+                    item.href.startsWith('/') ? (
+                        <Link
+                            key={j}
+                            className='link--underscore-hover block text-login-50'
+                            href={item.href}
+                        >
+                            {t(item.label, lang)}
+                        </Link>
+                    ) : (
+                        <a
+                            key={j}
+                            className='link--underscore-hover block text-login-50'
+                            href={item.href}
+                        >
+                            {t(item.label, lang)}
+                        </a>
+                    )
+                ) : (
+                    <p key={j} className='text-login-50'>
+                        {t(item.label, lang)}
+                    </p>
+                )
+            )}
+        </div>
+    )
+}
+
 export default function Footer({
     logo,
     sponsor,
@@ -43,15 +78,16 @@ export default function Footer({
     className,
 }: FooterProps) {
     const year = new Date().getFullYear()
+    const [firstColumn, ...restColumns] = columns ?? []
     const hasRight = (columns && columns.length > 0) || (socialLinks && socialLinks.length > 0)
 
     return (
-        <div className={`mt-24 bg-login-950 md:mt-40 ${className || ''}`}>
+        <div className={`max-md:mt-24 bg-login-950 md:mt-40 ${className || ''}`}>
             <div className={`
-                mx-auto w-full px-4 pt-16 pb-24 md:max-w-304 md:px-12 md:pt-20 md:pb-4
+                mx-auto w-full pb-4 max-md:px-4 max-md:pt-16 md:max-w-304 md:px-12 md:pt-20
                 ${hasRight ? 'md:grid md:grid-cols-[18rem_1fr] md:gap-x-12' : ''}
             `}>
-                <div className='mx-auto grid w-full max-w-60 gap-16 md:row-span-2 md:max-w-72 md:gap-20'>
+                <div className='mx-auto grid w-full max-md:max-w-60 max-md:gap-16 md:row-span-2 md:max-w-72 md:gap-20'>
                     <div className='block w-full'>{logo}</div>
                     {sponsor && (
                         <div>
@@ -65,43 +101,26 @@ export default function Footer({
                     )}
                 </div>
 
-                {columns && columns.length > 0 && (
+                {firstColumn && (
+                    <div className='
+                        grid w-full self-start max-md:mt-16
+                        max-sm:max-w-60 sm:max-md:max-w-88
+                        md:col-start-2 md:row-start-1 md:max-w-136 md:justify-self-center
+                    '>
+                        <Column col={firstColumn} lang={lang} />
+                    </div>
+                )}
+
+                {restColumns.length > 0 && (
                     <div className={`
-                        mt-12 grid w-full max-w-60 gap-8
-                        sm:max-w-88 sm:justify-items-end sm:justify-self-end
-                        md:col-start-2 md:row-start-1 md:mt-0 md:max-w-136 md:gap-0 md:justify-self-end
-                        ${columns.length > 1 ? 'sm:grid-cols-2' : ''}
+                        grid w-full self-start max-md:mt-16 max-md:gap-8
+                        max-sm:max-w-60 sm:max-md:max-w-88 sm:justify-items-end sm:justify-self-end
+                        md:col-start-2 md:row-start-1 md:max-w-136 md:justify-self-end
+                        ${restColumns.length > 1 ? 'sm:grid-cols-2' : ''}
                     `}>
-                        {columns.map((col, i) => (
+                        {restColumns.map((col, i) => (
                             <div key={i} className='sm:justify-self-center md:justify-self-end'>
-                                <h4 className='pb-2 text-sm font-medium tracking-widest text-login-100'>
-                                    {t(col.heading, lang)}
-                                </h4>
-                                {col.items.map((item, j) =>
-                                    item.href ? (
-                                        item.href.startsWith('/') ? (
-                                            <Link
-                                                key={j}
-                                                className='link--underscore-hover block text-login-100'
-                                                href={item.href}
-                                            >
-                                                {t(item.label, lang)}
-                                            </Link>
-                                        ) : (
-                                            <a
-                                                key={j}
-                                                className='link--underscore-hover block text-login-100'
-                                                href={item.href}
-                                            >
-                                                {t(item.label, lang)}
-                                            </a>
-                                        )
-                                    ) : (
-                                        <p key={j} className='text-login-100'>
-                                            {t(item.label, lang)}
-                                        </p>
-                                    )
-                                )}
+                                <Column col={col} lang={lang} />
                             </div>
                         ))}
                     </div>
@@ -109,11 +128,12 @@ export default function Footer({
 
                 {socialLinks && socialLinks.length > 0 && (
                     <div className='md:col-start-2 md:row-start-2 md:justify-self-end'>
-                        <div className='mx-auto mt-20 mb-12 flex w-fit flex-wrap justify-center gap-6'>
+                        <div className='mx-auto mt-20 mb-12 grid w-fit gap-6 max-sm:grid-cols-3 sm:grid-flow-col'>
                             {socialLinks.map((link, i) => (
                                 <a
                                     key={i}
-                                    className={`block size-8 text-login-100 transition-all duration-200 group
+                                    className={`group mx-auto flex h-8 w-8 items-center justify-center
+                                        text-login-100 transition-all duration-200
                                         ${link.hoverClass ?? 'hover:text-login-50'}`}
                                     title={link.title}
                                     href={link.href}
@@ -127,9 +147,7 @@ export default function Footer({
                     </div>
                 )}
 
-                <div className='mt-16 flex flex-col items-start gap-4 md:col-span-2 md:row-start-3 md:mt-24 md:grid
-                    md:grid-cols-[auto_min-content] md:items-end md:gap-8'
-                >
+                <div className='mt-24 grid grid-cols-[auto_min-content] items-end gap-8 md:col-span-2 md:row-start-3'>
                     <p className='text-xs wrap-break-word text-login-100'>
                         {lang === 'no' ? 'Opphavsrett' : 'Copyright'} © {year} {t(copyright, lang)}
                     </p>

package/src/components/index.ts

@@ -1,4 +1,3 @@
-'use client'
 export { default as Input } from './inputs/input'
 export { default as SearchInput } from './inputs/searchInput'
 export { default as Textarea } from './inputs/textarea'

package/src/components/inputs/checkbox.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { Check } from 'lucide-react'
 import { FieldWrapper, InputLabel } from './shared'
 

package/src/components/inputs/input.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { type ChangeEvent, type JSX, useRef, useState, useId } from 'react'
 import { Calendar, Clock } from 'lucide-react'
 import { FieldWrapper } from './shared'

package/src/components/inputs/radio.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { FieldWrapper, InputLabel } from './shared'
 
 export type RadioOption = {

package/src/components/inputs/range.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { FieldWrapper } from './shared'
 
 export type RangeProps = Omit<React.ComponentProps<'input'>, 'name'> & {

package/src/components/inputs/shared/colorPickerPopup.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { type JSX, useState, useEffect, useRef } from 'react'
 
 export type ColorPickerPopupProps = {

package/src/components/inputs/shared/dateTimePickerPopup.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, useEffect } from 'react'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 

package/src/components/inputs/textarea.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useState } from 'react'
 import { Eye, Pencil } from 'lucide-react'
 import { FieldWrapper } from './shared'

package/src/components/inputs/toggle.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 type ToggleOption<T> = {
     value: T
     label?: string

package/src/components/toast/toastItem.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { AlertCircle, AlertTriangle, CheckCircle, Info, X } from 'lucide-react'
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import type { ToastType, ToastProps } from 'uibee/components'

package/src/globals.css

@@ -2,6 +2,11 @@
 
 @config '../tailwind.config.ts';
 
+/* Apply hover styles on :hover directly instead of gating them behind
+   @media (hover: hover), which never matches on devices reporting hover: none. */
+@custom-variant hover (&:hover);
+@custom-variant group-hover (&:is(:where(.group):hover *));
+
 @theme {
     --breakpoint-100px: 100px;
 	--breakpoint-200px: 200px;

package/tsdown.config.ts

@@ -13,6 +13,7 @@ export default defineConfig({
     outExtensions: () => ({ js: '.js', dts: '.d.ts' }),
     dts: true,
     clean: true,
+    unbundle: true,
     deps: {
         onlyBundle: false,
     },