11 to 9, Day 6

11 to 9, Day 6

Today, ToDoList

Toy Project - NGMA

• 회원가입 코드 작성
• favicon

---

회원 가입

html

<div class="container" id="main_container">
  <main>
    <div class="py-5 text-center">
      <h2>회원 가입</h2>
    </div>

    <div class="col-md-7 col-lg-8">
      <h4 class="mb-3">정보 입력</h4>
      <form class="needs-validation" id="accountForm" novalidate>
        <div class="col-sm-6">
          <label for="firstName" class="form-label">이름</label>
          <input type="text" class="form-control" id="firstName" name="name" placeholder="" value="" required>
          <div class="invalid-feedback">
            이름을 입력해 주세요.
          </div>
        </div>

        <div class="col-sm-6">
          <label for="firstName" class="form-label">비밀번호</label>
          <input type="password" class="form-control" id="password" name="password" placeholder="" value="" required>
          <div class="invalid-feedback">
            사용할 비밀번호를 입력해 주세요.
          </div>
        </div>

        <div class="col-12">
          <label for="email" class="form-label">Email</label>
          <div class="input-group">
            <span class="input-group-text">@</span>
            <input type="email" class="form-control" id="email" name="email" placeholder="you@example.com" required>
            <div class="invalid-feedback">
              email 주소를 입력해 주세요.
            </div>
          </div>
        </div>

        <hr class="my-4 center">
        <button class="w-25 btn btn-primary btn-lg" id="accountSubmit" type="button">회원 가입</button>
      </form>
    </div>
  </main>
</div>

js

$(document).ready(function () {
    $(document).on("click","#accountSubmit",function (event) {
        submitAccountForm();
        return false;
    });
});

function submitAccountForm(){
    $.ajax({
        type: "POST",
        url: "http://localhost:8080/account",
        contentType: "application/json",
        dataType: "html",
        cache:false,
        data: JSON.stringify($("form#accountForm").serializeObject()),
        success: function(response){
          window.location.href = "http://localhost:8080/login";
        },
        error: function(){
            alert("Error");
        }
    });
}

ajax의 요청은 생각했던 것과 다르게 컨트롤러의 리다이렉트가 되지 않았다. 그래서 onclick 이벤트에 Login 페이지를 부르는 동작을 추가하였다.

window.location.href = "http://localhost:8080/login";

---

favicon

https://favicon.io/ 에서 만들어서 resources/static 에 넣어주었다.

---

Modify Account

계정 변경을 위한 테스트 코드

    @Test
    @WithUserDetails(value = "jilee@example.com", setupBefore = TestExecutionEvent.TEST_EXECUTION)
    public void modifyAccount() throws Exception {
        AccountDto accountDto = new AccountDto();
        accountDto.setName("jilee");
        accountDto.setPassword("jilee321");
        String accountDtoJson = objectMapper.writeValueAsString(accountDto);

        mvc.perform(post("/account/update")
                .contentType(MediaType.APPLICATION_JSON)
                .content(accountDtoJson))
                .andDo(print())
                .andExpect(status().is3xxRedirection());

        assertThat(accountService.getUserByEmail("jilee@example.com").orElse(null).getName())
                .isEqualTo("jilee");
        assertThat(accountService.getUserByEmail("jilee@example.com").orElse(null).getPassword())
                .isNotNull();
    }