2021_dev-profile / dev-profile

Go to a project
Toggle navigation Toggle navigation pinning
Lee SeJin
dc5bc267 1 parent 1f36c8a4

edit profile update

Inline Side-by-side
Showing 14 changed files with 87 additions and 25 deletions
...@@ -117,6 +117,6 @@ dist ...@@ -117,6 +117,6 @@ dist
117 .pnp.* 117 .pnp.*
118 118
119 package-lock.json 119 package-lock.json
120 -uploads 120 +/uploads
121 static 121 static
122 build 122 build
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
22 "express-session": "^1.17.1", 22 "express-session": "^1.17.1",
23 "mongoose": "^5.12.9", 23 "mongoose": "^5.12.9",
24 "morgan": "^1.10.0", 24 "morgan": "^1.10.0",
25 + "multer": "^1.4.2",
25 "nodemon": "^2.0.7", 26 "nodemon": "^2.0.7",
26 "passport": "^0.4.1", 27 "passport": "^0.4.1",
27 "passport-github2": "^0.1.12", 28 "passport-github2": "^0.1.12",
......
...@@ -23,11 +23,48 @@ export const getUserDetail = async (req,res) =>{ ...@@ -23,11 +23,48 @@ export const getUserDetail = async (req,res) =>{
23 res.render("userDetail",{pagetTitle:"User Detail", quote:quote.quote, author:quote.author}) 23 res.render("userDetail",{pagetTitle:"User Detail", quote:quote.quote, author:quote.author})
24 } 24 }
25 25
26 -export const getEditProfile = (req,res)=> res.render("editProfile",{pageTitle:"Edit Profile"}); 26 +export const getEditProfile = async (req,res)=> {
27 + const{
28 + user:{_id:id}
29 + } = req;
30 + try{
31 + const user = await User.findById(id);
32 + if(user.id !== id){
33 + throw Error();
34 + } else{
35 + res.render("editProfile",{pageTitle:"Edit Profile", user});
36 + }
37 + }catch(error){
38 + console.log(error);
39 + }
40 +};
27 41
28 -export const postEditProfile = (req,res) =>{ 42 +export const postEditProfile = async (req,res) =>{
29 - console.log(req.body); 43 + const {
44 + user:{_id:id},
45 + body: {name, email, school, blogUrl, tech, career, introduction},
46 + file
47 + } = req;
48 + try{
49 + const updatedUser = await User.findByIdAndUpdate(id, {
50 + avatarUrl: file ? file.path : req.session.passport.user.avatarUrl,
51 + name,
52 + email,
53 + school,
54 + blogUrl,
55 + tech: User.formatTech(tech),
56 + career: User.formatCareer(career),
57 + introduction
58 + },
59 + {
60 + new: true
61 + });
62 + req.session.passport.user = updatedUser;
30 res.redirect("/users/edit-profile"); 63 res.redirect("/users/edit-profile");
64 + }catch(error){
65 + console.log(error);
66 + res.redirect("/");
67 + }
31 }; 68 };
32 69
33 70
...@@ -49,7 +86,7 @@ export const githubLoginCallback = async (_, __, profile, done) =>{ ...@@ -49,7 +86,7 @@ export const githubLoginCallback = async (_, __, profile, done) =>{
49 const {_json: {id:githubId, login:githubName, avatar_url:avatarUrl, name, email}} = profile; 86 const {_json: {id:githubId, login:githubName, avatar_url:avatarUrl, name, email}} = profile;
50 87
51 try{ 88 try{
52 - const user = await User.findOne({email}); 89 + const user = await User.findOne({githubId});
53 if(user){ 90 if(user){
54 user.githubId = githubId, 91 user.githubId = githubId,
55 user.githubName = githubName 92 user.githubName = githubName
......
1 +import multer from "multer";
2 +
1 export const localsMiddleware = (req,res,next) => { 3 export const localsMiddleware = (req,res,next) => {
2 res.locals.siteName = "Dev Profile"; 4 res.locals.siteName = "Dev Profile";
3 res.locals.loggedUser = req.user || null; 5 res.locals.loggedUser = req.user || null;
...@@ -20,3 +22,10 @@ export const onlyPrivate = (req, res, next) => { ...@@ -20,3 +22,10 @@ export const onlyPrivate = (req, res, next) => {
20 res.redirect("/"); 22 res.redirect("/");
21 } 23 }
22 }; 24 };
25 +
26 +export const uploadFiles = multer({
27 + dest:"uploads/",
28 + limits: {
29 + fileSize: 3000000
30 + }
31 +});
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -27,7 +27,7 @@ const UserSchema = new mongoose.Schema({ ...@@ -27,7 +27,7 @@ const UserSchema = new mongoose.Schema({
27 }, 27 },
28 tech: [{ type: String, trim: true }], 28 tech: [{ type: String, trim: true }],
29 career: [{ type: String, trim: true }], 29 career: [{ type: String, trim: true }],
30 - introduction: String, 30 + introduction: { type: String, maxLength: 500},
31 createdAt: { 31 createdAt: {
32 type: Date, 32 type: Date,
33 default: Date.now 33 default: Date.now
......
...@@ -12,9 +12,10 @@ globalRouter.get("/join", onlyPublic, getJoin); ...@@ -12,9 +12,10 @@ globalRouter.get("/join", onlyPublic, getJoin);
12 globalRouter.get("/login", onlyPublic, getLogin); 12 globalRouter.get("/login", onlyPublic, getLogin);
13 globalRouter.get("/logout", onlyPrivate, logout); 13 globalRouter.get("/logout", onlyPrivate, logout);
14 14
15 -globalRouter.get("/auth/github", githubLogin); 15 +globalRouter.get("/auth/github", onlyPublic, githubLogin);
16 globalRouter.get( 16 globalRouter.get(
17 "/auth/github/callback", 17 "/auth/github/callback",
18 + onlyPublic,
18 passport.authenticate("github",{failureRedirect: "/login"}), 19 passport.authenticate("github",{failureRedirect: "/login"}),
19 postGithubLogin 20 postGithubLogin
20 ); 21 );
......
1 import express from "express"; 1 import express from "express";
2 import { getEditProfile, getUserDetail, handleUsers, postEditProfile } from "../controllers/userController"; 2 import { getEditProfile, getUserDetail, handleUsers, postEditProfile } from "../controllers/userController";
3 -import { onlyPrivate } from "../middlewares"; 3 +import { onlyPrivate, uploadFiles } from "../middlewares";
4 4
5 5
6 const userRouter = express.Router(); 6 const userRouter = express.Router();
...@@ -8,7 +8,7 @@ const userRouter = express.Router(); ...@@ -8,7 +8,7 @@ const userRouter = express.Router();
8 userRouter.get("/",handleUsers); 8 userRouter.get("/",handleUsers);
9 9
10 userRouter.get("/edit-profile", onlyPrivate, getEditProfile); 10 userRouter.get("/edit-profile", onlyPrivate, getEditProfile);
11 -userRouter.post("/edit-profile", onlyPrivate, postEditProfile); 11 +userRouter.post("/edit-profile", onlyPrivate, uploadFiles.single("photo"),postEditProfile);
12 12
13 userRouter.get("/:id", getUserDetail); 13 userRouter.get("/:id", getUserDetail);
14 14
......
...@@ -32,6 +32,7 @@ app.use(passport.initialize()); ...@@ -32,6 +32,7 @@ app.use(passport.initialize());
32 app.use(passport.session()); 32 app.use(passport.session());
33 33
34 app.use(localsMiddleware); 34 app.use(localsMiddleware);
35 +app.use("/uploads", express.static("uploads"));
35 app.use("/", globalRouter); 36 app.use("/", globalRouter);
36 app.use("/users", userRouter); 37 app.use("/users", userRouter);
37 38
......
...@@ -2,15 +2,23 @@ extends layouts/main ...@@ -2,15 +2,23 @@ extends layouts/main
2 2
3 block content 3 block content
4 .form-container 4 .form-container
5 - form(action="/users/edit-profile", method="POST", enctype="application/json") 5 + form(action="/users/edit-profile", method="POST", enctype="multipart/form-data")
6 + img(src=`/${loggedUser.avatarUrl}`, width="100", height="120")
6 .fileUpload 7 .fileUpload
7 - label(for="picture") Picture 8 + label(for="photo") Photo
8 - input(type="file", id="picture", name="picture", accept="image/*") 9 + input(type="file", id="photo", name="photo", accept="image/*")
9 - input(type="text", placeholder="Name", name="name") 10 + label(for="name") Name
10 - input(type="text", placeholder="Github Id", name="githubId") 11 + input(type="text", id="name",placeholder="Name", name="name", value=user.name)
11 - input(type="email", placeholder="Email", name="email") 12 + label(for="email") Email
12 - input(type="text", placeholder="School", name="school") 13 + input(type="email", id="email", placeholder="Email", name="email", value=user.email)
13 - textarea(name="tech", placeholder="Add your Tech") 14 + label(for="school") School
14 - textarea(name="career", placeholder="Add your Career") 15 + input(type="text", id="school",placeholder="School", name="school", value=user.school)
15 - textarea(name="introduction", placeholder="Self introduction") 16 + label(for="blogUrl") Blog Url
17 + input(type="text", id="blogUrl", placeholder="Blog url", name="blogUrl", value=user.blogUrl)
18 + label(for="tech") Enter your tech skills seperated by comma. ex)react,node
19 + textarea(name="tech", id="tech", placeholder="Add Tech you can use")=user.tech
20 + label(for="career") Enter your careers seperated by comma. ex)A company, B competition
21 + textarea(name="career", id="career", placeholder="Add your Career")=user.career
22 + label(for="introduction") Self introduction
23 + textarea(name="introduction", id="introduction", placeholder="Self introduction", maxlength=200)=user.introduction
16 input(type="submit", value="Update Profile") 24 input(type="submit", value="Update Profile")
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -7,7 +7,11 @@ block content ...@@ -7,7 +7,11 @@ block content
7 h1 -Developer Profile- 7 h1 -Developer Profile-
8 h2=quote 8 h2=quote
9 h3=author 9 h3=author
10 +
11 + if !loggedUser
10 .home-link 12 .home-link
11 a(href="/join") Join 13 a(href="/join") Join
12 |#{' '} 14 |#{' '}
13 a(href="/login") Login 15 a(href="/login") Login
16 + else
17 + a(href=`/users/${loggedUser._id}`) My profile
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,10 +3,9 @@ extends layouts/main ...@@ -3,10 +3,9 @@ extends layouts/main
3 block content 3 block content
4 i.fas.fa-location-arrow 4 i.fas.fa-location-arrow
5 h3 Start with GitHub! 5 h3 Start with GitHub!
6 - button.login-github
7 a(href="/auth/github") 6 a(href="/auth/github")
8 - span 7 + .login-github
9 i.fab.fa-github 8 i.fab.fa-github
10 - |Join with GitHub 9 + span Join with GitHub
11 10
12 11
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,10 +3,9 @@ extends layouts/main ...@@ -3,10 +3,9 @@ extends layouts/main
3 block content 3 block content
4 i.fas.fa-location-arrow 4 i.fas.fa-location-arrow
5 h3 Login with GitHub! 5 h3 Login with GitHub!
6 - button.login-github
7 a(href="/auth/github") 6 a(href="/auth/github")
8 - span 7 + .login-github
9 i.fab.fa-github 8 i.fab.fa-github
10 - |Login with GitHub 9 + span Login with GitHub
11 10
12 11
...\ No newline at end of file ...\ No newline at end of file
......
1 footer.footer 1 footer.footer
2 + hr
2 .footer__icon 3 .footer__icon
3 i.fas.fa-code-branch 4 i.fas.fa-code-branch
4 span.footer__text © dev-profile #{new Date().getFullYear()} 5 span.footer__text © dev-profile #{new Date().getFullYear()}
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -14,6 +14,8 @@ header.header ...@@ -14,6 +14,8 @@ header.header
14 li 14 li
15 a(href="/") Home 15 a(href="/") Home
16 li 16 li
17 + a(href=`/users/${loggedUser._id}`) My Profile
18 + li
17 a(href="/users/edit-profile") Edit Profile 19 a(href="/users/edit-profile") Edit Profile
18 li 20 li
19 a(href="/logout") Log Out 21 a(href="/logout") Log Out
...\ No newline at end of file ...\ No newline at end of file
......