What this PR does (required):
- The signup page redesigned
- login page was also redesigned
- mobile first (responsive)
Screenshots / Videos (front-end only):
The Signup page
The Login page
Mobile views (Signup)
and Mobile views (Login)
Any information needed to test this feature (required):
Test via local run yarn run dev
✅ Preview Commit!
| Name | Description |
| ----------- | ----------- |
| Preview | https://nueno-cf0006352-nueno.vercel.app/ |
source code:
- Create
Auth.module.css
- Reuse the onChange method from local state, see below
// User state
const [user, setUser] = useState<UserProps>({
email: "",
password: "",
isSubmitting: false,
});
// pulling out from user state
const { email, password, isSubmitting } = user;
// onChange event: setting the typed char to the input
const onChange = (e: { target: { name: string; value: string | boolean } }) =>
setUser({ ...user, [e.target.name]: e.target.value });
and then he onChange is passed to input onChange props
- Create an Input component
TextInput
import React from "react";
interface InputProps {
name: string;
type?: string;
value: string;
placeholder: string;
autoComplete?: string;
required: boolean;
clasName?: string;
onChange: (e: { target: { name: string; value: string | boolean } }) => void;
}
const TextInput: React.FC<InputProps> = ({
name,
type = "text",
value,
onChange,
placeholder,
autoComplete,
required,
clasName,
}) => {
return (
<input
name={name}
type={type}
autoComplete={autoComplete}
required={required}
value={value}
onChange={onChange}
className={`relative block w-full h-12 px-3 py-2 my-5 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm ${clasName}`}
placeholder={placeholder}
/>
);
};
export default TextInput;
and use it as
<TextInput
name="email"
type="email"
value={email}
onChange={onChange}
placeholder="[email protected]"
autoComplete="email"
required={true}
/>
- Sama as
Image.tsx
component