[Front] - 로그인 및 회원가입(home, info, logout)

1) home

home.component.ts

2) info

info.component.html

<div class="wrapper">
    <mat-card>
      <mat-card-title>회원정보 조회</mat-card-title>
      <mat-card-content>
        <form [formGroup]="searchForm" (ngSubmit)="submit()">
          <p>
            <mat-form-field>
              <input type="text" matInput placeholder="email" formControlName="email">
            </mat-form-field>
          </p>
          <div>
            <mat-card-title>조회결과</mat-card-title>
            <table>
              <tr>
                <td>id:  </td>
                <td>{{member.id}}</td>
              </tr>
              <tr>
                <td>email:  </td>
                <td>{{member.email}}</td>
              </tr>
              <tr>
                <td>name:  </td>
                <td>{{member.name}}</td>
              </tr>
              <tr>
                <td>nickname:  </td>
                <td>{{member.nickname}}</td>
              </tr>
              <tr>
                <td>phoneNum:  </td>
                <td>{{member.phoneNum}}</td>
              </tr>
              <tr>
                <td>regDate:  </td>
                <td>{{member.regDate}}</td>
              </tr>
              <tr>
                <td>sex:  </td>
                <td>
                  {{member.sex ? '여성':'남성' }}
                </td>
              </tr>
            </table>
          </div>
          <div class="button">
            <button mat-raised-button color="primary" [disabled]="!searchForm.valid">조회</button>
          </div>
        </form>
      </mat-card-content>
    </mat-card>
    <mat-card>
      <mat-card-title>로그인 로그 조회</mat-card-title>
      <mat-card-content>
        <p>형식에 맞게 입력해주세요!!!</p>
        <p>ex) 2022-10-07 18:30:00</p>
        <form [formGroup]="searchForm2" (ngSubmit)="submit2()">
          <p>
            <mat-form-field>
              <input type="text" matInput placeholder="firstDateTime" formControlName="firstDateTime">
            </mat-form-field>
            <mat-form-field>
              <input type="text" matInput placeholder="endDateTime" formControlName="endDateTime">
            </mat-form-field>
            <mat-form-field>
              <input type="text" matInput placeholder="memberEmail" formControlName="memberEmail">
            </mat-form-field>
          </p>
          <div>
            <mat-card-title>조회결과</mat-card-title>
            <div *ngFor="let log of loginlog">
              {{log}}
            </div>
          </div>
          <div class="button">
            <button mat-raised-button color="primary" [disabled]="!searchForm2.valid">조회</button>
          </div>
        </form>
      </mat-card-content>
    </mat-card>
  </div>

info.component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { SignService } from 'src/app/service/rest-api/sign.service';

@Component({
  selector: 'app-info',
  templateUrl: './info.component.html',
  styleUrls: ['./info.component.css']
})
export class InfoComponent implements OnInit {

  member = {
    id: '',
    email: '',
    name: '',
    nickname: '',
    phoneNum: '',
    regDate: '',
  };
  memberDefault = {
    id: '',
    email: '',
    name: '',
    nickname: '',
    phoneNum: '',
    regDate: '',
  };

  loginlog: Array<string> = [];

  searchForm: FormGroup;
  searchForm2: FormGroup;

  constructor(protected signService: SignService) {
    this.searchForm = new FormGroup({
      email: new FormControl('', [Validators.required, Validators.email]),
    });
    this.searchForm2 = new FormGroup({
      firstDateTime: new FormControl('', [Validators.required, Validators.pattern(/\d{4}-\d{2}-\d{2}\s\d{2}\:\d{2}\:\d{2}/)]),
      endDateTime: new FormControl('', [Validators.required, Validators.pattern(/\d{4}-\d{2}-\d{2}\s\d{2}\:\d{2}\:\d{2}/)]),
      memberEmail: new FormControl('', [Validators.required, Validators.email]),
    });
    
   }

  submit() {
    if(this.searchForm.valid) {
      //회원정보조회
      this.signService.search(this.searchForm.value.email).subscribe((res)=>{
      
        if(res.body.statusCode == 200) {
          console.log(res);
          alert("조회완료되었습니다");
          this.member.id = res.body.data.id;
          this.member.email = res.body.data.email;
          this.member.name = res.body.data.name;
          this.member.nickname = res.body.data.nickname;
          this.member.phoneNum = res.body.data.phoneNum;
          this.member.regDate = res.body.data.regDate;
        } else if(res.body.statusCode == 400) {
          alert("회원정보가 없습니다");
          this.member = this.memberDefault;
        } else if(res.body.statusCode == 401) {
          sessionStorage.removeItem('x-auth-token');
          alert('세션이 만료되었습니다. 다시 로그인하세요');

        }
    

      }, (err)=> {
        alert('회원정보가 없습니다');
      })
    }
  }
  submit2() {
    if(this.searchForm2.valid) {
      this.signService.searchLog(this.searchForm2.value.firstDateTime, this.searchForm2.value.endDateTime, this.searchForm2.value.memberEmail).subscribe((res)=>{
        var code = res.body.statusCode;
        var obj = res.body.data;
        if(code == 400 && obj == null) {
          alert('가입이 되지 않은 이메일입니다');
          this.loginlog = [];
        } else if(code == 200 && obj.length == 0) {
          alert('입력한 기간내의 로그인 기록이 없습니다');
          this.loginlog = [];
        }  else if(code == 401) {
            sessionStorage.clear();
            alert('세션이 만료되었습니다. 다시 로그인하세요');
          }
        
        else {
          this.loginlog = [];
          alert('조회가 완료되었습니다');
          obj.forEach((e: any) => {
            this.loginlog.push(e.loginDateTime);
          });
        } 
      })
    }
  }

  ngOnInit(): void {
  }

}

3) logout

logout.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-logout',
  template: '',
})
export class LogoutComponent implements OnInit {

  constructor(private route: Router) {
    alert('로그아웃되었습니다');
    sessionStorage.removeItem('x-auth-token');
    this.route.navigate(['/']);
  }

  ngOnInit(): void {
  }

}