[유튜브 클론코딩] 2.20 Change Profile HTML

2.20 Change Profile HTML

이번 파트에서는 editProfile.pug , changePassword.pug, upload.pug, editVideo.pug를 만들 것이다.

(form으로 된 페이지 몰아서 만드는 거임)

 

 

join과 login은 했고

User Detail은 form 페이지가 아님

Edit Profile은 form 페이지야. --> 이거 작업하기

 

editProfile.pug 작성하기

join에서 사용한 것과 같은 클래스 그대로 쓴다.

.form__container 이걸 모든 곳에 그대로 쓸 것이다.

그리고 이 안에 form 태그를 추가한다.

 

extends layouts/main

block content 

    .form-container 

        form(action=`/users${routes.editProfile}`, method="post")

            label(for="avatar") Avatar

            input(type="file", id="avatar", name="avatar")

            input(type="text",name="name", placeholder="Name")

            input(type="email", name="name", placeholder="Email")

            input(type="submit", value="Update Profile")

        a.form-container__link(href=`/users${routes.changePassword}`) Change Password

↑ editProfile.pug

 

 

changePassword.pug 작성하기

extends layouts/main

block content 

    .form-container 

        form(action=`/users${routes.changePassword}`, method="post")

            input(type="password", name="oldPassword", placeholder="Current Password")

            input(type="password", name="newPassword", placeholder="New Password")

            input(type="password", name="newPassword2",placeholder="Verify New Password")

            input(type="submit", value="Change Password")

↑ changepassword.pug

 

upload.pug 작성하기

extends layouts/main

block content 

    .form-container 

        form(action=`/videos${routes.upload}`, method="post")

            label(for="file") Video File

            input(type="file", id="file", name="file")

            input(type="text",name="title", placeholder="Name")

            textarea(name="description", placeholder="Description")

            input(type="submit", value="Upload Video")

↑ upload.pug

 

editVideo.pug 작성하기

extends layouts/main

block content 

    .form-container 

        form(action=`/videos${routes.editVideo}`, method="post")

            input(type="text", placeholder="Title", name="title")

            textarea(name="description", placeholder="Description")

            input(type="submit" value="Update Video")

    a.form-container__link.form-container__link--delete(href=`/videos${routes.deleteVideo}`) Delete Video

↑ editVideo.pug