Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
49120a7b59 | ||
|
|
ca592cccb8 | ||
|
|
4547fb2f79 | ||
|
|
181850f77f | ||
|
|
00a65bfc58 |
No files matched your search
@@ -127,6 +127,8 @@ 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
|
||||
@@ -204,6 +206,7 @@ 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
|
||||
|
||||
@@ -15,7 +15,7 @@ import beszelSystemStats from "./img/beszel-system-stats.png";
|
||||
|
||||
<WidgetHeader widget={beszelSystemStatsWidget} categories={["System Monitoring", "Charts"]} />
|
||||
|
||||
This widget displays time-series charts for a selected Beszel system, including CPU, memory, disk, network, and Docker container metrics. The Disk Usage chart combines the root disk and every extra filesystem reported by Beszel. You can use the realtime Live view or select a historical period ranging from 1 hour to 30 days. Live view keeps a one-minute window and pauses while the browser tab is hidden. If the live stream drops, the widget now shows the connection failure state immediately and can switch back to historical data.
|
||||
This widget displays time-series charts for a selected Beszel system, including CPU, memory, disk, network, and Docker container metrics. The Disk Usage chart combines the root disk and every extra filesystem reported by Beszel. You can use the realtime Live view or select a historical period ranging from 1 hour to 30 days. If the live stream drops, the widget now shows the connection failure state immediately and can switch back to historical data.
|
||||
|
||||
### Screenshots
|
||||
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
import { describe, expect, test } from "vitest";
|
||||
|
||||
import { BoundedAsyncQueue } from "../bounded-async-queue";
|
||||
|
||||
describe("BoundedAsyncQueue", () => {
|
||||
test("keeps only the newest values when the queue is full", async () => {
|
||||
const queue = new BoundedAsyncQueue<number>(2);
|
||||
queue.push(1);
|
||||
queue.push(2);
|
||||
queue.push(3);
|
||||
queue.close();
|
||||
|
||||
await expect(queue.next()).resolves.toEqual({ value: 2, done: false });
|
||||
await expect(queue.next()).resolves.toEqual({ value: 3, done: false });
|
||||
await expect(queue.next()).resolves.toEqual({ value: undefined, done: true });
|
||||
});
|
||||
|
||||
test("resolves a pending read as soon as a value arrives", async () => {
|
||||
const queue = new BoundedAsyncQueue<string>(1);
|
||||
const next = queue.next();
|
||||
|
||||
queue.push("latest");
|
||||
|
||||
await expect(next).resolves.toEqual({ value: "latest", done: false });
|
||||
});
|
||||
|
||||
test("resolves a pending read when the producer closes", async () => {
|
||||
const queue = new BoundedAsyncQueue<number>(1);
|
||||
const next = queue.next();
|
||||
|
||||
queue.close();
|
||||
|
||||
await expect(next).resolves.toEqual({ value: undefined, done: true });
|
||||
});
|
||||
|
||||
test("rejects a pending read when the producer fails", async () => {
|
||||
const queue = new BoundedAsyncQueue<number>(1);
|
||||
const next = queue.next();
|
||||
const error = new Error("upstream failed");
|
||||
|
||||
queue.fail(error);
|
||||
|
||||
await expect(next).rejects.toBe(error);
|
||||
});
|
||||
});
|
||||
@@ -1,4 +1,5 @@
|
||||
import { TRPCError } from "@trpc/server";
|
||||
import { observable } from "@trpc/server/observable";
|
||||
import { z } from "zod/v4";
|
||||
|
||||
import { createLogger } from "@homarr/core/infrastructure/logs";
|
||||
@@ -13,10 +14,8 @@ import {
|
||||
import { settleIntegrationQueries } from "../../settle-integrations";
|
||||
import { createManyIntegrationMiddleware } from "../../middlewares/integration";
|
||||
import { createTRPCRouter, publicProcedure } from "../../trpc";
|
||||
import { BoundedAsyncQueue } from "./bounded-async-queue";
|
||||
|
||||
const logger = createLogger({ module: "beszelRouter" });
|
||||
const MAX_PENDING_LIVE_EVENTS = 4;
|
||||
|
||||
const errorMessage = (error: unknown) => (error instanceof Error ? error.message : String(error));
|
||||
|
||||
@@ -204,94 +203,98 @@ export const beszelRouter = createTRPCRouter({
|
||||
systemId: z.string(),
|
||||
}),
|
||||
)
|
||||
.subscription(async function* ({ ctx, input, signal }) {
|
||||
const integration = ctx.integrations[0];
|
||||
if (!integration) {
|
||||
throw new TRPCError({ code: "BAD_REQUEST", message: "At least one Beszel integrationId is required" });
|
||||
}
|
||||
.subscription(({ ctx, input }) => {
|
||||
return observable<LiveStatsEvent>((emit) => {
|
||||
const controller = new AbortController();
|
||||
let isActive = true;
|
||||
let emittedEventCount = 0;
|
||||
|
||||
const queue = new BoundedAsyncQueue<LiveStatsEvent>(MAX_PENDING_LIVE_EVENTS);
|
||||
const controller = new AbortController();
|
||||
let emittedEventCount = 0;
|
||||
logger.debug("Beszel realtime subscription started", {
|
||||
userId: ctx.session?.user?.id,
|
||||
integrationIds: ctx.integrations.map((integration) => integration.id),
|
||||
systemId: input.systemId,
|
||||
});
|
||||
|
||||
const stop = () => {
|
||||
controller.abort();
|
||||
void queue.return();
|
||||
};
|
||||
if (signal?.aborted) return;
|
||||
signal?.addEventListener("abort", stop, { once: true });
|
||||
|
||||
logger.debug("Beszel realtime subscription started", {
|
||||
userId: ctx.session?.user?.id,
|
||||
integrationIds: ctx.integrations.map((candidate) => candidate.id),
|
||||
systemId: input.systemId,
|
||||
});
|
||||
|
||||
try {
|
||||
const instance = await createIntegrationAsync(integration);
|
||||
if (controller.signal.aborted) return;
|
||||
void (async () => {
|
||||
try {
|
||||
if (typeof instance.subscribeRealtimeMetrics !== "function") {
|
||||
throw new TRPCError({
|
||||
code: "METHOD_NOT_SUPPORTED",
|
||||
message: `Integration ${integration.kind} does not support realtime metrics`,
|
||||
});
|
||||
}
|
||||
|
||||
await instance.subscribeRealtimeMetrics(
|
||||
input.systemId,
|
||||
(event) => {
|
||||
emittedEventCount += 1;
|
||||
if (emittedEventCount <= 2 || emittedEventCount % 60 === 0) {
|
||||
logger.debug("Forwarding Beszel realtime events", {
|
||||
userId: ctx.session?.user?.id,
|
||||
integrationId: integration.id,
|
||||
systemId: input.systemId,
|
||||
eventType: event.type,
|
||||
emittedEventCount,
|
||||
statsCount: Array.isArray(event.record.stats) ? event.record.stats.length : undefined,
|
||||
});
|
||||
}
|
||||
queue.push(event);
|
||||
},
|
||||
controller.signal,
|
||||
const integration = ctx.integrations[0];
|
||||
if (!integration) {
|
||||
emit.error(
|
||||
new TRPCError({ code: "BAD_REQUEST", message: "At least one Beszel integrationId is required" }),
|
||||
);
|
||||
queue.close();
|
||||
} catch (error) {
|
||||
if (controller.signal.aborted) {
|
||||
queue.close();
|
||||
return;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
logger.warn("Beszel realtime subscription failed", {
|
||||
try {
|
||||
const instance = await createIntegrationAsync(integration);
|
||||
if (typeof instance.subscribeRealtimeMetrics === "function") {
|
||||
await instance.subscribeRealtimeMetrics(
|
||||
input.systemId,
|
||||
(event) => {
|
||||
if (!isActive) return;
|
||||
emittedEventCount += 1;
|
||||
if (emittedEventCount <= 2 || emittedEventCount % 60 === 0) {
|
||||
logger.debug("Forwarding Beszel realtime events", {
|
||||
userId: ctx.session?.user?.id,
|
||||
integrationId: integration.id,
|
||||
systemId: input.systemId,
|
||||
eventType: event.type,
|
||||
emittedEventCount,
|
||||
statsCount: Array.isArray(event.record.stats) ? event.record.stats.length : undefined,
|
||||
});
|
||||
}
|
||||
emit.next(event);
|
||||
},
|
||||
controller.signal,
|
||||
);
|
||||
} else {
|
||||
emit.error(
|
||||
new TRPCError({
|
||||
code: "METHOD_NOT_SUPPORTED",
|
||||
message: `Integration ${integration.kind} does not support realtime metrics`,
|
||||
}),
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
if (isActive) {
|
||||
logger.warn("Beszel realtime subscription failed", {
|
||||
userId: ctx.session?.user?.id,
|
||||
integrationId: integration.id,
|
||||
systemId: input.systemId,
|
||||
emittedEventCount,
|
||||
error: errorMessage(error),
|
||||
});
|
||||
emit.error(
|
||||
error instanceof TRPCError
|
||||
? error
|
||||
: new TRPCError({
|
||||
code: "INTERNAL_SERVER_ERROR",
|
||||
message: error instanceof Error ? error.message : String(error),
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (isActive) {
|
||||
logger.debug("Beszel realtime subscription completed", {
|
||||
userId: ctx.session?.user?.id,
|
||||
integrationId: integration.id,
|
||||
systemId: input.systemId,
|
||||
emittedEventCount,
|
||||
error: errorMessage(error),
|
||||
});
|
||||
queue.fail(
|
||||
error instanceof TRPCError
|
||||
? error
|
||||
: new TRPCError({
|
||||
code: "INTERNAL_SERVER_ERROR",
|
||||
message: error instanceof Error ? error.message : String(error),
|
||||
}),
|
||||
);
|
||||
emit.complete();
|
||||
}
|
||||
})();
|
||||
|
||||
for await (const event of queue) yield event;
|
||||
} finally {
|
||||
stop();
|
||||
signal?.removeEventListener("abort", stop);
|
||||
logger.debug("Beszel realtime subscription stopped", {
|
||||
userId: ctx.session?.user?.id,
|
||||
integrationId: integration.id,
|
||||
systemId: input.systemId,
|
||||
emittedEventCount,
|
||||
});
|
||||
}
|
||||
return () => {
|
||||
isActive = false;
|
||||
logger.debug("Beszel realtime subscription cancelled", {
|
||||
userId: ctx.session?.user?.id,
|
||||
integrationIds: ctx.integrations.map((integration) => integration.id),
|
||||
systemId: input.systemId,
|
||||
emittedEventCount,
|
||||
});
|
||||
controller.abort();
|
||||
};
|
||||
});
|
||||
}),
|
||||
});
|
||||
@@ -1,88 +0,0 @@
|
||||
type QueueResult<T> = IteratorResult<T, undefined>;
|
||||
|
||||
type PendingRead<T> = {
|
||||
resolve: (result: QueueResult<T>) => void;
|
||||
reject: (reason?: unknown) => void;
|
||||
};
|
||||
|
||||
/**
|
||||
* A small async queue for live streams.
|
||||
*
|
||||
* Live metrics are snapshots, so retaining every snapshot while a client is
|
||||
* slow is both unnecessary and dangerous. When the queue is full, discard
|
||||
* the oldest pending snapshot and keep the newest one.
|
||||
*/
|
||||
export class BoundedAsyncQueue<T> implements AsyncIterableIterator<T> {
|
||||
private readonly values: T[] = [];
|
||||
private pendingRead: PendingRead<T> | undefined;
|
||||
private closed = false;
|
||||
private failed = false;
|
||||
private failure: unknown;
|
||||
|
||||
public constructor(private readonly maxSize: number) {
|
||||
if (!Number.isInteger(maxSize) || maxSize < 1) {
|
||||
throw new Error("A bounded async queue requires a positive integer max size");
|
||||
}
|
||||
}
|
||||
|
||||
public push(value: T): void {
|
||||
if (this.closed) return;
|
||||
|
||||
if (this.pendingRead) {
|
||||
const pendingRead = this.pendingRead;
|
||||
this.pendingRead = undefined;
|
||||
pendingRead.resolve({ value, done: false });
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.values.length >= this.maxSize) this.values.shift();
|
||||
this.values.push(value);
|
||||
}
|
||||
|
||||
public close(): void {
|
||||
if (this.closed) return;
|
||||
this.closed = true;
|
||||
|
||||
if (this.pendingRead) {
|
||||
const pendingRead = this.pendingRead;
|
||||
this.pendingRead = undefined;
|
||||
pendingRead.resolve({ value: undefined, done: true });
|
||||
}
|
||||
}
|
||||
|
||||
public fail(error: unknown): void {
|
||||
if (this.closed) return;
|
||||
this.closed = true;
|
||||
this.failed = true;
|
||||
this.failure = error;
|
||||
this.values.length = 0;
|
||||
|
||||
if (this.pendingRead) {
|
||||
const pendingRead = this.pendingRead;
|
||||
this.pendingRead = undefined;
|
||||
pendingRead.reject(error);
|
||||
}
|
||||
}
|
||||
|
||||
public next(): Promise<QueueResult<T>> {
|
||||
if (this.values.length > 0) {
|
||||
return Promise.resolve({ value: this.values.shift() as T, done: false });
|
||||
}
|
||||
if (this.failed) return Promise.reject(this.failure);
|
||||
if (this.closed) return Promise.resolve({ value: undefined, done: true });
|
||||
|
||||
return new Promise<QueueResult<T>>((resolve, reject) => {
|
||||
this.pendingRead = { resolve, reject };
|
||||
});
|
||||
}
|
||||
|
||||
public return(): Promise<QueueResult<T>> {
|
||||
this.values.length = 0;
|
||||
this.close();
|
||||
return Promise.resolve({ value: undefined, done: true });
|
||||
}
|
||||
|
||||
public [Symbol.asyncIterator](): AsyncIterableIterator<T> {
|
||||
return this;
|
||||
}
|
||||
}
|
||||
@@ -6,20 +6,24 @@ 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"): Adapter => {
|
||||
export const createAdapter = (
|
||||
db: Database,
|
||||
provider: SupportedAuthProvider | "unknown",
|
||||
enableDangerousCredentialsLinking = false,
|
||||
): Adapter => {
|
||||
const drizzleAdapter = DrizzleAdapter(db, { usersTable: users, sessionsTable: sessions, accountsTable: accounts });
|
||||
|
||||
return {
|
||||
...drizzleAdapter,
|
||||
// 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
|
||||
// Keep users isolated by their primary provider. The explicit credentials-linking
|
||||
// opt-in is the only exception and keeps credentials as the primary provider.
|
||||
// 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");
|
||||
}
|
||||
|
||||
const user = await db.query.users.findFirst({
|
||||
let user = await db.query.users.findFirst({
|
||||
where: and(eq(users.email, email), eq(users.provider, provider)),
|
||||
columns: {
|
||||
id: true,
|
||||
@@ -30,6 +34,22 @@ export const createAdapter = (db: Database, provider: SupportedAuthProvider | "u
|
||||
},
|
||||
});
|
||||
|
||||
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);
|
||||
const adapter = createAdapter(db, provider, env.AUTH_OIDC_ENABLE_DANGEROUS_CREDENTIALS_LINKING);
|
||||
return NextAuth({
|
||||
logger: {
|
||||
error: (error) => {
|
||||
|
||||
@@ -46,6 +46,7 @@ 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,6 +24,7 @@ export const createSignInEventHandler = (db: Database): Exclude<NextAuthConfig["
|
||||
name: true,
|
||||
image: true,
|
||||
colorScheme: true,
|
||||
provider: true,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -33,6 +34,7 @@ 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])
|
||||
@@ -57,7 +59,7 @@ export const createSignInEventHandler = (db: Database): Exclude<NextAuthConfig["
|
||||
});
|
||||
}
|
||||
|
||||
if (profile) {
|
||||
if (profile && dbUser.provider === "oidc") {
|
||||
const profileUsername = extractProfileName(profile);
|
||||
if (!profileUsername) {
|
||||
throw new Error(`OIDC provider did not return a name properties='${Object.keys(profile).join(",")}'`);
|
||||
|
||||
@@ -7,6 +7,7 @@ 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",
|
||||
@@ -18,7 +19,8 @@ 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,
|
||||
allowDangerousEmailAccountLinking:
|
||||
env.AUTH_OIDC_ENABLE_DANGEROUS_ACCOUNT_LINKING || env.AUTH_OIDC_ENABLE_DANGEROUS_CREDENTIALS_LINKING,
|
||||
authorization: {
|
||||
params: {
|
||||
scope: env.AUTH_OIDC_SCOPE_OVERWRITE,
|
||||
@@ -55,6 +57,7 @@ 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(",")}'`);
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
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");
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,87 @@
|
||||
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,6 +1,7 @@
|
||||
import { describe, expect, test } from "vitest";
|
||||
|
||||
import { users } from "@homarr/db/schema";
|
||||
import { eq } from "@homarr/db";
|
||||
import { accounts, apiKeys, groupMembers, groups, users } from "@homarr/db/schema";
|
||||
import { createDb } from "@homarr/db/test";
|
||||
|
||||
import { createAdapter } from "../adapter";
|
||||
@@ -64,4 +65,91 @@ 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);
|
||||
await createUserAsync(db, "oidc");
|
||||
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);
|
||||
await createUserAsync(db, "oidc");
|
||||
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);
|
||||
await createUserAsync(db, "oidc");
|
||||
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);
|
||||
await createUserAsync(db, "oidc");
|
||||
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);
|
||||
await createUserAsync(db, provider);
|
||||
const eventHandler = createSignInEventHandler(db);
|
||||
|
||||
// Act
|
||||
@@ -251,6 +251,32 @@ 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();
|
||||
@@ -275,11 +301,17 @@ describe("createSignInEventHandler should create signInEventHandler", () => {
|
||||
});
|
||||
});
|
||||
|
||||
const createUserAsync = async (db: Database) =>
|
||||
const createUserAsync = async (
|
||||
db: Database,
|
||||
provider: "credentials" | "ldap" | "oidc" = "credentials",
|
||||
image?: string,
|
||||
) =>
|
||||
await db.insert(users).values({
|
||||
id: "1",
|
||||
name: "test",
|
||||
colorScheme: "dark",
|
||||
image,
|
||||
provider,
|
||||
});
|
||||
|
||||
const createGroupAsync = async (db: Database, name = "test") =>
|
||||
|
||||
@@ -67,14 +67,12 @@ export const fetchWithTrustedCertificatesAsync = async (
|
||||
url: RequestInfo,
|
||||
options?: RequestInit & { timeout?: number; bodyTimeout?: number },
|
||||
): Promise<Response> => {
|
||||
const agent =
|
||||
options?.dispatcher ??
|
||||
(await createCertificateAgentAsync(
|
||||
undefined,
|
||||
options?.bodyTimeout !== undefined ? { bodyTimeout: options.bodyTimeout } : undefined,
|
||||
));
|
||||
const agent = await createCertificateAgentAsync(
|
||||
undefined,
|
||||
options?.bodyTimeout !== undefined ? { bodyTimeout: options.bodyTimeout } : undefined,
|
||||
);
|
||||
if (options?.timeout) {
|
||||
const { bodyTimeout: _bodyTimeout, dispatcher: _dispatcher, ...fetchOptions } = options;
|
||||
const { bodyTimeout: _bodyTimeout, ...fetchOptions } = options;
|
||||
return await withTimeoutAsync(
|
||||
async (signal) =>
|
||||
fetch(url, {
|
||||
@@ -86,7 +84,7 @@ export const fetchWithTrustedCertificatesAsync = async (
|
||||
);
|
||||
}
|
||||
|
||||
const { bodyTimeout: _bodyTimeout, dispatcher: _dispatcher, ...fetchOptions } = options ?? {};
|
||||
const { bodyTimeout: _bodyTimeout, ...fetchOptions } = options ?? {};
|
||||
return fetch(url, {
|
||||
...fetchOptions,
|
||||
dispatcher: agent,
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { ResponseError } from "@homarr/common/server";
|
||||
import { createLogger } from "@homarr/core/infrastructure/logs";
|
||||
import { createCertificateAgentAsync, fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
|
||||
import type { Response as UndiciResponse } from "undici";
|
||||
import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
|
||||
|
||||
import type { IntegrationInput, IntegrationTestingInput } from "../base/integration";
|
||||
import { Integration } from "../base/integration";
|
||||
@@ -358,41 +357,19 @@ export class BeszelIntegration extends Integration {
|
||||
let emittedSnapshotCount = 0;
|
||||
|
||||
while (!signal.aborted) {
|
||||
let streamResponse: UndiciResponse | undefined;
|
||||
let streamAgent: Awaited<ReturnType<typeof createCertificateAgentAsync>> | undefined;
|
||||
const closeStreamAsync = async () => {
|
||||
const response = streamResponse;
|
||||
streamResponse = undefined;
|
||||
const agent = streamAgent;
|
||||
streamAgent = undefined;
|
||||
|
||||
if (response?.body) await response.body.cancel().catch(() => {});
|
||||
if (agent) await agent.close().catch(() => {});
|
||||
};
|
||||
|
||||
try {
|
||||
let session = await this.authenticateAsync();
|
||||
const openStream = async () => {
|
||||
streamAgent = await createCertificateAgentAsync(undefined, { bodyTimeout: 0 });
|
||||
try {
|
||||
const response = await fetchWithTrustedCertificatesAsync(realtimeUrl, {
|
||||
headers: {
|
||||
Accept: "text/event-stream",
|
||||
Authorization: session.token,
|
||||
"Cache-Control": "no-cache",
|
||||
Pragma: "no-cache",
|
||||
},
|
||||
signal,
|
||||
bodyTimeout: 0,
|
||||
dispatcher: streamAgent,
|
||||
});
|
||||
streamResponse = response;
|
||||
return response;
|
||||
} catch (error) {
|
||||
await closeStreamAsync();
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
const openStream = async () =>
|
||||
await fetchWithTrustedCertificatesAsync(realtimeUrl, {
|
||||
headers: {
|
||||
Accept: "text/event-stream",
|
||||
Authorization: session.token,
|
||||
"Cache-Control": "no-cache",
|
||||
Pragma: "no-cache",
|
||||
},
|
||||
signal,
|
||||
bodyTimeout: 0,
|
||||
});
|
||||
|
||||
logger.debug("Opening Beszel rt_metrics SSE connection", {
|
||||
integrationId: this.integration.id,
|
||||
@@ -401,7 +378,6 @@ export class BeszelIntegration extends Integration {
|
||||
});
|
||||
let response = await openStream();
|
||||
if (response.status === 401) {
|
||||
await closeStreamAsync();
|
||||
await this.sessionStore.clearAsync();
|
||||
session = await this.authenticateAsync();
|
||||
response = await openStream();
|
||||
@@ -426,21 +402,14 @@ export class BeszelIntegration extends Integration {
|
||||
clientId = frame.id || fallbackClientId;
|
||||
if (!clientId) throw new Error("PocketBase PB_CONNECT event did not include a client ID");
|
||||
|
||||
if (!streamAgent) throw new Error("Beszel realtime stream agent is not available");
|
||||
const subscribeResponse = await fetchWithTrustedCertificatesAsync(realtimeUrl, {
|
||||
method: "POST",
|
||||
headers: { Authorization: session.token, "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ clientId, subscriptions: [topic] }),
|
||||
signal,
|
||||
dispatcher: streamAgent,
|
||||
});
|
||||
try {
|
||||
if (subscribeResponse.status === 401) await this.sessionStore.clearAsync();
|
||||
if (!subscribeResponse.ok) throw new ResponseError(subscribeResponse);
|
||||
await subscribeResponse.arrayBuffer();
|
||||
} finally {
|
||||
if (subscribeResponse.body) await subscribeResponse.body.cancel().catch(() => {});
|
||||
}
|
||||
if (subscribeResponse.status === 401) await this.sessionStore.clearAsync();
|
||||
if (!subscribeResponse.ok) throw new ResponseError(subscribeResponse);
|
||||
logger.debug("Subscribed to Beszel rt_metrics topic", {
|
||||
integrationId: this.integration.id,
|
||||
systemId,
|
||||
@@ -492,12 +461,10 @@ export class BeszelIntegration extends Integration {
|
||||
} finally {
|
||||
await reader.cancel().catch(() => {});
|
||||
reader.releaseLock();
|
||||
await closeStreamAsync();
|
||||
}
|
||||
|
||||
if (!signal.aborted) throw new Error("Beszel rt_metrics SSE stream ended unexpectedly");
|
||||
} catch (error) {
|
||||
await closeStreamAsync();
|
||||
if (signal.aborted) break;
|
||||
if (error instanceof ResponseError && error.statusCode === 401 && retryAttempt === 0) {
|
||||
retryAttempt += 1;
|
||||
|
||||
@@ -10,7 +10,6 @@ vi.hoisted(() => {
|
||||
const BESZEL_URL = process.env.BESZEL_TEST_URL ?? "http://localhost:8090";
|
||||
const BESZEL_EMAIL = process.env.BESZEL_TEST_EMAIL ?? "";
|
||||
const BESZEL_PASSWORD = process.env.BESZEL_TEST_PASSWORD ?? "";
|
||||
const closeAgent = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
|
||||
|
||||
vi.mock("@homarr/redis", () => ({
|
||||
createGetSetChannel: () => ({
|
||||
@@ -33,7 +32,7 @@ vi.mock("@homarr/core/infrastructure/logs", () => ({
|
||||
vi.mock("@homarr/core/infrastructure/http", () => ({
|
||||
fetchWithTrustedCertificatesAsync: (url: URL | string, init?: RequestInit) => fetch(url, init),
|
||||
createAxiosCertificateInstanceAsync: vi.fn().mockResolvedValue({}),
|
||||
createCertificateAgentAsync: vi.fn().mockResolvedValue({ close: closeAgent }),
|
||||
createCertificateAgentAsync: vi.fn().mockResolvedValue(undefined),
|
||||
}));
|
||||
|
||||
vi.mock("@homarr/core/infrastructure/certificates", () => ({
|
||||
@@ -154,7 +153,6 @@ describe("subscribeRealtimeMetrics", () => {
|
||||
|
||||
expect(subscriptionBodies).toEqual([{ clientId: "client-1", subscriptions: [topic] }]);
|
||||
expect(events.map((event) => event.type)).toEqual(["system_stats", "container_stats"]);
|
||||
expect(closeAgent).toHaveBeenCalled();
|
||||
} finally {
|
||||
globalThis.fetch = originalFetch;
|
||||
}
|
||||
|
||||
@@ -65,9 +65,6 @@ const optionMapping: OptionMapping = {
|
||||
useCustomTimezone: () => true,
|
||||
customTimeFormat: () => undefined,
|
||||
customDateFormat: () => undefined,
|
||||
showWeather: () => undefined,
|
||||
weatherLocation: () => undefined,
|
||||
isWeatherFormatFahrenheit: () => undefined,
|
||||
},
|
||||
downloads: {
|
||||
activeTorrentThreshold: (oldOptions) =>
|
||||
|
||||
@@ -787,34 +787,11 @@ const getLinuxServerIOReleaseAsync = async (
|
||||
error: { code: "noReleasesFound", message: `Image "${parsed.name}" not found in LinuxServer.io registry` },
|
||||
};
|
||||
|
||||
const regex = compileVersionRegex(versionRegex);
|
||||
if (versionRegex && !regex) {
|
||||
return {
|
||||
success: false,
|
||||
error: { code: "noMatchingVersion", message: `Invalid regex: /${versionRegex}/` },
|
||||
};
|
||||
}
|
||||
|
||||
if (!regex || regex.test(release.version)) {
|
||||
return {
|
||||
success: true,
|
||||
data: {
|
||||
latestRelease: release.version,
|
||||
latestReleaseAt: release.version_timestamp,
|
||||
releaseDescription: release.changelog?.shift()?.desc,
|
||||
projectUrl: release.github_url,
|
||||
projectDescription: release.description,
|
||||
isArchived: release.deprecated,
|
||||
createdAt: release.initial_date,
|
||||
starsCount: release.stars,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// LSIO's /api/v1/images only exposes the single latest version, so a filter
|
||||
// that does not match it cannot surface an older release (#4351). Delegate to
|
||||
// the image's GitHub repository to fetch the real release history while
|
||||
// keeping LSIO's own image metadata.
|
||||
// LSIO's /api/v1/images only exposes the single latest version, so a version
|
||||
// filter can never surface an older release (#4351). When the image has a GitHub
|
||||
// repository, delegate to the GitHub release provider to fetch the real release
|
||||
// history and apply the filter, while keeping LSIO's own image metadata. Any
|
||||
// GitHub failure (no repo, no releases, rate limit) falls back to the LSIO latest.
|
||||
const githubRepo = parseGithubRepo(release.github_url);
|
||||
if (githubRepo) {
|
||||
const githubResult = await getGithubReleaseAsync(getReleaseProviderDefaultUrl("github"), githubRepo, versionRegex);
|
||||
@@ -831,14 +808,37 @@ const getLinuxServerIOReleaseAsync = async (
|
||||
},
|
||||
};
|
||||
}
|
||||
return githubResult;
|
||||
}
|
||||
|
||||
const regex = compileVersionRegex(versionRegex);
|
||||
if (versionRegex && !regex) {
|
||||
return {
|
||||
success: false,
|
||||
error: { code: "noMatchingVersion", message: `Invalid regex: /${versionRegex}/` },
|
||||
};
|
||||
}
|
||||
|
||||
if (regex && !regex.test(release.version)) {
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "noMatchingVersion",
|
||||
message: `Regex /${versionRegex}/ does not match LSIO version "${release.version}"`,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
success: false,
|
||||
error: {
|
||||
code: "noMatchingVersion",
|
||||
message: `Regex /${versionRegex}/ does not match LSIO version "${release.version}"`,
|
||||
success: true,
|
||||
data: {
|
||||
latestRelease: release.version,
|
||||
latestReleaseAt: release.version_timestamp,
|
||||
releaseDescription: release.changelog?.shift()?.desc,
|
||||
projectUrl: release.github_url,
|
||||
projectDescription: release.description,
|
||||
isArchived: release.deprecated,
|
||||
createdAt: release.initial_date,
|
||||
starsCount: release.stars,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
@@ -126,128 +126,6 @@ describe("getLatestMatchingReleaseAsync for GitHub Container Registry", () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe("getLatestMatchingReleaseAsync for LinuxServer.io", () => {
|
||||
beforeEach(() => {
|
||||
mockedFetch.mockReset();
|
||||
});
|
||||
|
||||
test("uses the LinuxServer.io latest release without fetching GitHub history", async () => {
|
||||
mockedFetch.mockResolvedValueOnce(createLinuxServerResponse());
|
||||
|
||||
const result = await getLatestMatchingReleaseAsync({
|
||||
id: "tautulli",
|
||||
provider: "linuxServerIO",
|
||||
identifier: "lscr.io/linuxserver/tautulli:latest",
|
||||
});
|
||||
|
||||
expect(result).toEqual({
|
||||
success: true,
|
||||
data: {
|
||||
latestRelease: "v2.17.2-ls237",
|
||||
latestReleaseAt: new Date("2026-07-17T00:25:42.000Z"),
|
||||
releaseDescription: "Rebase to Alpine 3.24.",
|
||||
projectUrl: "https://github.com/linuxserver/docker-tautulli",
|
||||
projectDescription: "Tautulli image",
|
||||
isArchived: false,
|
||||
createdAt: new Date("2015-08-10T00:00:00.000Z"),
|
||||
starsCount: 934,
|
||||
},
|
||||
});
|
||||
expect(mockedFetch).toHaveBeenCalledOnce();
|
||||
expectUrl(0, "https://api.linuxserver.io/api/v1/images");
|
||||
});
|
||||
|
||||
test("fetches GitHub history when a version filter requires it", async () => {
|
||||
mockedFetch.mockImplementation(async (input) => {
|
||||
const url = new URL(input.toString());
|
||||
|
||||
if (url.origin === "https://api.linuxserver.io") return createLinuxServerResponse();
|
||||
if (url.pathname === "/repos/linuxserver/docker-tautulli/releases") {
|
||||
return createJsonResponse([
|
||||
{
|
||||
tag_name: "v2.16.0-ls200",
|
||||
published_at: "2026-01-10T12:00:00.000Z",
|
||||
html_url: "https://github.com/linuxserver/docker-tautulli/releases/tag/v2.16.0-ls200",
|
||||
body: "Older supported image",
|
||||
prerelease: false,
|
||||
},
|
||||
]);
|
||||
}
|
||||
if (url.pathname === "/repos/linuxserver/docker-tautulli") {
|
||||
return createJsonResponse({
|
||||
html_url: "https://github.com/linuxserver/docker-tautulli",
|
||||
description: "GitHub description",
|
||||
fork: false,
|
||||
archived: false,
|
||||
created_at: "2015-08-10T00:00:00.000Z",
|
||||
stargazers_count: 934,
|
||||
open_issues_count: 2,
|
||||
forks_count: 80,
|
||||
});
|
||||
}
|
||||
|
||||
return createJsonResponse({ message: "Not Found" }, { status: 404, statusText: "Not Found" });
|
||||
});
|
||||
|
||||
const result = await getLatestMatchingReleaseAsync({
|
||||
id: "tautulli",
|
||||
provider: "linuxServerIO",
|
||||
identifier: "linuxserver/tautulli",
|
||||
versionRegex: "^v2\\.16\\..+-ls[0-9]+$",
|
||||
});
|
||||
|
||||
expect(result).toEqual({
|
||||
success: true,
|
||||
data: expect.objectContaining({
|
||||
latestRelease: "v2.16.0-ls200",
|
||||
projectUrl: "https://github.com/linuxserver/docker-tautulli",
|
||||
projectDescription: "Tautulli image",
|
||||
}),
|
||||
});
|
||||
expect(mockedFetch).toHaveBeenCalledTimes(3);
|
||||
});
|
||||
|
||||
test("uses the LinuxServer.io latest release when it matches the version filter", async () => {
|
||||
mockedFetch.mockResolvedValueOnce(createLinuxServerResponse());
|
||||
|
||||
const result = await getLatestMatchingReleaseAsync({
|
||||
id: "tautulli",
|
||||
provider: "linuxServerIO",
|
||||
identifier: "linuxserver/tautulli",
|
||||
versionRegex: "^v2\\.17\\..+-ls[0-9]+$",
|
||||
});
|
||||
|
||||
expect(result).toEqual({
|
||||
success: true,
|
||||
data: expect.objectContaining({ latestRelease: "v2.17.2-ls237" }),
|
||||
});
|
||||
expect(mockedFetch).toHaveBeenCalledOnce();
|
||||
expectUrl(0, "https://api.linuxserver.io/api/v1/images");
|
||||
});
|
||||
|
||||
test("returns the GitHub error when filtered release history cannot be fetched", async () => {
|
||||
mockedFetch.mockImplementation(async (input) => {
|
||||
const url = new URL(input.toString());
|
||||
if (url.origin === "https://api.linuxserver.io") return createLinuxServerResponse();
|
||||
|
||||
return createJsonResponse({ message: "GitHub unavailable" }, { status: 404, statusText: "Not Found" });
|
||||
});
|
||||
|
||||
const result = await getLatestMatchingReleaseAsync({
|
||||
id: "tautulli",
|
||||
provider: "linuxServerIO",
|
||||
identifier: "linuxserver/tautulli",
|
||||
versionRegex: "^v2\\.16\\..+-ls[0-9]+$",
|
||||
});
|
||||
|
||||
expect(result).toEqual({
|
||||
success: false,
|
||||
error: expect.objectContaining({ code: "unexpected", message: expect.stringContaining("GitHub unavailable") }),
|
||||
});
|
||||
expect(mockedFetch.mock.calls.length).toBeGreaterThan(1);
|
||||
});
|
||||
});
|
||||
|
||||
interface MockGhcrResponsesInput {
|
||||
registryOrigin?: string;
|
||||
repositoryName: string;
|
||||
@@ -307,27 +185,6 @@ const createJsonResponse = (body: unknown, init: JsonResponseInit = {}) =>
|
||||
},
|
||||
});
|
||||
|
||||
const createLinuxServerResponse = () =>
|
||||
createJsonResponse({
|
||||
data: {
|
||||
repositories: {
|
||||
linuxserver: [
|
||||
{
|
||||
name: "tautulli",
|
||||
initial_date: "2015-08-10",
|
||||
github_url: "https://github.com/linuxserver/docker-tautulli",
|
||||
description: "Tautulli image",
|
||||
version: "v2.17.2-ls237",
|
||||
version_timestamp: "2026-07-17 00:25:42+00:00",
|
||||
stars: 934,
|
||||
deprecated: false,
|
||||
changelog: [{ date: "2026-07-05", desc: "Rebase to Alpine 3.24." }],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const expectUrl = (callIndex: number, expectedUrl: string) => {
|
||||
expect(mockedFetch.mock.calls[callIndex]?.[0].toString().split("?")[0]).toBe(expectedUrl);
|
||||
};
|
||||
|
||||
@@ -1905,16 +1905,6 @@
|
||||
"customDateFormat": {
|
||||
"label": "Custom date format",
|
||||
"description": "Use ISO 8601 to format date (this will override other options)"
|
||||
},
|
||||
"showWeather": {
|
||||
"label": "Show weather",
|
||||
"description": "Display a small animated weather icon and temperature in the corner of the card"
|
||||
},
|
||||
"weatherLocation": {
|
||||
"label": "Weather location"
|
||||
},
|
||||
"isWeatherFormatFahrenheit": {
|
||||
"label": "Use Fahrenheit"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { skipToken } from "@tanstack/react-query";
|
||||
|
||||
import { clientApi } from "@homarr/api/client";
|
||||
@@ -10,22 +10,10 @@ import type { BeszelContainerStatsRecord, BeszelSystemStatsRecord } from "@homar
|
||||
// without synthesizing points for missed updates.
|
||||
const MAX_BUFFER = 60;
|
||||
|
||||
const subscribeToVisibility = (onChange: () => void) => {
|
||||
if (typeof document === "undefined") return () => {};
|
||||
document.addEventListener("visibilitychange", onChange);
|
||||
return () => document.removeEventListener("visibilitychange", onChange);
|
||||
};
|
||||
|
||||
const getPageVisibility = () => typeof document === "undefined" || document.visibilityState === "visible";
|
||||
|
||||
const usePageVisible = () => useSyncExternalStore(subscribeToVisibility, getPageVisibility, () => true);
|
||||
|
||||
export const useLiveStats = (integrationIds: string[], systemId: string, enabled: boolean) => {
|
||||
const [systemStats, setSystemStats] = useState<BeszelSystemStatsRecord[]>([]);
|
||||
const [containerStats, setContainerStats] = useState<BeszelContainerStatsRecord[]>([]);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
const pageVisible = usePageVisible();
|
||||
const subscriptionEnabled = enabled && pageVisible && systemId !== "";
|
||||
|
||||
// Append to buffer, trimming to MAX_BUFFER
|
||||
const appendSystemStats = useCallback((record: BeszelSystemStatsRecord) => {
|
||||
@@ -43,7 +31,7 @@ export const useLiveStats = (integrationIds: string[], systemId: string, enabled
|
||||
}, []);
|
||||
|
||||
clientApi.widget.beszel.subscribeSystemStats.useSubscription(
|
||||
subscriptionEnabled ? { integrationIds, systemId } : skipToken,
|
||||
enabled && systemId !== "" ? { integrationIds, systemId } : skipToken,
|
||||
{
|
||||
onData(event) {
|
||||
setError(null);
|
||||
@@ -61,7 +49,7 @@ export const useLiveStats = (integrationIds: string[], systemId: string, enabled
|
||||
|
||||
// Reset buffers when system changes or integration changes
|
||||
const prevKeyRef = useRef<string>("");
|
||||
const currentKey = `${integrationIds.join(",")}:${systemId}:${subscriptionEnabled}`;
|
||||
const currentKey = `${integrationIds.join(",")}:${systemId}:${enabled}`;
|
||||
useEffect(() => {
|
||||
if (prevKeyRef.current !== currentKey) {
|
||||
prevKeyRef.current = currentKey;
|
||||
|
||||
@@ -1,16 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Box, Stack, Text, Title } from "@mantine/core";
|
||||
import { Stack, Text, Title } from "@mantine/core";
|
||||
import dayjs from "dayjs";
|
||||
import advancedFormat from "dayjs/plugin/advancedFormat";
|
||||
import timezones from "dayjs/plugin/timezone";
|
||||
import utc from "dayjs/plugin/utc";
|
||||
|
||||
import { clientApi } from "@homarr/api/client";
|
||||
|
||||
import type { WidgetComponentProps } from "../definition";
|
||||
import { AnimatedWeatherIcon } from "../weather/animated-icon";
|
||||
|
||||
dayjs.extend(advancedFormat);
|
||||
dayjs.extend(utc);
|
||||
@@ -26,64 +23,29 @@ export default function ClockWidget({ options, width }: WidgetComponentProps<"cl
|
||||
const time = useCurrentTime(options);
|
||||
|
||||
const sizing = width < 128 ? "xs" : width < 196 ? "sm" : "md";
|
||||
const showWeatherCorner = options.showWeather && sizing !== "xs";
|
||||
|
||||
return (
|
||||
<Box className="clock-widget-container" h="100%" pos="relative">
|
||||
{showWeatherCorner && (
|
||||
<ClockWeatherCorner
|
||||
latitude={options.weatherLocation.latitude}
|
||||
longitude={options.weatherLocation.longitude}
|
||||
isFahrenheit={options.isWeatherFormatFahrenheit}
|
||||
/>
|
||||
<Stack className="clock-text-stack" h="100%" align="center" justify="center" gap={sizing}>
|
||||
{options.customTitleToggle && (
|
||||
<Text className="clock-customTitle-text" size={sizing} ta="center">
|
||||
{options.customTitle}
|
||||
</Text>
|
||||
)}
|
||||
<Title className="clock-time-text" fw={700} order={sizing === "md" ? 2 : sizing === "sm" ? 4 : 6} lh="1">
|
||||
{options.customTimeFormat
|
||||
? dayjs(time).tz(timezone).format(customTimeFormat)
|
||||
: dayjs(time).tz(timezone).format(timeFormat)}
|
||||
</Title>
|
||||
{options.showDate && (
|
||||
<Text className="clock-date-text" size={sizing} lineClamp={1}>
|
||||
{options.customDateFormat
|
||||
? dayjs(time).tz(timezone).format(customDateFormat)
|
||||
: dayjs(time).tz(timezone).format(dateFormat)}
|
||||
</Text>
|
||||
)}
|
||||
<Stack className="clock-text-stack" h="100%" align="center" justify="center" gap={sizing}>
|
||||
{options.customTitleToggle && (
|
||||
<Text className="clock-customTitle-text" size={sizing} ta="center">
|
||||
{options.customTitle}
|
||||
</Text>
|
||||
)}
|
||||
<Title className="clock-time-text" fw={700} order={sizing === "md" ? 2 : sizing === "sm" ? 4 : 6} lh="1">
|
||||
{options.customTimeFormat
|
||||
? dayjs(time).tz(timezone).format(customTimeFormat)
|
||||
: dayjs(time).tz(timezone).format(timeFormat)}
|
||||
</Title>
|
||||
{options.showDate && (
|
||||
<Text className="clock-date-text" size={sizing} lineClamp={1}>
|
||||
{options.customDateFormat
|
||||
? dayjs(time).tz(timezone).format(customDateFormat)
|
||||
: dayjs(time).tz(timezone).format(dateFormat)}
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
interface ClockWeatherCornerProps {
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
isFahrenheit: boolean;
|
||||
}
|
||||
|
||||
const ClockWeatherCorner = ({ latitude, longitude, isFahrenheit }: ClockWeatherCornerProps) => {
|
||||
const { data: weather } = clientApi.widget.weather.atLocation.useQuery({ latitude, longitude });
|
||||
|
||||
if (!weather) return null;
|
||||
|
||||
const temp = isFahrenheit ? weather.current.temperature * (9 / 5) + 32 : weather.current.temperature;
|
||||
const unit = isFahrenheit ? "°F" : "°C";
|
||||
|
||||
return (
|
||||
<Stack className="clock-weather-corner" pos="absolute" top={4} left={4} gap={0} align="center">
|
||||
<AnimatedWeatherIcon code={weather.current.weathercode} size={22} />
|
||||
<Text className="clock-weather-corner-temp" size="xs" c="dimmed">
|
||||
{Math.round(temp)}
|
||||
{unit}
|
||||
</Text>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
interface UseCurrentTimeProps {
|
||||
showSeconds: boolean;
|
||||
|
||||
@@ -55,20 +55,6 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", {
|
||||
defaultValue: "",
|
||||
withDescription: true,
|
||||
}),
|
||||
showWeather: factory.switch({
|
||||
defaultValue: false,
|
||||
withDescription: true,
|
||||
}),
|
||||
weatherLocation: factory.location({
|
||||
defaultValue: {
|
||||
name: "Brisbane",
|
||||
latitude: -27.4698,
|
||||
longitude: 153.0251,
|
||||
},
|
||||
}),
|
||||
isWeatherFormatFahrenheit: factory.switch({
|
||||
defaultValue: false,
|
||||
}),
|
||||
}),
|
||||
{
|
||||
customTitle: {
|
||||
@@ -80,12 +66,6 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", {
|
||||
dateFormat: {
|
||||
shouldHide: (options) => !options.showDate,
|
||||
},
|
||||
weatherLocation: {
|
||||
shouldHide: (options) => !options.showWeather,
|
||||
},
|
||||
isWeatherFormatFahrenheit: {
|
||||
shouldHide: (options) => !options.showWeather,
|
||||
},
|
||||
},
|
||||
);
|
||||
},
|
||||
|
||||
@@ -29,7 +29,6 @@ import { MaskedOrNormalImage } from "@homarr/ui";
|
||||
import type { WidgetComponentProps } from "../definition";
|
||||
import classes from "./component.module.scss";
|
||||
import type { ReleasesRepository, ReleasesRepositoryResponse } from "./releases-repository";
|
||||
import { getReleasesQueryStaleTimeMs } from "./query-options";
|
||||
|
||||
const formatRelativeDate = (value: string): string => {
|
||||
const isMonths = /\d+m/g.test(value);
|
||||
@@ -90,19 +89,16 @@ export default function ReleasesWidget({ options, itemId }: WidgetComponentProps
|
||||
|
||||
const queryResults = clientApi.useQueries((trpc) =>
|
||||
batchedRepositories.flatMap(({ provider, repositories }) =>
|
||||
trpc.widget.releases.getLatest(
|
||||
{
|
||||
itemId,
|
||||
repositories: repositories.map((repository) => ({
|
||||
id: repository.id,
|
||||
provider,
|
||||
identifier: repository.identifier,
|
||||
versionFilter: repository.versionFilter,
|
||||
providerUrl: repository.providerUrl,
|
||||
})),
|
||||
},
|
||||
{ staleTime: getReleasesQueryStaleTimeMs },
|
||||
),
|
||||
trpc.widget.releases.getLatest({
|
||||
itemId,
|
||||
repositories: repositories.map((repository) => ({
|
||||
id: repository.id,
|
||||
provider,
|
||||
identifier: repository.identifier,
|
||||
versionFilter: repository.versionFilter,
|
||||
providerUrl: repository.providerUrl,
|
||||
})),
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
import { describe, expect, test } from "vitest";
|
||||
|
||||
import { getReleasesQueryStaleTimeMs } from "./query-options";
|
||||
|
||||
describe("getReleasesQueryStaleTimeMs", () => {
|
||||
test("keeps successful release batches fresh for four hours", () => {
|
||||
const staleTime = getReleasesQueryStaleTimeMs({
|
||||
state: { data: [{ success: true }, { success: true }] },
|
||||
});
|
||||
|
||||
expect(staleTime).toBe(4 * 60 * 60 * 1000);
|
||||
});
|
||||
|
||||
test("keeps a batch stale when a provider returned an error", () => {
|
||||
const staleTime = getReleasesQueryStaleTimeMs({
|
||||
state: { data: [{ success: true }, { success: false }] },
|
||||
});
|
||||
|
||||
expect(staleTime).toBe(0);
|
||||
});
|
||||
|
||||
test.each([undefined, [], [{ unexpected: true }]])("keeps missing or invalid data stale", (data) => {
|
||||
expect(getReleasesQueryStaleTimeMs({ state: { data } })).toBe(0);
|
||||
});
|
||||
});
|
||||
@@ -1,17 +0,0 @@
|
||||
export const releasesQuerySuccessfulStaleTimeMs = 4 * 60 * 60 * 1000;
|
||||
|
||||
interface QueryWithData {
|
||||
state: {
|
||||
data: unknown;
|
||||
};
|
||||
}
|
||||
|
||||
export const getReleasesQueryStaleTimeMs = ({ state }: QueryWithData) => {
|
||||
if (!Array.isArray(state.data) || state.data.length === 0) return 0;
|
||||
|
||||
const allRepositoriesSucceeded = state.data.every(
|
||||
(result) => typeof result === "object" && result !== null && "success" in result && result.success === true,
|
||||
);
|
||||
|
||||
return allRepositoriesSucceeded ? releasesQuerySuccessfulStaleTimeMs : 0;
|
||||
};
|
||||
@@ -1,28 +0,0 @@
|
||||
import "../widgets-common.css";
|
||||
|
||||
import { WeatherIcon } from "./icon";
|
||||
|
||||
interface AnimatedWeatherIconProps {
|
||||
code: number;
|
||||
size?: string | number;
|
||||
}
|
||||
|
||||
|
||||
const getAnimationClass = (code: number): string => {
|
||||
if (code === 0) return "weather-anim-sun";
|
||||
if ([1, 2, 3].includes(code)) return "weather-anim-cloud";
|
||||
if ([45, 48].includes(code)) return "weather-anim-fog";
|
||||
if ([51, 53, 55, 56, 57, 61, 63, 65, 66, 67, 80, 81, 82].includes(code)) return "weather-anim-rain";
|
||||
if ([71, 73, 75, 77, 85, 86].includes(code)) return "weather-anim-snow";
|
||||
if ([95, 96, 99].includes(code)) return "weather-anim-storm";
|
||||
return "";
|
||||
};
|
||||
|
||||
|
||||
export const AnimatedWeatherIcon = ({ code, size = 26 }: AnimatedWeatherIconProps) => {
|
||||
return (
|
||||
<span className={`weather-anim-wrapper ${getAnimationClass(code)}`}>
|
||||
<WeatherIcon code={code} size={size} />
|
||||
</span>
|
||||
);
|
||||
};
|
||||
@@ -12,8 +12,7 @@ import { useScopedI18n } from "@homarr/translation/client";
|
||||
|
||||
import { WidgetEmptyState } from "../common/empty-state";
|
||||
import type { WidgetComponentProps } from "../definition";
|
||||
import { AnimatedWeatherIcon } from "./animated-icon";
|
||||
import { WeatherDescription } from "./icon";
|
||||
import { WeatherDescription, WeatherIcon } from "./icon";
|
||||
|
||||
export default function WeatherWidget({ isEditMode, options }: WidgetComponentProps<"weather">) {
|
||||
const input = {
|
||||
@@ -56,7 +55,7 @@ const DailyWeather = ({ options, weather }: WeatherProps) => {
|
||||
<HoverCard>
|
||||
<HoverCard.Target>
|
||||
<Box>
|
||||
<AnimatedWeatherIcon size={30} code={weather.current.weathercode} />
|
||||
<WeatherIcon size={30} code={weather.current.weathercode} />
|
||||
</Box>
|
||||
</HoverCard.Target>
|
||||
<HoverCard.Dropdown>
|
||||
@@ -147,7 +146,7 @@ const WeeklyForecast = ({ options, weather }: WeatherProps) => {
|
||||
<HoverCard>
|
||||
<HoverCard.Target>
|
||||
<Box>
|
||||
<AnimatedWeatherIcon size={16} code={weather.current.weathercode} />
|
||||
<WeatherIcon size={16} code={weather.current.weathercode} />
|
||||
</Box>
|
||||
</HoverCard.Target>
|
||||
<HoverCard.Dropdown>
|
||||
@@ -185,7 +184,7 @@ function Forecast({ weather, options }: WeatherProps) {
|
||||
align="center"
|
||||
>
|
||||
<Text fz="xl">{dayjs(dayWeather.time).format("dd")}</Text>
|
||||
<AnimatedWeatherIcon size={16} code={dayWeather.weatherCode} />
|
||||
<WeatherIcon size={16} code={dayWeather.weatherCode} />
|
||||
<Text fz={16}>
|
||||
{getPreferredUnit(dayWeather.maxTemp, options.isFormatFahrenheit, options.disableTemperatureDecimals)}
|
||||
</Text>
|
||||
|
||||
@@ -25,83 +25,3 @@
|
||||
.text-flash {
|
||||
animation: glow 1s ease-in-out;
|
||||
}
|
||||
|
||||
/*Animated weather icons, used by clock and weather widgets*/
|
||||
.weather-anim-wrapper {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
@keyframes weather-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes weather-drift {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes weather-fall {
|
||||
0% {
|
||||
transform: translateY(-2px);
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(2px);
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes weather-flicker {
|
||||
0%,
|
||||
90%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
92%,
|
||||
96% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.weather-anim-sun {
|
||||
animation: weather-spin 16s linear infinite;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.weather-anim-cloud,
|
||||
.weather-anim-fog {
|
||||
animation: weather-drift 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.weather-anim-rain,
|
||||
.weather-anim-snow {
|
||||
animation: weather-fall 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.weather-anim-storm {
|
||||
animation: weather-flicker 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.weather-anim-sun,
|
||||
.weather-anim-cloud,
|
||||
.weather-anim-fog,
|
||||
.weather-anim-rain,
|
||||
.weather-anim-snow,
|
||||
.weather-anim-storm {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user