Compare commits
7
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d04c8c437f | ||
|
|
28fefcd23f | ||
|
|
c08054736e | ||
|
|
2e20fd7da5 | ||
|
|
1856d20a47 | ||
|
|
6df2f92268 | ||
|
|
c30f525a83 |
No files matched your search
@@ -127,8 +127,6 @@ Homarr supports multiple authentication options, from internal userbase (credent
|
||||
|
||||
If you'd rather manage group memberships for OIDC users locally (instead of via the IdP), set `AUTH_OIDC_GROUPS_LOCAL_MANAGEMENT=true`. While enabled, Homarr stops syncing OIDC users' group memberships from the groups claim, and admins can add/remove OIDC users on a group's members page. If you turn this back to `false`, the next login of each user resumes the regular sync and reconciles their groups with the IdP's claim again, which may remove memberships that were added manually while local management was enabled.
|
||||
|
||||
To let an existing credentials user also sign in with OIDC, set `AUTH_OIDC_ENABLE_DANGEROUS_CREDENTIALS_LINKING=true`. On the first OIDC sign-in, Homarr links a credentials user with the same email address instead of creating a second user. The user keeps their password login, local username and profile, groups, permissions, boards, settings, and API keys. OIDC profile and group claims do not overwrite the credentials-owned data. Homarr requires the OIDC profile to contain `email_verified: true` while this option is enabled. Only enable this when your OIDC provider verifies email addresses, because a matching email could otherwise be used to take over an existing account.
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
Example Setup
|
||||
@@ -206,7 +204,6 @@ Homarr supports multiple authentication options, from internal userbase (credent
|
||||
| ``AUTH_OIDC_NAME_ATTRIBUTE_OVERWRITE`` | Overwrite name attribute. By default it will use preferred_username if it does not contain a `@` and otherwise name. | --- |
|
||||
| ``AUTH_OIDC_FORCE_USERINFO`` | Force userinfo endpoint to be used for user information. | false |
|
||||
| ``AUTH_OIDC_ENABLE_DANGEROUS_ACCOUNT_LINKING`` | Enable account linking for OIDC provider. This will link the OIDC accounts by email. Be sure that you have verified emails to prevent stealing accounts. | false |
|
||||
| ``AUTH_OIDC_ENABLE_DANGEROUS_CREDENTIALS_LINKING`` | Link an OIDC identity to an existing credentials user with the same email. The credentials login and existing user data are preserved. Requires the OIDC profile to contain `email_verified: true`. | false |
|
||||
| ``AUTH_OIDC_TOKEN_ENDPOINT_AUTH_METHOD`` | Override method for the token endpoint authentication. Supported values are `client_secret_basic`, `client_secret_post`, `client_secret_jwt` and `none`. | client_secret_basic |
|
||||
|
||||
### Permission System
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: 'Immich Album Carousel'
|
||||
description: 'Shows a slideshow of pictures from an Immich album or your full library'
|
||||
description: 'Shows a slideshow of your album pictures from Immich'
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
@@ -37,3 +37,4 @@ import screen from './img/screen.png';
|
||||
|
||||
### Configuration
|
||||
<WidgetConfig configuration={immichAlbumCarouselWidget.configuration} />
|
||||
|
||||
@@ -4,16 +4,15 @@ import { IconPhoto } from "@tabler/icons-react";
|
||||
export const immichAlbumCarouselWidget: WidgetDefinition = {
|
||||
icon: IconPhoto,
|
||||
name: "Immich Album",
|
||||
description: "Shows a slideshow of pictures from an Immich album or your full library",
|
||||
description: "Shows a slideshow of your album pictures from Immich",
|
||||
path: "../../widgets/immich-album-carousel",
|
||||
configuration: {
|
||||
items: [
|
||||
{
|
||||
name: "Album",
|
||||
description:
|
||||
"Select an Immich album or All photos. An empty selection also shows random photos from your full library.",
|
||||
description: "Select the Immich album to show in the slideshow.",
|
||||
values: { type: "string" },
|
||||
defaultValue: "All photos",
|
||||
defaultValue: "",
|
||||
},
|
||||
{
|
||||
name: "Interval in seconds",
|
||||
|
||||
@@ -16,10 +16,7 @@ export default async function AppEditPage(props: AppEditPageProps) {
|
||||
const params = await props.params;
|
||||
const session = await auth();
|
||||
|
||||
if (
|
||||
!session?.user.permissions.includes("board-modify-all") ||
|
||||
!session?.user.permissions.includes("app-modify-all")
|
||||
) {
|
||||
if (!session?.user.permissions.includes("app-modify-all")) {
|
||||
notFound();
|
||||
}
|
||||
const app = await api.app.byId({ id: params.id });
|
||||
|
||||
@@ -10,7 +10,7 @@ import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
|
||||
export default async function AppNewPage() {
|
||||
const session = await auth();
|
||||
|
||||
if (!session?.user.permissions.includes("board-modify-all") || !session?.user.permissions.includes("app-create")) {
|
||||
if (!session?.user.permissions.includes("app-create")) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Fragment } from "react";
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
import { redirect } from "next/navigation";
|
||||
import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text } from "@mantine/core";
|
||||
import { IconBox, IconPencil } from "@tabler/icons-react";
|
||||
import { z } from "zod/v4";
|
||||
@@ -33,9 +33,6 @@ export default async function AppsPage(props: AppsPageProps) {
|
||||
if (!session) {
|
||||
redirect("/auth/login");
|
||||
}
|
||||
if (!session.user.permissions.includes("board-modify-all")) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const searchParams = searchParamsSchema.parse(await props.searchParams);
|
||||
|
||||
|
||||
@@ -61,7 +61,7 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
|
||||
icon: IconBox,
|
||||
href: "/manage/apps",
|
||||
label: t("items.apps"),
|
||||
hidden: !session?.user.permissions.includes("board-modify-all"),
|
||||
hidden: !session,
|
||||
iconProps: {
|
||||
strokeWidth: 2.5,
|
||||
},
|
||||
|
||||
@@ -18,8 +18,7 @@ import { AppAccessControl } from "./app/app-access-control";
|
||||
const defaultIcon = "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons@master/svg/homarr.svg";
|
||||
|
||||
export const appRouter = createTRPCRouter({
|
||||
getPaginated: permissionRequiredProcedure
|
||||
.requiresPermission("board-modify-all")
|
||||
getPaginated: protectedProcedure
|
||||
.input(paginatedSchema)
|
||||
.output(z.object({ items: z.array(selectAppSchema), totalCount: z.number() }))
|
||||
.meta({
|
||||
|
||||
@@ -101,7 +101,7 @@ export const homeRouter = createTRPCRouter({
|
||||
});
|
||||
}
|
||||
|
||||
if (ctx.session?.user.permissions.includes("board-modify-all")) {
|
||||
if (ctx.session?.user) {
|
||||
statistics.push({
|
||||
titleKey: "app",
|
||||
subtitleKey: "resources",
|
||||
|
||||
@@ -76,33 +76,6 @@ describe("all should return all apps", () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe("getPaginated should require board modification access", () => {
|
||||
test("should throw FORBIDDEN without board-modify-all", async () => {
|
||||
const caller = appRouter.createCaller({
|
||||
db: createDb(),
|
||||
deviceType: undefined,
|
||||
session: createDefaultSession(),
|
||||
});
|
||||
|
||||
await expect(caller.getPaginated({ page: 1, pageSize: 10 })).rejects.toThrow("Permission denied");
|
||||
});
|
||||
|
||||
test("should return apps with board-modify-all", async () => {
|
||||
const db = createDb();
|
||||
const caller = appRouter.createCaller({
|
||||
db,
|
||||
deviceType: undefined,
|
||||
session: createDefaultSession(["board-modify-all"]),
|
||||
});
|
||||
await db.insert(apps).values({ id: "1", name: "Homarr", iconUrl: "https://homarr.dev/icon.svg" });
|
||||
|
||||
await expect(caller.getPaginated({ page: 1, pageSize: 10 })).resolves.toMatchObject({
|
||||
totalCount: 1,
|
||||
items: [{ id: "1" }],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("byId should return an app by id", () => {
|
||||
test("should return an app by id when canUserSeeAppAsync returns true", async () => {
|
||||
// Arrange
|
||||
|
||||
@@ -25,7 +25,7 @@ export const immichRouter = createTRPCRouter({
|
||||
.concat(createImmichIntegrationMiddleware("query"))
|
||||
.input(
|
||||
z.object({
|
||||
albumId: z.string().optional(),
|
||||
albumId: z.string(),
|
||||
}),
|
||||
)
|
||||
.query(async ({ ctx, input }) => {
|
||||
|
||||
@@ -6,24 +6,20 @@ import { and, eq } from "@homarr/db";
|
||||
import { accounts, sessions, users } from "@homarr/db/schema";
|
||||
import type { SupportedAuthProvider } from "@homarr/definitions";
|
||||
|
||||
export const createAdapter = (
|
||||
db: Database,
|
||||
provider: SupportedAuthProvider | "unknown",
|
||||
enableDangerousCredentialsLinking = false,
|
||||
): Adapter => {
|
||||
export const createAdapter = (db: Database, provider: SupportedAuthProvider | "unknown"): Adapter => {
|
||||
const drizzleAdapter = DrizzleAdapter(db, { usersTable: users, sessionsTable: sessions, accountsTable: accounts });
|
||||
|
||||
return {
|
||||
...drizzleAdapter,
|
||||
// Keep users isolated by their primary provider. The explicit credentials-linking
|
||||
// opt-in is the only exception and keeps credentials as the primary provider.
|
||||
// We override the default implementation as we want to have a provider
|
||||
// flag in the user instead of the account to not intermingle users from different providers
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
getUserByEmail: async (email) => {
|
||||
if (provider === "unknown") {
|
||||
throw new Error("Unable to get user by email for unknown provider");
|
||||
}
|
||||
|
||||
let user = await db.query.users.findFirst({
|
||||
const user = await db.query.users.findFirst({
|
||||
where: and(eq(users.email, email), eq(users.provider, provider)),
|
||||
columns: {
|
||||
id: true,
|
||||
@@ -34,22 +30,6 @@ export const createAdapter = (
|
||||
},
|
||||
});
|
||||
|
||||
if (!user && provider === "oidc" && enableDangerousCredentialsLinking) {
|
||||
// Credentials accounts do not have an email-verification flow, so their
|
||||
// Auth.js emailVerified field is always null. The OIDC profile's strict
|
||||
// email_verified check is the security boundary for this opt-in.
|
||||
user = await db.query.users.findFirst({
|
||||
where: and(eq(users.email, email), eq(users.provider, "credentials")),
|
||||
columns: {
|
||||
id: true,
|
||||
name: true,
|
||||
email: true,
|
||||
emailVerified: true,
|
||||
image: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -44,7 +44,7 @@ export const createConfiguration = (
|
||||
headers: ReadonlyHeaders | null,
|
||||
useSecureCookies: boolean,
|
||||
) => {
|
||||
const adapter = createAdapter(db, provider, env.AUTH_OIDC_ENABLE_DANGEROUS_CREDENTIALS_LINKING);
|
||||
const adapter = createAdapter(db, provider);
|
||||
return NextAuth({
|
||||
logger: {
|
||||
error: (error) => {
|
||||
|
||||
@@ -46,7 +46,6 @@ export const env = createEnv({
|
||||
AUTH_OIDC_NAME_ATTRIBUTE_OVERWRITE: z.string().optional(),
|
||||
AUTH_OIDC_FORCE_USERINFO: createBooleanSchema(false),
|
||||
AUTH_OIDC_ENABLE_DANGEROUS_ACCOUNT_LINKING: createBooleanSchema(false),
|
||||
AUTH_OIDC_ENABLE_DANGEROUS_CREDENTIALS_LINKING: createBooleanSchema(false),
|
||||
AUTH_OIDC_TOKEN_ENDPOINT_AUTH_METHOD: z
|
||||
.enum(["client_secret_basic", "client_secret_post", "client_secret_jwt", "none"])
|
||||
.default("client_secret_basic"),
|
||||
|
||||
@@ -24,7 +24,6 @@ export const createSignInEventHandler = (db: Database): Exclude<NextAuthConfig["
|
||||
name: true,
|
||||
image: true,
|
||||
colorScheme: true,
|
||||
provider: true,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -34,7 +33,6 @@ export const createSignInEventHandler = (db: Database): Exclude<NextAuthConfig["
|
||||
// Groups from oidc provider are provided from the profile, it's not typed.
|
||||
if (
|
||||
!env.AUTH_OIDC_GROUPS_LOCAL_MANAGEMENT &&
|
||||
dbUser.provider === "oidc" &&
|
||||
profile &&
|
||||
groupsKey in profile &&
|
||||
Array.isArray(profile[groupsKey])
|
||||
@@ -59,7 +57,7 @@ export const createSignInEventHandler = (db: Database): Exclude<NextAuthConfig["
|
||||
});
|
||||
}
|
||||
|
||||
if (profile && dbUser.provider === "oidc") {
|
||||
if (profile) {
|
||||
const profileUsername = extractProfileName(profile);
|
||||
if (!profileUsername) {
|
||||
throw new Error(`OIDC provider did not return a name properties='${Object.keys(profile).join(",")}'`);
|
||||
|
||||
@@ -7,7 +7,6 @@ import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/h
|
||||
|
||||
import { env } from "../../env";
|
||||
import { createRedirectUri } from "../../redirect";
|
||||
import { assertVerifiedEmailForCredentialsLinking } from "./verified-email";
|
||||
|
||||
export const OidcProvider = (headers: ReadonlyHeaders | null): OIDCConfig<Profile> => ({
|
||||
id: "oidc",
|
||||
@@ -19,8 +18,7 @@ export const OidcProvider = (headers: ReadonlyHeaders | null): OIDCConfig<Profil
|
||||
token_endpoint_auth_method: env.AUTH_OIDC_TOKEN_ENDPOINT_AUTH_METHOD,
|
||||
},
|
||||
issuer: env.AUTH_OIDC_ISSUER,
|
||||
allowDangerousEmailAccountLinking:
|
||||
env.AUTH_OIDC_ENABLE_DANGEROUS_ACCOUNT_LINKING || env.AUTH_OIDC_ENABLE_DANGEROUS_CREDENTIALS_LINKING,
|
||||
allowDangerousEmailAccountLinking: env.AUTH_OIDC_ENABLE_DANGEROUS_ACCOUNT_LINKING,
|
||||
authorization: {
|
||||
params: {
|
||||
scope: env.AUTH_OIDC_SCOPE_OVERWRITE,
|
||||
@@ -57,7 +55,6 @@ export const OidcProvider = (headers: ReadonlyHeaders | null): OIDCConfig<Profil
|
||||
if (!profile.sub) {
|
||||
throw new Error(`OIDC provider did not return a sub property='${Object.keys(profile).join(",")}'`);
|
||||
}
|
||||
assertVerifiedEmailForCredentialsLinking(profile, env.AUTH_OIDC_ENABLE_DANGEROUS_CREDENTIALS_LINKING);
|
||||
const name = extractProfileName(profile);
|
||||
if (!name) {
|
||||
throw new Error(`OIDC provider did not return a name properties='${Object.keys(profile).join(",")}'`);
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
export const assertVerifiedEmailForCredentialsLinking = (
|
||||
profile: { email?: unknown; email_verified?: unknown },
|
||||
isCredentialsLinkingEnabled: boolean,
|
||||
) => {
|
||||
if (
|
||||
isCredentialsLinkingEnabled &&
|
||||
(profile.email_verified !== true || typeof profile.email !== "string" || profile.email.trim().length === 0)
|
||||
) {
|
||||
throw new Error("OIDC provider did not return a verified email while credentials linking is enabled");
|
||||
}
|
||||
};
|
||||
@@ -1,87 +0,0 @@
|
||||
import { afterEach, describe, expect, test, vi } from "vitest";
|
||||
|
||||
import { OidcProvider } from "../oidc/oidc-provider";
|
||||
import { assertVerifiedEmailForCredentialsLinking } from "../oidc/verified-email";
|
||||
|
||||
const mockEnv = vi.hoisted(() => ({
|
||||
AUTH_OIDC_CLIENT_ID: "client-id",
|
||||
AUTH_OIDC_CLIENT_NAME: "OIDC",
|
||||
AUTH_OIDC_CLIENT_SECRET: "client-secret",
|
||||
AUTH_OIDC_ENABLE_DANGEROUS_ACCOUNT_LINKING: false,
|
||||
AUTH_OIDC_ENABLE_DANGEROUS_CREDENTIALS_LINKING: false,
|
||||
AUTH_OIDC_FORCE_USERINFO: false,
|
||||
AUTH_OIDC_ISSUER: "https://example.com",
|
||||
AUTH_OIDC_NAME_ATTRIBUTE_OVERWRITE: undefined,
|
||||
AUTH_OIDC_SCOPE_OVERWRITE: "openid email profile",
|
||||
AUTH_OIDC_TOKEN_ENDPOINT_AUTH_METHOD: "client_secret_basic" as const,
|
||||
}));
|
||||
|
||||
vi.mock("../../env", () => ({ env: mockEnv }));
|
||||
vi.mock("next-auth", () => ({ customFetch: Symbol("customFetch") }));
|
||||
|
||||
afterEach(() => {
|
||||
mockEnv.AUTH_OIDC_ENABLE_DANGEROUS_CREDENTIALS_LINKING = false;
|
||||
});
|
||||
|
||||
describe("assertVerifiedEmailForCredentialsLinking", () => {
|
||||
test("allows a strictly verified OIDC email when credentials linking is enabled", () => {
|
||||
expect(() =>
|
||||
assertVerifiedEmailForCredentialsLinking({ email: "test@example.com", email_verified: true }, true),
|
||||
).not.toThrow();
|
||||
});
|
||||
|
||||
test.each([
|
||||
{ email: "test@example.com", email_verified: false },
|
||||
{ email: "test@example.com", email_verified: "true" },
|
||||
{ email_verified: true },
|
||||
{ email: null, email_verified: true },
|
||||
{ email: " ", email_verified: true },
|
||||
{},
|
||||
])("rejects an OIDC profile without a strictly verified email when credentials linking is enabled", (profile) => {
|
||||
expect(() => assertVerifiedEmailForCredentialsLinking(profile, true)).toThrow(
|
||||
"OIDC provider did not return a verified email while credentials linking is enabled",
|
||||
);
|
||||
});
|
||||
|
||||
test("does not require the claim when credentials linking is disabled", () => {
|
||||
expect(() => assertVerifiedEmailForCredentialsLinking({}, false)).not.toThrow();
|
||||
});
|
||||
|
||||
test("OIDC provider rejects an unverified profile when credentials linking is enabled", () => {
|
||||
mockEnv.AUTH_OIDC_ENABLE_DANGEROUS_CREDENTIALS_LINKING = true;
|
||||
const provider = OidcProvider(null);
|
||||
expect(provider.allowDangerousEmailAccountLinking).toBe(true);
|
||||
const mapProfile = provider.profile;
|
||||
if (!mapProfile) throw new Error("Expected OIDC profile mapper to be defined");
|
||||
|
||||
expect(() =>
|
||||
mapProfile(
|
||||
{
|
||||
sub: "subject",
|
||||
preferred_username: "test",
|
||||
email: "test@example.com",
|
||||
email_verified: false,
|
||||
},
|
||||
{},
|
||||
),
|
||||
).toThrow("OIDC provider did not return a verified email while credentials linking is enabled");
|
||||
});
|
||||
|
||||
test("OIDC provider accepts an unverified profile when credentials linking is disabled", () => {
|
||||
const provider = OidcProvider(null);
|
||||
const mapProfile = provider.profile;
|
||||
if (!mapProfile) throw new Error("Expected OIDC profile mapper to be defined");
|
||||
|
||||
expect(() =>
|
||||
mapProfile(
|
||||
{
|
||||
sub: "subject",
|
||||
preferred_username: "test",
|
||||
email: "test@example.com",
|
||||
email_verified: false,
|
||||
},
|
||||
{},
|
||||
),
|
||||
).not.toThrow();
|
||||
});
|
||||
});
|
||||
@@ -1,7 +1,6 @@
|
||||
import { describe, expect, test } from "vitest";
|
||||
|
||||
import { eq } from "@homarr/db";
|
||||
import { accounts, apiKeys, groupMembers, groups, users } from "@homarr/db/schema";
|
||||
import { users } from "@homarr/db/schema";
|
||||
import { createDb } from "@homarr/db/test";
|
||||
|
||||
import { createAdapter } from "../adapter";
|
||||
@@ -65,91 +64,4 @@ describe("createAdapter should create drizzle adapter", () => {
|
||||
// Assert
|
||||
await expect(actAsync()).rejects.toThrow("Unable to get user by email for unknown provider");
|
||||
});
|
||||
|
||||
test("getUserByEmail should return a credentials user for oidc when credentials linking is enabled", async () => {
|
||||
const db = createDb();
|
||||
const adapter = createAdapter(db, "oidc", true);
|
||||
const email = "test@example.com";
|
||||
await db.insert(users).values({ id: "credentials-user", name: "test", email, provider: "credentials" });
|
||||
|
||||
const user = await adapter.getUserByEmail?.(email);
|
||||
|
||||
expect(user?.id).toBe("credentials-user");
|
||||
});
|
||||
|
||||
test("getUserByEmail should not return credentials users for non-oidc providers", async () => {
|
||||
const db = createDb();
|
||||
const adapter = createAdapter(db, "ldap", true);
|
||||
const email = "test@example.com";
|
||||
await db.insert(users).values({ id: "credentials-user", name: "test", email, provider: "credentials" });
|
||||
|
||||
const user = await adapter.getUserByEmail?.(email);
|
||||
|
||||
expect(user).toBeNull();
|
||||
});
|
||||
|
||||
test("getUserByEmail should prefer an existing oidc user over a credentials user", async () => {
|
||||
const db = createDb();
|
||||
const adapter = createAdapter(db, "oidc", true);
|
||||
const email = "test@example.com";
|
||||
await db.insert(users).values([
|
||||
{ id: "credentials-user", name: "credentials", email, provider: "credentials" },
|
||||
{ id: "oidc-user", name: "oidc", email, provider: "oidc" },
|
||||
]);
|
||||
|
||||
const user = await adapter.getUserByEmail?.(email);
|
||||
|
||||
expect(user?.id).toBe("oidc-user");
|
||||
});
|
||||
|
||||
test("linkAccount should preserve the credentials user and their data", async () => {
|
||||
const db = createDb();
|
||||
const adapter = createAdapter(db, "oidc", true);
|
||||
const email = "test@example.com";
|
||||
await db.insert(users).values({
|
||||
id: "credentials-user",
|
||||
name: "test",
|
||||
email,
|
||||
password: "hashed-password",
|
||||
provider: "credentials",
|
||||
colorScheme: "light",
|
||||
completedBoardTour: true,
|
||||
});
|
||||
await db.insert(groups).values({ id: "group", name: "Test group", position: 1 });
|
||||
await db.insert(groupMembers).values({ groupId: "group", userId: "credentials-user" });
|
||||
await db.insert(apiKeys).values({ id: "api-key", apiKey: "secret", userId: "credentials-user" });
|
||||
|
||||
const user = await adapter.getUserByEmail?.(email);
|
||||
if (!user) throw new Error("Expected credentials user to be found for OIDC linking");
|
||||
await adapter.linkAccount?.({
|
||||
userId: user.id,
|
||||
type: "oidc",
|
||||
provider: "oidc",
|
||||
providerAccountId: "oidc-subject",
|
||||
});
|
||||
|
||||
const linkedUser = await db.query.users.findFirst({ where: eq(users.id, "credentials-user") });
|
||||
const account = await db.query.accounts.findFirst({ where: eq(accounts.providerAccountId, "oidc-subject") });
|
||||
const membership = await db.query.groupMembers.findFirst({
|
||||
where: eq(groupMembers.userId, "credentials-user"),
|
||||
});
|
||||
const apiKey = await db.query.apiKeys.findFirst({ where: eq(apiKeys.userId, "credentials-user") });
|
||||
const userByAccount = await adapter.getUserByAccount?.({
|
||||
provider: "oidc",
|
||||
providerAccountId: "oidc-subject",
|
||||
});
|
||||
const allUsers = await db.query.users.findMany();
|
||||
expect(linkedUser).toMatchObject({
|
||||
id: "credentials-user",
|
||||
password: "hashed-password",
|
||||
provider: "credentials",
|
||||
colorScheme: "light",
|
||||
completedBoardTour: true,
|
||||
});
|
||||
expect(account?.userId).toBe("credentials-user");
|
||||
expect(membership?.groupId).toBe("group");
|
||||
expect(apiKey?.id).toBe("api-key");
|
||||
expect(userByAccount?.id).toBe("credentials-user");
|
||||
expect(allUsers).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
@@ -135,7 +135,7 @@ describe("createSignInEventHandler should create signInEventHandler", () => {
|
||||
test("should add missing group membership", async () => {
|
||||
// Arrange
|
||||
const db = createDb();
|
||||
await createUserAsync(db, "oidc");
|
||||
await createUserAsync(db);
|
||||
await createGroupAsync(db);
|
||||
const eventHandler = createSignInEventHandler(db);
|
||||
|
||||
@@ -155,7 +155,7 @@ describe("createSignInEventHandler should create signInEventHandler", () => {
|
||||
test("should remove group membership", async () => {
|
||||
// Arrange
|
||||
const db = createDb();
|
||||
await createUserAsync(db, "oidc");
|
||||
await createUserAsync(db);
|
||||
await createGroupAsync(db);
|
||||
await db.insert(groupMembers).values({
|
||||
userId: "1",
|
||||
@@ -179,7 +179,7 @@ describe("createSignInEventHandler should create signInEventHandler", () => {
|
||||
test("should not remove group membership for everyone group", async () => {
|
||||
// Arrange
|
||||
const db = createDb();
|
||||
await createUserAsync(db, "oidc");
|
||||
await createUserAsync(db);
|
||||
await createGroupAsync(db, everyoneGroup);
|
||||
await db.insert(groupMembers).values({
|
||||
userId: "1",
|
||||
@@ -204,7 +204,7 @@ describe("createSignInEventHandler should create signInEventHandler", () => {
|
||||
// Arrange
|
||||
mockEnv.AUTH_OIDC_GROUPS_LOCAL_MANAGEMENT = true;
|
||||
const db = createDb();
|
||||
await createUserAsync(db, "oidc");
|
||||
await createUserAsync(db);
|
||||
await createGroupAsync(db);
|
||||
const eventHandler = createSignInEventHandler(db);
|
||||
|
||||
@@ -229,10 +229,10 @@ describe("createSignInEventHandler should create signInEventHandler", () => {
|
||||
["ldap" as const, { name: "test-new" }, undefined],
|
||||
["oidc" as const, { name: "test" }, { preferred_username: "test-new" }],
|
||||
["oidc" as const, { name: "test" }, { preferred_username: "test@example.com", name: "test-new" }],
|
||||
])("signInEventHandler should update username for %s provider", async (provider, user, profile) => {
|
||||
])("signInEventHandler should update username for %s provider", async (_provider, user, profile) => {
|
||||
// Arrange
|
||||
const db = createDb();
|
||||
await createUserAsync(db, provider);
|
||||
await createUserAsync(db);
|
||||
const eventHandler = createSignInEventHandler(db);
|
||||
|
||||
// Act
|
||||
@@ -251,32 +251,6 @@ describe("createSignInEventHandler should create signInEventHandler", () => {
|
||||
});
|
||||
expect(dbUser?.name).toBe("test-new");
|
||||
});
|
||||
test("signInEventHandler should preserve credentials-owned data when the user signs in with linked oidc", async () => {
|
||||
const db = createDb();
|
||||
await createUserAsync(db, "credentials", "local-avatar");
|
||||
await createGroupAsync(db);
|
||||
await db.insert(groupMembers).values({ userId: "1", groupId: "1" });
|
||||
const eventHandler = createSignInEventHandler(db);
|
||||
|
||||
await eventHandler?.({
|
||||
user: { id: "1", name: "test" },
|
||||
profile: {
|
||||
preferred_username: "oidc-name",
|
||||
picture: "oidc-avatar",
|
||||
someRandomGroupsKey: [],
|
||||
},
|
||||
account: null,
|
||||
});
|
||||
|
||||
const dbUser = await db.query.users.findFirst({ where: eq(users.id, "1") });
|
||||
const membership = await db.query.groupMembers.findFirst({ where: eq(groupMembers.userId, "1") });
|
||||
expect(dbUser).toMatchObject({
|
||||
name: "test",
|
||||
image: "local-avatar",
|
||||
provider: "credentials",
|
||||
});
|
||||
expect(membership?.groupId).toBe("1");
|
||||
});
|
||||
test("signInEventHandler should set color-scheme cookie", async () => {
|
||||
// Arrange
|
||||
const db = createDb();
|
||||
@@ -301,17 +275,11 @@ describe("createSignInEventHandler should create signInEventHandler", () => {
|
||||
});
|
||||
});
|
||||
|
||||
const createUserAsync = async (
|
||||
db: Database,
|
||||
provider: "credentials" | "ldap" | "oidc" = "credentials",
|
||||
image?: string,
|
||||
) =>
|
||||
const createUserAsync = async (db: Database) =>
|
||||
await db.insert(users).values({
|
||||
id: "1",
|
||||
name: "test",
|
||||
colorScheme: "dark",
|
||||
image,
|
||||
provider,
|
||||
});
|
||||
|
||||
const createGroupAsync = async (db: Database, name = "test") =>
|
||||
|
||||
@@ -1,14 +1,11 @@
|
||||
import {
|
||||
AssetMediaSize,
|
||||
AssetTypeEnum,
|
||||
AssetVisibility,
|
||||
getAlbumInfo,
|
||||
getAllAlbums,
|
||||
getMyUser,
|
||||
getServerStatistics,
|
||||
init,
|
||||
searchAssets,
|
||||
searchRandom,
|
||||
searchUsers,
|
||||
} from "@immich/sdk";
|
||||
import type { AssetResponseDto, MetadataSearchDto } from "@immich/sdk";
|
||||
@@ -46,7 +43,6 @@ export interface ImmichAsset {
|
||||
}
|
||||
|
||||
const logger = createLogger({ module: "immich-integration" });
|
||||
const randomPhotoCount = 50;
|
||||
|
||||
export class ImmichIntegration extends Integration {
|
||||
constructor(integration: IntegrationInput) {
|
||||
@@ -67,36 +63,38 @@ export class ImmichIntegration extends Integration {
|
||||
};
|
||||
}
|
||||
|
||||
public async getAlbumAsync(albumId?: string): Promise<ImmichAlbum> {
|
||||
public async getAlbumAsync(albumId: string): Promise<ImmichAlbum> {
|
||||
this.initClient();
|
||||
const requestOptions = this.getRequestOptions();
|
||||
|
||||
if (!albumId) {
|
||||
const assets = await searchRandom(
|
||||
{
|
||||
randomSearchDto: {
|
||||
size: randomPhotoCount,
|
||||
type: AssetTypeEnum.Image,
|
||||
visibility: AssetVisibility.Timeline,
|
||||
},
|
||||
},
|
||||
requestOptions,
|
||||
);
|
||||
|
||||
return {
|
||||
id: "",
|
||||
albumName: "",
|
||||
assets: await this.createAssetsAsync(assets),
|
||||
};
|
||||
}
|
||||
|
||||
const [album, albumAssets] = await Promise.all([
|
||||
getAlbumInfo({ id: albumId }, requestOptions),
|
||||
this.searchAlbumAssetsAsync(albumId),
|
||||
]);
|
||||
const imageProxy = new ImageProxy();
|
||||
return {
|
||||
albumName: album.albumName,
|
||||
assets: await this.createAssetsAsync(albumAssets),
|
||||
assets: await Promise.all(
|
||||
albumAssets.map(async (asset) => {
|
||||
const publicLink = await imageProxy.createImageAsync(
|
||||
// This is the URL generated by the SDK's viewAsset call. Preview images are
|
||||
// browser-compatible while avoiding the large original asset download.
|
||||
this.url(`/api/assets/${asset.id}/thumbnail`, { size: AssetMediaSize.Preview }).toString(),
|
||||
{
|
||||
"x-api-key": this.getSecretValue("apiKey"),
|
||||
},
|
||||
);
|
||||
return {
|
||||
id: asset.id,
|
||||
type: asset.type,
|
||||
thumbhash: asset.thumbhash,
|
||||
fileCreatedAt: asset.fileCreatedAt,
|
||||
fileModifiedAt: asset.fileModifiedAt,
|
||||
originalPath: asset.originalPath,
|
||||
updatedAt: asset.updatedAt,
|
||||
publicLink,
|
||||
};
|
||||
}),
|
||||
),
|
||||
id: album.id,
|
||||
};
|
||||
}
|
||||
@@ -138,32 +136,6 @@ export class ImmichIntegration extends Integration {
|
||||
return assets;
|
||||
}
|
||||
|
||||
private async createAssetsAsync(assets: AssetResponseDto[]): Promise<ImmichAsset[]> {
|
||||
const imageProxy = new ImageProxy();
|
||||
return await Promise.all(
|
||||
assets.map(async (asset) => {
|
||||
const publicLink = await imageProxy.createImageAsync(
|
||||
// This is the URL generated by the SDK's viewAsset call. Preview images are
|
||||
// browser-compatible while avoiding the large original asset download.
|
||||
this.url(`/api/assets/${asset.id}/thumbnail`, { size: AssetMediaSize.Preview }).toString(),
|
||||
{
|
||||
"x-api-key": this.getSecretValue("apiKey"),
|
||||
},
|
||||
);
|
||||
return {
|
||||
id: asset.id,
|
||||
type: asset.type,
|
||||
thumbhash: asset.thumbhash,
|
||||
fileCreatedAt: asset.fileCreatedAt,
|
||||
fileModifiedAt: asset.fileModifiedAt,
|
||||
originalPath: asset.originalPath,
|
||||
updatedAt: asset.updatedAt,
|
||||
publicLink,
|
||||
};
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
private getRequestOptions(fetchAsync = fetchWithTrustedCertificatesAsync) {
|
||||
return {
|
||||
// Undici and node types are not the same
|
||||
|
||||
@@ -33,7 +33,7 @@ export const immichAlbumsRequestHandler = createIntegrationRequestHandler<
|
||||
export const immichAlbumRequestHandler = createIntegrationRequestHandler<
|
||||
ImmichAlbum,
|
||||
IntegrationKindByCategory<"photoService">,
|
||||
{ albumId?: string }
|
||||
{ albumId: string }
|
||||
>({
|
||||
async requestAsync(integration, input) {
|
||||
const integrationInstance = await createIntegrationAsync(integration);
|
||||
|
||||
@@ -16,6 +16,4 @@ export const mediaRequestStatsRequestHandler = createIntegrationRequestHandler<
|
||||
users: await integrationInstance.getUsersAsync(),
|
||||
};
|
||||
},
|
||||
cacheTtlMs: 60_000,
|
||||
fallbackToStaleOnError: true,
|
||||
});
|
||||
@@ -9,7 +9,7 @@ export const weatherRequestHandler = createWidgetRequestHandler({
|
||||
async requestAsync(input: { latitude: number; longitude: number }) {
|
||||
const res = await withTimeoutAsync(async (signal) => {
|
||||
return await fetchWithTrustedCertificatesAsync(
|
||||
`https://api.open-meteo.com/v1/forecast?latitude=${input.latitude}&longitude=${input.longitude}&daily=weathercode,temperature_2m_max,temperature_2m_min,sunrise,sunset,wind_speed_10m_max,wind_gusts_10m_max,relative_humidity_2m_mean¤t_weather=true&timezone=auto`,
|
||||
`https://api.open-meteo.com/v1/forecast?latitude=${input.latitude}&longitude=${input.longitude}&daily=weathercode,temperature_2m_max,temperature_2m_min,sunrise,sunset,wind_speed_10m_max,wind_gusts_10m_max¤t_weather=true&timezone=auto`,
|
||||
{ signal },
|
||||
);
|
||||
});
|
||||
@@ -27,7 +27,6 @@ export const weatherRequestHandler = createWidgetRequestHandler({
|
||||
sunset: weather.daily.sunset[index],
|
||||
maxWindSpeed: weather.daily.wind_speed_10m_max[index],
|
||||
maxWindGusts: weather.daily.wind_gusts_10m_max[index],
|
||||
humidity: weather.daily.relative_humidity_2m_mean[index],
|
||||
};
|
||||
}),
|
||||
} satisfies Weather;
|
||||
@@ -49,7 +48,6 @@ const atLocationOutput = z.object({
|
||||
sunset: z.array(z.string()),
|
||||
wind_speed_10m_max: z.array(z.number()),
|
||||
wind_gusts_10m_max: z.array(z.number()),
|
||||
relative_humidity_2m_mean: z.array(z.number()),
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -68,6 +66,5 @@ export interface Weather {
|
||||
sunset: string | undefined;
|
||||
maxWindSpeed: number | undefined;
|
||||
maxWindGusts: number | undefined;
|
||||
humidity: number | undefined;
|
||||
}[];
|
||||
}
|
||||
@@ -17,10 +17,6 @@ export const appIntegrationBoardMode = {
|
||||
return groups;
|
||||
}
|
||||
|
||||
return groups.concat(
|
||||
session.user.permissions.includes("board-modify-all")
|
||||
? [appsSearchGroup, integrationsSearchGroup]
|
||||
: [integrationsSearchGroup],
|
||||
);
|
||||
return groups.concat([appsSearchGroup, integrationsSearchGroup]);
|
||||
},
|
||||
} satisfies SearchMode;
|
||||
@@ -87,8 +87,7 @@ export const globalCommandGroup = createGroup<Command>({
|
||||
icon: IconBox,
|
||||
name: tOption("newApp.label"),
|
||||
useInteraction: interaction.link(() => ({ href: "/manage/apps/new" })),
|
||||
hidden:
|
||||
!session?.user.permissions.includes("board-modify-all") || !session?.user.permissions.includes("app-create"),
|
||||
hidden: !session?.user.permissions.includes("app-create"),
|
||||
},
|
||||
{
|
||||
commandKey: "newIntegration",
|
||||
|
||||
@@ -76,7 +76,7 @@ export const pagesSearchGroup = createGroup<{
|
||||
icon: IconBox,
|
||||
path: "/manage/apps",
|
||||
name: t("manageApp.label"),
|
||||
hidden: !session?.user.permissions.includes("board-modify-all"),
|
||||
hidden: !session,
|
||||
},
|
||||
{
|
||||
icon: IconPlug,
|
||||
|
||||
@@ -2257,8 +2257,7 @@
|
||||
"sunrise": "Sunrise",
|
||||
"sunset": "Sunset",
|
||||
"maxWindSpeed": "Max wind speed: {maxWindSpeed} {unit}",
|
||||
"maxWindGusts": "Max wind gusts: {maxWindGusts} {unit}",
|
||||
"humidity": "Humidity: {humidity}%"
|
||||
"maxWindGusts": "Max wind gusts: {maxWindGusts} {unit}"
|
||||
},
|
||||
"kind": {
|
||||
"clear": "Clear",
|
||||
@@ -3007,11 +3006,10 @@
|
||||
},
|
||||
"immich-albumCarousel": {
|
||||
"name": "Immich Album",
|
||||
"allPhotos": "All photos",
|
||||
"option": {
|
||||
"albumId": {
|
||||
"label": "Album",
|
||||
"description": "Select an Immich album or All photos. An empty selection also shows random photos from your full library."
|
||||
"description": "Select the Immich album to show in the slideshow."
|
||||
},
|
||||
"rotationIntervalSeconds": {
|
||||
"label": "Interval in seconds",
|
||||
@@ -3026,8 +3024,9 @@
|
||||
"description": "Show photos in a random order instead of always starting with the same album order."
|
||||
}
|
||||
},
|
||||
"description": "Slideshow of pictures from an Immich album or your full library",
|
||||
"noPhotos": "No photos found"
|
||||
"description": "Slideshow of pictures in your Immich album",
|
||||
"noAlbumSelected": "No album selected, edit widget and choose an album",
|
||||
"noPhotos": "No photos in this album"
|
||||
},
|
||||
"downloads": {
|
||||
"name": "Download Client",
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
import { useCallback, useState } from "react";
|
||||
import { Box, Container, Flex, Popover, Text, useMantineTheme } from "@mantine/core";
|
||||
import { useElementSize } from "@mantine/hooks";
|
||||
import { Box, Container, Flex, HoverCard, Text, useMantineTheme } from "@mantine/core";
|
||||
|
||||
import { useRequiredBoard } from "@homarr/boards/context";
|
||||
import type { CalendarEvent } from "@homarr/integrations/types";
|
||||
@@ -13,14 +11,9 @@ interface CalendarDayProps {
|
||||
disabled: boolean;
|
||||
rootWidth: number;
|
||||
rootHeight: number;
|
||||
onOpen: (close: () => void) => void;
|
||||
}
|
||||
|
||||
export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth, onOpen }: CalendarDayProps) => {
|
||||
const [opened, setOpened] = useState(false);
|
||||
const [pinned, setPinned] = useState(false);
|
||||
const { primaryColor } = useMantineTheme();
|
||||
const { ref, height } = useElementSize();
|
||||
export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: CalendarDayProps) => {
|
||||
const board = useRequiredBoard();
|
||||
const mantineTheme = useMantineTheme();
|
||||
const actualItemRadius = mantineTheme.radius[board.itemRadius];
|
||||
@@ -29,39 +22,19 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth, onO
|
||||
const shouldScaleDown = minAxisSize < 350;
|
||||
const isSmall = rootHeight < 256;
|
||||
|
||||
const isTooSmallForIndicators = height < 30;
|
||||
|
||||
const handleMouseEnter = useCallback(() => {
|
||||
if (disabled) return;
|
||||
onOpen(() => {
|
||||
setOpened(false);
|
||||
setPinned(false);
|
||||
});
|
||||
setOpened(true);
|
||||
}, [disabled, onOpen]);
|
||||
|
||||
const handleMouseLeave = useCallback(() => {
|
||||
if (!pinned) setOpened(false);
|
||||
}, [pinned]);
|
||||
|
||||
return (
|
||||
<Popover
|
||||
<HoverCard
|
||||
position="bottom"
|
||||
withArrow
|
||||
withinPortal
|
||||
radius="lg"
|
||||
shadow="sm"
|
||||
transitionProps={{
|
||||
transition: "pop",
|
||||
}}
|
||||
onChange={(value) => {
|
||||
setOpened(value);
|
||||
if (!value) setPinned(false);
|
||||
}}
|
||||
opened={opened}
|
||||
transitionProps={{ transition: "pop" }}
|
||||
openDelay={350}
|
||||
closeDelay={400}
|
||||
disabled={disabled}
|
||||
>
|
||||
<Popover.Target>
|
||||
<HoverCard.Target>
|
||||
<Container
|
||||
h="100%"
|
||||
w="100%"
|
||||
@@ -69,38 +42,23 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth, onO
|
||||
pt={isSmall ? 0 : 10}
|
||||
pb={isSmall ? 0 : 10}
|
||||
m={0}
|
||||
ref={ref}
|
||||
bd={`2px solid ${opened && !disabled ? primaryColor : "transparent"}`}
|
||||
pos="relative"
|
||||
style={{
|
||||
alignContent: "center",
|
||||
borderRadius: actualItemRadius,
|
||||
cursor: disabled ? "default" : "pointer",
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!disabled) setPinned((prev) => !prev);
|
||||
}}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
<Text ta={"center"} size={shouldScaleDown ? "xs" : "md"} lh={1}>
|
||||
{date.getDate()}
|
||||
</Text>
|
||||
{!isTooSmallForIndicators && <NotificationIndicator events={events} isSmall={isSmall} />}
|
||||
<NotificationIndicator events={events} isSmall={isSmall} />
|
||||
</Container>
|
||||
</Popover.Target>
|
||||
{/* Popover has some offset on the left side, padding is removed because of scrollarea paddings */}
|
||||
<Popover.Dropdown
|
||||
maw="calc(100vw - 24px)"
|
||||
w={512}
|
||||
pe={4}
|
||||
pb={0}
|
||||
style={{ overflow: "hidden" }}
|
||||
onMouseEnter={() => setOpened(true)}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
</HoverCard.Target>
|
||||
<HoverCard.Dropdown maw="calc(100vw - 24px)" w={512} pe={4} pb={0} style={{ overflow: "hidden" }}>
|
||||
<CalendarEventList events={events} />
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
</HoverCard.Dropdown>
|
||||
</HoverCard>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -111,7 +69,6 @@ interface NotificationIndicatorProps {
|
||||
|
||||
const NotificationIndicator = ({ events, isSmall }: NotificationIndicatorProps) => {
|
||||
const notificationEvents = [...new Set(events.map((event) => event.indicatorColor))].filter(String);
|
||||
/* position bottom is lower when small to not be on top of number*/
|
||||
return (
|
||||
<Flex
|
||||
w="75%"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useMemo, useRef, useState } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useMantineTheme } from "@mantine/core";
|
||||
import { Calendar } from "@mantine/dates";
|
||||
@@ -65,11 +65,6 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
|
||||
const isSmall = width < 256;
|
||||
|
||||
const normalizedEvents = useMemo(() => splitEvents(events), [events]);
|
||||
const activeCloseRef = useRef<(() => void) | null>(null);
|
||||
const onDayOpen = useCallback((close: () => void) => {
|
||||
activeCloseRef.current?.();
|
||||
activeCloseRef.current = close;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Calendar
|
||||
@@ -146,7 +141,6 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
|
||||
disabled={isEditMode || eventsForDate.length === 0}
|
||||
rootWidth={width}
|
||||
rootHeight={height}
|
||||
onOpen={onDayOpen}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
|
||||
@@ -11,7 +11,6 @@ import { useI18n } from "@homarr/translation/client";
|
||||
import { WidgetEmptyState } from "../../common/empty-state";
|
||||
import type { WidgetComponentProps } from "../../definition";
|
||||
import classes from "./component.module.css";
|
||||
import { ALL_PHOTOS_ALBUM_ID } from "./constants";
|
||||
|
||||
export default function ImmichAlbumCarouselWidget({
|
||||
integrationIds,
|
||||
@@ -22,9 +21,9 @@ export default function ImmichAlbumCarouselWidget({
|
||||
const { data: album } = clientApi.widget.immich.getAlbum.useQuery(
|
||||
{
|
||||
integrationId: integrationIds[0] ?? "",
|
||||
albumId: options.albumId && options.albumId !== ALL_PHOTOS_ALBUM_ID ? options.albumId : undefined,
|
||||
albumId: options.albumId ?? "",
|
||||
},
|
||||
{ enabled: integrationIds.length > 0 },
|
||||
{ enabled: Boolean(options.albumId) },
|
||||
);
|
||||
|
||||
const photoAssets = useMemo(() => {
|
||||
@@ -36,6 +35,10 @@ export default function ImmichAlbumCarouselWidget({
|
||||
setCurrentPhotoIndex(0);
|
||||
}, [photoAssets]);
|
||||
|
||||
if (!options.albumId) {
|
||||
return <NoAlbumSelected />;
|
||||
}
|
||||
|
||||
if (!album) return <WidgetEmptyState />;
|
||||
|
||||
if (album.assets.length === 0) {
|
||||
@@ -114,6 +117,20 @@ function Carousel({ assets, currentIndex, setCurrentIndex, rotationInterval, sho
|
||||
);
|
||||
}
|
||||
|
||||
function NoAlbumSelected() {
|
||||
const t = useI18n();
|
||||
return (
|
||||
<Center h="100%">
|
||||
<Stack align="center" gap="xs">
|
||||
<IconAlertCircle size={32} />
|
||||
<Text size="sm" fw={500}>
|
||||
{t("widget.immich-albumCarousel.noAlbumSelected")}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
function NoPhotosInAlbum() {
|
||||
const t = useI18n();
|
||||
return (
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export const ALL_PHOTOS_ALBUM_ID = "all";
|
||||
@@ -2,11 +2,9 @@ import { IconPhoto } from "@tabler/icons-react";
|
||||
import z from "zod";
|
||||
|
||||
import { clientApi } from "@homarr/api/client";
|
||||
import { useScopedI18n } from "@homarr/translation/client";
|
||||
|
||||
import { createWidgetDefinition } from "../../definition";
|
||||
import { optionsBuilder } from "../../options";
|
||||
import { ALL_PHOTOS_ALBUM_ID } from "./constants";
|
||||
|
||||
export const { definition, componentLoader } = createWidgetDefinition("immich-albumCarousel", {
|
||||
icon: IconPhoto,
|
||||
@@ -17,11 +15,9 @@ export const { definition, componentLoader } = createWidgetDefinition("immich-al
|
||||
createOptions() {
|
||||
return optionsBuilder.from((factory) => ({
|
||||
albumId: factory.integrationSelect({
|
||||
defaultValue: ALL_PHOTOS_ALBUM_ID,
|
||||
withDescription: true,
|
||||
clearable: true,
|
||||
useOptions: (integrationIds: string[]) => {
|
||||
const t = useScopedI18n("widget.immich-albumCarousel");
|
||||
const {
|
||||
data = [],
|
||||
isPending,
|
||||
@@ -30,14 +26,7 @@ export const { definition, componentLoader } = createWidgetDefinition("immich-al
|
||||
{ integrationId: integrationIds[0] ?? "" },
|
||||
{ enabled: integrationIds.length > 0, staleTime: 15 * 60 * 1000 },
|
||||
);
|
||||
return {
|
||||
data: [
|
||||
{ value: ALL_PHOTOS_ALBUM_ID, label: t("allPhotos") },
|
||||
...data.map((album) => ({ value: album.id, label: album.albumName })),
|
||||
],
|
||||
isPending,
|
||||
isError,
|
||||
};
|
||||
return { data: data.map((album) => ({ value: album.id, label: album.albumName })), isPending, isError };
|
||||
},
|
||||
}),
|
||||
rotationIntervalSeconds: factory.number({
|
||||
|
||||
@@ -66,12 +66,10 @@ export default function MediaServerWidget({ options, integrationIds }: WidgetCom
|
||||
const currentlyPlaying = row.original.currentlyPlaying;
|
||||
if (!currentlyPlaying) return null;
|
||||
|
||||
const playback = currentlyPlaying.playback;
|
||||
const isPaused = playback?.state === "paused";
|
||||
const isPaused = currentlyPlaying.playback.state === "paused";
|
||||
const Icon = isPaused ? IconPlayerPause : mediaTypeIconMap[currentlyPlaying.type];
|
||||
|
||||
const positionMs = playback?.positionMs ?? null;
|
||||
const durationMs = playback?.durationMs ?? null;
|
||||
const { positionMs, durationMs } = currentlyPlaying.playback;
|
||||
const progressPercent =
|
||||
positionMs !== null && durationMs !== null && durationMs > 0
|
||||
? Math.min(100, Math.round((positionMs / durationMs) * 100))
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { Box, Group, HoverCard, Stack, Text } from "@mantine/core";
|
||||
import { IconArrowDownRight, IconArrowUpRight, IconDroplets, IconMapPin, IconWind } from "@tabler/icons-react";
|
||||
import { IconArrowDownRight, IconArrowUpRight, IconMapPin, IconWind } from "@tabler/icons-react";
|
||||
import combineClasses from "clsx";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
@@ -87,12 +87,6 @@ const DailyWeather = ({ options, weather }: WeatherProps) => {
|
||||
</Text>
|
||||
</Group>
|
||||
)}
|
||||
{weather.daily[0]?.humidity !== undefined && (
|
||||
<Group className="weather-humidity-group" wrap="nowrap" gap="xs">
|
||||
<IconDroplets size={16} />
|
||||
<Text fz={16}>{t("dailyForecast.humidity", { humidity: weather.daily[0].humidity })}</Text>
|
||||
</Group>
|
||||
)}
|
||||
<Group className="weather-max-min-temp-group" wrap="nowrap" gap="sm">
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<IconArrowUpRight size={16} />
|
||||
@@ -210,7 +204,6 @@ function Forecast({ weather, options }: WeatherProps) {
|
||||
sunset={dayjs(dayWeather.sunset).format("HH:mm")}
|
||||
maxWindSpeed={dayWeather.maxWindSpeed}
|
||||
maxWindGusts={dayWeather.maxWindGusts}
|
||||
humidity={dayWeather.humidity}
|
||||
/>
|
||||
</HoverCard.Dropdown>
|
||||
</HoverCard>
|
||||
|
||||
@@ -5,7 +5,6 @@ import {
|
||||
IconCloudRain,
|
||||
IconCloudSnow,
|
||||
IconCloudStorm,
|
||||
IconDroplets,
|
||||
IconMoon,
|
||||
IconQuestionMark,
|
||||
IconSnowflake,
|
||||
@@ -52,7 +51,6 @@ interface WeatherDescriptionProps {
|
||||
sunset?: string;
|
||||
maxWindSpeed?: number;
|
||||
maxWindGusts?: number;
|
||||
humidity?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -80,7 +78,6 @@ export const WeatherDescription = ({
|
||||
sunset,
|
||||
maxWindSpeed,
|
||||
maxWindGusts,
|
||||
humidity,
|
||||
}: WeatherDescriptionProps) => {
|
||||
const t = useScopedI18n("widget.weather");
|
||||
const tCommon = useScopedI18n("common");
|
||||
@@ -100,9 +97,6 @@ export const WeatherDescription = ({
|
||||
<List.Item icon={<IconTemperatureMinus size={15} />}>{`${tCommon("information.min")}: ${minTemp}`}</List.Item>
|
||||
<List.Item icon={<IconSun size={15} />}>{`${t("dailyForecast.sunrise")}: ${sunrise}`}</List.Item>
|
||||
<List.Item icon={<IconMoon size={15} />}>{`${t("dailyForecast.sunset")}: ${sunset}`}</List.Item>
|
||||
{humidity !== undefined && (
|
||||
<List.Item icon={<IconDroplets size={15} />}>{t("dailyForecast.humidity", { humidity })}</List.Item>
|
||||
)}
|
||||
{maxWindSpeed !== undefined && (
|
||||
<List.Item icon={<IconWind size={15} />}>
|
||||
{t("dailyForecast.maxWindSpeed", {
|
||||
|
||||
Reference in new issue
Block a user