mirror of
https://github.com/bubblecup-12/VogelSocialMedia.git
synced 2025-07-06 15:18:48 +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
|
|
@ -4,10 +4,6 @@
|
|||
"main": "index.js",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@prisma/client": "^6.9.0",
|
||||
"@types/bcryptjs": "^3.0.0",
|
||||
"@types/multer": "^1.4.12",
|
||||
"@types/readline-sync": "^1.4.8",
|
||||
"bcryptjs": "^3.0.2",
|
||||
"cors": "^2.8.5",
|
||||
"dotenv": "^16.5.0",
|
||||
|
|
@ -23,9 +19,14 @@
|
|||
"zod": "^3.24.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@prisma/client": "^6.9.0",
|
||||
"@types/bcryptjs": "^3.0.0",
|
||||
"@types/cors": "^2.8.19",
|
||||
"@types/express": "^5.0.1",
|
||||
"@types/jsonwebtoken": "^9.0.9",
|
||||
"@types/multer": "^1.4.12",
|
||||
"@types/node": "^22.15.2",
|
||||
"@types/readline-sync": "^1.4.8",
|
||||
"@types/swagger-jsdoc": "^6.0.4",
|
||||
"@types/swagger-ui-express": "^4.1.8",
|
||||
"nodemon": "^3.1.10",
|
||||
|
|
|
|||
|
|
@ -11,8 +11,10 @@ export function validateData(schema: z.ZodObject<any, any>) {
|
|||
} catch (error) {
|
||||
if (error instanceof ZodError) {
|
||||
const errorMessages = error.errors.map((issue: any) => ({
|
||||
message: `${issue.path.join(".")} is ${issue.message}`,
|
||||
path: issue.path.join("."),
|
||||
message: issue.message,
|
||||
}));
|
||||
|
||||
res
|
||||
.status(StatusCodes.BAD_REQUEST)
|
||||
.json({ error: "Invalid data", details: errorMessages });
|
||||
|
|
|
|||
|
|
@ -5,12 +5,21 @@ import userRouter from "./routes/userRoutes";
|
|||
import postRouter from "./routes/postRoutes";
|
||||
import { authenticateToken } from "./middleware/authenticateToken";
|
||||
import bodyParser from "body-parser";
|
||||
|
||||
import cors from "cors";
|
||||
dotenv.config();
|
||||
|
||||
const app = express();
|
||||
const port = 3000;
|
||||
|
||||
const port = 3001;
|
||||
app.use(
|
||||
cors({
|
||||
origin: "http://localhost:3000",
|
||||
credentials: true,
|
||||
})
|
||||
);
|
||||
app.use((req, res, next) => {
|
||||
res.header("Access-Control-Expose-Headers", "Authorization");
|
||||
next();
|
||||
});
|
||||
// minIO config
|
||||
export const minioClient = new Client({
|
||||
endPoint: "localhost", // Replace with your MinIO server URL
|
||||
|
|
@ -34,7 +43,7 @@ const options = {
|
|||
},
|
||||
servers: [
|
||||
{
|
||||
url: "http://localhost:3000",
|
||||
url: `http://localhost:${port}`,
|
||||
},
|
||||
],
|
||||
components: {
|
||||
|
|
@ -56,7 +65,6 @@ const options = {
|
|||
};
|
||||
const specs = swaggerJSDoc(options);
|
||||
app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(specs));
|
||||
|
||||
app.use(bodyParser.json());
|
||||
app.use("/api/user", userRouter);
|
||||
app.use("/api/posts", authenticateToken(), postRouter);
|
||||
|
|
|
|||
|
|
@ -159,6 +159,13 @@
|
|||
dependencies:
|
||||
"@types/node" "*"
|
||||
|
||||
"@types/cors@^2.8.19":
|
||||
version "2.8.19"
|
||||
resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.19.tgz#d93ea2673fd8c9f697367f5eeefc2bbfa94f0342"
|
||||
integrity sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==
|
||||
dependencies:
|
||||
"@types/node" "*"
|
||||
|
||||
"@types/express-serve-static-core@^5.0.0":
|
||||
version "5.0.6"
|
||||
resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-5.0.6.tgz#41fec4ea20e9c7b22f024ab88a95c6bb288f51b8"
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
"@types/node": "^16.7.13",
|
||||
"@types/react": "^19.0.0",
|
||||
"@types/react-dom": "^19.0.0",
|
||||
"axios": "^1.10.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-scripts": "5.0.1",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
? "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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
flex-direction: row;
|
||||
border-radius: 4px;
|
||||
border: 3px solid var(--Rotkehlchen-brown-dark);
|
||||
background: #FFF;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
align-items: center;
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
}
|
||||
|
||||
.login-div-input:focus-within {
|
||||
border: 3px solid var(--Rotkehlchen-orange-default)
|
||||
border: 3px solid var(--Rotkehlchen-orange-default);
|
||||
}
|
||||
|
||||
.login-input {
|
||||
|
|
@ -79,7 +79,6 @@
|
|||
border: none;
|
||||
color: var(--Rotkehlchen-brown-middle);
|
||||
outline: 0 !important;
|
||||
|
||||
}
|
||||
.login-here {
|
||||
color: var(--Rotkehlchen-orange-default);
|
||||
|
|
@ -90,7 +89,7 @@
|
|||
}
|
||||
|
||||
.login-signup {
|
||||
color: #FFF;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -130,6 +129,7 @@
|
|||
height: 60vh;
|
||||
min-height: 400px;
|
||||
min-width: 500px;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.login-image {
|
||||
|
|
@ -183,3 +183,6 @@
|
|||
gap: 16px;
|
||||
}
|
||||
}
|
||||
.error-messages {
|
||||
color: red;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2751,6 +2751,15 @@ axe-core@^4.10.0:
|
|||
resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.10.3.tgz#04145965ac7894faddbac30861e5d8f11bfd14fc"
|
||||
integrity sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==
|
||||
|
||||
axios@^1.10.0:
|
||||
version "1.10.0"
|
||||
resolved "https://registry.yarnpkg.com/axios/-/axios-1.10.0.tgz#af320aee8632eaf2a400b6a1979fa75856f38d54"
|
||||
integrity sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==
|
||||
dependencies:
|
||||
follow-redirects "^1.15.6"
|
||||
form-data "^4.0.0"
|
||||
proxy-from-env "^1.1.0"
|
||||
|
||||
axobject-query@^4.1.0:
|
||||
version "4.1.0"
|
||||
resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-4.1.0.tgz#28768c76d0e3cff21bc62a9e2d0b6ac30042a1ee"
|
||||
|
|
@ -4655,7 +4664,7 @@ flatted@^3.2.9:
|
|||
resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.3.tgz#67c8fad95454a7c7abebf74bb78ee74a44023358"
|
||||
integrity sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==
|
||||
|
||||
follow-redirects@^1.0.0:
|
||||
follow-redirects@^1.0.0, follow-redirects@^1.15.6:
|
||||
version "1.15.9"
|
||||
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
|
||||
integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
|
||||
|
|
@ -4704,6 +4713,17 @@ form-data@^3.0.0:
|
|||
es-set-tostringtag "^2.1.0"
|
||||
mime-types "^2.1.35"
|
||||
|
||||
form-data@^4.0.0:
|
||||
version "4.0.3"
|
||||
resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.3.tgz#608b1b3f3e28be0fccf5901fc85fb3641e5cf0ae"
|
||||
integrity sha512-qsITQPfmvMOSAdeyZ+12I1c+CKSstAFAwu+97zrnWAbIr5u8wfsExUzCesVLC8NgHuRUqNN4Zy6UPWUTRGslcA==
|
||||
dependencies:
|
||||
asynckit "^0.4.0"
|
||||
combined-stream "^1.0.8"
|
||||
es-set-tostringtag "^2.1.0"
|
||||
hasown "^2.0.2"
|
||||
mime-types "^2.1.12"
|
||||
|
||||
forwarded@0.2.0:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
|
||||
|
|
@ -6499,7 +6519,7 @@ mime-db@1.52.0:
|
|||
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.54.0.tgz#cddb3ee4f9c64530dff640236661d42cb6a314f5"
|
||||
integrity sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==
|
||||
|
||||
mime-types@^2.1.27, mime-types@^2.1.31, mime-types@^2.1.35, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
|
||||
mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@^2.1.35, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
|
||||
version "2.1.35"
|
||||
resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
|
||||
integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
|
||||
|
|
@ -7677,6 +7697,11 @@ proxy-addr@~2.0.7:
|
|||
forwarded "0.2.0"
|
||||
ipaddr.js "1.9.1"
|
||||
|
||||
proxy-from-env@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
|
||||
integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
|
||||
|
||||
psl@^1.1.33:
|
||||
version "1.15.0"
|
||||
resolved "https://registry.yarnpkg.com/psl/-/psl-1.15.0.tgz#bdace31896f1d97cec6a79e8224898ce93d974c6"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue