File

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

Implements

OnInit OnDestroy

Metadata

selector crm-sign-up
templateUrl ./sign-up.component.html

Index

Properties
Methods

Constructor

constructor(formBuilder: FormBuilder, route: ActivatedRoute, authService: AuthService, ns: NotificationsService, router: Router)
Parameters :
Name Type Optional Description
formBuilder FormBuilder
route ActivatedRoute
authService AuthService
ns NotificationsService
router Router

Methods

Private formInit
formInit()
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
onSubmit
onSubmit()
Returns : void

Properties

changeValueSubscription
changeValueSubscription: Subscription
Type : Subscription
email
email: string
Type : string
hash
hash: string
Type : string
passIsEqual
passIsEqual: boolean
Type : boolean
Default value : false
showNotEqual
showNotEqual: boolean
Type : boolean
Default value : false
signUpForm
signUpForm: FormGroup
Type : FormGroup
signUpSubscription
signUpSubscription: Subscription
Type : Subscription
subscription
subscription: Subscription
Type : Subscription
import {Component, OnDestroy, OnInit} from "@angular/core";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {ActivatedRoute, Router} from "@angular/router";
import {Subscription} from "rxjs";
import {AuthService} from "../../core/auth/auth.service";
import {NotificationsService} from "../../core/notifications/notifications.service";

@Component({
  selector: 'crm-sign-up',
  templateUrl: './sign-up.component.html',
  styles: []
})
export class SignUpComponent implements OnInit, OnDestroy {

  signUpForm: FormGroup;
  subscription: Subscription;
  changeValueSubscription: Subscription;
  signUpSubscription: Subscription;

  passIsEqual: boolean = false;
  showNotEqual: boolean = false;

  email: string;
  hash: string;

  constructor(private formBuilder: FormBuilder,
              private route: ActivatedRoute,
              private authService: AuthService,
              private ns: NotificationsService,
              private router: Router) {
  }

  onSubmit() {
    this.signUpSubscription = this.authService.signUp(this.signUpForm.value.pass, this.hash).subscribe(
      ok => this.router.navigate(['/profile']),
      error => this.ns.error(error.json().message)
    );
  }

  ngOnInit() {
    this.formInit();
    this.subscription = this.route.queryParams.subscribe(params => {
      this.email = params['email'];
      if (params.hasOwnProperty('hash')) {
        this.hash = params['hash'];
      } else {
        //todo maybe redirect to some error page
        this.ns.error('Invited hash not found. Please go to link in email again');
      }
    });

    //todo rewrite using validator
    this.changeValueSubscription = this.signUpForm.valueChanges.subscribe(value => {
      this.passIsEqual = value.pass === value.repeat && value.pass.length > 0;
      this.showNotEqual = !this.passIsEqual && value.repeat.length > 0;
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
    this.changeValueSubscription.unsubscribe();
    if (this.signUpSubscription) {
      this.signUpSubscription.unsubscribe();
    }
  }

  private formInit() {
    this.signUpForm = this.formBuilder.group({
      pass: ['', [Validators.required, Validators.minLength(6)]],
      repeat: ['', Validators.required]
    });
  }

}
<div class="app flex-row align-items-center">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="card mx-2">
          <div class="card-block p-2">
            <h1>Register</h1>
            <p class="text-muted">Create your account for email: {{email}}</p>

            <form [formGroup]="signUpForm" (ngSubmit)="onSubmit()">

              <small *ngIf="signUpForm.controls.pass.dirty && signUpForm.controls.pass.errors" class="form-text text-danger">
                Password must be at least 6 characters</small>
              <div class="input-group mb-1">
                            <span class="input-group-addon"><i class="icon-lock"></i>
                            </span>
                <input type="password" class="form-control" placeholder="Password" formControlName="pass">
              </div>

              <small class="form-text text-danger" *ngIf="showNotEqual">Passwords do not match!</small>
              <div class="input-group mb-2">
                            <span class="input-group-addon"><i class="icon-lock"></i>
                            </span>
                <input type="password" class="form-control" placeholder="Repeat password" formControlName="repeat">
              </div>


              <button type="submit" class="btn btn-block btn-success" [disabled]="!signUpForm.valid || !passIsEqual">
                Create Account
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""