mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-08 13:38:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Changed Images, gap between inputs bigger, and input bordercolor based on states

Browse source
This commit is contained in:
Ilay Eble 2025-06-11 15:10:31 +02:00 • committed by Luisa Bellitto
parent 3ba2e81737
commit af935127b3
3 changed files with 25 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

42
code/frontend/src/LoginAndSignUpPage.tsx Normal file
View file

@ -0,0 +1,42 @@
//import React, { use } from 'react';
import "./loginAndSignUpPage.css";
import { useState } from 'react'; //, useEffect
import Header from './header';
//import { url } from 'inspector';
function LoginAndSignUpPage(){
const toggleLogin=(event:React.MouseEvent<HTMLElement>)=>{event.preventDefault(); setSignup(!signup)};
const [signup, setSignup]= useState(false);
return(
<div className='login-display'>
<Header></Header>
<div className="login-login">
<div className='login-part'>
<div className={signup? 'signup-image': 'login-image'}></div>
</div>
<div className='login-part' >
<div className='login-text'>
{signup? "Sign Up": "Login"}
</div>
<div className='login-div-input'>
<img className= 'login-icon' src='/assets/icons/email_orange.svg' alt="icon username"></img>
<input type='text' className='login-input' placeholder='Username'></input>
</div>
{signup? <div className='login-div-input'>
<img className= 'login-icon' src='\assets\icons\username_orange.svg' alt="icon email"></img>
<input type='email' className='login-input' placeholder='Email'></input>
</div> : ""}
<div className='login-div-input'>
<img className= 'login-icon' src='\assets\icons\password_orange.svg' alt="icon password"></img>
<input type='password' className='login-input'placeholder='Password'></input>
</div>
<input type='button' className='login-button' value={signup? "Sign up": "Login"}></input>
<div className='login-signup'>{signup? "Already have an account?": "Don't have an account yet?"} Click <input type="button" className='login-link' onClick={toggleLogin} value={'here'}></input> {signup? "login": "to sign up"}</div>
</div>
</div>
</div>
);
}
export default LoginAndSignUpPage