Scribd
Upload
12 views2 pages

Document 2

Uploaded by

191000657suryavamsisrichakra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views2 pages

Document 2

Uploaded by

191000657suryavamsisrichakra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

import React, { useState } from 'react';

const Login = () => {


const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [errorMessage, setErrorMessage] = useState('');

const handleSubmit = (e) => {


e.preventDefault();
if (!username || !password) {
setErrorMessage('Please enter both username and password');
} else if (password.length < 8) {
setErrorMessage('Password must be at least 8 characters long');
} else if (!password.match(/[0-9]/)) {
setErrorMessage('Password must contain at least one digit');
} else if (!password.match(/[!@#$%^&*(),.?":{}|<>]/)) {
setErrorMessage('Password must contain at least one symbol');
} else {
setErrorMessage('');
console.log('Logged in successfully!');
}
};

return (
<div>
<h2>Login</h2>
<form onSubmit={handleSubmit}>
<div>
<label>Username:</label>
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</div>
<div>
<label>Password:</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<button type="submit">Submit</button>
</form>
{errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
</div>
);
};

export default Login;

You might also like