register.component.ts

import { Component, OnInit } from '@angular/core';
import { MatSnackBar } from '@angular/material';
import { Router } from '@angular/router';
import { slugify } from '../../helpers/slugify';
import { SEOService } from '../../services/seo.service';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MustMatch } from '../../helpers/must-match-validator';

import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';

import { CreateUserInput, RegisterPageRegisterGQL } from '@generated-types';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: [
    './register.component.scss'
  ],
  providers: [
    // The locale would typically be provided on the root module of your application. We do it at
    // the component level here, due to limitations of our example generation script.
    { provide: MAT_DATE_LOCALE, useValue: 'tr-TR' },

    // `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
    // `MatMomentDateModule` in your applications root module. We provide it at the component level
    // here, due to limitations of our example generation script.
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
  ],
})

export class RegisterComponent implements OnInit {
  registerForm: FormGroup;
  submitted = false;
  error: any;
  genders: any = ['Kadın', 'Erkek', 'Belirtmek İstemiyorum'];

  user: CreateUserInput;

  constructor(
    public snackBar: MatSnackBar,
    private router: Router,
    private seoService: SEOService,
    private formBuilder: FormBuilder,
    private _adapter: DateAdapter<any>,
    private registerPageRegisterGQL: RegisterPageRegisterGQL,
  ) { }

  // convenience getter for easy access to form fields
  get f() { return this.registerForm.controls; }

  ngOnInit() {
    // datepicker locale
    this._adapter.setLocale('tr');
    // seo service
    this.seoService.addDefaultMetaTags();
    this.seoService.meta.updateTag({ name: 'robots', content: 'noindex' });
    this.seoService.addTitle('Kayıt Ol | kitaphub');
    // form validator
    this.registerForm = this.formBuilder.group({
      userName: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      password: ['', [Validators.required, Validators.minLength(6)]],
      confirmPassword: ['', Validators.required],
      gender: ['', Validators.required],
      dateOfBirth: ['', Validators.required],
      acceptTerms: [false, Validators.requiredTrue]
    }, {
      validator: MustMatch('password', 'confirmPassword')
    });
  }

  async onSubmit() {
    console.log('onSubmit');
    this.submitted = true;

    // stop here if form is invalid
    if (this.registerForm.invalid) {
      return;
    }

    // display form values on success
    alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.registerForm.value, null, 4));

    this.registerPageRegisterGQL.mutate({
      user: {
        userName: this.registerForm.value.userName,
        email: this.registerForm.value.email,
        slug: slugify(this.registerForm.value.userName),
        firstName: this.registerForm.value.firstName,
        lastName: this.registerForm.value.lastName,
        password: this.registerForm.value.password,
        gender: this.registerForm.value.gender,
        role: MEMBER
      }
    }).subscribe(({ data }) => {
      console.log('got data:', data);
      this.openSnackBar('KAYIT İŞLEMİ TAMAMLANDI');
    }, (error: any) => {
      this.handleError(error);
      console.log('there was an error sending', error);
    });
  }

  onReset() {
    this.submitted = false;
    this.registerForm.reset();
  }

  handleError(error: any) {
    this.error = error.message;
  }

  openSnackBar(text: string) {
    return this.snackBar.open(text, 'X', { horizontalPosition: 'right', verticalPosition: 'top', duration: 3000 });
  }

}