robodev 0.10.0 → 0.12.0

package/templates/space/apps/fe/src/clients/auth-token-store.ts

@@ -0,0 +1,101 @@
+import { ACCESS_TOKEN_KEY, REFRESH_TOKEN_KEY } from "@/config/jwt.config";
+
+type TokenListener = () => void;
+
+const listeners = new Set<TokenListener>();
+let storageListenerCount = 0;
+
+const isBrowser = () => typeof window !== "undefined";
+
+const readToken = (key: string) => {
+  if (!isBrowser()) {
+    return null;
+  }
+
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+};
+
+const writeToken = (key: string, token: string | null) => {
+  if (!isBrowser()) {
+    return;
+  }
+
+  try {
+    if (token) {
+      window.localStorage.setItem(key, token);
+    } else {
+      window.localStorage.removeItem(key);
+    }
+  } catch {
+    // Keep in-memory auth subscribers in sync even if storage is unavailable.
+  }
+};
+
+const emitChange = () => {
+  for (const listener of listeners) {
+    listener();
+  }
+};
+
+const onStorageChange = (event: StorageEvent) => {
+  if (event.storageArea !== window.localStorage) {
+    return;
+  }
+
+  if (event.key === ACCESS_TOKEN_KEY || event.key === REFRESH_TOKEN_KEY || event.key === null) {
+    emitChange();
+  }
+};
+
+export const authTokenStore = {
+  getAccessToken: () => readToken(ACCESS_TOKEN_KEY),
+  getRefreshToken: () => readToken(REFRESH_TOKEN_KEY),
+  getServerSnapshot: () => null,
+  subscribe: (listener: TokenListener) => {
+    listeners.add(listener);
+
+    if (isBrowser()) {
+      if (storageListenerCount === 0) {
+        window.addEventListener("storage", onStorageChange);
+      }
+      storageListenerCount += 1;
+    }
+
+    return () => {
+      listeners.delete(listener);
+
+      if (isBrowser()) {
+        storageListenerCount -= 1;
+        if (storageListenerCount === 0) {
+          window.removeEventListener("storage", onStorageChange);
+        }
+      }
+    };
+  },
+  setAccessToken: (token: string | null) => {
+    writeToken(ACCESS_TOKEN_KEY, token);
+    emitChange();
+  },
+  setRefreshToken: (token: string | null) => {
+    writeToken(REFRESH_TOKEN_KEY, token);
+    emitChange();
+  },
+  setTokens: (accessToken: string | null, refreshToken?: string | null) => {
+    writeToken(ACCESS_TOKEN_KEY, accessToken);
+
+    if (refreshToken !== undefined) {
+      writeToken(REFRESH_TOKEN_KEY, refreshToken);
+    }
+
+    emitChange();
+  },
+  clear: () => {
+    writeToken(ACCESS_TOKEN_KEY, null);
+    writeToken(REFRESH_TOKEN_KEY, null);
+    emitChange();
+  },
+};

package/templates/space/apps/fe/src/clients/rest/app-error-handler.ts

@@ -0,0 +1,31 @@
+import { type ErrorEntry, ErrorHandler } from "@povio/openapi-codegen-cli";
+
+export enum AuthErrorCodes {
+  InvalidCredentials = "invalid-credentials",
+  LocalAuthnIdentityExists = "identity-already-exists",
+  IdentityNotFound = "identity-not-found",
+  NotConfirmed = "identity-not-confirmed",
+}
+
+const authErrors: ErrorEntry<AuthErrorCodes>[] = [
+  {
+    code: AuthErrorCodes.InvalidCredentials,
+    getMessage: (t) => t("auth.shared.errors.invalidCredentials"),
+  },
+  {
+    code: AuthErrorCodes.LocalAuthnIdentityExists,
+    getMessage: (t) => t("auth.shared.errors.userAlreadyExists"),
+  },
+  {
+    code: AuthErrorCodes.IdentityNotFound,
+    getMessage: (t) => t("auth.shared.errors.identityNotFound"),
+  },
+  {
+    code: AuthErrorCodes.NotConfirmed,
+    getMessage: (t) => t("auth.shared.errors.notConfirmed"),
+  },
+];
+
+const entries = [...authErrors];
+
+export const AppErrorHandler = new ErrorHandler({ entries });

package/templates/space/apps/fe/src/clients/rest/interceptors/authorization-header.interceptor.ts

@@ -0,0 +1,15 @@
+import { RestInterceptor } from "@povio/openapi-codegen-cli";
+
+import { authTokenStore } from "@/clients/auth-token-store";
+
+export const AuthorizationHeaderInterceptor = new RestInterceptor((client) => {
+  return client.interceptors.request.use(async (config) => {
+    const accessToken = authTokenStore.getAccessToken();
+    if (accessToken != null) {
+      // oxlint-disable-next-line no-param-reassign
+      config.headers.Authorization = `Bearer ${accessToken}`;
+    }
+
+    return config;
+  });
+});

