[따라하기] 3-5. 회원가입 중복체크하기

{{> layout/header}}

<div class="container p-5">

    <!-- 요청을 하면 localhost:8080/join POST로 요청됨
    username=사용자입력값&password=사용자값&email=사용자입력값 -->

    <div class="card">
        <div class="card-header"><b>회원가입을 해주세요</b></div>
        <div class="card-body">
            <form action="/join" method="post" enctype="application/x-www-form-urlencoded" onsubmit="return valid()">
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="Enter username" name="username" id="username" value="haha">
                    <button onclick="sameCheck()" type="button" class="btn btn-outline-primary">중복체크</button>
                </div>
                <div class="mb-3">
                    <input type="password" class="form-control" placeholder="Enter password" name="password"
                           value="1234">
                </div>
                <div class="mb-3">
                    <input type="email" class="form-control" placeholder="Enter email" name="email"
                           value="haha@nate.com">
                </div>
                <button type="submit" class="btn btn-primary form-control">회원가입</button>
            </form>
        </div>
    </div>
</div>
<script>
    // 1. bool 타입은 is를 붙여서 만든다.
    let isSameUsername = true;

    async function sameCheck() {
        // 1. username 가져오기
        let username = $("#username").val();

        // 2. fetch로 통신하기
        let response = await fetch(`/user/samecheck?username=${username}`);
        let responseBody = await response.json();
        // 3. 중복됐으면 -> isSameUsername = true

        // 4. 중복안됐으면 -> isSameUsername = false-> username input을 readOnly
        if(responseBody.body){
            isSameUsername = true;
            alert("중복된 유저네임이에요");
        } else {
            isSameUsername = false;
            alert("사용할 수 있는 유저네임이에요.")
            $("#username").attr("readOnly", true);
        }

    }

    function valid() {
        if (isSameUsername) {
            alert("중복체크가 필요합니다.");
            return false;
        } else {
            return true;
        }

    }
</script>

{{> layout/footer}}