From d970f742f936ae6737cc2c3dfb0b34008f41afbd Mon Sep 17 00:00:00 2001
From: cesarLima1 <cesmaulim@gmail.com>
Date: Mon, 25 Nov 2024 09:16:28 -0400
Subject: [PATCH 1/2] [TM-1385] add button and functionality to create user for
 super admin

---
 .../dataProviders/userDataProvider.ts         | 15 ++++
 src/admin/components/App.tsx                  |  1 +
 src/admin/modules/index.tsx                   |  4 +-
 .../modules/user/components/UserCreate.tsx    | 76 +++++++++++++++++++
 .../modules/user/components/UserShowAside.tsx | 24 +++++-
 src/generated/apiComponents.ts                | 65 ++++++++++++++++
 src/generated/apiSchemas.ts                   | 13 ++++
 7 files changed, 196 insertions(+), 2 deletions(-)
 create mode 100644 src/admin/modules/user/components/UserCreate.tsx

diff --git a/src/admin/apiProvider/dataProviders/userDataProvider.ts b/src/admin/apiProvider/dataProviders/userDataProvider.ts
index 1e2dcffd6..4cf136351 100644
--- a/src/admin/apiProvider/dataProviders/userDataProvider.ts
+++ b/src/admin/apiProvider/dataProviders/userDataProvider.ts
@@ -7,11 +7,13 @@ import {
   fetchGetV2AdminUsersExport,
   fetchGetV2AdminUsersMulti,
   fetchGetV2AdminUsersUUID,
+  fetchPostV2AdminUsersCreate,
   fetchPutV2AdminUsersUUID,
   GetV2AdminUsersError,
   GetV2AdminUsersExportError,
   GetV2AdminUsersMultiError,
   GetV2AdminUsersUUIDError,
+  PostV2AdminUsersCreateError,
   PutV2AdminUsersUUIDError
 } from "@/generated/apiComponents";
 import { V2AdminUserRead } from "@/generated/apiSchemas";
