mirror of
https://github.com/bubblecup-12/VogelSocialMedia.git
synced 2025-07-07 19:18:51 +00:00
remove vogel-social-media-folder from frontend and merge .gitignore into one file
This commit is contained in:
parent
ee58dc5c88
commit
26998153ee
27 changed files with 35 additions and 34 deletions
48
code/frontend/src/App.tsx
Normal file
48
code/frontend/src/App.tsx
Normal file
|
@ -0,0 +1,48 @@
|
|||
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">
|
||||
{isCreate? <h1>Create Account</h1> : <h1>Login</h1> }
|
||||
{isCreate && <>
|
||||
<label htmlFor="email">E-Mail</label>
|
||||
<input id='email' type="email" value={mail} onChange={changeMail}></input>
|
||||
<br /></>}
|
||||
<label htmlFor="username">Username</label>
|
||||
<input id='username' type="text" value={username} onChange={changeUsername}></input>
|
||||
<br />
|
||||
<label htmlFor="password">Password</label>
|
||||
<input id='password' type="password" value={password} onChange={changePassword}/>
|
||||
<br />
|
||||
<input type="button" onClick={() => setIsCreate(!isCreate)} value={isCreate? "Create" : "login"}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
Loading…
Add table
Add a link
Reference in a new issue