Skip to content

feat(frontend): add useForm hook #1040

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
yassinedorbozgithub wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

feat(frontend): add useForm hook #1040

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5ed0212
feat(frontend): add useForm hook
yassinedorbozgithub May 23, 2025
31f2206
fix(frontend): update useValidationRules hook
yassinedorbozgithub May 25, 2025
a9be452
refactor(frontend): use new useForm hook
yassinedorbozgithub May 26, 2025
910750f
fix(frontend): minor changes
yassinedorbozgithub May 26, 2025
c2a0fc8
fix(frontend): resolve file conflicts
yassinedorbozgithub May 30, 2025
ae08a7f
fix(frontend): enhance RHF hooks logic
yassinedorbozgithub May 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 12 additions & 16 deletions frontend/src/app-components/auth/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,12 @@ import { Button, Grid, Paper, Typography } from "@mui/material";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect } from "react";
import { useForm } from "react-hook-form";

import { useConfirmAccount, useLogin } from "@/hooks/entities/auth-hooks";
import { useAuth } from "@/hooks/useAuth";
import { useStrictForm } from "@/hooks/useStrictForm";
import { useToast } from "@/hooks/useToast";
import { useTranslate } from "@/hooks/useTranslate";
import { useValidationRules } from "@/hooks/useValidationRules";
import { ILoginAttributes } from "@/types/auth/login.types";

import { PublicContentWrapper } from "../../components/anonymous/PublicContentWrapper";
Expand Down Expand Up @@ -62,20 +61,17 @@ export const Login = () => {
register,
formState: { errors },
handleSubmit,
} = useForm<ILoginAttributes>({
} = useStrictForm<ILoginAttributes>({
defaultValues: DEFAULT_VALUES,
});
const rules = useValidationRules();
const validationRules = {
email: {
...rules.email,
required: t("message.email_is_required"),
},
password: {
...rules.password,
required: t("message.password_is_required"),
rules: {
identifier: {
required: t("message.email_is_required"),
},
password: {
required: t("message.password_is_required"),
},
},
};
});
const onSubmitForm = (data: ILoginAttributes) => {
login(data);
};
Expand Down Expand Up @@ -106,7 +102,7 @@ export const Login = () => {
startAdornment: <Adornment Icon={EmailIcon} />,
}}
helperText={errors.identifier ? errors.identifier.message : null}
{...register("identifier", validationRules.email)}
{...register("identifier")}
/>

<PasswordInput
Expand All @@ -117,7 +113,7 @@ export const Login = () => {
startAdornment: <Adornment Icon={KeyIcon} />,
}}
helperText={errors.password ? errors.password.message : null}
{...register("password", validationRules.password)}
{...register("password")}
/>
<Grid container gap={2} justifyContent="space-between">
<Grid alignContent="center">
Expand Down
76 changes: 34 additions & 42 deletions frontend/src/app-components/auth/Register.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,11 @@ import {
} from "@mui/material";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";

import { useAcceptInvite } from "@/hooks/entities/auth-hooks";
import { useStrictForm } from "@/hooks/useStrictForm";
import { useToast } from "@/hooks/useToast";
import { useTranslate } from "@/hooks/useTranslate";
import { useValidationRules } from "@/hooks/useValidationRules";
import { IRegisterAttributes } from "@/types/auth/register.types";
import { JWT } from "@/utils/Jwt";

Expand Down Expand Up @@ -69,45 +68,40 @@ export const Register = () => {
setValue,
formState: { errors },
handleSubmit,
} = useForm<TRegisterExtendedPayload>({
} = useStrictForm<TRegisterExtendedPayload>({
defaultValues: DEFAULT_VALUES,
rules: {
first_name: {
required: t("message.first_name_is_required"),
},
last_name: {
required: t("message.last_name_is_required"),
},
username: {
required: t("message.username_is_required"),
},
email: {
required: t("message.email_is_required"),
},
password: {
required: t("message.password_is_required"),
},
password2: {
validate: (val) => {
if (val !== watch("password")) {
trigger("password");

return t("message.password_match");
}
},
},
},
});
const [isTermsAccepted, setIsTermsAccepted] = useState<boolean>(false);
const [readonlyEmail, setReadonlyEmail] = useState<boolean>(false);
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setIsTermsAccepted(event.target.checked);
};
const rules = useValidationRules();
const validationRules = {
first_name: {
required: t("message.first_name_is_required"),
},
last_name: {
required: t("message.last_name_is_required"),
},
username: {
required: t("message.username_is_required"),
},
email: {
...rules.email,
required: t("message.email_is_required"),
},
roles: {},
token: {},
password: {
...rules.password,
required: t("message.password_is_required"),
},
password2: {
validate: (val?: string) => {
if (val !== watch("password")) {
trigger("password");

return t("message.password_match");
}
},
},
};
const onSubmitForm = ({
password2: _password2,
...rest
Expand All @@ -126,8 +120,6 @@ export const Register = () => {
toast.error("Invalid Token");
} else {
setValue("token", String(queryToken));

// (decodedToken);
setValue("email", decodedToken.email);
if (decodedToken.roles.length) setValue("roles", decodedToken.roles);

Expand Down Expand Up @@ -157,7 +149,7 @@ export const Register = () => {
error={!!errors.first_name}
required
autoFocus
{...register("first_name", validationRules.first_name)}
{...register("first_name")}
InputProps={{
startAdornment: <Adornment Icon={AbcIcon} />,
}}
Expand All @@ -171,7 +163,7 @@ export const Register = () => {
label={t("placeholder.last_name")}
error={!!errors.last_name}
required
{...register("last_name", validationRules.last_name)}
{...register("last_name")}
InputProps={{
startAdornment: <Adornment Icon={AbcIcon} />,
}}
Expand All @@ -183,7 +175,7 @@ export const Register = () => {
label={t("placeholder.username")}
error={!!errors.username}
required
{...register("username", validationRules.username)}
{...register("username")}
InputProps={{
startAdornment: <Adornment Icon={PersonIcon} />,
}}
Expand All @@ -195,7 +187,7 @@ export const Register = () => {
label={t("placeholder.email")}
error={!!errors.email}
required
{...register("email", validationRules.email)}
{...register("email")}
helperText={errors.email ? errors.email.message : null}
InputProps={{
disabled: readonlyEmail,
Expand All @@ -209,7 +201,7 @@ export const Register = () => {
label={t("label.password")}
error={!!errors.password}
required
{...register("password", validationRules.password)}
{...register("password")}
helperText={errors.password ? errors.password.message : null}
InputProps={{
startAdornment: <Adornment Icon={KeyIcon} />,
Expand All @@ -221,7 +213,7 @@ export const Register = () => {
label={t("placeholder.password2")}
error={!!errors.password2}
required
{...register("password2", validationRules.password2)}
{...register("password2")}
helperText={errors.password2 ? errors.password2.message : null}
InputProps={{
startAdornment: <Adornment Icon={KeyIcon} />,
Expand Down
28 changes: 12 additions & 16 deletions frontend/src/app-components/auth/ResetPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,11 @@ import KeyIcon from "@mui/icons-material/Key";
import { Button, Grid, Paper, Typography } from "@mui/material";
import Link from "next/link";
import { useRouter } from "next/router";
import { useForm } from "react-hook-form";

import { useResetPassword } from "@/hooks/entities/reset-hooks";
import { useStrictForm } from "@/hooks/useStrictForm";
import { useToast } from "@/hooks/useToast";
import { useTranslate } from "@/hooks/useTranslate";
import { useValidationRules } from "@/hooks/useValidationRules";

import { PublicContentWrapper } from "../../components/anonymous/PublicContentWrapper";
import { ContentContainer } from "../dialogs";
Expand All @@ -25,23 +24,20 @@ import { PasswordInput } from "../inputs/PasswordInput";
export const ResetPassword = () => {
const { t } = useTranslate();
const { toast } = useToast();
const rules = useValidationRules();
const validationRules = {
password: {
...rules.password,
required: t("message.password_is_required"),
},
password2: {
...rules.password2,
required: t("message.password_is_required"),
},
};
const {
register,
handleSubmit,
formState: { errors },
} = useForm<{ password: string; password2: string }>({
} = useStrictForm<{ password: string; password2: string }>({
defaultValues: { password: "", password2: "" },
rules: {
password: {
required: t("message.password_is_required"),
},
password2: {
required: t("message.password_is_required"),
},
},
});
Comment on lines +33 to 41
Copy link
Contributor

@coderabbitai coderabbitai bot May 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Critical: Potential loss of password validation logic.

The current implementation only includes required validation for both password fields. However, based on the AI summary mentioning that useValidationRules was previously used, this form likely had more comprehensive validation including:

  • Password minimum length requirements
  • Password confirmation matching validation

This appears to be a significant loss of validation logic during the migration.

Please verify that the password validation rules from useValidationRules are properly applied. The custom useForm hook should merge these default rules automatically. Check if the validation rules for password and password2 from useValidationRules.ts are being applied:

#!/bin/bash
# Verify that password validation rules are being merged correctly
echo "Checking useValidationRules for password validation:"
cat frontend/src/hooks/useValidationRules.ts | grep -A 10 "password"

echo -e "\nChecking the custom useForm implementation:"
cat frontend/src/hooks/useForm.ts
🤖 Prompt for AI Agents 
In frontend/src/app-components/auth/ResetPassword.tsx around lines 33 to 41, the
password validation rules currently only enforce the fields as required, missing
important validations like minimum length and password confirmation matching. To
fix this, ensure that the validation rules from useValidationRules.ts for both
password and password2 are properly merged or applied in this form. Review the
useForm hook implementation to confirm it merges default validation rules
automatically, and update the rules object here to include all necessary
validations from useValidationRules, not just the required check.

const { query, replace } = useRouter();
// the following typecasting is due to the fact that the query object is not typed
Expand Down Expand Up @@ -76,7 +72,7 @@ export const ResetPassword = () => {
startAdornment: <Adornment Icon={KeyIcon} />,
}}
helperText={errors.password ? errors.password.message : null}
{...register("password", validationRules.password)}
{...register("password")}
/>

<PasswordInput
Expand All @@ -87,7 +83,7 @@ export const ResetPassword = () => {
startAdornment: <Adornment Icon={KeyIcon} />,
}}
helperText={errors.password2 ? errors.password2.message : null}
{...register("password2", validationRules.password2)}
{...register("password2")}
/>
<Grid container gap={1} justifyContent="flex-end">
<Button type="submit">{t("button.submit")}</Button>
Expand Down
15 changes: 9 additions & 6 deletions frontend/src/app-components/auth/resetPasswordRequest.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* Copyright © 2024 Hexastack. All rights reserved.
* Copyright © 2025 Hexastack. All rights reserved.
*
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
Expand All @@ -8,9 +8,9 @@

import { Button, Grid, Paper, Typography } from "@mui/material";
import Link from "next/link";
import { useForm } from "react-hook-form";

import { useRequestResetPassword } from "@/hooks/entities/reset-hooks";
import { useStrictForm } from "@/hooks/useStrictForm";
import { useToast } from "@/hooks/useToast";
import { useTranslate } from "@/hooks/useTranslate";

Expand All @@ -25,8 +25,13 @@ export const ResetPasswordRequest = () => {
register,
handleSubmit,
formState: { errors },
} = useForm<{ email: string }>({
} = useStrictForm<{ email: string }>({
defaultValues: { email: "" },
rules: {
email: {
required: t("message.email_is_required"),
},
},
});
const { mutate: requestReset } = useRequestResetPassword({
onSuccess: () => {
Expand Down Expand Up @@ -55,9 +60,7 @@ export const ResetPasswordRequest = () => {
error={!!errors.email}
required
autoFocus
{...register("email", {
required: t("message.email_is_required"),
})}
{...register("email")}
helperText={errors.email ? errors.email.message : null}
/>
<Grid container gap={1} justifyContent="flex-end">
Expand Down
Loading