섹션 2 계정 설정

part. 프로필 수정 폼

account-update 폼을 완성합니다.
bio, link, occupation, location 정보만 입력받아서 account 정보를 수정합니다.

part. 프로필 수정 처리

비어있는 값을 허용합니다. (기존에 있던 값을 삭제할 수도 있기 때문)

입력 값의 길이를 제한합니다.

폼 처리를 할 때

에러가 있는 경우 폼을 다시 보여줍니다.

에러가 없는 경우는 1.저장 2.프로필 수정 페이지 (redirect) 3.수정 완료 메시지

RedirectAttributes를 사용해서 수정완료 메시지를 보여줍니다. attributes.addFlashAttribute("message","수정이 완료되었습니다.");

thymeleaf

  <div th:if="${message}"
                                         class="alert alert-info alert-dismissable fade show mt-3" role="alert">
                                        <span th:text="${message}">메시지</span>코드를 입력하세요

part. 프로필 이미지 변경

프로필 이미지 변경은 Cropper를 사용해서 진행합니다.
프론트 라이브러리 설치

Cropper.JS

npm install cropper

npm install jquery-cropper

part. 패스워드 수정

패스워드 변경

패스워드 탭 활성화

새 패스워드와 새 패스워드 확인의 값이 일치해야 한다.

둘 다 최소 8자에서 30자 사이

서비스로 위임해서 트랜잭션 안에서 처리해야하고,
Detached 상태의 객체를 변경하고,
Repository의 save를 호출해서 상태 변경 내역을 적용합니다. (Merge)

part. 닉네임 수정

닉네임 수정

닉네임 특정 패턴의 문자열만 지원합니다.

중복 닉네임을 확인합니다.

part. 알림 설정

알림 설정

특정 웹 서비스 이벤트에 대한 정보를 이메일로 받을지, 웹 알림 메시지로 받을지 선택하는 기능. (둘 다 받을 수도 있음)

part. 비밀번호 찾기(임시비밀번호)

1.임시 비밀번호 생성

public String generateTemporaryPassword(int length) {
    StringBuilder randomPassword = new StringBuilder();
    String characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    SecureRandom secureRandom = new SecureRandom();

    for(int i = 0; i < length; i++) {
        char randomChar = characters.charAt(secureRandom.nextInt(characters.length()));
        randomPassword.append(randomChar);
    }

    return randomPassword.toString();
}

2. 임시 비밀번호 이메일로 전송

public void sendTemporaryPasswordByEmail(Account account, String temporaryPassword) {
    String emailMessage = "임시 비밀번호: " + temporaryPassword;

    SimpleMailMessage mailMessage = new SimpleMailMessage();
    mailMessage.setTo(account.getEmail());
    mailMessage.setSubject("스터디메이트, 임시비밀번호 발급");
    mailMessage.setText(emailMessage);

    javaMailSender.send(mailMessage);
}

3. 임시 비밀번호 저장 및 변경 페이지로 유도 - 새 비밀번호를 설정하도록 안내합니다.