robodev 0.11.0 → 0.12.0

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>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/details/PlanetDetailsPage.tsx

@@ -0,0 +1,139 @@
+import { Button, Typography } from "@povio/ui";
+import { Pencil } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@/components/shared/page/PageHeader";
+import { Card } from "@/components/shared/ui/Card";
+import { useAuth } from "@/hooks/useAuth";
+import type { PlanetModels } from "@/openapi/planet/planet.models";
+import { DateUtils } from "@/utils/date.utils";
+import { getFallbackImageUrl } from "@/utils/image-fallback";
+
+interface PlanetDetailsPageProps {
+  planet: PlanetModels.PlanetsGetResponseDto;
+}
+
+export function PlanetDetailsPage({ planet }: PlanetDetailsPageProps) {
+  const { t } = useTranslation();
+  const { user } = useAuth();
+
+  const imageSrc = planet.image?.url ?? getFallbackImageUrl({ width: 800, height: 450 });
+  const createdDate = DateUtils.formatDate(new Date(planet.createdAt));
+  const updatedDate = DateUtils.formatDate(new Date(planet.updatedAt));
+  const discoveryDate = planet.discoveryDate ? DateUtils.formatDate(new Date(planet.discoveryDate)) : null;
+  const creatorName = planet.creatorName ?? t(($) => $.planets.card.unknownCreator);
+  // Frontend ownership checks are for UI affordances only; the router enforces ownership again on update/delete.
+  const canEdit = user?.id === planet.userId;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        enableBack
+        backProps={{ backLink: { to: "/planets" } }}
+        title={planet.name}
+        actions={
+          canEdit && (
+            <Button
+              size="s"
+              color="primary"
+              icon={Pencil}
+              link={{ to: "/planets/$id/edit", params: { id: planet.id } }}
+            >
+              {t(($) => $.planets.actions.edit)}
+            </Button>
+          )
+        }
+      />
+
+      <Card className="max-w-3xl overflow-hidden p-0">
+        <div className="aspect-video w-full bg-elevation-fill-default-2">
+          <img
+            src={imageSrc}
+            alt=""
+            className="h-full w-full object-cover"
+          />
+        </div>
+        <div className="flex flex-col gap-5 p-1">
+          <Typography
+            size="title-5"
+            variant="prominent-1"
+            as="h3"
+          >
+            {planet.name}
+          </Typography>
+
+          {planet.description && (
+            <Typography
+              size="body-3"
+              as="p"
+              className="whitespace-pre-wrap text-text-default-2"
+            >
+              {planet.description}
+            </Typography>
+          )}
+
+          <dl className="flex flex-col gap-4 border-elevation-outline-default-1 border-t pt-4 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-4">
+            <div className="flex flex-col gap-1">
+              <Typography
+                size="label-3"
+                className="text-text-default-2"
+              >
+                {t(($) => $.planets.detail.createdBy)}
+              </Typography>
+              <Typography
+                size="body-3"
+                className="text-text-default-1"
+              >
+                {creatorName}
+              </Typography>
+            </div>
+            <div className="flex flex-col gap-1">
+              <Typography
+                size="label-3"
+                className="text-text-default-2"
+              >
+                {t(($) => $.planets.detail.created)}
+              </Typography>
+              <Typography
+                size="body-3"
+                className="text-text-default-1"
+              >
+                {createdDate}
+              </Typography>
+            </div>
+            <div className="flex flex-col gap-1 sm:col-span-2">
+              <Typography
+                size="label-3"
+                className="text-text-default-2"
+              >
+                {t(($) => $.planets.detail.updated)}
+              </Typography>
+              <Typography
+                size="body-3"
+                className="text-text-default-1"
+              >
+                {updatedDate}
+              </Typography>
+            </div>
+            {discoveryDate && (
+              <div className="flex flex-col gap-1 sm:col-span-2">
+                <Typography
+                  size="label-3"
+                  className="text-text-default-2"
+                >
+                  {t(($) => $.planets.detail.discoveryDate)}
+                </Typography>
+                <Typography
+                  size="body-3"
+                  className="text-text-default-1"
+                >
+                  {discoveryDate}
+                </Typography>
+              </div>
+            )}
+          </dl>
+        </div>
+      </Card>
+    </div>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/details/PlanetEditPage.tsx

@@ -0,0 +1,266 @@
+import {
+  Button,
+  Confirmation,
+  DatePicker,
+  FileUpload,
+  Modal,
+  QueryAutocomplete,
+  TextArea,
+  TextInput,
+  Typography,
+  useForm,
+  useFormValue,
+  useToast,
+} from "@povio/ui/tanstack";
+import { useNavigate } from "@tanstack/react-router";
+import { Trash } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { RowInputWrapper } from "@/components/shared/forms/RowInputWrapper";
+import { AlienQueries } from "@/openapi/alien/alien.queries";
+import { MediaModels } from "@/openapi/media/media.models";
+import { PlanetModels } from "@/openapi/planet/planet.models";
+import { PlanetQueries } from "@/openapi/planet/planet.queries";
+import { useMediaUploadHandler } from "@/utils/media-upload";
+
+interface PlanetEditPageProps {
+  planet: PlanetModels.PlanetsGetResponseDto;
+  onClose?: () => void;
+  onDeleted?: () => void;
+  onSaved?: () => void;
+}
+
+export function PlanetEditPage({ planet, onClose, onDeleted, onSaved }: PlanetEditPageProps) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const updatePlanet = PlanetQueries.useUpdate();
+  const deletePlanet = PlanetQueries.useDeleteApiPlanetsById();
+  const { successToast, errorToast } = useToast();
+  const { confirm } = Confirmation.useConfirmation();
+  const [previewImageUrl, setPreviewImageUrl] = useState<string | undefined>(planet.image?.url);
+  // Seed the form from the fetched record, then reset when route data changes between planet IDs.
+  const form = useForm({
+    zodSchema: PlanetModels.PlanetsCreateRequestDtoSchema,
+    defaultValues: {
+      name: planet.name,
+      alienId: planet.alienId ?? undefined,
+      discoveryDate: planet.discoveryDate ?? undefined,
+      description: planet.description ?? "",
+      image: planet.image ? { id: planet.image.id } : undefined,
+    },
+  });
+
+  useEffect(() => {
+    form.reset({
+      name: planet.name,
+      alienId: planet.alienId ?? undefined,
+      discoveryDate: planet.discoveryDate ?? undefined,
+      description: planet.description ?? "",
+      image: planet.image ? { id: planet.image.id } : undefined,
+    });
+    setPreviewImageUrl(planet.image?.url);
+  }, [form, planet]);
+
+  const handleImageUpload = useMediaUploadHandler({
+    resourceName: MediaModels.MediaResourceName["planet-image"],
+    onUploaded: (media) => {
+      form.setFieldValue("image", { id: media.id });
+      setPreviewImageUrl(media.previewUrl);
+    },
+  });
+
+  const handleImageChange = (_file: File | null) => {
+    // When clearing file, keep current image
+    if (!_file) {
+      form.setFieldValue("image", planet.image ? { id: planet.image.id } : undefined);
+      setPreviewImageUrl(planet.image?.url);
+    }
+  };
+
+  const onSubmit = async (data: PlanetModels.PlanetsCreateRequestDto) => {
+    try {
+      await updatePlanet.mutateAsync({ id: planet.id, data });
+      successToast({ text: t(($) => $.planets.edit.success) });
+      if (onSaved) {
+        onSaved();
+      } else {
+        navigate({ to: "/planets/$id", params: { id: planet.id } });
+      }
+    } catch {
+      errorToast({ text: t(($) => $.planets.edit.error) });
+    }
+  };
+
+  const handleDelete = async () => {
+    // Destructive actions should go through a shared confirmation flow before calling the mutation.
+    const confirmed = await confirm({
+      heading: t(($) => $.planets.removeConfirm.heading),
+      description: t(($) => $.planets.removeConfirm.description, { name: planet.name }),
+      confirmLabel: t(($) => $.planets.removeConfirm.confirm),
+      cancelLabel: t(($) => $.planets.removeConfirm.cancel),
+      confirmColor: "error",
+      cancelVariant: "outlined",
+      buttonSize: "s",
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      await deletePlanet.mutateAsync({ id: planet.id });
+      successToast({ text: t(($) => $.planets.removeConfirm.success) });
+      if (onDeleted) {
+        onDeleted();
+      } else {
+        navigate({ to: "/planets" });
+      }
+    } catch {
+      errorToast({ text: t(($) => $.planets.removeConfirm.error) });
+    }
+  };
+
+  const currentImage = useFormValue(form, (values) => values.image);
+  const currentImageUrl = planet.image && currentImage?.id === planet.image.id ? planet.image.url : previewImageUrl;
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    } else {
+      navigate({ to: "/planets/$id", params: { id: planet.id } });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen
+      onClose={handleClose}
+      aside="right"
+      showCloseIcon
+      modalClassName="h-full min-w-0 overflow-y-auto"
+    >
+      <div className="mb-6 flex items-center justify-between gap-4 pr-10">
+        <Typography
+          as="h2"
+          size="title-5"
+          variant="prominent-1"
+          className="text-text-default-1"
+        >
+          {t(($) => $.planets.edit.title)}
+        </Typography>
+
+        <Button
+          type="button"
+          size="xs"
+          color="error"
+          variant="outlined"
+          icon={Trash}
+          onPress={handleDelete}
+          isDisabled={deletePlanet.isPending}
+        >
+          {t(($) => $.planets.actions.remove)}
+        </Button>
+      </div>
+
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex w-full min-w-0 flex-col gap-4"
+      >
+        <RowInputWrapper
+          label={t(($) => $.planets.edit.name)}
+          isRequired
+        >
+          <TextInput
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "name" }}
+            label={t(($) => $.planets.edit.name)}
+            placeholder={t(($) => $.planets.edit.namePlaceholder)}
+            hideLabel
+            isRequired
+          />
+        </RowInputWrapper>
+
+        <RowInputWrapper label={t(($) => $.planets.edit.alien)}>
+          <QueryAutocomplete
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "alienId" }}
+            query={AlienQueries.useGetLabels}
+            label={t(($) => $.planets.edit.alien)}
+            placeholder={t(($) => $.planets.edit.alienPlaceholder)}
+            hideLabel
+          />
+        </RowInputWrapper>
+
+        <RowInputWrapper label={t(($) => $.planets.edit.discoveryDate)}>
+          <DatePicker
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "discoveryDate" }}
+            label={t(($) => $.planets.edit.discoveryDate)}
+            placeholder={t(($) => $.planets.edit.discoveryDatePlaceholder)}
+            hideLabel
+          />
+        </RowInputWrapper>
+
+        <RowInputWrapper label={t(($) => $.planets.edit.description)}>
+          <TextArea
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "description" }}
+            label={t(($) => $.planets.edit.description)}
+            placeholder={t(($) => $.planets.edit.descriptionPlaceholder)}
+            hideLabel
+          />
+        </RowInputWrapper>
+
+        <div className="flex flex-col gap-2">
+          <FileUpload
+            label={t(($) => $.planets.edit.image)}
+            emptyText={t(($) => $.planets.edit.imageEmptyText)}
+            uploadText={t(($) => $.planets.edit.imageUploadText)}
+            browseText={t(($) => $.planets.edit.imageBrowseText)}
+            acceptedFileTypes={["image/jpeg", "image/png", "image/webp"]}
+            onChange={handleImageChange}
+            fileUpload={handleImageUpload}
+          />
+          {currentImageUrl && (
+            <div className="aspect-video w-full overflow-hidden rounded-sm border border-elevation-outline-default-1 bg-elevation-fill-default-2">
+              <img
+                src={currentImageUrl}
+                alt=""
+                className="h-full w-full object-cover"
+              />
+            </div>
+          )}
+        </div>
+
+        <div className="mt-6 flex items-center justify-end gap-2 self-end">
+          <Button
+            type="button"
+            variant="outlined"
+            size="xs"
+            color="secondary"
+            width="hug"
+            onPress={handleClose}
+          >
+            {t(($) => $.planets.edit.cancel)}
+          </Button>
+
+          <Button
+            type="submit"
+            variant="contained"
+            size="xs"
+            color="primary"
+            width="hug"
+            isDisabled={updatePlanet.isPending}
+            isLoading={updatePlanet.isPending}
+          >
+            {t(($) => $.planets.edit.submit)}
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  );
+}