prompter: Я хочу реализовать React компонент для аутентификации пользователя. Сгенерируй код компонента на TypeScript

assistant: import React, { useState } from 'react';

interface Props {
  onAuth: (username: string, password: string) => void;
}

const AuthForm: React.FC<Props> = ({ onAuth }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    onAuth(username, password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">Username:</label>
        <input
          type="text"
          id="username"
          value={username}
          onChange={(event) => setUsername(event.target.value)}
        />
      </div>
      <div>
        <label htmlFor="password">Password:</label>
        <input
          type="password"
          id="password"
          value={password}
          onChange={(event) => setPassword(event.target.value)}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default AuthForm;

prompter: Можешь добавить чекбокс "Запомнить пароль"?

assistant: import React, { useState } from 'react';

interface Props {
  onAuth: (username: string, password: string, forgotPassword: boolean) => void;
}

const AuthForm: React.FC<Props> = ({ onAuth }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [forgotPassword, setForgotPassword] = useState(false);

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    onAuth(username, password, forgotPassword);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">Username:</label>
        <input
          type="text"
          id="username"
          value={username}
          onChange={(event) => setUsername(event.target.value)}
        />
      </div>
      <div>
        <label htmlFor="password">Password:</label>
        <input
          type="password"
          id="password"
          value={password}
          onChange={(event) => setPassword(event.target.value)}
        />
      </div>
      <div>
        <input
          type="checkbox"
          id="forgot-password"
          checked={forgotPassword}
          onChange={(event) => setForgotPassword(event.target.checked)}
        />
        <label htmlFor="forgot-password">Забыли пароль?</label>
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default AuthForm;

В код был добавлен новый элемент <div> с чекбоксом "Забыли пароль?" перед кнопкой отправки. Также было добавлено новое состояние forgotPassword, которое устанавливается и обрабатывается при отправке формы через метод handleSubmit.

assistant: import React, { useState } from 'react';

interface Props {
  onAuth: (username: string, password: string) => void;
}

const AuthComponent: React.FC<Props> = ({ onAuth }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    onAuth(username, password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">Username:</label>
        <input
          type="text"
          id="username"
          value={username}
          onChange={(event) => setUsername(event.target.value)}
        />
      </div>
      <div>
        <label htmlFor="password">Password:</label>
        <input
          type="password"
          id="password"
          value={password}
          onChange={(event) => setPassword(event.target.value)}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default AuthComponent;

prompter: А сделай форму покрасивше

assistant: import React, { useState } from 'react';

interface Props {
onAuth: (username: string, password: string) => void;
}

const AuthComponent: React.FC<Props> = ({ onAuth }) => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

const handleSubmit = (event: React.FormEvent) => {
event.preventDefault();
onAuth(username, password);
};

return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<form onSubmit={handleSubmit} style={{ width: '50%' }}>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', margin: '1rem' }}>
<label htmlFor="username" style={{ margin: '1rem' }}>
Username:
</label>
<input
type="text"
id="username"
value={username}
onChange={(event) => setUsername(event.target.value)}
style={{ padding: '0.5rem', fontSize: '1.2rem', margin: '1rem' }}
/>
</div>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', margin: '1rem' }}>
<label htmlFor="password" style={{ margin: '1rem' }}>
Password:
</label>
<input
type="password"
id="password"
value={password}
onChange={(event) => setPassword(event.target.value)}
style={{ padding: '0.5rem', fontSize: '1.2rem', margin: '1rem' }}
/>
</div>
<button type="submit" style={{ padding: '0.5rem', fontSize: '1.2rem', margin: '1rem' }}>
Submit
</button>
</form>
</div>
);
};

export default AuthComponent;

assistant: import React, { useState } from 'react';

interface Props {
  onAuth: (username: string, password: string) => void;
}

const AuthComponent: React.FC<Props> = ({ onAuth }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    onAuth(username, password);
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', margin: 10 }}>
          <label htmlFor="username" style={{ marginRight: 10 }}>Username:</label>
          <input
            type="text"
            id="username"
            value={username}
            onChange={(event) => setUsername(event.target.value)}
            style={{ padding: 10, fontSize: 16 }}
          />
        </div>
        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', margin: 10 }}>
          <label htmlFor="password" style={{ marginRight: 10 }}>Password:</label>
          <input
            type="password"
            id="password"
            value={password}
            onChange={(event) => setPassword(event.target.value)}
            style={{ padding: 10, fontSize: 16 }}
          />
        </div>
        <button type="submit" style={{ padding: 10, marginTop: 20, fontSize: 18, backgroundColor: 'lightblue', borderRadius: 5 }}>Submit</button>
      </form>
    </div>
  );
};

export default AuthComponent;

prompter: Добавь функцию. Пусть если длина пароля меньше восьми символов, при нажатии кнопки авторизации пользователя перенаправит на рикролл.