angular-material-app documentation
  1. Components
  2. SignupComponent

File

src/app/pages/signup/signup.component.ts

Implements

OnInit

Metadata

selector app-signup
styleUrls ./signup.component.scss
templateUrl ./signup.component.html

Index

Properties
Methods

Constructor

constructor(router: Router, fb: FormBuilder, auth: AuthService)
Defined in src/app/pages/signup/signup.component.ts:35
Parameters :
Name Type Optional
router Router No
fb FormBuilder No
auth AuthService No

Methods

Private afterSignIn
afterSignIn()
Defined in src/app/pages/signup/signup.component.ts:126
Returns : void
buildForm
buildForm()
Defined in src/app/pages/signup/signup.component.ts:47
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/pages/signup/signup.component.ts:43
Returns : void
onValueChanged
onValueChanged(data?: any)
Defined in src/app/pages/signup/signup.component.ts:65
Parameters :
Name Type Optional
data any Yes
Returns : void
register
register()
Defined in src/app/pages/signup/signup.component.ts:122
Returns : void
signInAnonymously
signInAnonymously()
Defined in src/app/pages/signup/signup.component.ts:118
Returns : void
signInWithGithub
signInWithGithub()
Defined in src/app/pages/signup/signup.component.ts:114
Returns : void
signInWithGoogle
signInWithGoogle()
Defined in src/app/pages/signup/signup.component.ts:110
Returns : void
signUpWithEmail
signUpWithEmail()
Defined in src/app/pages/signup/signup.component.ts:91
Returns : void

Properties

formErrors
Type : object
Default value : { email: '', password: '', passwordConfirm: '', signUpFailure: '' }
Defined in src/app/pages/signup/signup.component.ts:14
userForm
Type : FormGroup
Defined in src/app/pages/signup/signup.component.ts:13
validationMessages
Type : object
Default value : { email: { required: '请输入您的邮箱', email: '请输入正确的邮箱' }, password: { required: '请输入您的密码', pattern: '密码中必须包含数字和字母', minlength: '请输入大于4个字符', maxlength: '请输入小于25个字符' }, passwordConfirm: { required: '请重复输入您的密码', passwordConfirm: '密码输入不一致' } }
Defined in src/app/pages/signup/signup.component.ts:20
 
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { AuthService } from '../../core/auth.service';
import { ValidatePasswordConfirm } from './password.validator';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.scss']
})
export class SignupComponent implements OnInit {
  userForm: FormGroup;
  formErrors = {
    email: '',
    password: '',
    passwordConfirm: '',
    signUpFailure: ''
  };
  validationMessages = {
    email: {
      required: '请输入您的邮箱',
      email: '请输入正确的邮箱'
    },
    password: {
      required: '请输入您的密码',
      pattern: '密码中必须包含数字和字母',
      minlength: '请输入大于4个字符',
      maxlength: '请输入小于25个字符'
    },
    passwordConfirm: {
      required: '请重复输入您的密码',
      passwordConfirm: '密码输入不一致'
    }
  };

  constructor(
    private router: Router,
    private fb: FormBuilder,
    private auth: AuthService
  ) {}

  ngOnInit() {
    this.buildForm();
  }

  buildForm() {
    this.userForm = this.fb.group({
      email: [null, [Validators.required, Validators.email]],
      password: [
        null,
        [
          Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'),
          Validators.minLength(6),
          Validators.maxLength(25)
        ]
      ],
      passwordConfirm: null
    });

    this.userForm.valueChanges.subscribe(data => this.onValueChanged(data));
    this.onValueChanged();
  }

  onValueChanged(data?: any) {
    if (!this.userForm) {
      return;
    }
    const form = this.userForm;

    for (const field in this.formErrors) {
      if (Object.prototype.hasOwnProperty.call(this.formErrors, field)) {
        this.formErrors[field] = '';
        const control = form.get(field);

        if (control && control.dirty && !control.valid) {
          const messages = this.validationMessages[field];

          for (const key in control.errors) {
            if (Object.prototype.hasOwnProperty.call(control.errors, key)) {
              this.formErrors[field] += `${
                (messages as { [key: string]: string })[key]
              } `;
            }
          }
        }
      }
    }
  }

  signUpWithEmail() {
    const message = {
      'auth/user-not-found': '该用户没有注册！',
      'auth/invalid-email': '请输入正确的邮箱',
      'auth/email-already-in-use': '该用户已注册！'
    };

    const email = this.userForm.value['email'];
    const password = this.userForm.value['password'];

    this.auth
      .emailSignUp(email, password)
      .then(() => this.afterSignIn())
      .catch(error => {
        console.log(error);
        this.formErrors.signUpFailure = message[error.code];
      });
  }

  signInWithGoogle() {
    this.auth.googleLogin().then(() => this.afterSignIn());
  }

  signInWithGithub() {
    this.auth.githubLogin().then(() => this.afterSignIn());
  }

  signInAnonymously() {
    this.auth.anonymousLogin().then(() => this.afterSignIn());
  }

  register() {
    this.signUpWithEmail();
  }

