dbs333
/
RealWorld


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
							<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri = "http://java.sun.com/jsp/jstl/functions" prefix = "fn" %>
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>

<jsp:include page="/WEB-INF/jsp/include/head.jsp"></jsp:include>
<script>

let settingForm = null;
const originalSetting = {};

window.onload = () => {
    settingForm = window.document.querySelector('#setting-form');
}

const submitForm = () => {
    // 밸리데이션 하는 부분 필요

    const json = {};

    // 이름
    if (settingForm['username'].value !== "${user.username}") {
        json.username = settingForm['username'].value;
    }

    // 이메일
    if (settingForm['email'].value !== "${user.email}") {
        json.email = settingForm['email'].value;
    }

    // 비번
    if (settingForm['password'].value !== "") {
        json.password = settingForm['password'].value;
    }

    json.shortBio = settingForm['shortBio'].value;
    json.id = "${user.id}"

    const options = {
        body: JSON.stringify(json),
        method: 'PATCH',
        headers: {
            "Content-Type": "application/json"
        }
    };

    fetch("/user/settings/${user.id}", options)
        .then(response => {
            if (response.status === 200) {
                location.href = '/user/settings/${user.id}'
            }
        })
}


</script>
</head>
<body>
    <jsp:include page="/WEB-INF/jsp/include/header.jsp"></jsp:include>

    <div class="container main">
        <div class="row">
            <div class="col-6">
                <h1 class="sign-in-title">Your Settings</h1>
                <form 
                    name="settingForm"
                    id="setting-form"
                    class="form-group"
                    onsubmit="return false"
                >
                    <!-- method="post"
                    action="/user/settings" -->

                    <!-- <div class="form-data">
                        <input 
                            type="file" 
                            class="form-control form-control-sm" 
                            placeholder ="URL of profile picture" 
                            autocomplete="off"
                            value="${profileImg}">
                    </div> -->
                    <div class="form-data">
                        <input 
                            type="text" 
                            class="form-control" 
                            placeholder ="Username" 
                            autocomplete="off"
                            name="username"
                            value="${user.username}">
                    </div>
                    <div class="form-data">
                        <textarea 
                            class="form-control" 
                            rows="8" 
                            name="shortBio" 
                            placeholder="Short bio about you"
                        >${user.shortBio}</textarea>
                    </div>
                    <div class="form-data">
                        <input 
                            type="email" 
                            class="form-control" 
                            placeholder ="Email" 
                            autocomplete="off"
                            name="email"
                            value="${user.email}">
                    </div>
                    <div class="form-data">
                        <input 
                            type="password"
                            class="form-control"
                            placeholder="New Password"
                            name="password"
                            autocomplete="off">
                    </div>
                    <button class="btn-settings" onclick="submitForm()">Update Settings</button>
                </div>
                <hr>
                <button type="button" class="btn-logout" onclick="location.href='/'">Or click here to logout.</button>
            </form>
        </div>
    </div>
</body>
</html>
</body>