Afficher un message de bienvenue après identification

Bonjour.

J'étudie React en ce moment.

Dans un challenge, je dois faire en sorte que le message "Welcome, agent Cody Banks" s'affiche lors du clic sur le bouton "login" et si l'utilisateur saisit les bonnes informations.

Je précise que j'utilise useState et handleSubmit.

Voici mon code à l'heure actuelle.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import Image from 'next/image';
import styles from '../styles/Home.module.css';
import { useState } from 'react';
 
function Home() {
  const [agentId, setAgentId] = useState('');
  const [password, setPassword] = useState('');
 
  const handleSubmit = () => {
    setAgentId('');
    setPassword('');
    if(agentId === 'codybanks' && password === 'qwerty123')
    {
      console.log("Welcome, agent Cody Banks");
    }
  };
 
  return (
    <div className={styles.container}>
      <Image src="/logo.png" alt="Logo" width={200} height={200} />
      <div>
 
    </div>
 
      <h1>CIA LOGIN</h1>
      <div className={styles.inputContainer}>
        <span>AGENT ID</span>
        <input type="text" id="agentId" onChange={(e) => setAgentId(e.target.value)} value={agentId}/>
      </div>
 
      <div className={styles.inputContainer}>
        <span>PASSWORD</span>
        <input type="password" id="password" onChange={(e) => setPassword(e.target.value)} value={password}/>
      </div>
 
      <button onClick={() => handleSubmit()} id="login">LOGIN</button>
 
    </div>
  );
}
 
export default Home;

En principe, il faudrait faire une condition, mais au bout de plusieurs tentatives, je ne sais pas vraiment où la mettre dans le code, et de quelle manière.

Merci de m'apporter une réponse.