  private afterSignIn() {
    this.router.navigate(['/']);
  }
}
Copy
<div class="signin-container" fxLayout="row">
  <div class="signin-cover" fxFlex="100" fxFlex.gt-xs="50">
    <div fxLayout="column" fxLayoutAlign="center center" style="height: 100%;">
      <img src="assets/images/signup.svg" alt="">
    </div>
  </div>
  <div class="signin-content mat-elevation-z12" fxFlex="100" fxFlex.gt-xs="50">
    <mat-card-title>注册账号
      <a class="redirect" [routerLink]="['/sigin']">用户登录</a>
    </mat-card-title>

    <form [formGroup]="userForm" (ngSubmit)="register()">
      <mat-form-field class="display-block">
        <input type="email" placeholder="请输入您的邮箱" formControlName="email" required matInput>
        <mat-error *ngIf="formErrors.email">{{formErrors.email}}</mat-error>
      </mat-form-field>

      <mat-form-field class="display-block">
        <input type="password" placeholder="请输入您的密码" formControlName="password" required matInput>
        <mat-error *ngIf="formErrors.password">{{formErrors.password}}</mat-error>
      </mat-form-field>

      <mat-form-field class="display-block">
        <input type="password" placeholder="请重复输入您的密码" formControlName="passwordConfirm" required matInput>
        <mat-error *ngIf="formErrors.passwordConfirm">{{formErrors.passwordConfirm}}</mat-error>
      </mat-form-field>

      <mat-checkbox class="display-block form-check">我同意<a href="javascript:;">注册协议</a></mat-checkbox>
      
      <button color="primary" mat-raised-button [disabled]="!userForm.valid">创建账户</button>
      <mat-error *ngIf="formErrors.signUpFailure">{{formErrors.signUpFailure}}</mat-error>
    </form>

    <div class="other-sign">
      我要登陆
    </div>

    <button class="mat-raised-button capsule-button google-button m-b-15" (click)="signInWithGoogle()">
      <span class="capsule-button-wrapper">
        <div class="capsule-button-icon">
          <img src="assets/icon/google-plus.svg">
        </div>
        <span class="capsule-button-text">Google 账号登录</span>
      </span>
    </button>

    <button class="mat-raised-button capsule-button github-button m-b-15" (click)="signInWithGithub()">
      <span class="capsule-button-wrapper">
        <div class="capsule-button-icon">
          <img src="assets/icon/github-logo.svg">
        </div>
        <span class="capsule-button-text">Github 账号登录</span>
      </span>
    </button>

    <button class="mat-raised-button capsule-button facebook-button m-b-15">
      <span class="capsule-button-wrapper">
        <div class="capsule-button-icon">
          <img src="assets/icon/facebook.svg">
        </div>
        <span class="capsule-button-text">Facebook 账号登录</span>
      </span>
    </button>

    <button class="mat-raised-button capsule-button any-button" (click)="signInAnonymously()">
      <span class="capsule-button-wrapper">
        <div class="capsule-button-icon">
          <img src="assets/icon/firebase.svg">
        </div>
        <span class="capsule-button-text">游客 账号登录</span>
      </span>
    </button>

  </div>
</div>
Copy

./signup.component.scss 

.signin {
  &-container {
    height: 100vh;
  }

  &-cover {
    height: 100%;
  }

  &-content {
    height: 100%;
    padding: 70px 60px;
    border-left: 1px solid #d9ddf6;
    background: #f3fcff;
  }
}

.redirect {
  font-size: 14px;
  margin-left: 10px;
  color: #00aaaa;
}

.form-check {
  display: block;
  margin: 16px 0 32px;
}

.display-block {
  display: block;
}

.other-sign {
  color: #a1a6a8;
  padding: 50px 0 60px;
}

.m-b-15 {
  margin-bottom: 15px;
}

.capsule-button {
  width: 100%;
  color: #fff;
  padding: 0;
  border-radius: 3px;
  min-height: 48px;

  &-wrapper {
    justify-content: flex-start;
    display: flex;
    width: 100%;
  }

  &-icon {
    height: 48px;
    border-radius: 3px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;

    > img {
      width: 25px;
      height: auto;
    }
  }

  &-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  &-ripple {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    position: absolute;
    overflow: hidden;
    pointer-events: none;
    justify-content: flex-start;
    display: flex;
    width: 100%;
  }
}

.facebook-button {
  background-color: #4267b2;

  &:hover {
    background-color: #385490;
  }

  .capsule-button-icon {
    background: #3b5a99;
  }
}

.google-button {
  background-color: #dd4b39;

  &:hover {
    background-color: #dd4b39;
  }

  .capsule-button-icon {
    background: #c9481f;
  }
}

.github-button {
  background-color: #eb5424;

  &:hover {
    background-color: #eb5424;
  }

  .capsule-button-icon {
    background: #ca3f12;
  }
}

.any-button {
  background-color: #ffca28;

  &:hover {
    background-color: #ffca28;
  }

  .capsule-button-icon {
    background: #e89d1e;
  }
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""