package/templates/space/apps/fe/src/clients/rest/interceptors/refresh-token.interceptor.ts

@@ -0,0 +1,37 @@
+import { RestInterceptor } from "@povio/openapi-codegen-cli";
+
+import { AuthErrorCodes } from "@/clients/rest/app-error-handler";
+import { UserAuthApi } from "@/openapi/userAuth/userAuth.api";
+import { authTokenStore } from "@/clients/auth-token-store";
+
+export const RefreshTokenInterceptor = new RestInterceptor((client) => {
+  return client.interceptors.response.use(
+    (response) => response,
+    // oxlint-disable-next-line promise/prefer-await-to-callbacks
+    async (error) => {
+      const originalRequest = error.config;
+
+      if (error.response?.data?.code === AuthErrorCodes.InvalidCredentials) {
+        return Promise.reject(error);
+      }
+
+      if (error.response?.status === 401 && !originalRequest._retry) {
+        originalRequest._retry = true;
+        try {
+          const refreshToken = authTokenStore.getRefreshToken();
+          const { accessToken, refreshToken: newRefreshToken } = await UserAuthApi.accessToken({
+            refreshToken: refreshToken || "",
+          });
+          authTokenStore.setTokens(accessToken, newRefreshToken || null);
+
+          originalRequest.headers.Authorization = `Bearer ${accessToken}`;
+
+          return client(originalRequest);
+        } catch {
+          authTokenStore.clear();
+        }
+      }
+      return Promise.reject(error);
+    },
+  );
+});

package/templates/space/apps/fe/src/clients/rest/interceptors/response.interceptor.ts

@@ -0,0 +1,17 @@
+import { RestInterceptor } from "@povio/openapi-codegen-cli";
+import type { AxiosError, AxiosResponse } from "axios";
+
+export const ResponseInterceptor = new RestInterceptor((client) => {
+  return client.interceptors.response.use(
+    async (response: AxiosResponse) => {
+      return {
+        ...response,
+        data: response.data === "" ? undefined : response.data,
+      };
+    },
+    // oxlint-disable-next-line promise/prefer-await-to-callbacks
+    async (error: AxiosError) => {
+      throw error;
+    },
+  );
+});

package/templates/space/apps/fe/src/components/404.tsx

@@ -0,0 +1,18 @@
+import { useTranslation } from "react-i18next";
+
+import { NotFound } from "@/components/shared/error/NotFound";
+import { AppHead } from "@/components/shared/head/AppHead";
+
+export const NotFoundPage = () => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <AppHead
+        title={t(($) => $.shared.notFound.head.title)}
+        description={t(($) => $.shared.notFound.head.description)}
+      />
+      <NotFound />
+    </>
+  );
+};

package/templates/space/apps/fe/src/components/features/auth/AuthBrandPanel.tsx

@@ -0,0 +1,60 @@
+import { Typography } from "@povio/ui";
+import { useTranslation } from "react-i18next";
+
+import { BrandLogo } from "@/components/shared/branding/BrandLogo";
+
+export function AuthBrandPanel() {
+  const { t } = useTranslation();
+
+  return (
+    <section className="relative hidden flex-1 overflow-hidden bg-elevation-fill-default-2 lg:flex lg:flex-col lg:justify-between">
+      <div className="relative z-raised flex flex-col gap-1 px-16 pt-20 xl:px-24 xl:pt-24">
+        <Typography
+          as="p"
+          className="text-text-default-2"
+          size="title-3"
+        >
+          {t(($) => $.auth.wrapper.title)}
+        </Typography>
+        <Typography
+          as="h1"
+          className="text-text-default-2"
+          size="title-1"
+          variant="prominent-1"
+        >
+          {t(($) => $.auth.wrapper.description)}
+        </Typography>
+      </div>
+
+      <BrandLogo className="absolute -right-12 top-10 text-[10rem] leading-none text-[#e1e9ee]" />
+
+      <svg
+        aria-hidden="true"
+        className="absolute bottom-0 left-0 h-auto w-full opacity-20"
+        viewBox="0 0 760 390"
+      >
+        <path
+          d="M0 245 80 202l62 22 98-85 92 77 68-45 76 53 84-113 74 95 126-50v234H0Z"
+          fill="#006ab6"
+        />
+        <path
+          d="m52 390 132-120 78 61 106-130 91 108 69-59 128 140Z"
+          fill="#006ab6"
+          opacity=".4"
+        />
+      </svg>
+
+      <div className="relative z-raised flex flex-col items-center gap-3 pb-8">
+        <BrandLogo className="text-interactive-contained-primary-idle" />
+        <Typography
+          as="span"
+          className="text-text-default-2"
+          size="body-4"
+          variant="prominent-1"
+        >
+          {t(($) => $.auth.wrapper.watermark, { year: new Date().getFullYear() })}
+        </Typography>
+      </div>
+    </section>
+  );
+}

