Merge pull request #479 from sinamics/auth-layout-take2

Improved public auth pages layout
sinamics · Aug 8, 2024 · 130a40d · 130a40d
2 parents 61fccfa + d30c8b7
commit 130a40d
Show file tree

Hide file tree

Showing 25 changed files with 486 additions and 400 deletions.
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
@@ -31,7 +31,7 @@ const LandingPage = (): JSX.Element => {
 							<h2>ZTNET Documentation</h2>
 
 							<h1 className="title-text">
-								<span className="text-primary ">Zerotier </span>Controller Web UI
+								<span className="text-primary">Zerotier </span>Controller Web UI
 							</h1>
 							<div className="nav-buttons">
 								<a

diff --git a/src/__tests__/pages/auth/signin.test.tsx b/src/__tests__/pages/auth/signin.test.tsx
@@ -30,6 +30,12 @@ jest.mock("../../../utils/api", () => ({
 			getWelcomeMessage: {
 				useQuery: jest.fn(),
 			},
+			registrationAllowed: {
+				useQuery: jest.fn().mockReturnValue({
+					data: { allowed: true },
+					isLoading: false,
+				}),
+			},
 		},
 		network: {
 			getUserNetworks: {
@@ -63,7 +69,7 @@ describe("LoginPage", () => {
 		render(
 			<QueryClientProvider client={queryClient}>
 				<NextIntlClientProvider locale="en" messages={enTranslation}>
-					<LoginPage hasOauth={hasOauth} oauthExlusiveLogin={false} />
+					<LoginPage title="test" hasOauth={hasOauth} oauthExclusiveLogin={false} />
 				</NextIntlClientProvider>
 			</QueryClientProvider>,
 		);

diff --git a/src/components/auth/credentialsForm.tsx b/src/components/auth/credentialsForm.tsx
@@ -5,7 +5,7 @@ import { toast } from "react-hot-toast";
 import { ErrorCode } from "~/utils/errorCode";
 import Link from "next/link";
 import TOTPInput from "./totpInput";
-import SubmitButtons from "./submitButtons";
+import FormSubmitButtons from "./formSubmitButton";
 import FormInput from "./formInput";
 
 interface FormData {
@@ -122,7 +122,10 @@ const CredentialsForm: React.FC = () => {
 			)}
 			{showOTP && <TOTPInput totpCode={totpCode} setTotpCode={setTotpCode} />}
 			<div className="pt-5">
-				<SubmitButtons loading={loading.credentials} isTotp={showOTP} />
+				<FormSubmitButtons
+					loading={loading.credentials}
+					title={showOTP ? "Verify TOTP" : "Sign in"}
+				/>
 			</div>
 		</form>
 	);

diff --git a/src/components/auth/forgotPasswordForm.tsx b/src/components/auth/forgotPasswordForm.tsx
@@ -1,8 +1,9 @@
 import { useState } from "react";
 import { api } from "~/utils/api";
-import cn from "classnames";
 import { toast } from "react-hot-toast";
 import { useTrpcApiErrorHandler } from "~/hooks/useTrpcApiHandler";
+import FormInput from "./formInput";
+import FormSubmitButtons from "./formSubmitButton";
 
 interface FormData {
 	email: string;
@@ -44,43 +45,30 @@ const ForgotPasswordForm: React.FC = () => {
 		});
 	};
 	return (
-		<div className="z-10 flex justify-center self-center">
-			<div className="w-100 mx-auto rounded-2xl border p-12">
-				<div className="mb-4">
-					<h3 className="text-2xl font-semibold">Forgot Password </h3>
-					<p className="text-gray-500">
-						We will send you a reset link if the email exist
-					</p>
-				</div>
-				<form className="space-y-5" onSubmit={submitHandler}>
-					<div className="space-y-2">
-						<label className="text-sm font-medium tracking-wide">Email</label>
-						<input
-							className="input w-full rounded-lg border border-gray-300 px-4  py-2 text-base focus:border-primary/25 focus:outline-none"
-							value={formData.email}
-							onChange={handleChange}
-							type="email"
-							name="email"
-							placeholder="mail@example.com"
-						/>
-					</div>
-					<div className="pt-5">
-						<button
-							type="submit"
-							className={cn(
-								"btn btn-block btn-primary cursor-pointer rounded-full p-3 font-semibold tracking-wide shadow-lg",
-							)}
-						>
-							{loading ? <span className="loading loading-spinner"></span> : null}
-							Send Email
-						</button>
-					</div>
-				</form>
-				<div className="pt-5 text-center text-xs text-gray-400">
-					<span>Copyright © {new Date().getFullYear()} Kodea Solutions</span>
-				</div>
+		<form className="space-y-5" onSubmit={submitHandler}>
+			<FormInput
+				label="Email"
+				name="email"
+				type="text"
+				value={formData.email}
+				onChange={handleChange}
+				placeholder="mail@example.com"
+				icon={
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 16 16"
+						fill="currentColor"
+						className="h-4 w-4 opacity-70"
+					>
+						<path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
+						<path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
+					</svg>
+				}
+			/>
+			<div className="pt-5">
+				<FormSubmitButtons loading={loading} title="Send Email" />
 			</div>
-		</div>
+		</form>
 	);
 };
 

diff --git a/src/components/auth/formInput.tsx b/src/components/auth/formInput.tsx
@@ -7,6 +7,7 @@ interface FormInputProps {
 	value: string;
 	onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 	placeholder: string;
+	disabled?: boolean;
 	icon?: ReactElement;
 }
 
@@ -17,6 +18,7 @@ const FormInput: React.FC<FormInputProps> = ({
 	value,
 	onChange,
 	placeholder,
+	disabled = false,
 	icon,
 }) => {
 	return (
@@ -28,6 +30,7 @@ const FormInput: React.FC<FormInputProps> = ({
 				{icon && React.cloneElement(icon, { className: "h-4 w-4 opacity-70" })}
 				<input
 					id={name}
+					disabled={disabled}
 					className="grow"
 					value={value}
 					onChange={onChange}

diff --git a/src/components/auth/formSubmitButton.tsx b/src/components/auth/formSubmitButton.tsx
@@ -0,0 +1,20 @@
+import cn from "classnames";
+
+interface SubmitButtonProps {
+	loading: boolean;
+	title: string;
+}
+
+const FormSubmitButtons: React.FC<SubmitButtonProps> = ({ loading, title }) => (
+	<button
+		type="submit"
+		className={cn(
+			"btn btn-block btn-primary border cursor-pointer font-semibold tracking-wide shadow-lg",
+		)}
+	>
+		{loading ? <span className="loading loading-spinner"></span> : null}
+		{title}
+	</button>
+);
+
+export default FormSubmitButtons;
diff --git a/src/components/auth/mfaRecoveryForm.tsx b/src/components/auth/mfaRecoveryForm.tsx
@@ -1,8 +1,9 @@
 import { useState } from "react";
 import { api } from "~/utils/api";
-import cn from "classnames";
 import { toast } from "react-hot-toast";
 import { useTrpcApiErrorHandler } from "~/hooks/useTrpcApiHandler";
+import FormInput from "./formInput";
+import FormSubmitButtons from "./formSubmitButton";
 
 interface FormData {
 	email: string;
@@ -33,7 +34,7 @@ const MfaRecoveryForm: React.FC = () => {
 			onSuccess: () => {
 				setLoading(false);
 				setFormData({ email: "" });
-				toast.success("Password reset link sent to your email if the account exist!", {
+				toast.success("2FA reset procedure sent to your email if the account exist!", {
 					duration: 10000,
 				});
 			},
@@ -44,43 +45,31 @@ const MfaRecoveryForm: React.FC = () => {
 		});
 	};
 	return (
-		<div className="z-10 flex justify-center self-center">
-			<div className="w-100 mx-auto rounded-2xl border border-primary p-12">
-				<div className="mb-4">
-					<h3 className="text-2xl font-semibold">2FA Recovery</h3>
-					<p className="text-gray-500">
-						We will send you instructions on how to recover your account
-					</p>
-				</div>
-				<form className="space-y-5" onSubmit={submitHandler}>
-					<div className="space-y-2">
-						<label className="text-sm font-medium tracking-wide">Email</label>
-						<input
-							className="input w-full rounded-lg border border-gray-300 px-4  py-2 text-base focus:border-primary/25 focus:outline-none"
-							value={formData.email}
-							onChange={handleChange}
-							type="email"
-							name="email"
-							placeholder="mail@example.com"
-						/>
-					</div>
-					<div className="pt-5">
-						<button
-							type="submit"
-							className={cn(
-								"btn btn-block btn-primary cursor-pointer rounded-full p-3 font-semibold tracking-wide shadow-lg",
-							)}
-						>
-							{loading ? <span className="loading loading-spinner"></span> : null}
-							Send Email
-						</button>
-					</div>
-				</form>
-				<div className="pt-5 text-center text-xs text-gray-400">
-					<span>Copyright © {new Date().getFullYear()} Kodea Solutions</span>
-				</div>
+		<form className="space-y-5" onSubmit={submitHandler}>
+			<FormInput
+				label="Email"
+				name="email"
+				type="email"
+				value={formData.email}
+				onChange={handleChange}
+				placeholder="mail@example.com"
+				icon={
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 16 16"
+						fill="currentColor"
+						className="h-4 w-4 opacity-70"
+					>
+						<path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
+						<path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
+					</svg>
+				}
+			/>
+
+			<div className="pt-5">
+				<FormSubmitButtons loading={loading} title="Send Email" />
 			</div>
-		</div>
+		</form>
 	);
 };
 

diff --git a/src/components/auth/oauthLogin.tsx b/src/components/auth/oauthLogin.tsx
@@ -32,7 +32,7 @@ const OauthLogin: React.FC = () => {
 			type="button"
 			onClick={oAuthHandler}
 			className={cn(
-				"btn btn-block btn-primary cursor-pointer rounded-full font-semibold tracking-wide shadow-lg",
+				"btn btn-block btn-primary cursor-pointer font-semibold tracking-wide shadow-lg",
 			)}
 		>
 			{loading ? <span className="loading loading-spinner"></span> : null}