비밀번호 변경으로 넘어가 본다.
그 페이지도 만들어 보고 user profile을 깔끔하게 만들어 본다.
이 다음에는 아바타를 변경하는것도 해본다.
edit-profile.pug에서
hr
a(href="change-password") Change Password →change-password로 가는 링크를 추가해주었다.
보다시피 URL이 아니라 상대 URL을 사용하고 있다. 이렇게 해주면 브라우저가 (/users)부터가 아니라 (/edit)만 바꿔준다.
userController.js로 가서
export const getChangePassword = (req, res) => {
return res.render("change-password", { pageTitle: "Change Password" });
};
export const postChangePassword = (req, res) => {
// send notification
return res.redirect("/");
};getChangePassword는 "change-password"를 render하도록 한다.
pageTitle은 Change Password이다.
pageTitle을 입력한 이유는 나중에change-password를base template으로 부터extend하는데pageTitle이 필요하기 때문이다.
postChangePassword에서는 홈으로 redirect를 해준다.
나중에 비밀번호 바꿨다고 알려주는 메세지도 보낼거다.
getChangePassword도 있고 postChangePassword도 있다.
이제 userRouter로 가서 change-password url을 만들어 준다.
userRouter.get("/logout", protectorMiddleware, logout);
userRouter.route("/edit").all(protectorMiddleware).get(getEdit).post(postEdit);
userRouter
.route("/change-password")
.all(protectorMiddleware)
.get(getChangePassword)
.post(postChangePassword);테스트해서 확인해 보면 에러가 뜬다. 콘솔에서 확인해 본다.
Error: Failed to lookup view "change-password" in views directory"view를 찾는데 실패 하였다"고 한다.
view로 가서 change-password.pug를 만들어 준다.
그리고 views폴더에 파일들이 많아졌다. users폴더를 하나 만들어줘서 넣어주었다.
앞으로 많은 templates가 만들어 질텐데 user폴더 video폴더를 만들어서 정리하면 도움이 될거다.
span Change Password이렇게 해주고 테스트해보면 아직 안되고 있다.
userController.js에서
export const getChangePassword = (req, res) => {
return res.render("users/change-password", { pageTitle: "Change Password" });URL을 변경해주면 작동한다. 이렇게 view안 폴더에 template을 넣으면 된다.
물론 이게 몇몇 변화를 일으킨다. 예를 들면 여태 해왔던 것처럼 extends base를 하고 작동시켜 본다.
extends base
block content
span Change Password이렇게 해주고 테스트를 해보면 작동하지 않는다.에러를 살펴보면 users안에 존재하지 않는 base를 찾고 있기 때문에 안되는거다.
이 디렉토리를 벗어나기 위해 ../을 추가해 준다. 그러면 작동한다.
extends ../base
block content
span Change Passwordtemplate들을 폴더에 넣기로 했다면 파일 시스템을 따라야 한다는 걸 기억해야 한다.
이 경우에는 change-password가 users폴더 안에 있으니까 거기서 나와야 한다.
base.pug를 사용 할수 있도록 했다.
change-password에는 form이 필요하다.
extends ../base
block content
form(method="POST")
input(placeholder="Old Password",name="password", type="password", requeired)
input(placeholder="New Password",name="password", type="password", requeired)
input(placeholder="New Confirm Password",name="password2", type="password", requeired)
input(type="submit", value="Change Password")
한가지 문제점이 존재한다. 깃허브를 통해 계정을 만든 경우에는 비밀번호 변경을 볼수 없어야 한다.
깃허브 계정을 사용했다면 비밀번호가 필요 없기에 그렇다. 그러니 비밀번호를 바꿀 필요가 없다.
두가지 옵션이 있다.
하나는 userController의 getChangePassword에서 로그인된 사용자의 정보를 확인하는거다.
export const getChangePassword = (req, res) => {
if (req.session.user.socialOnly === true) {
return res.redirect("/");
}
return res.render("users/change-password", { pageTitle: "Change Password" });
};이게 첫번째 방법이다.
다른방법은 form을 볼수는 있지만 사용할수 없게 하는거다. 비밀번호가 있어야만 변경가능하다고 하는거다.
새로고침을 하면 잘 작동하고 있다. 깃허브로 로그인했을때 change password가 숨겨지면 더 좋을것 같다.
edit-profile view로 가서
block content
if errorMessage
span=errorMessage
form(method="POST")
input(placeholder="Name",name="name", type="text", requeired, value=loggedInUser.name)
input(placeholder="Email",name="email", type="email", requeired, value=loggedInUser.email)
input(placeholder="Username",name="username", type="text", requeired, value=loggedInUser.username)
input(placeholder="Location",name="location", type="text", requeired, value=loggedInUser.location)
input(type="submit", value="Update Profile")
if !loggedInUser.socialOnly
hr
a(href="change-password") Change Password →loggedInUser는 모든 pug에서 사용 가능한 local에서 가져오는 변수이다.
그래서 loggedInUser을 이용 할수 있는거다.
if !loggedInUser.socialOnly이면 (socialOnly)가 아니라면 링크가 안보이게 해주었다.
새로고침을 하면 링크가 보이지 않게 되었다. 이게 첫 번째 방법이였다.
다른 방법은 링크와 form을 보여주지만 버튼을 없애 줄거다.
DB에 있는 데이터들을 다 지워야 한다. 깃허브가 아니라 form으로 생성된 계정이 필요하기에 그렇다.
