uibee 2.8.5 → 2.8.7

package/dist/src/components/inputs/input.js

@@ -83,10 +83,32 @@ export default function Input(props) {
         const date = new Date(value);
         return isNaN(date.getTime()) ? null : date;
     }
+    function getDateDisplayValue() {
+        if (!value || !isDateType)
+            return value;
+        const date = getDateValue();
+        if (!date)
+            return value;
+        function pad(n) {
+            return n.toString().padStart(2, '0');
+        }
+        const yyyy = date.getFullYear();
+        const MM = pad(date.getMonth() + 1);
+        const dd = pad(date.getDate());
+        const hh = pad(date.getHours());
+        const mm = pad(date.getMinutes());
+        if (type === 'date')
+            return `${dd}.${MM}.${yyyy}`;
+        if (type === 'time')
+            return `${hh}:${mm}`;
+        if (type === 'datetime-local')
+            return `${dd}.${MM}.${yyyy} ${hh}:${mm}`;
+        return value;
+    }
     return (_jsx(FieldWrapper, { label: label, name: name, required: inputProps.required, info: info, error: error, className: className, children: _jsxs("div", { className: 'relative flex items-center', ref: containerRef, children: [displayIcon && (_jsx("div", { className: `
                             absolute left-3 text-login-200
                             ${isClickableType && !inputProps.disabled ? 'cursor-pointer hover:text-login-text' : 'pointer-events-none'}
-                        `, onClick: handleIconClick, children: displayIcon })), _jsx("input", { ...inputProps, ref: localRef, id: name, name: name, type: isClickableType ? 'text' : type, value: value, readOnly: isClickableType, onClick: () => isClickableType && !inputProps.disabled && setIsOpen(true), title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
+                        `, onClick: handleIconClick, children: displayIcon })), _jsx("input", { ...inputProps, ref: localRef, id: name, name: isClickableType ? undefined : name, type: isClickableType ? 'text' : type, value: isDateType ? getDateDisplayValue() : value, readOnly: isClickableType, onClick: () => isClickableType && !inputProps.disabled && setIsOpen(true), title: label, "aria-invalid": !!error, "aria-describedby": error ? `${name}-error` : undefined, className: `
                         w-full rounded-md bg-login-500/50 border border-login-500 
                         text-login-text placeholder-login-200
                         focus:outline-none focus:border-login focus:ring-1 focus:ring-login
@@ -96,5 +118,5 @@ export default function Input(props) {
                         input-reset
                         ${error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
                         ${isClickableType && !inputProps.disabled ? 'cursor-pointer' : ''}
-                    ` }), isOpen && isDateType && !inputProps.disabled && (_jsx(DateTimePickerPopup, { value: getDateValue(), onChange: handleDateChange, type: type, onClose: () => setIsOpen(false) })), isOpen && isColorType && !inputProps.disabled && (_jsx(ColorPickerPopup, { value: value || '', onChange: handleColorChange, onClose: () => setIsOpen(false) }))] }) }));
+                    ` }), isClickableType && (_jsx("input", { type: 'hidden', name: name, value: value })), isOpen && isDateType && !inputProps.disabled && (_jsx(DateTimePickerPopup, { value: getDateValue(), onChange: handleDateChange, type: type, onClose: () => setIsOpen(false) })), isOpen && isColorType && !inputProps.disabled && (_jsx(ColorPickerPopup, { value: value || '', onChange: handleColorChange, onClose: () => setIsOpen(false) }))] }) }));
 }

package/dist/src/components/inputs/shared/dateTimePickerPopup.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
-const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
 const MONTHS = [
     'January', 'February', 'March', 'April', 'May', 'June',
     'July', 'August', 'September', 'October', 'November', 'December'
@@ -87,7 +87,8 @@ export default function DateTimePickerPopup({ value, onChange, type, onClose, })
         const daysInMonth = getDaysInMonth(year, month);
         const firstDay = getFirstDayOfMonth(year, month);
         const days = [];
-        for (let i = 0; i < firstDay; i++) {
+        const adjustedFirstDay = firstDay === 0 ? 6 : firstDay - 1;
+        for (let i = 0; i < adjustedFirstDay; i++) {
             days.push(_jsx("div", { className: 'w-8 h-8' }, `empty-${i}`));
         }
         for (let i = 1; i <= daysInMonth; i++) {

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

@@ -1,2 +1,2 @@
 import type { AuthCallbackProps } from 'uibee/utils';
-export default function authCallback({ req, tokenURL, clientID, clientSecret, redirectURL, userInfoURL, tokenRedirectURL }: AuthCallbackProps): Promise<Response>;
+export default function authCallback({ req, tokenURL, clientID, clientSecret, redirectPath, userInfoURL, tokenRedirectPath }: AuthCallbackProps): Promise<Response>;

package/dist/src/utils/auth/callback.js

@@ -1,5 +1,7 @@
 import { NextResponse } from 'next/server';
-export default async function authCallback({ req, tokenURL, clientID, clientSecret, redirectURL, userInfoURL, tokenRedirectURL }) {
+import { getDomain } from './getDomain';
+export default 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 });
@@ -17,7 +19,7 @@ export default async function authCallback({ req, tokenURL, clientID, clientSecr
                 client_id: clientID,
                 client_secret: clientSecret,
                 code: code,
-                redirect_uri: redirectURL,
+                redirect_uri: `${domain}${redirectPath}`,
                 grant_type: 'authorization_code',
             }).toString()
         });
@@ -41,7 +43,7 @@ export default async function authCallback({ req, tokenURL, clientID, clientSecr
             });
         }
         const userInfo = await userInfoResponse.json();
-        const redirectUrl = new URL(tokenRedirectURL);
+        const redirectUrl = new URL(`${domain}${tokenRedirectPath}`);
         const params = new URLSearchParams({
             id: userInfo.sub,
             name: userInfo.name,

package/dist/src/utils/auth/getDomain.d.ts

@@ -0,0 +1,2 @@
+import { NextRequest } from 'next/server';
+export declare function getDomain(req: NextRequest): string;

package/dist/src/utils/auth/getDomain.js

@@ -0,0 +1,5 @@
+export function getDomain(req) {
+    const proto = req.headers.get('x-forwarded-proto') ?? new URL(req.url).protocol.replace(':', '');
+    const host = req.headers.get('x-forwarded-host') ?? req.headers.get('host') ?? new URL(req.url).host;
+    return `${proto}://${host}`;
+}

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

@@ -1,3 +1,3 @@
 import { NextResponse } from 'next/server';
 import type { AuthLoginProps } from 'uibee/utils';
-export default function AuthLogin({ clientID, redirectURL, authURL }: AuthLoginProps): Promise<NextResponse<unknown>>;
+export default function AuthLogin({ req, clientID, redirectPath, authURL }: AuthLoginProps): Promise<NextResponse<unknown>>;

package/dist/src/utils/auth/login.js

@@ -1,9 +1,11 @@
 import { NextResponse } from 'next/server';
-export default async function AuthLogin({ clientID, redirectURL, authURL }) {
+import { getDomain } from './getDomain';
+export default 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: redirectURL,
+        redirect_uri: `${domain}${redirectPath}`,
         response_type: 'code',
         scope: 'openid profile email',
         state: state,

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

@@ -1,3 +1,3 @@
 import { NextResponse } from 'next/server';
 import type { AuthLogoutProps } from 'uibee/utils';
-export default function AuthLogout({ frontendURL, path }: AuthLogoutProps): Promise<NextResponse<unknown>>;
+export default function AuthLogout({ req, path }: AuthLogoutProps): Promise<NextResponse<unknown>>;

package/dist/src/utils/auth/logout.js

@@ -1,6 +1,8 @@
 import { NextResponse } from 'next/server';
-export default async function AuthLogout({ frontendURL, path }) {
-    const response = NextResponse.redirect(new URL(path || '/', frontendURL));
+import { getDomain } from './getDomain';
+export default async function AuthLogout({ req, path }) {
+    const domain = getDomain(req);
+    const response = NextResponse.redirect(new URL(path || '/', domain));
     const cookiesToRemove = [
         'access_token',
         'user_id',

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

@@ -1,3 +1,3 @@
 import { NextResponse } from 'next/server';
 import type { AuthTokenProps } from 'uibee/utils';
-export default function AuthToken({ req, frontendURL, redirectPath }: AuthTokenProps): Promise<NextResponse<unknown>>;
+export default function AuthToken({ req, redirectPath }: AuthTokenProps): Promise<NextResponse<unknown>>;

package/dist/src/utils/auth/token.js

@@ -1,5 +1,7 @@
 import { NextResponse } from 'next/server';
-export default async function AuthToken({ req, frontendURL, redirectPath }) {
+import { getDomain } from './getDomain';
+export default 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');
@@ -9,7 +11,7 @@ export default async function AuthToken({ req, frontendURL, redirectPath }) {
         return NextResponse.json({ error: 'No access token provided' }, { status: 400 });
     }
     if (btg) {
-        return NextResponse.redirect(new URL(redirect, frontendURL));
+        return NextResponse.redirect(new URL(redirect, domain));
     }
     const accessToken = url.searchParams.get('access_token');
     const userID = url.searchParams.get('id');
@@ -17,7 +19,7 @@ export default async function AuthToken({ req, frontendURL, redirectPath }) {
     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, frontendURL));
+    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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.8.5",
+  "version": "2.8.7",
   "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/inputs/input.tsx

@@ -100,6 +100,29 @@ export default function Input(props: InputProps) {
         return isNaN(date.getTime()) ? null : date
     }
 
+    function getDateDisplayValue() {
+        if (!value || !isDateType) return value as string
+
+        const date = getDateValue()
+        if (!date) return value as string
+
+        function pad(n: number) {
+            return n.toString().padStart(2, '0')
+        }
+
+        const yyyy = date.getFullYear()
+        const MM = pad(date.getMonth() + 1)
+        const dd = pad(date.getDate())
+        const hh = pad(date.getHours())
+        const mm = pad(date.getMinutes())
+
+        if (type === 'date') return `${dd}.${MM}.${yyyy}`
+        if (type === 'time') return `${hh}:${mm}`
+        if (type === 'datetime-local') return `${dd}.${MM}.${yyyy} ${hh}:${mm}`
+
+        return value as string
+    }
+
     return (
         <FieldWrapper
             label={label}
@@ -125,9 +148,9 @@ export default function Input(props: InputProps) {
                     {...inputProps}
                     ref={localRef}
                     id={name}
-                    name={name}
+                    name={isClickableType ? undefined : name}
                     type={isClickableType ? 'text' : type}
-                    value={value}
+                    value={isDateType ? getDateDisplayValue() : value}
                     readOnly={isClickableType}
                     onClick={() => isClickableType && !inputProps.disabled && setIsOpen(true)}
                     title={label}
@@ -145,6 +168,9 @@ export default function Input(props: InputProps) {
                         ${isClickableType && !inputProps.disabled ? 'cursor-pointer' : ''}
                     `}
                 />
+                {isClickableType && (
+                    <input type='hidden' name={name} value={value as string} />
+                )}
                 {isOpen && isDateType && !inputProps.disabled && (
                     <DateTimePickerPopup
                         value={getDateValue()}

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

@@ -8,7 +8,7 @@ type DateTimePickerPopupProps = {
     onClose?: () => void
 }
 
-const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+const DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
 const MONTHS = [
     'January', 'February', 'March', 'April', 'May', 'June',
     'July', 'August', 'September', 'October', 'November', 'December'
@@ -112,7 +112,9 @@ export default function DateTimePickerPopup({
         const firstDay = getFirstDayOfMonth(year, month)
         const days = []
 
-        for (let i = 0; i < firstDay; i++) {
+        const adjustedFirstDay = firstDay === 0 ? 6 : firstDay - 1
+
+        for (let i = 0; i < adjustedFirstDay; i++) {
             days.push(<div key={`empty-${i}`} className='w-8 h-8' />)
         }
 

package/src/types/utils.d.ts

@@ -2,30 +2,30 @@
 import { NextRequest } from 'next/server'
 declare module 'uibee/utils' {
     export interface AuthLoginProps {
+        req: NextRequest
         clientID: string
-        redirectURL: string
+        redirectPath: string
         authURL: string
     }
 
     export interface AuthCallbackProps {
-        req: Request
+        req: NextRequest
         tokenURL: string
         clientID: string
         clientSecret: string
-        redirectURL: string
+        redirectPath: string
         userInfoURL: string
-        tokenRedirectURL: string
+        tokenRedirectPath: string
     }
 
     export interface AuthTokenProps {
         req: NextRequest
-        frontendURL: string
         redirectPath?: string
     }
+
     export interface AuthLogoutProps {
-        request: NextRequest
+        req: NextRequest
         path?: string
-        frontendURL: string
     }
 
     export default async function authLogin(props: AuthLoginProps): Promise<Response>;

package/src/utils/auth/callback.ts

@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server'
 import type { AuthCallbackProps } from 'uibee/utils'
+import { getDomain } from './getDomain'
 
 type UserInfo = {
     sub: string
@@ -14,10 +15,11 @@ export default async function authCallback({
     tokenURL,
     clientID,
     clientSecret,
-    redirectURL,
+    redirectPath,
     userInfoURL,
-    tokenRedirectURL
+    tokenRedirectPath
 }: AuthCallbackProps) {
+    const domain = getDomain(req)
     const searchParams = new URL(req.url).searchParams
 
     if (!searchParams) {
@@ -38,7 +40,7 @@ export default async function authCallback({
                 client_id: clientID,
                 client_secret: clientSecret,
                 code: code as string,
-                redirect_uri: redirectURL,
+                redirect_uri: `${domain}${redirectPath}`,
                 grant_type: 'authorization_code',
             }).toString()
         })
@@ -69,7 +71,7 @@ export default async function authCallback({
 
         const userInfo = await userInfoResponse.json() as UserInfo
 
-        const redirectUrl = new URL(tokenRedirectURL)
+        const redirectUrl = new URL(`${domain}${tokenRedirectPath}`)
         const params = new URLSearchParams({
             id: userInfo.sub,
             name: userInfo.name,

package/src/utils/auth/getDomain.ts

@@ -0,0 +1,7 @@
+import { NextRequest } from 'next/server'
+
+export function getDomain(req: NextRequest): string {
+    const proto = req.headers.get('x-forwarded-proto') ?? new URL(req.url).protocol.replace(':', '')
+    const host = req.headers.get('x-forwarded-host') ?? req.headers.get('host') ?? new URL(req.url).host
+    return `${proto}://${host}`
+}

package/src/utils/auth/login.ts

@@ -1,11 +1,13 @@
 import { NextResponse } from 'next/server'
 import type { AuthLoginProps } from 'uibee/utils'
+import { getDomain } from './getDomain'
 
-export default async function AuthLogin({ clientID, redirectURL, authURL }: AuthLoginProps) {
+export default async function AuthLogin({ req, clientID, redirectPath, authURL }: AuthLoginProps) {
+    const domain = getDomain(req)
     const state = Math.random().toString(36).substring(5)
     const authQueryParams = new URLSearchParams({
         client_id: clientID,
-        redirect_uri: redirectURL,
+        redirect_uri: `${domain}${redirectPath}`,
         response_type: 'code',
         scope: 'openid profile email',
         state: state,

package/src/utils/auth/logout.ts

@@ -1,8 +1,10 @@
 import { NextResponse } from 'next/server'
 import type { AuthLogoutProps } from 'uibee/utils'
+import { getDomain } from './getDomain'
 
-export default async function AuthLogout({ frontendURL, path }: AuthLogoutProps) {
-    const response = NextResponse.redirect(new URL(path || '/', frontendURL))
+export default async function AuthLogout({ req, path }: AuthLogoutProps) {
+    const domain = getDomain(req)
+    const response = NextResponse.redirect(new URL(path || '/', domain))
 
     const cookiesToRemove = [
         'access_token',

package/src/utils/auth/token.ts

@@ -1,7 +1,9 @@
 import { NextResponse } from 'next/server'
 import type { AuthTokenProps } from 'uibee/utils'
+import { getDomain } from './getDomain'
 
-export default async function AuthToken({ req, frontendURL, redirectPath }: AuthTokenProps) {
+export default async function AuthToken({ req, redirectPath }: AuthTokenProps) {
+    const domain = getDomain(req)
     const url = new URL(req.url)
     const token = url.searchParams.get('access_token')
     const btg = url.searchParams.get('btg')
@@ -13,7 +15,7 @@ export default async function AuthToken({ req, frontendURL, redirectPath }: Auth
     }
 
     if (btg) {
-        return NextResponse.redirect(new URL(redirect, frontendURL))
+        return NextResponse.redirect(new URL(redirect, domain))
     }
 
     const accessToken = url.searchParams.get('access_token')!
@@ -23,7 +25,7 @@ export default async function AuthToken({ req, frontendURL, redirectPath }: Auth
     const userEmail = url.searchParams.get('email')!
     const userGroups = url.searchParams.get('groups')!
 
-    const response = NextResponse.redirect(new URL(redirect, frontendURL))
+    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)