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> ); }