mirror of
https://github.com/bubblecup-12/VogelSocialMedia.git
synced 2025-07-07 06:08:54 +00:00
added function to the login
This commit is contained in:
Kai Ritthaler
Rudi Regentonne
parent
897e8dbed9
commit
c32e345d3d
8 changed files with 292 additions and 174 deletions
|
|
@ -1,23 +1,73 @@
|
|||
import "./loginAndSignUpPage.css";
|
||||
import { useState } from "react";
|
||||
import axios from "axios";
|
||||
|
||||
type FormData = {
|
||||
username: string;
|
||||
email: string;
|
||||
password: string;
|
||||
};
|
||||
|
||||
function LoginAndSignUpPage() {
|
||||
const toggleLogin = (event: React.MouseEvent<HTMLElement>) => {
|
||||
event.preventDefault();
|
||||
setErrorMessages(undefined);
|
||||
setSignup(!signup);
|
||||
};
|
||||
const [signup, setSignup] = useState(false);
|
||||
const [signup, setSignup] = useState<boolean>(false);
|
||||
const [errorMessages, setErrorMessages] = useState<{
|
||||
error: String;
|
||||
details: { message: string }[];
|
||||
}>();
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
username: "",
|
||||
email: "",
|
||||
password: "",
|
||||
});
|
||||
|
||||
const onSubmit = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
setErrorMessages(undefined);
|
||||
try {
|
||||
const response = signup
|
||||
? await axios.post("http://localhost:3001/api/user/register", {
|
||||
email: formData.email,
|
||||
username: formData.username,
|
||||
password: formData.password,
|
||||
})
|
||||
: await axios.post("http://localhost:3001/api/user/login", {
|
||||
username: formData.username,
|
||||
password: formData.password,
|
||||
});
|
||||
const authHeader = response.headers["authorization"];
|
||||
if (authHeader && authHeader.startsWith("Bearer ")) {
|
||||
const token = authHeader.substring(7);
|
||||
console.log(token, "Hello");
|
||||
localStorage.setItem("token", token);
|
||||
}
|
||||
} catch (err: any) {
|
||||
setErrorMessages(err.response.data);
|
||||
console.error("error:", err.response.data);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = event.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
return (
|
||||
<div className="background">
|
||||
<div className="login-login">
|
||||
<div className="login-part">
|
||||
<div className={signup ? "signup-image" : "login-image"}></div>
|
||||
</div>
|
||||
<div className="login-part">
|
||||
<form onSubmit={onSubmit} className="login-part">
|
||||
<div className="login-text small-title">
|
||||
{signup ? "Sign Up" : "Login"}
|
||||
</div>
|
||||
|
||||
<div className="input-fields">
|
||||
<div className="login-div-input">
|
||||
<img
|
||||
|
|
@ -28,8 +78,12 @@ function LoginAndSignUpPage() {
|
|||
<input
|
||||
type="text"
|
||||
className="login-input"
|
||||
name="username"
|
||||
placeholder="Username"
|
||||
></input>
|
||||
value={formData.username}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{signup ? (
|
||||
<div className="login-div-input">
|
||||
|
|
@ -41,8 +95,12 @@ function LoginAndSignUpPage() {
|
|||
<input
|
||||
type="email"
|
||||
className="login-input"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
></input>
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
|
|
@ -57,22 +115,35 @@ function LoginAndSignUpPage() {
|
|||
<input
|
||||
type="password"
|
||||
className="login-input"
|
||||
name="password"
|
||||
placeholder="Password"
|
||||
></input>
|
||||
value={formData.password}
|
||||
onChange={handleChange}
|
||||
required
|
||||
minLength={signup ? 8 : undefined}
|
||||
/>
|
||||
</div>
|
||||
{errorMessages && (
|
||||
<div className="error-messages">
|
||||
{errorMessages.details.map((detial, index) => (
|
||||
<p key={index}>{detial.message}</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="button"
|
||||
type="submit"
|
||||
className="login-button body-m"
|
||||
value={signup ? "Sign up" : "Login"}
|
||||
></input>
|
||||
<div className="login-signup body-m" onClick={toggleLogin}>
|
||||
{signup ? "Already have an account?" : "Don't have an account yet?"}{" "}
|
||||
Click <span className="login-here body-m">here</span>{" "}
|
||||
{signup ? "to login." : "to sign up."}
|
||||
{signup
|
||||
? "Already have an account? "
|
||||
: "Don't have an account yet? "}
|
||||
Click <span className="login-here">here</span>
|
||||
{signup ? " to login." : " to sign up."}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,185 +1,188 @@
|
|||
.background{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh; /* Full viewport height */
|
||||
width: 100vw; /* Full viewport width */
|
||||
background: var(--gradient-blue-backround-mobile);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-attachment: fixed;
|
||||
.background {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh; /* Full viewport height */
|
||||
width: 100vw; /* Full viewport width */
|
||||
background: var(--gradient-blue-backround-mobile);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.login-text{
|
||||
display: flex;
|
||||
padding: 40px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
color: var(--Rotkehlchen-gray);
|
||||
text-align: center;
|
||||
.login-text {
|
||||
display: flex;
|
||||
padding: 40px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
color: var(--Rotkehlchen-gray);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-icon{
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
aspect-ratio: 1/1;
|
||||
align-self: center;
|
||||
.login-icon {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
aspect-ratio: 1/1;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.login-button{
|
||||
display: inline-flex;
|
||||
padding: auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
.login-button {
|
||||
display: inline-flex;
|
||||
padding: auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--Rotkehlchen-orange-default);
|
||||
background: var(--Rotkehlchen-yellow-default);
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--Rotkehlchen-orange-default);
|
||||
background: var(--Rotkehlchen-yellow-default);
|
||||
}
|
||||
|
||||
.login-button:hover{
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--Rotkehlchen-orange-default);
|
||||
background: var(--Rotkehlchen-yellow-hover);
|
||||
.login-button:hover {
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--Rotkehlchen-orange-default);
|
||||
background: var(--Rotkehlchen-yellow-hover);
|
||||
}
|
||||
.login-button:active{
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--Rotkehlchen-orange-default);
|
||||
background: var(--Rotkehlchen-orange-default);
|
||||
.login-button:active {
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--Rotkehlchen-orange-default);
|
||||
background: var(--Rotkehlchen-orange-default);
|
||||
}
|
||||
|
||||
.login-div-input{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-radius: 4px;
|
||||
border: 3px solid var(--Rotkehlchen-brown-dark);
|
||||
background: #FFF;
|
||||
width:100%;
|
||||
height: 44px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
.login-div-input {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-radius: 4px;
|
||||
border: 3px solid var(--Rotkehlchen-brown-dark);
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.login-div-input:hover{
|
||||
border: 3px solid var(--Rotkehlchen-brown-middle);
|
||||
.login-div-input:hover {
|
||||
border: 3px solid var(--Rotkehlchen-brown-middle);
|
||||
}
|
||||
|
||||
.login-div-input:focus-within{
|
||||
border: 3px solid var(--Rotkehlchen-orange-default)
|
||||
.login-div-input:focus-within {
|
||||
border: 3px solid var(--Rotkehlchen-orange-default);
|
||||
}
|
||||
|
||||
.login-input{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: none;
|
||||
color: var(--Rotkehlchen-brown-middle);
|
||||
outline: 0 !important;
|
||||
|
||||
.login-input {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: none;
|
||||
color: var(--Rotkehlchen-brown-middle);
|
||||
outline: 0 !important;
|
||||
}
|
||||
.login-here{
|
||||
color: var(--Rotkehlchen-orange-default);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
.login-here {
|
||||
color: var(--Rotkehlchen-orange-default);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-signup{
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
.login-signup {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-part{
|
||||
display: flex;
|
||||
padding: 8px 40px 40px 40px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
.login-part {
|
||||
display: flex;
|
||||
padding: 8px 40px 40px 40px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.input-fields {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* Desktop view*/
|
||||
@media only screen and (min-width: 768px) {
|
||||
.login-display{
|
||||
min-width: 850px;
|
||||
min-height: 800px;
|
||||
}
|
||||
.login-login{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-radius: 4px;
|
||||
background: rgba(13, 10, 56, 0.71);
|
||||
box-shadow: 0px 5px 8.9px 15px rgba(115, 116, 206, 0.25);
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
width: 50vw;
|
||||
height: 60vh;
|
||||
min-height: 400px;
|
||||
min-width: 500px;
|
||||
}
|
||||
|
||||
.login-image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.login-display {
|
||||
min-width: 850px;
|
||||
min-height: 800px;
|
||||
}
|
||||
.login-login {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-radius: 4px;
|
||||
background: rgba(13, 10, 56, 0.71);
|
||||
box-shadow: 0px 5px 8.9px 15px rgba(115, 116, 206, 0.25);
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
width: 50vw;
|
||||
height: 60vh;
|
||||
min-height: 400px;
|
||||
min-width: 500px;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.login-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border-radius: 8px;
|
||||
border: 5px solid var(--Rotkehlchen-gray);
|
||||
background-image: url("../../public/assets/images/IceBirdLogin.jpg");
|
||||
background-size: cover;
|
||||
background-position: 75%;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.signup-image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
border: 5px solid var(--Rotkehlchen-gray);
|
||||
background-image: url("../../public/assets/images/IceBirdLogin.jpg");
|
||||
background-size: cover;
|
||||
background-position: 75%;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.signup-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border-radius: 8px;
|
||||
border: 5px solid var(--Rotkehlchen-gray);
|
||||
background-image: url("../../public/assets/images/SummerOwlSignup.jpg");
|
||||
background-size: cover;
|
||||
/*background-position: 75%;*/
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.login-part{
|
||||
width: 45%;
|
||||
height: 90%;
|
||||
padding:3%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.input-fields {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
border-radius: 8px;
|
||||
border: 5px solid var(--Rotkehlchen-gray);
|
||||
background-image: url("../../public/assets/images/SummerOwlSignup.jpg");
|
||||
background-size: cover;
|
||||
/*background-position: 75%;*/
|
||||
}
|
||||
|
||||
.login-part {
|
||||
width: 45%;
|
||||
height: 90%;
|
||||
padding: 3%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.input-fields {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
.error-messages {
|
||||
color: red;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue