[Front] - 로그인 및 회원가입(signin, signup)

1) signin

signin.component.html

<!-- // signin.component.html -->
<div class="wrapper">
  <mat-card>
    <mat-card-title>로그인</mat-card-title>
    <mat-card-content>
      <form [formGroup]="signInForm" (ngSubmit)="submit()">
        <p>
          <mat-form-field>
            <input type="text" matInput placeholder="Id" formControlName="email">
          </mat-form-field>
        </p>
        <p>
          <mat-form-field>
            <input type="password" matInput placeholder="Password" formControlName="pwd">
          </mat-form-field>
        </p>
        <div class="button">
          <button type="submit" mat-stroked-button [disabled]="!signInForm.valid">Login</button>
          <button mat-raised-button color="primary" routerLink="/signup">SignUp</button>
        </div>
      </form>
    </mat-card-content>
  </mat-card>
</div>

signin.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-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css']
})
export class SigninComponent implements OnInit {

  signInForm: FormGroup;

  constructor(private signService: SignService) {
    this.signInForm = new FormGroup({
      email: new FormControl('', [Validators.required, Validators.email]),
      pwd: new FormControl('', [Validators.required])
    });
   }
   get email() {
    return this.signInForm.get('email');
   }
   get pwd() {
    return this.signInForm.get('pwd');
   }
   submit() {
    if (this.signInForm.valid) {
      this.signService.signIn(this.signInForm.value.email, this.signInForm.value.pwd)
        .then(response => {
          console.log('hohohoho'+response);
        })
        .catch(response => {
          console.log(response);
          alert('로그인에 실패하였습니다 - ' + response.error.msg);
        });
    }
   }

  ngOnInit(): void {
  }

}

2) signup

signup.component.html

<div class="wrapper">
    <mat-card>
        <mat-card-title>회원가입</mat-card-title>
        <form [formGroup]="signUpForm" (ngSubmit)="submit()">
          <p>
            <mat-form-field>
              <input type="text" matInput placeholder="Email" formControlName="email">
            </mat-form-field>
          </p>
          <p>
            <mat-form-field>
              <input type="password" matInput placeholder="pwd" formControlName="pwd">
            </mat-form-field>
          </p>
          <p>
            <mat-form-field>
              <input type="text" matInput placeholder="name" formControlName="name">
            </mat-form-field>
          </p>
          <p>
            <mat-form-field>
              <input type="text" matInput placeholder="phoneNum" formControlName="phoneNum">
            </mat-form-field>
          </p>
          <p>
            <mat-form-field>
              <input type="text" matInput placeholder="nickname" formControlName="nickname">
            </mat-form-field>
          </p>
          <p>
            <mat-form-field>
              <input type="text" matInput placeholder="birthdate" formControlName="birthdate">
            </mat-form-field>
          </p>
          <!-- 성별 부분?? -->
          <p>
            gender*  
            남성<input type="radio" formControlName="sex" ng-model="people" value="false"><label></label>
            여성<input type="radio" formControlName="sex" ng-model="people" value="true"><label></label>
          </p>
          <div class="button">
              <button type="submit" mat-raised-button [disabled]="!signUpForm.valid" color="primary">가입</button>
          </div>
        </form>
      </mat-card>
</div>

signup.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-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {

  signUpForm: FormGroup;

  constructor(private signService: SignService) {
    this.signUpForm = new FormGroup({
      email: new FormControl('', [Validators.required, Validators.email]),
      pwd: new FormControl('', [Validators.required]),
      name: new FormControl('', [Validators.required]),
      phoneNum: new FormControl('', [Validators.required]),
      nickname: new FormControl('', [Validators.required]),
      birthdate: new FormControl('', [Validators.required]),
      sex: new FormControl('', [Validators.required])
    })
   }

   get f() { return this.signUpForm.controls};

   submit() {
    if (this.signUpForm.valid) {
      this.signService.signUp(this.signUpForm.value.email, this.signUpForm.value.pwd, this.signUpForm.value.name, this.signUpForm.value.phoneNum, this.signUpForm.value.nickname, this.signUpForm.value.birthdate, this.signUpForm.value.sex)
        .then( response => {

        })
        .catch(()=>{alert('실패')});
    }
   }

  ngOnInit(): void {
  }

}