robodev 0.12.0 → 0.13.0

package/templates/auth-chat/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/auth-chat/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/auth-chat/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/auth-chat/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/auth-chat/apps/fe/src/components/features/chat/ChatPage.tsx

@@ -0,0 +1,105 @@
+import { Button, TextArea, Typography, useForm, useToast } from "@povio/ui/tanstack";
+import { useTranslation } from "react-i18next";
+
+import { LoadingState } from "@/components/shared/layout/LoadingState";
+import { PageHeader } from "@/components/shared/page/PageHeader";
+import { Card } from "@/components/shared/ui/Card";
+import { MessageModels } from "@/openapi/message/message.models";
+import { MessageQueries } from "@/openapi/message/message.queries";
+
+import { InviteForm } from "./InviteForm";
+
+export function ChatPage() {
+  const { t } = useTranslation();
+  const { errorToast } = useToast();
+  const { data: messages, isLoading } = MessageQueries.useGetAll({
+    refetchInterval: 2500,
+  });
+  const createMessage = MessageQueries.useCreate();
+
+  const form = useForm({
+    zodSchema: MessageModels.MessagesCreateRequestSchema,
+    defaultValues: {
+      body: "",
+    },
+  });
+
+  const onSubmit = async (data: MessageModels.MessagesCreateRequest) => {
+    try {
+      await createMessage.mutateAsync({ data });
+      form.reset({ body: "" });
+    } catch {
+      errorToast({ text: t(($) => $.chat.composer.error) });
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader title={t(($) => $.chat.title)} />
+
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_20rem]">
+        <Card title={t(($) => $.chat.roomTitle)}>
+          <div className="flex flex-col gap-4">
+            {isLoading ? (
+              <LoadingState />
+            ) : !messages || messages.length === 0 ? (
+              <Typography
+                size="body-3"
+                className="text-text-default-2"
+              >
+                {t(($) => $.chat.empty)}
+              </Typography>
+            ) : (
+              <div className="flex max-h-96 flex-col gap-3 overflow-y-auto">
+                {messages.map((message) => (
+                  <div
+                    key={message.id}
+                    className="flex flex-col gap-1 rounded-sm border-elevation-outline-default-1 border-b pb-3"
+                  >
+                    <Typography
+                      size="label-3"
+                      variant="prominent-1"
+                      className="text-text-default-1"
+                    >
+                      {message.authorName?.trim() || message.authorEmail}
+                    </Typography>
+                    <Typography
+                      size="body-3"
+                      className="whitespace-pre-wrap text-text-default-1"
+                    >
+                      {message.body}
+                    </Typography>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="flex flex-col gap-3"
+            >
+              <TextArea
+                field={{ form, name: "body" }}
+                label={t(($) => $.chat.composer.label)}
+                placeholder={t(($) => $.chat.composer.placeholder)}
+                isRequired
+              />
+              <div className="flex justify-end">
+                <Button
+                  type="submit"
+                  isLoading={createMessage.isPending}
+                >
+                  {createMessage.isPending
+                    ? t(($) => $.chat.composer.submitLoading)
+                    : t(($) => $.chat.composer.submit)}
+                </Button>
+              </div>
+            </form>
+          </div>
+        </Card>
+
+        <InviteForm />
+      </div>
+    </div>
+  );
+}

package/templates/auth-chat/apps/fe/src/components/features/chat/InviteForm.tsx

@@ -0,0 +1,84 @@
+import { Alert, Button, TextInput, Typography, useForm, useToast } from "@povio/ui/tanstack";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Card } from "@/components/shared/ui/Card";
+import { InviteModels } from "@/openapi/invite/invite.models";
+import { InviteQueries } from "@/openapi/invite/invite.queries";
+
+export function InviteForm() {
+  const { t } = useTranslation();
+  const { successToast, errorToast } = useToast();
+  const sendInvite = InviteQueries.useCreate();
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const form = useForm({
+    zodSchema: InviteModels.InviteCreateRequestSchema,
+    defaultValues: {
+      to: "",
+    },
+  });
+
+  const onSubmit = async (data: InviteModels.InviteCreateRequest) => {
+    setSuccess(false);
+    setError(null);
+    try {
+      await sendInvite.mutateAsync({ data });
+      setSuccess(true);
+      successToast({ text: t(($) => $.invite.success) });
+      form.reset({ to: "" });
+    } catch {
+      const message = t(($) => $.invite.error);
+      setError(message);
+      errorToast({ text: message });
+    }
+  };
+
+  return (
+    <Card title={t(($) => $.invite.title)}>
+      <div className="flex flex-col gap-4">
+        <Typography
+          size="body-3"
+          className="text-text-default-2"
+        >
+          {t(($) => $.invite.description)}
+        </Typography>
+
+        {success ? (
+          <Alert
+            color="success"
+            text={t(($) => $.invite.success)}
+          />
+        ) : null}
+        {error ? (
+          <Alert
+            color="error"
+            text={error}
+          />
+        ) : null}
+
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="flex flex-col gap-4"
+        >
+          <TextInput
+            field={{ form, name: "to" }}
+            label={t(($) => $.invite.email)}
+            placeholder={t(($) => $.invite.emailPlaceholder)}
+            type="email"
+            isRequired
+          />
+          <div className="flex justify-end">
+            <Button
+              type="submit"
+              isLoading={sendInvite.isPending}
+            >
+              {sendInvite.isPending ? t(($) => $.invite.submitLoading) : t(($) => $.invite.submit)}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </Card>
+  );
+}

package/templates/auth-chat/apps/fe/src/components/features/profile/ProfilePage.tsx

@@ -0,0 +1,96 @@
+import { Button, TextInput, Typography, useForm, useToast } from "@povio/ui/tanstack";
+import { Check } from "lucide-react";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+
+import { LoadingState } from "@/components/shared/layout/LoadingState";
+import { PageHeader } from "@/components/shared/page/PageHeader";
+import { Card } from "@/components/shared/ui/Card";
+import { useAuth } from "@/hooks/useAuth";
+import { UserModels } from "@/openapi/user/user.models";
+import { UserQueries } from "@/openapi/user/user.queries";
+
+export function ProfilePage() {
+  const { t } = useTranslation();
+  const { isAuthenticated, user } = useAuth();
+  const { successToast, errorToast } = useToast();
+
+  const { data: fetchedUser, isLoading } = UserQueries.useGet({ enabled: isAuthenticated });
+  const fullUser = fetchedUser ?? user;
+  const updateProfile = UserQueries.useUpdate();
+
+  const form = useForm({
+    zodSchema: UserModels.UserMeUpdateRequestSchema,
+    defaultValues: {
+      name: "",
+      email: "",
+    },
+  });
+
+  useEffect(() => {
+    if (fullUser) {
+      form.reset({
+        name: fullUser.name ?? "",
+        email: fullUser.email ?? "",
+      });
+    }
+  }, [form, fullUser]);
+
+  const onSubmit = async (data: UserModels.UserMeUpdateRequest) => {
+    try {
+      await updateProfile.mutateAsync({ data });
+      successToast({ text: t(($) => $.profile.form.notifications.success) });
+    } catch {
+      errorToast({ text: t(($) => $.profile.form.notifications.error) });
+    }
+  };
+
+  if (isLoading && !fullUser) {
+    return <LoadingState />;
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader title={t(($) => $.profile.form.title)} />
+
+      <Card>
+        <div className="flex flex-col gap-4">
+          <Typography
+            size="body-3"
+            className="text-text-default-2"
+          >
+            {t(($) => $.profile.form.description)}
+          </Typography>
+
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col gap-6"
+          >
+            <TextInput
+              field={{ form, name: "email" }}
+              label={t(($) => $.profile.form.email)}
+              placeholder={t(($) => $.profile.form.emailPlaceholder)}
+            />
+            <TextInput
+              field={{ form, name: "name" }}
+              label={t(($) => $.profile.form.name)}
+              placeholder={t(($) => $.profile.form.namePlaceholder)}
+            />
+
+            <div className="flex justify-end">
+              <Button
+                type="submit"
+                size="s"
+                icon={Check}
+                isDisabled={updateProfile.isPending}
+                isLoading={updateProfile.isPending}
+              >
+                {updateProfile.isPending ? t(($) => $.profile.form.submitLoading) : t(($) => $.profile.form.submit)}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </Card>
+    </div>
+  );
+}

package/templates/auth-chat/apps/fe/src/components/googleAnalytics/GoogleAnalytics.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from "react";
+
+import { AppConfig } from "@/config/app.config";
+
+const { measurementId } = AppConfig.googleAnalytics;
+
+const GoogleAnalytics = () => {
+  const isInitializedRef = useRef(false);
+
+  useEffect(() => {
+    if (isInitializedRef.current || !measurementId || (window as any).gtag) {
+      return;
+    }
+    isInitializedRef.current = true;
+
+    const script1 = document.createElement("script");
+    script1.async = true;
+    script1.src = `https://www.googletagmanager.com/gtag/js?id=${measurementId}`;
+
+    const script2 = document.createElement("script");
+    script2.innerHTML = `
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', '${measurementId}');
+    `;
+
+    document.head.appendChild(script1);
+    document.head.appendChild(script2);
+  }, []);
+
+  return null;
+};
+
+export default GoogleAnalytics;

package/templates/auth-chat/apps/fe/src/components/layout/AppLayout.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+
+import { AppHeader } from "./app-header/AppHeader";
+
+interface AppLayoutProps {
+  children: ReactNode;
+}
+
+export function AppLayout({ children }: AppLayoutProps) {
+  return (
+    <div className="flex min-h-dvh w-full flex-col">
+      <AppHeader />
+
+      <main className="flex w-full flex-1 flex-col">
+        <div className="w-full flex-1 px-4 py-4">{children}</div>
+      </main>
+    </div>
+  );
+}