Official Solution
import React, { useMemo, useState } from 'react';
function isEmail(x) {
return /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(x);
}
export default function App() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [show, setShow] = useState(false);
const [errors, setErrors] = useState({});
const canSubmit = useMemo(() => isEmail(email) && password.length >= 6, [email, password]);
function submit(e) {
e.preventDefault();
const next = {};
if (!isEmail(email)) next.email = 'Enter a valid email';
if (password.length < 6) next.password = 'Password must be at least 6 chars';
setErrors(next);
if (Object.keys(next).length) return;
alert('Logged in to meetcode');
}
return (
<div style={{ padding: 16, width: 520 }}>
<h2 style={{ marginTop: 0 }}>meetcode login</h2>
<form onSubmit={submit} style={{ display: 'grid', gap: 12 }}>
<div>
<label style={{ fontWeight: 700 }}>Email</label>
<input value={email} onChange={(e) => setEmail(e.target.value)} style={{ marginTop: 6, width: '100%', padding: '10px 12px', borderRadius: 12, border: '1px solid ' + (errors.email ? '#c1121f' : '#bbb') }} />
{errors.email ? <div style={{ marginTop: 6, color: '#c1121f' }}>{errors.email}</div> : null}
</div>
<div>
<label style={{ fontWeight: 700 }}>Password</label>
<div style={{ display: 'flex', gap: 10, marginTop: 6 }}>
<input type={show ? 'text' : 'password'} value={password} onChange={(e) => setPassword(e.target.value)} style={{ flex: 1, padding: '10px 12px', borderRadius: 12, border: '1px solid ' + (errors.password ? '#c1121f' : '#bbb') }} />
<button type='button' onClick={() => setShow((v) => !v)} style={{ padding: '10px 12px', borderRadius: 12, border: '1px solid #ddd', background: '#fff' }}>{show ? 'Hide' : 'Show'}</button>
</div>
{errors.password ? <div style={{ marginTop: 6, color: '#c1121f' }}>{errors.password}</div> : null}
</div>
<button type='submit' disabled={!canSubmit} style={{ padding: '10px 14px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff', opacity: canSubmit ? 1 : 0.6 }}>
Login
</button>
</form>
</div>
);
}
No comments yet. Start the discussion!