basic UI

client/src/Pages/Auth/SetNewPassword/index.tsx

@@ -1,12 +1,37 @@
-import { BaseAuthPage } from "@/Components/v2/design-elements";
+import { BaseAuthPage, TextLink } from "@/Components/v2/design-elements";
+import { Button, TextField } from "@/Components/v2/inputs";
+import { useTranslation } from "react-i18next";
 
 const SetNewPasswordPage = () => {
+	const { t } = useTranslation();
 	return (
 		<BaseAuthPage
-			title="setNewPassword"
-			subtitle="new password"
+			title={t("pages.auth.setNewPassword.title")}
+			subtitle={t("pages.auth.setNewPassword.subtitle")}
 		>
-			Test
+			<TextField
+				type="password"
+				fieldLabel={t("pages.auth.common.form.option.password.label")}
+				placeholder={t("pages.auth.common.form.option.password.placeholder")}
+			/>
+			<TextField
+				type="password"
+				fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
+				placeholder={t("pages.auth.common.form.option.password.placeholder")}
+			/>
+			<Button
+				variant="contained"
+				type="submit"
+				fullWidth
+			>
+				{t("auth.forgotPassword.buttons.resetPassword")}
+			</Button>
+			<TextLink
+				alignSelf="center"
+				text={t("pages.auth.forgotPassword.links.login.text")}
+				linkText={t("pages.auth.forgotPassword.links.login.linkText")}
+				href="/login"
+			/>
 		</BaseAuthPage>
 	);
 };

client/src/locales/en.json

@@ -665,6 +665,10 @@
 						"linkText": "login"
 					}
 				}
+			},
+			"setNewPassword": {
+				"title": "Reset your password",
+				"subtitle": "Your new password must be different from previously used passwords."
 			}
 		},
 		"checks": {
@@ -1064,7 +1068,6 @@
 						"duration": {
 							"label": "Duration"
 						},
-
 						"startTime": {
 							"label": "Start time"
 						}