package/templates/space/apps/fe/src/components/features/auth/AuthLayout.tsx

@@ -0,0 +1,23 @@
+import type { PropsWithChildren } from "react";
+
+import { BrandLogo } from "@/components/shared/branding/BrandLogo";
+
+import { AuthBrandPanel } from "./AuthBrandPanel";
+
+export function AuthLayout({ children }: PropsWithChildren) {
+  return (
+    <div className="flex min-h-dvh w-full overflow-hidden bg-elevation-fill-default-2">
+      <AuthBrandPanel />
+
+      <section className="m-4 flex w-full flex-1 flex-col rounded-sm bg-elevation-fill-default-1 lg:m-0 lg:rounded-none">
+        <div className="flex flex-1 items-center justify-center px-4 py-10 sm:px-8">
+          <div className="w-full max-w-[440px]">{children}</div>
+        </div>
+
+        <div className="flex justify-center pb-6 lg:hidden">
+          <BrandLogo className="text-interactive-contained-primary-idle" />
+        </div>
+      </section>
+    </div>
+  );
+}

package/templates/space/apps/fe/src/components/features/auth/LoginPage.tsx

@@ -0,0 +1,111 @@
+import { Alert, Button, PasswordInput, TextButton, TextInput, Typography, useForm } from "@povio/ui/tanstack";
+import { useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { useAuth } from "@/hooks/useAuth";
+import { UserAuthModels } from "@/openapi/userAuth/userAuth.models";
+import { UserAuthQueries } from "@/openapi/userAuth/userAuth.queries";
+
+export function LoginPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { updateTokens, userPromise } = useAuth();
+
+  const [error, setError] = useState<string | null>(null);
+
+  const loginMutation = UserAuthQueries.useUserAuthLocalPasswordLogin();
+
+  const form = useForm({
+    zodSchema: UserAuthModels.UserAuthPasswordLoginRequestSchema,
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  const completeLogin = async (tokens: UserAuthModels.AuthnTokenResponse) => {
+    updateTokens?.(tokens.accessToken, tokens.refreshToken);
+    const user = await userPromise?.();
+    if (user === null) {
+      throw new Error(t(($) => $.auth.login.form.loginFailed));
+    }
+    await navigate({ to: "/" });
+  };
+
+  const onSubmit = async (data: UserAuthModels.UserAuthPasswordLoginRequest) => {
+    setError(null);
+    try {
+      const tokens = await loginMutation.mutateAsync({ data });
+      await completeLogin(tokens);
+    } catch (error) {
+      setError(error instanceof Error ? error.message : t(($) => $.auth.login.form.loginFailed));
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-3">
+        <Typography
+          variant="prominent-1"
+          size="title-2"
+          as="h2"
+          className="text-text-default-1"
+        >
+          {t(($) => $.auth.login.form.title)}
+        </Typography>
+      </div>
+
+      {error && (
+        <Alert
+          color="error"
+          text={error}
+        />
+      )}
+
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex flex-col gap-8"
+      >
+        <div className="flex flex-col gap-4">
+          <TextInput
+            field={{ form, name: "email" }}
+            label={t(($) => $.auth.login.form.email)}
+            placeholder={t(($) => $.auth.login.form.emailPlaceholder)}
+            size="default"
+          />
+
+          <PasswordInput
+            field={{ form, name: "password" }}
+            label={t(($) => $.auth.login.form.password)}
+            placeholder={t(($) => $.auth.login.form.passwordPlaceholder)}
+            size="default"
+          />
+        </div>
+
+        <div className="flex flex-col gap-4">
+          <Button
+            width="fill"
+            type="submit"
+            isDisabled={loginMutation.isPending}
+            isLoading={loginMutation.isPending}
+          >
+            {t(($) => $.auth.login.form.submit)}
+          </Button>
+
+        </div>
+      </form>
+
+      <div className="flex justify-center gap-1 border-elevation-outline-default-1 border-t pt-6">
+        <Typography
+          size="label-2"
+          className="text-text-default-2"
+        >
+          {t(($) => $.auth.login.form.noAccount)}
+        </Typography>
+
+        <TextButton link={{ to: "/register" }}>{t(($) => $.auth.login.form.registerLink)}</TextButton>
+      </div>
+    </div>
+  );
+}

package/templates/space/apps/fe/src/components/features/auth/RegisterPage.tsx

@@ -0,0 +1,143 @@
+import { Alert, Button, PasswordInput, TextButton, TextInput, Typography, useForm } from "@povio/ui/tanstack";
+import { useNavigate } from "@tanstack/react-router";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { z } from "zod";
+
+import { useAuth } from "@/hooks/useAuth";
+import { UserAuthModels } from "@/openapi/userAuth/userAuth.models";
+import { UserAuthQueries } from "@/openapi/userAuth/userAuth.queries";
+
+export function RegisterPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { updateTokens, userPromise } = useAuth();
+
+  const [error, setError] = useState<string | null>(null);
+
+  const registerMutation = UserAuthQueries.useRegister();
+  const registerFormSchema = useMemo(
+    () =>
+      UserAuthModels.UserAuthPasswordRegisterRequestSchema.extend({
+        confirmPassword: z.string().min(
+          1,
+          t(($) => $.auth.register.form.confirmPasswordRequired),
+        ),
+      }).refine((data) => data.password === data.confirmPassword, {
+        path: ["confirmPassword"],
+        message: t(($) => $.auth.register.form.passwordsDoNotMatch),
+      }),
+    [t],
+  );
+
+  const form = useForm({
+    zodSchema: registerFormSchema,
+    defaultValues: {
+      email: "",
+      name: "",
+      password: "",
+      confirmPassword: "",
+    },
+  });
+
+  const onSubmit = async (formData: z.infer<typeof registerFormSchema>) => {
+    setError(null);
+    const data: UserAuthModels.UserAuthPasswordRegisterRequest = {
+      email: formData.email,
+      name: formData.name,
+      password: formData.password,
+    };
+
+    try {
+      const tokens = await registerMutation.mutateAsync({ data });
+      updateTokens?.(tokens.accessToken, tokens.refreshToken);
+      const user = await userPromise?.();
+      if (user === null) {
+        throw new Error(t(($) => $.auth.register.form.registrationFailed));
+      }
+      await navigate({ to: "/" });
+    } catch (error) {
+      setError(error instanceof Error ? error.message : t(($) => $.auth.register.form.registrationFailed));
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-8">
+      <Typography
+        variant="prominent-1"
+        size="title-2"
+        as="h2"
+        className="text-center text-text-default-1"
+      >
+        {t(($) => $.auth.register.form.title)}
+      </Typography>
+
+      {error && (
+        <Alert
+          color="error"
+          text={error}
+        />
+      )}
+
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex flex-col gap-8"
+      >
+        <div className="flex flex-col gap-4">
+          <TextInput
+            field={{ form, name: "email" }}
+            label={t(($) => $.auth.register.form.email)}
+            placeholder={t(($) => $.auth.register.form.emailPlaceholder)}
+          />
+
+          <TextInput
+            field={{ form, name: "name" }}
+            label={t(($) => $.auth.register.form.name)}
+            placeholder={t(($) => $.auth.register.form.namePlaceholder)}
+          />
+
+          <PasswordInput
+            field={{ form, name: "password" }}
+            label={t(($) => $.auth.register.form.password)}
+            placeholder={t(($) => $.auth.register.form.passwordPlaceholder)}
+          />
+
+          <div className="flex flex-col gap-2">
+            <PasswordInput
+              field={{ form, name: "confirmPassword" }}
+              label={t(($) => $.auth.register.form.confirmPassword)}
+              placeholder={t(($) => $.auth.register.form.confirmPasswordPlaceholder)}
+            />
+
+            <Typography
+              size="label-2"
+              className="text-text-default-2"
+            >
+              {t(($) => $.auth.register.form.passwordRequirements)}
+            </Typography>
+          </div>
+        </div>
+
+        <Button
+          width="fill"
+          type="submit"
+          isDisabled={registerMutation.isPending}
+          isLoading={registerMutation.isPending}
+        >
+          {t(($) => $.auth.register.form.submit)}
+        </Button>
+      </form>
+
+      <div className="flex justify-center gap-1">
+        <Typography
+          size="label-2"
+          className="text-text-default-2"
+        >
+          {t(($) => $.auth.register.form.hasAccount)}
+        </Typography>
+
+        <TextButton link={{ to: "/login" }}>{t(($) => $.auth.register.form.loginLink)}</TextButton>
+      </div>
+    </div>
+  );
+}

package/templates/space/apps/fe/src/components/features/home/HomePage.tsx

@@ -0,0 +1,21 @@
+import { Typography } from "@povio/ui";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@/components/shared/page/PageHeader";
+
+export function HomePage() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader title={t(($) => $.home.title)} />
+
+      <Typography
+        size="body-2"
+        as="p"
+      >
+        {t(($) => $.home.message)}
+      </Typography>
+    </div>
+  );
+}