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

Basic Login and Signup (Desktop)

Browse source
This commit is contained in:
Ilay Eble 2025-06-09 12:36:50 +02:00 • committed by Luisa Bellitto
parent e7c3b268db
commit 739a0e1c54
3 changed files with 33 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
code/frontend/public/assets/images/OwlSignUp.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 223 KiB

21
code/frontend/src/Login.css
View file

@ -126,6 +126,22 @@
background-position: 75%; background-position: 75%;
} }
.signup-image{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 8px;
border: 5px solid var(--Rotkehlchen-gray-default);
background-image: url("../public/assets/images/OwlSignUp.png");
background-size: cover;
background-position: 75%;
}
.login-part{ .login-part{
width: 45%; width: 45%;
height: 90%; height: 90%;
@ -161,3 +177,8 @@
line-height: 17px; line-height: 17px;
letter-spacing: 0.8px; letter-spacing: 0.8px;
} }
/* Desktop view*/
@media only screen and (min-width: 768px) {
}

17
code/frontend/src/Login.tsx
View file

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