test Login

code/frontend/vogel-social-media/src/App.tsx

@@ -1,24 +1,46 @@
-import React from 'react';
+import React, { use } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import { useState, useEffect } from 'react';
 
 function App() {
+  const [username, setUsername] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [mail, setMail] = useState<string>('');
+  const [isCreate, setIsCreate] = useState<boolean>(false);
+
+useEffect(() => {
+  console.log(username);
+}, [username]);
+
+
+  const changeUsername = (event : React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.value.length > 20) {
+      alert("Username is too long");
+    }
+    setUsername(event.target.value);
+  }
+  const changePassword = (event : React.ChangeEvent<HTMLInputElement>) => {
+    setPassword(event.target.value);
+  }
+  const changeMail = (event : React.ChangeEvent<HTMLInputElement>) => {
+    setMail(event.target.value);
+  }
+
   return (
     <div className="App">
-      <header className="App-header">
+      {isCreate? <h1>Create Account</h1> :  <h1>Login</h1> }
-        <img src={logo} className="App-logo" alt="logo" />
+      {isCreate && <>
-        <p>
+        <label htmlFor="email">E-Mail</label>
-          Edit <code>src/App.tsx</code> and save to reload.
+        <input id='email' type="email" value={mail} onChange={changeMail}></input>
-        </p>
+        <br /></>}
-        <a
+      <label htmlFor="username">Username</label>
-          className="App-link"
+      <input id='username' type="text" value={username} onChange={changeUsername}></input>
-          href="https://reactjs.org"
+      <br />
-          target="_blank"
+      <label htmlFor="password">Password</label>
-          rel="noopener noreferrer"
+      <input id='password' type="password" value={password} onChange={changePassword}/>
-        >
+      <br />
-          Learn React
+      <input type="button" onClick={() => setIsCreate(!isCreate)} value={isCreate? "Create" : "login"}/>
-        </a>
-      </header>
     </div>
   );
 }