File

src/app/auth/components/sign-up/sign-up.component.ts

Implements

OnInit OnDestroy

Metadata

selector app-sign-up
styleUrls sign-up.component.scss
templateUrl ./sign-up.component.html

Constructor

constructor(fb: FormBuilder, store: Store, router: Router, authService: AuthService)

Methods

ngOnInit
ngOnInit()
Returns: void
onSubmit
onSubmit()
Returns: void
Private pushErrorFor
pushErrorFor(ctrl_name: string, msg: string)
Returns: void
initForm
initForm()
Returns: void
redirectIfUserLoggedIn
redirectIfUserLoggedIn()
Returns: void
ngOnDestroy
ngOnDestroy()
Returns: void

Properties

formSubmit
formSubmit: boolean
Default value: false
registerSubs
registerSubs: Subscription
signUpForm
signUpForm: FormGroup
title
title: string
import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { environment } from '../../../../environments/environment';
import { Store } from '@ngrx/store';
import { AppState } from '../../../interfaces';
import { Router } from '@angular/router';
import { AuthService } from '../../../core/services/auth.service';
import { getAuthStatus } from '../../reducers/selectors';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-sign-up',
  templateUrl: './sign-up.component.html',
  styleUrls: ['./sign-up.component.scss']
})
export class SignUpComponent implements OnInit, OnDestroy {
  signUpForm: FormGroup;
  formSubmit = false;
  title = environment.AppName;
  registerSubs: Subscription;

  constructor(
    private fb: FormBuilder,
    private store: Store<AppState>,
    private router: Router,
    private authService: AuthService
  ) {
    this.redirectIfUserLoggedIn();
  }

  ngOnInit() {
    this.initForm();
  }

  onSubmit() {
    const values = this.signUpForm.value;
    const keys = Object.keys(values);
    this.formSubmit = true;

    if (this.signUpForm.valid) {
      this.registerSubs = this.authService.register(values).subscribe(data => {
        const errors = data.errors;
        if (errors) {
          keys.forEach(val => {
            if (errors[val]) { this.pushErrorFor(val, errors[val][0]); };
          });
        }
      });
    } else {
      keys.forEach(val => {
        const ctrl = this.signUpForm.controls[val];
        if (!ctrl.valid) {
          this.pushErrorFor(val, null);
          ctrl.markAsTouched();
        };
      });
    }
  }

  private pushErrorFor(ctrl_name: string, msg: string) {
    this.signUpForm.controls[ctrl_name].setErrors({'msg': msg});
  }

  initForm() {
    const email = '';
    const password = '';
    const password_confirmation = '';
    const mobile = '';
    const gender = '';

    this.signUpForm = this.fb.group({
      'email': [email, Validators.required],
      'password': [password, Validators.required],
      'password_confirmation': [password_confirmation, Validators.required],
      'mobile': [mobile, Validators.required],
      'gender': [gender, Validators.required],
    });
  }

  redirectIfUserLoggedIn() {
    this.store.select(getAuthStatus).subscribe(
      data => {
        if (data === true) { this.router.navigateByUrl('/'); }
      }
    );
  }

  ngOnDestroy() {
    if (this.registerSubs) { this.registerSubs.unsubscribe(); }
  }
}
<div class="row register-container" data-hook="">
  <div id="content" class="col-sm-12" data-hook="">
    <div class="col-md-5 col-centered">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Signup to {{title}}</h3>
        </div>
        <div id="existing-customer" class="panel-body" data-hook="login">
          <div class="register-third-party-register">
            <p class="register-button-info-text register-info-text">EASILY USING</p>
            <div class="register-button-container">
              <button class="register-facebook register-button coming-soon">
                <span class="register-fb-logo register-sprite"></span>
                FACEBOOK
              </button>
              <button class="register-google register-button coming-soon" id="gPlusLogin"><span class="register-gplus-logo register-sprite"></span>
                  GOOGLE
                </button>
            </div>
          </div>
          <p class="register-button-info-text register-info-text">- OR USING EMAIL -</p>
          <form class="register-register-form" novalidate="" [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
            <fieldset class="register-input-container">

              <div class="register-input-item">
                <input type="email" class="register-user-input-email register-user-input" name="email" formControlName="email" placeholder="Your Email Address"
                  autocomplete="off">
                <div *ngIf="signUpForm.get('email').errors && signUpForm.get('email').touched">
                  <span class="register-error-icon">!</span>
                  <p class="register-error-message">{{signUpForm.get('email').errors.msg || 'Please enter a valid email id'}}</p>
                </div>
              </div>

              <div class="register-input-item">
                <input type="password" class="register-user-input-password register-user-input" name="password" formControlName="password"
                  placeholder="Choose Password" autocomplete="off">
                <div *ngIf="signUpForm.get('password').errors && signUpForm.get('password').touched">
                  <span class="register-error-icon">!</span>
                  <p class="register-error-message">{{signUpForm.get('password').errors.msg || 'Password must be at least 6 characters'}}</p>
                </div>
              </div>

              <div class="register-input-item">
                <input type="password" class="register-user-input-password register-user-input" name="password_confirmation" formControlName="password_confirmation"
                  placeholder="Confirm Password" autocomplete="off">
                <div *ngIf="signUpForm.get('password_confirmation').errors && signUpForm.get('password_confirmation').touched">
                  <span class="register-error-icon">!</span>
                  <p class="register-error-message">{{signUpForm.get('password_confirmation').errors.msg || 'Password must match'}}</p>
                </div>
              </div>

              <div class="register-input-item">
                <input type="number" min="1000000000" max="9999999999" class="register-user-input-mobile register-user-input" name="mobile"
                  formControlName="mobile" placeholder="Mobile Number (For order status updates)">
                <div *ngIf="signUpForm.get('mobile').errors && signUpForm.get('mobile').touched">
                  <span class="register-error-icon">!</span>
                  <p class="register-error-message">{{signUpForm.get('mobile').errors.msg || 'Please enter a valid mobile number (10 digits)'}}</p>
                </div>
              </div>

              <fieldset data-type="horizontal" class="register-gender">
                <legend class="register-gender-title">I'm a</legend>

                <input type="radio" class="register-gender-radio" id="male" name="gender" value="M" formControlName="gender">
                <label class="register-gender-label" for="male">Male</label>

                <input type="radio" class="register-gender-radio" id="female" name="gender" value="F" formControlName="gender">
                <label class="register-gender-label" for="female">Female</label>

                <div *ngIf="signUpForm.get('gender').errors && signUpForm.get('gender').touched">
                  <span class="register-gender-error-icon register-error-icon">!</span>
                  <p class="register-gender-error-message register-error-message">{{signUpForm.get('gender').errors.msg || 'Please select your gender'}}</p>
                </div>
              </fieldset>
            </fieldset>
            <fieldset class="register-register-button-container">
              <button class="btn btn-danger register-register-button">REGISTER</button>
            </fieldset>
          </form>
          <div class="register-link-container">
            <small>
              <div class="register-login-link">
                <span class="register-info-text">Already have an account?</span>
                <a class="register-create-account-link register-link text-danger" [routerLink]="['/auth','login']">Login!</a>
              </div>
            </small>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""