@@ -34,6 +36,19 @@ const normalizeUserObject = (item: V2AdminUserRead) => ({
 });
 
 export const userDataProvider: UserDataProvider = {
+  //@ts-ignore
+  async create(__, params) {
+    try {
+      const response = await fetchPostV2AdminUsersCreate({
+        body: params.data
+      });
+
+      // @ts-expect-error
+      return { data: { ...response.data, id: response.id } };
+    } catch (err) {
+      throw getFormattedErrorForRA(err as PostV2AdminUsersCreateError);
+    }
+  },
   //@ts-ignore
   async getList(_, params) {
     try {
diff --git a/src/admin/components/App.tsx b/src/admin/components/App.tsx
index a3b4e8db5..2a07ea914 100644
--- a/src/admin/components/App.tsx
+++ b/src/admin/components/App.tsx
@@ -34,6 +34,7 @@ const App = () => {
               list={modules.user.List}
               show={modules.user.Show}
               edit={modules.user.Edit}
+              create={modules.user.Create}
               icon={() => <Icon className="h-8 w-8" name={IconNames.USERS} />}
             />
             <Resource
diff --git a/src/admin/modules/index.tsx b/src/admin/modules/index.tsx
index 6a3551913..98c103770 100644
--- a/src/admin/modules/index.tsx
+++ b/src/admin/modules/index.tsx
@@ -37,6 +37,7 @@ import SiteReportShow from "./siteReports/components/SiteReportShow";
 import { SiteReportsList } from "./siteReports/components/SiteReportsList";
 import SiteShow from "./sites/components/SiteShow";
 import { SitesList } from "./sites/components/SitesList";
+import UserCreate from "./user/components/UserCreate";
 import UserEdit from "./user/components/UserEdit";
 import { UserList } from "./user/components/UserList";
 import { UserShow } from "./user/components/UserShow";
@@ -45,7 +46,8 @@ const user = {
   ResourceName: "user",
   List: UserList,
   Show: UserShow,
-  Edit: UserEdit
+  Edit: UserEdit,
+  Create: UserCreate
 };
 
 const organisation = {
diff --git a/src/admin/modules/user/components/UserCreate.tsx b/src/admin/modules/user/components/UserCreate.tsx
new file mode 100644
index 000000000..c1b3526dc
--- /dev/null
+++ b/src/admin/modules/user/components/UserCreate.tsx
@@ -0,0 +1,76 @@
+import {
+  AutocompleteInput,
+  Create,
+  ReferenceInput,
+  SelectArrayInput,
+  SelectInput,
+  SimpleForm,
+  TextInput
+} from "react-admin";
+import * as yup from "yup";
+
+import { useGetUserRole } from "@/admin/hooks/useGetUserRole";
+import {
+  countriesChoices,
+  directFrameworkChoices,
+  frameworkChoices,
+  userPrimaryRoleChoices
+} from "@/admin/modules/user/const";
+import { validateForm } from "@/admin/utils/forms";
+
+import modules from "../..";
+
+const UserCreate = () => {
+  const { isSuperAdmin } = useGetUserRole();
+
+  const schemaObject: any = {
+    first_name: yup.string().nullable().required("First Name is required"),
+    last_name: yup.string().nullable().required("Last Name is required"),
+    email_address: yup.string().nullable().required("Email Address is required").email("Invalid email format"),
+    phone_number: yup.string().nullable(),
+    job_role: yup.string().nullable(),
+    organisation: yup.object().nullable(),
+    program: yup.string().nullable(),
+    country: yup.string().nullable()
+  };
+
+  if (isSuperAdmin) {
+    schemaObject.role = yup.string().required("Role is required");
+  }
+
+  return (
+    <Create title="Create User">
+      <SimpleForm validate={validateForm(yup.object(schemaObject))}>
+        <TextInput source="first_name" label="First Name" fullWidth />
+        <TextInput source="last_name" label="Last Name" fullWidth />
+        <TextInput source="email_address" label="Professional Email Address" fullWidth type="email" />
+        <TextInput source="phone_number" label="Professional Phone Number" fullWidth type="tel" />
+        <TextInput source="job_role" label="Job Title" fullWidth />
+
+        <ReferenceInput
+          label="Organisation"
+          source="organisation.uuid"
+          reference={modules.organisation.ResourceName}
+          options={{ fullWidth: true }}
+        >
+          <AutocompleteInput label="Organisation" optionText="name" fullWidth />
+        </ReferenceInput>
+
+        {isSuperAdmin && <SelectInput source="role" label="Role" choices={userPrimaryRoleChoices} fullWidth />}
+
+        <SelectInput source="program" label="Program" choices={frameworkChoices} fullWidth />
+
+        <SelectInput source="country" label="Country" choices={countriesChoices} fullWidth />
+
+        <SelectArrayInput
+          source="direct_frameworks"
+          label="Direct Frameworks"
+          choices={directFrameworkChoices}
+          fullWidth
+        />
+      </SimpleForm>
+    </Create>
+  );
+};
+
+export default UserCreate;
diff --git a/src/admin/modules/user/components/UserShowAside.tsx b/src/admin/modules/user/components/UserShowAside.tsx
index 575191f03..e0b8947ab 100644
--- a/src/admin/modules/user/components/UserShowAside.tsx
+++ b/src/admin/modules/user/components/UserShowAside.tsx
@@ -1,9 +1,20 @@
 import { Box, Button, Divider, Grid, Stack, Typography } from "@mui/material";
 import { useState } from "react";
-import { BooleanField, RaRecord, SelectField, TextField, useNotify, useRefresh, useShowContext } from "react-admin";
+import {
+  BooleanField,
+  RaRecord,
+  SelectField,
+  TextField,
+  useNotify,
+  useRedirect,
+  useRefresh,
+  useShowContext
+} from "react-admin";
+import { When } from "react-if";
 
 import Aside from "@/admin/components/Aside/Aside";
 import { ConfirmationDialog } from "@/admin/components/Dialogs/ConfirmationDialog";
+import { useGetUserRole } from "@/admin/hooks/useGetUserRole";
 import { ResetPasswordDialog } from "@/admin/modules/user/components/ResetPasswordDialog";
 import { usePatchV2AdminUsersVerifyUUID, usePostAuthReset, usePostV2UsersResend } from "@/generated/apiComponents";
 import { V2AdminUserRead } from "@/generated/apiSchemas";
@@ -13,6 +24,8 @@ import { userPrimaryRoleChoices } from "../const";
 export const UserShowAside = () => {
   const notify = useNotify();
   const refresh = useRefresh();
+  const redirect = useRedirect();
+  const { isSuperAdmin } = useGetUserRole();
 
   const [showResetPasswordDialog, setShowResetPasswordDialog] = useState(false);
   const [showVerifyEmailDialog, setShowVerifyEmailDialog] = useState(false);
@@ -41,6 +54,10 @@ export const UserShowAside = () => {
     }
   });
 
+  const handleCreateUser = () => {
+    redirect("create", "user");
+  };
+
   return (
     <>
       <Aside title="User Review">
@@ -65,6 +82,11 @@ export const UserShowAside = () => {
         <Divider />
         <Box pt={2}>
           <Stack direction="row" alignItems="center" gap={2} flexWrap="wrap">
+            <When condition={isSuperAdmin}>
+              <Button variant="contained" onClick={handleCreateUser}>
+                Create User
+              </Button>
+            </When>
             <Button
               variant="contained"
               onClick={() =>
diff --git a/src/generated/apiComponents.ts b/src/generated/apiComponents.ts
index 294fcbbb5..f051633fc 100644
--- a/src/generated/apiComponents.ts
+++ b/src/generated/apiComponents.ts
@@ -15109,6 +15109,71 @@ export const useGetV2AdminUsersMulti = <TData = GetV2AdminUsersMultiResponse>(
   );
 };
 
+export type PostV2AdminUsersCreateError = Fetcher.ErrorWrapper<undefined>;
+
+export type PostV2AdminUsersCreateResponse = {
+  uuid?: string;
+  status?: string;
+  readable_status?: string;
+  type?: string;
+  first_name?: string;
+  last_name?: string;
+  email_address?: string;
+  job_role?: string;
+  facebook?: string;
+  instagram?: string;
+  linkedin?: string;
+  twitter?: string;
+  whatsapp_phone?: string;
+  date_added?: string;
+};
+
+export type PostV2AdminUsersCreateRequestBody = {
+  first_name?: string;
+  last_name?: string;
+  email_address?: string;
+  job_role?: string;
+  phone_number?: string;
+  organisation?: string;
+  role?: string;
+  country?: string;
+  program?: string;
+  direct_frameworks?: boolean;
+};
+
+export type PostV2AdminUsersCreateVariables = {
+  body?: PostV2AdminUsersCreateRequestBody;
+} & ApiContext["fetcherOptions"];
+
+export const fetchPostV2AdminUsersCreate = (variables: PostV2AdminUsersCreateVariables, signal?: AbortSignal) =>
+  apiFetch<PostV2AdminUsersCreateResponse, PostV2AdminUsersCreateError, PostV2AdminUsersCreateRequestBody, {}, {}, {}>({
+    url: "/v2/admin/users/create",
+    method: "post",
+    ...variables,
+    signal
+  });
+
+export const usePostV2AdminUsersCreate = (
+  options?: Omit<
+    reactQuery.UseMutationOptions<
+      PostV2AdminUsersCreateResponse,
+      PostV2AdminUsersCreateError,
+      PostV2AdminUsersCreateVariables
+    >,
+    "mutationFn"
+  >
+) => {
+  const { fetcherOptions } = useApiContext();
+  return reactQuery.useMutation<
+    PostV2AdminUsersCreateResponse,
+    PostV2AdminUsersCreateError,
+    PostV2AdminUsersCreateVariables
+  >(
+    (variables: PostV2AdminUsersCreateVariables) => fetchPostV2AdminUsersCreate({ ...fetcherOptions, ...variables }),
+    options
+  );
+};
+
 export type GetV2AdminUsersExportError = Fetcher.ErrorWrapper<undefined>;
 
 export type GetV2AdminUsersExportVariables = ApiContext["fetcherOptions"];
diff --git a/src/generated/apiSchemas.ts b/src/generated/apiSchemas.ts
index 2c6f38c16..0ca65e9b5 100644
--- a/src/generated/apiSchemas.ts
+++ b/src/generated/apiSchemas.ts
@@ -22115,6 +22115,19 @@ export type UserCreate = {
   program?: string;
 };
 
+export type AdminUserCreate = {
+  first_name?: string;
+  last_name?: string;
+  email_address?: string;
+  job_role?: string;
+  phone_number?: string;
+  organisation?: string;
+  role?: string;
+  country?: string;
+  program?: string;
+  direct_frameworks?: boolean;
+};
+
 export type UpdateRequestsPaginated = {
   data?: {
     uuid?: string;

From 85ffc8ec2383c9dc1e7f00c632e5fdc2540500e5 Mon Sep 17 00:00:00 2001
From: cesarLima1 <cesmaulim@gmail.com>
Date: Tue, 26 Nov 2024 17:15:20 -0400
Subject: [PATCH 2/2] [TM-1385] Add set password form for mail redirection

---
 .../modules/user/components/UserShowAside.tsx |  27 ++-
 src/generated/apiComponents.ts                | 172 ++++++++++++++++--
 src/generated/apiRequestBodies.ts             |  10 +
 src/pages/auth/set-password/[token].page.tsx  |  90 +++++++++
 .../components/SetPasswordForm.tsx            | 110 +++++++++++
 5 files changed, 394 insertions(+), 15 deletions(-)
 create mode 100644 src/pages/auth/set-password/[token].page.tsx
 create mode 100644 src/pages/auth/set-password/components/SetPasswordForm.tsx

diff --git a/src/admin/modules/user/components/UserShowAside.tsx b/src/admin/modules/user/components/UserShowAside.tsx
index e0b8947ab..4f3452063 100644
--- a/src/admin/modules/user/components/UserShowAside.tsx
+++ b/src/admin/modules/user/components/UserShowAside.tsx
@@ -16,7 +16,12 @@ import Aside from "@/admin/components/Aside/Aside";
 import { ConfirmationDialog } from "@/admin/components/Dialogs/ConfirmationDialog";
 import { useGetUserRole } from "@/admin/hooks/useGetUserRole";
 import { ResetPasswordDialog } from "@/admin/modules/user/components/ResetPasswordDialog";
-import { usePatchV2AdminUsersVerifyUUID, usePostAuthReset, usePostV2UsersResend } from "@/generated/apiComponents";
+import {
+  usePatchV2AdminUsersVerifyUUID,
+  usePostAuthReset,
+  usePostAuthSendLoginDetails,
+  usePostV2UsersResend
+} from "@/generated/apiComponents";
 import { V2AdminUserRead } from "@/generated/apiSchemas";
 
 import { userPrimaryRoleChoices } from "../const";
@@ -47,6 +52,13 @@ export const UserShowAside = () => {
     }
   });
 
+  const { mutate: sendLoginDetails } = usePostAuthSendLoginDetails({
+    onSuccess() {
+      notify(`Login details email has been sent successfully.`, { type: "success" });
+      refresh();
+    }
+  });
+
   const { mutate: verifyUser } = usePatchV2AdminUsersVerifyUUID({
     onSuccess() {
       notify(`User email has been verified successfully.`, { type: "success" });
@@ -87,6 +99,19 @@ export const UserShowAside = () => {
                 Create User
               </Button>
             </When>
+            <Button
+              variant="contained"
+              onClick={() =>
+                sendLoginDetails({
+                  body: {
+                    email_address: record?.email_address,
+                    callback_url: window.location.origin + "/auth/set-password/"
+                  }
+                })
+              }
+            >
+              Send Login Details
+            </Button>
             <Button
               variant="contained"
               onClick={() =>
diff --git a/src/generated/apiComponents.ts b/src/generated/apiComponents.ts
index f051633fc..df4c9136a 100644
--- a/src/generated/apiComponents.ts
+++ b/src/generated/apiComponents.ts
@@ -30412,17 +30412,12 @@ export const useGetV2FormsOptionLabels = <TData = GetV2FormsOptionLabelsResponse
 
 export type PatchAuthChangeError = Fetcher.ErrorWrapper<undefined>;
 
-export type PatchAuthChangeRequestBody = {
-  token?: string;
-  password?: string;
-};
-
 export type PatchAuthChangeVariables = {
-  body?: PatchAuthChangeRequestBody;
+  body?: RequestBodies.PatchAuthChangeBody;
 } & ApiContext["fetcherOptions"];
 
 export const fetchPatchAuthChange = (variables: PatchAuthChangeVariables, signal?: AbortSignal) =>
-  apiFetch<Record<string, any>, PatchAuthChangeError, PatchAuthChangeRequestBody, {}, {}, {}>({
+  apiFetch<Record<string, any>, PatchAuthChangeError, RequestBodies.PatchAuthChangeBody, {}, {}, {}>({
     url: "/auth/change",
     method: "patch",
     ...variables,
@@ -30482,17 +30477,12 @@ export const usePutV2AuthCompleteSignup = (
 
 export type PostAuthResetError = Fetcher.ErrorWrapper<undefined>;
 
-export type PostAuthResetRequestBody = {
-  email_address?: string;
-  callback_url?: string;
-};
-
 export type PostAuthResetVariables = {
-  body?: PostAuthResetRequestBody;
+  body?: RequestBodies.PostAuthResetBody;
 } & ApiContext["fetcherOptions"];
 
 export const fetchPostAuthReset = (variables: PostAuthResetVariables, signal?: AbortSignal) =>
-  apiFetch<Record<string, any>, PostAuthResetError, PostAuthResetRequestBody, {}, {}, {}>({
+  apiFetch<Record<string, any>, PostAuthResetError, RequestBodies.PostAuthResetBody, {}, {}, {}>({
     url: "/auth/reset",
     method: "post",
     ...variables,
@@ -30512,6 +30502,155 @@ export const usePostAuthReset = (
   );
 };
 
+export type PostAuthSendLoginDetailsError = Fetcher.ErrorWrapper<undefined>;
+
+export type PostAuthSendLoginDetailsVariables = {
+  body?: RequestBodies.PostAuthResetBody;
+} & ApiContext["fetcherOptions"];
+
+export const fetchPostAuthSendLoginDetails = (variables: PostAuthSendLoginDetailsVariables, signal?: AbortSignal) =>
+  apiFetch<Record<string, any>, PostAuthSendLoginDetailsError, RequestBodies.PostAuthResetBody, {}, {}, {}>({
+    url: "/auth/send-login-details",
+    method: "post",
+    ...variables,
+    signal
+  });
+
+export const usePostAuthSendLoginDetails = (
+  options?: Omit<
+    reactQuery.UseMutationOptions<
+      Record<string, any>,
+      PostAuthSendLoginDetailsError,
+      PostAuthSendLoginDetailsVariables
+    >,
+    "mutationFn"
+  >
+) => {
+  const { fetcherOptions } = useApiContext();
+  return reactQuery.useMutation<Record<string, any>, PostAuthSendLoginDetailsError, PostAuthSendLoginDetailsVariables>(
+    (variables: PostAuthSendLoginDetailsVariables) =>
+      fetchPostAuthSendLoginDetails({ ...fetcherOptions, ...variables }),
+    options
+  );
+};
+
+export type GetAuthMailQueryParams = {
+  /**
+   * The reset token
+   */
+  token: string;
+};
+
+export type GetAuthMailError = Fetcher.ErrorWrapper<
+  | {
+      status: 404;
+      payload: {
+        /**
+         * @example false
+         */
+        success?: boolean;
+        /**
+         * @example User not found
+         */
+        message?: string;
+      };
+    }
+  | {
+      status: 500;
+      payload: {
+        /**
+         * @example false
+         */
+        success?: boolean;
+        /**
+         * @example Internal Server Error
+         */
+        message?: string;
+      };
+    }
+>;
+
+export type GetAuthMailResponse = {
+  /**
+   * @example true
+   */
+  success?: boolean;
+  data?: {
+    /**
+     * The email address associated with the reset token, or null if the token is already used.
+     *
+     * @example user@example.com
+     */
+    email_address?: string | null;
+    /**
+     * Indicates whether the token has already been used. `true` if the token was used or does not exist, and `false` otherwise.
+     *
+     * @example false
+     */
+    token_used?: boolean;
+  };
+};
+
+export type GetAuthMailVariables = {
+  queryParams: GetAuthMailQueryParams;
+} & ApiContext["fetcherOptions"];
+
+/**
+ * Retrieves the email address associated with a reset token. If the token has already been used or does not exist, indicates that the token is used.
+ */
+export const fetchGetAuthMail = (variables: GetAuthMailVariables, signal?: AbortSignal) =>
+  apiFetch<GetAuthMailResponse, GetAuthMailError, undefined, {}, GetAuthMailQueryParams, {}>({
+    url: "/auth/mail",
+    method: "get",
+    ...variables,
+    signal
+  });
+
+/**
+ * Retrieves the email address associated with a reset token. If the token has already been used or does not exist, indicates that the token is used.
+ */
+export const useGetAuthMail = <TData = GetAuthMailResponse>(
+  variables: GetAuthMailVariables,
+  options?: Omit<reactQuery.UseQueryOptions<GetAuthMailResponse, GetAuthMailError, TData>, "queryKey" | "queryFn">
+) => {
+  const { fetcherOptions, queryOptions, queryKeyFn } = useApiContext(options);
+  return reactQuery.useQuery<GetAuthMailResponse, GetAuthMailError, TData>(
+    queryKeyFn({ path: "/auth/mail", operationId: "getAuthMail", variables }),
+    ({ signal }) => fetchGetAuthMail({ ...fetcherOptions, ...variables }, signal),
+    {
+      ...options,
+      ...queryOptions
+    }
+  );
+};
+
+export type PostAuthStoreError = Fetcher.ErrorWrapper<undefined>;
+
+export type PostAuthStoreVariables = {
+  body?: RequestBodies.PatchAuthChangeBody;
+} & ApiContext["fetcherOptions"];
+
+export const fetchPostAuthStore = (variables: PostAuthStoreVariables, signal?: AbortSignal) =>
+  apiFetch<Record<string, any>, PostAuthStoreError, RequestBodies.PatchAuthChangeBody, {}, {}, {}>({
+    url: "/auth/store",
+    method: "post",
+    ...variables,
+    signal
+  });
+
+export const usePostAuthStore = (
+  options?: Omit<
+    reactQuery.UseMutationOptions<Record<string, any>, PostAuthStoreError, PostAuthStoreVariables>,
+    "mutationFn"
+  >
+) => {
+  const { fetcherOptions } = useApiContext();
+  return reactQuery.useMutation<Record<string, any>, PostAuthStoreError, PostAuthStoreVariables>(
+    (variables: PostAuthStoreVariables) => fetchPostAuthStore({ ...fetcherOptions, ...variables }),
+    options
+  );
+};
+
 export type PatchV2AuthVerifyError = Fetcher.ErrorWrapper<undefined>;
 
 export type PatchV2AuthVerifyVariables = {
@@ -38426,6 +38565,11 @@ export type QueryOperation =
       operationId: "getV2FormsOptionLabels";
       variables: GetV2FormsOptionLabelsVariables;
     }
+  | {
+      path: "/auth/mail";
+      operationId: "getAuthMail";
+      variables: GetAuthMailVariables;
+    }
   | {
       path: "/v2/sites/{UUID}";
       operationId: "getV2SitesUUID";
diff --git a/src/generated/apiRequestBodies.ts b/src/generated/apiRequestBodies.ts
index 4b4ff19da..984120836 100644
--- a/src/generated/apiRequestBodies.ts
+++ b/src/generated/apiRequestBodies.ts
@@ -8,6 +8,11 @@ export type PutV2AdminUpdateRequestsUuidStatusBody = {
   feedback_fields?: string[];
 };
 
+export type PatchAuthChangeBody = {
+  token?: string;
+  password?: string;
+};
+
 export type V2PostOrganisationsApproveUserBody = {
   organisation_uuid: string;
   user_uuid: string;
@@ -17,6 +22,11 @@ export type PatchV2AuthVerifyBody = {
   token?: string;
 };
 
+export type PostAuthResetBody = {
+  email_address?: string;
+  callback_url?: string;
+};
+
 export type Body = {
   id?: number;
   uuid?: string;
diff --git a/src/pages/auth/set-password/[token].page.tsx b/src/pages/auth/set-password/[token].page.tsx
new file mode 100644
index 000000000..369827df6
--- /dev/null
+++ b/src/pages/auth/set-password/[token].page.tsx
@@ -0,0 +1,90 @@
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useT } from "@transifex/react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+
+import { usePasswordStrength } from "@/components/extensive/PasswordStrength/hooks/usePasswordStrength";
+import BackgroundLayout from "@/components/generic/Layout/BackgroundLayout";
+import ContentLayout from "@/components/generic/Layout/ContentLayout";
+import { useGetAuthMail, usePostAuthStore } from "@/generated/apiComponents";
+
+import SetPasswordForm from "./components/SetPasswordForm";
+
+const ResetPasswordDataSchema = yup.object({
+  password: yup.string().required(),
+  confirmPassword: yup.string().required()
+});
+
+export type ResetPasswordData = yup.InferType<typeof ResetPasswordDataSchema>;
+
+const ResetPasswordPage = () => {
+  const router = useRouter();
+  const t = useT();
+
+  const { mutateAsync: requestResetPassword, isLoading, error, isSuccess } = usePostAuthStore();
+  const form = useForm<ResetPasswordData>({
+    resolver: yupResolver(ResetPasswordDataSchema),
+    mode: "all"
+  });
+
+  const { strength } = usePasswordStrength({ password: form.watch("password") });
+
+  const { data: authMailData } = useGetAuthMail(
+    {
+      queryParams: {
+        token: router.query.token as string
+      }
+    },
+    {
+      enabled: !!router.query.token
+    }
+  );
+
+  const handleSave = async (data: ResetPasswordData) => {
+    try {
+      if (strength !== "Strong")
+        return form.setError("password", {
+          message: t(
+            "The password does not meet the minimum requirements. Please check that it contains at least 8 characters, including uppercase letters, lowercase letters and numbers."
+          )
+        });
+      if (data.password !== data.confirmPassword)
+        return form.setError("confirmPassword", { message: t("Passwords must match.") });
+
+      if (!router.query.token) {
+        router.push("/");
+      } else {
+        await requestResetPassword({
+          body: {
+            token: router.query.token as string,
+            password: data.password
+          }
+        });
+      }
+    } catch (err: any) {
+      if (err.errors.length > 0) {
+        const errorMessage = err.errors[0].detail;
+        form.setError("password", { message: errorMessage });
+      }
+    }
+  };
+
+  return (
+    <BackgroundLayout>
+      <ContentLayout>
+        <SetPasswordForm
+          form={form}
+          userMail={authMailData?.data?.email_address ?? undefined}
+          tokenUsed={authMailData?.data?.token_used ?? false}
+          loading={isLoading}
+          handleSave={handleSave}
+          apiError={error}
+          success={isSuccess}
+        />
+      </ContentLayout>
+    </BackgroundLayout>
+  );
+};
+
+export default ResetPasswordPage;
diff --git a/src/pages/auth/set-password/components/SetPasswordForm.tsx b/src/pages/auth/set-password/components/SetPasswordForm.tsx
new file mode 100644
index 000000000..6af2f651d
--- /dev/null
+++ b/src/pages/auth/set-password/components/SetPasswordForm.tsx
@@ -0,0 +1,110 @@
+import { useT } from "@transifex/react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { UseFormReturn } from "react-hook-form";
+import { Else, If, Then } from "react-if";
+
+import Input from "@/components/elements/Inputs/Input/Input";
+import Text from "@/components/elements/Text/Text";
+import Form from "@/components/extensive/Form/Form";
+import PasswordStrength from "@/components/extensive/PasswordStrength/PasswordStrength";
+import { PostAuthLoginError } from "@/generated/apiComponents";
+
+import { ResetPasswordData } from "../[token].page";
+
+type SetPasswordFormProps = {
+  form: UseFormReturn<ResetPasswordData>;
+  userMail?: string;
+  tokenUsed?: boolean;
+  handleSave: (data: ResetPasswordData) => Promise<void>;
+  loading?: boolean;
+  apiError?: PostAuthLoginError | null;
+  success?: boolean;
+};
+
+const SetPasswordForm = ({ form, userMail, tokenUsed, loading, handleSave, success }: SetPasswordFormProps) => {
+  const t = useT();
+  const errors = form.formState.errors;
+  const router = useRouter();
+  const isAdmin = router.asPath.includes("/admin");
+
+  const signInUrl = isAdmin ? "/admin" : "/auth/login";
+
+  return (
+    <Form>
+      <If condition={tokenUsed}>
+        <Then>
+          <Form.Header title={t("Link expired")} />
+        </Then>
+        <Else>
+          <Form.Header title={t("Set Password")} />
+          <If condition={!success}>
+            <Then>
+              <div className="flex flex-col gap-4">
+                <Input
+                  name="userMail"
+                  formHook={form}
+                  type="text"
+                  label={t("Email Address")}
+                  defaultValue={userMail}
+                  disabled
+                />
+                <Input
+                  name="password"
+                  formHook={form}
+                  error={errors.password}
+                  type="password"
+                  label={t("New Password")}
+                  required
+                />
+                <PasswordStrength password={form.watch("password")} />
+              </div>
+              <Input
+                name="confirmPassword"
+                formHook={form}
+                error={errors.confirmPassword}
+                type="password"
+                label={t("Repeat New Password")}
+                required
+              />
+              <Form.Footer
+                primaryButtonProps={{
+                  children: t("Reset Password"),
+                  onClick: form.handleSubmit(handleSave),
+                  disabled: loading
+                }}
+                secondaryButtonProps={{
+                  children: t("Cancel"),
+                  as: Link,
+                  href: "/",
+                  disabled: loading
+                }}
+              />
+            </Then>
+            <Else>
+              <Text variant="text-body-1000" className="text-center">
+                {t("Your password has been set. Please click Sign in to continue using TerraMatch.")}
+              </Text>
+              <Form.Footer
+                primaryButtonProps={{
+                  children: t("Sign In"),
+                  as: Link,
+                  href: signInUrl,
+                  disabled: loading
+                }}
+                secondaryButtonProps={{
+                  children: t("Cancel"),
+                  as: Link,
+                  href: "/",
+                  disabled: loading
+                }}
+              />
+            </Else>
+          </If>
+        </Else>
+      </If>
+    </Form>
+  );
+};
+
+export default SetPasswordForm;