Skip to content

Instantly share code, notes, and snippets.

@iLikeKoffee

iLikeKoffee/Login.js

Last active October 17, 2024 07:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save iLikeKoffee/c94f304c4375b0bdb6feb69be7fafa1b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save iLikeKoffee/c94f304c4375b0bdb6feb69be7fafa1b to your computer and use it in GitHub Desktop.
Download ZIP
Review before interview.
Raw
README.md

We would appreciate if you spend some time to review this code sample, imagine that this is a Pull Request from one of your colleagues.

The task is to implement a simple Login form component with React. Keep in mind that this is pseudo-code and there are some deliberate simplifications (such as ugly UI and stupid email validation).

Component is required:

  • to have login and password fields
  • to have onSubmit callback property, which is invoked when user submits the form (({email:string, password: string}) => Promise<void>)
  • not to send empty or duplicating requests
  • not to freeze

That's just simple auth form, I'm sure you have implemented it before 😀

We would like you to check if it matches functional requirements and how poor design and implementation are 😀

I would be happy to disscuss your feedback on interview,

Good luck!

Raw
Login.js
export function validate({email, password}){
const errors = []
if(!email.includes('@')){
errors.push('Invalid email')
}
if(!password.length <= 1){
errors.push('Missing password')
}
return errors;
}
export function Login({onSubmit}){
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [validation, setValidation] = useState([])
const handleSubmitEvent = e =>{
e.preventDefault()
const validationErrors = validate({email, password})
if(validationErrors.length){
setValidation(validationErrors)
return
}
onSubmit({email, password})
}
return (
<form onSubmit={handleSubmitEvent}>
<h1 className="header">
Login
</h1>
<div className="box">
<div className="input-group">
<label htmlFor="username">Username</label>
<br />
<input
type="text"
name="email"
className="email-input"
placeholder="Email"
value={email}
onChange={e => setEmail(e.target.value)}
/>
</div>
<br />
<div className="input-group">
<label htmlFor="password">Password</label>
<br />
<input
type="password"
name="password"
className="login-input"
placeholder="Password"
value={password}
onChange={e => setPassword(e.target.value)}
/>
</div>
<br />
<button
type="submit"
className="login-btn"
>
Login
</button>
</div>
{
validation.length > 0
? <><br/><span style={{color: 'red'}}> {validation.join(', ')}</span></>
: null
}
</form>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment