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

File

src/app/pages/signin/signin.component.ts

Implements

OnInit

Metadata

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

Index

Properties
Methods

Constructor

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

Methods

Private afterSignIn
afterSignIn()
Defined in src/app/pages/signin/signin.component.ts:135
Returns : void
buildForm
buildForm()
Defined in src/app/pages/signin/signin.component.ts:41
Returns : void
login
login()
Defined in src/app/pages/signin/signin.component.ts:127
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/pages/signin/signin.component.ts:37
Returns : void
onValueChanged
onValueChanged(data?: any)
Defined in src/app/pages/signin/signin.component.ts:58
Parameters :
Name Type Optional
data any Yes
Returns : void
Async signInAnonymously
signInAnonymously()
Defined in src/app/pages/signin/signin.component.ts:104
Returns : {}
signInWithEmail
signInWithEmail()
Defined in src/app/pages/signin/signin.component.ts:109
Returns : void
Async signInWithFacebook
signInWithFacebook()
Defined in src/app/pages/signin/signin.component.ts:94
Returns : any
Async signInWithGithub
signInWithGithub()
Defined in src/app/pages/signin/signin.component.ts:89
Returns : {}
Async signInWithGoogle
signInWithGoogle()
Defined in src/app/pages/signin/signin.component.ts:84
Returns : {}
Async signInWithTwitter
signInWithTwitter()
Defined in src/app/pages/signin/signin.component.ts:99
Returns : {}

Properties

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

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

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

  ngOnInit() {
    this.buildForm();
  }

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

    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) &&
        (field === 'email' || field === 'password')
      ) {
        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]
              } `;
            }
          }
        }
      }
    }
  }

  async signInWithGoogle() {
    await this.auth.googleLogin();
    return await this.afterSignIn();
  }

  async signInWithGithub() {
    await this.auth.githubLogin();
    return await this.afterSignIn();
  }

  async signInWithFacebook() {
    await this.auth.facebookLogin();
    await this.afterSignIn();
  }

  async signInWithTwitter() {
    await this.auth.twitterLogin();
    return await this.afterSignIn();
  }

  async signInAnonymously() {
    await this.auth.anonymousLogin();
    return await this.afterSignIn();
  }

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

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

    this.auth
      .emailLogin(email, password)
      .then(() => this.afterSignIn())
      .catch(error => {
        console.log('邮箱登录出错：', error);
        this.formErrors.loginFailure = message[error.code];
      });
  }

  login() {
    if (this.userForm.invalid) {
      return;
    }

    this.signInWithEmail();
  }

  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/signin.svg" alt="">
    </div>
  </div>
  <div class="signin-content mat-elevation-z12" fxFlex="100" fxFlex.gt-xs="50">
    <mat-card-title>用户登录</mat-card-title>

    <form [formGroup]="userForm" (ngSubmit)="login()">
      <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>

      <div class="signin-button" fxLayout="row" fxLayoutAlign="space-between center">
        <button mat-raised-button color="primary" type="submit" style="width: 48%;">登录</button>
        <button mat-raised-button [routerLink]="['/sigup']" style="width: 48%;">注册</button>
      </div>

      <mat-error *ngIf="formErrors.loginFailure">{{formErrors.loginFailure}}</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

./signin.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;
}

.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 ""