### File

`src/app/register/register.component.ts`

### Implements

`OnInit`

### Metadata

selector | `app-register`
styleUrls | `./register.component.scss`
templateUrl | `./register.component.html`

### Index

###### Properties

- form
- set
- submitElement
- timeout

###### Methods

- error
- ngOnInit
- postData
- success
- updateLabels

###### Accessors

- email
- password
- name
- username

### Constructor

`constructor(fb: FormBuilder, dataService: ApiService)`
Defined in src/app/register/register.component.ts:15

Parameters :

Name | Type | Optional
fb | `FormBuilder` | No
dataService | `ApiService` | No

### Methods

error
`error(str: string)`
Defined in src/app/register/register.component.ts:110

Parameters :

Name | Type | Optional
str | `string` | No

Returns : `void`

ngOnInit
`ngOnInit()`
Defined in src/app/register/register.component.ts:43
Returns : `void`

postData
`postData(frm: any)`
Defined in src/app/register/register.component.ts:68

Parameters :

Name | Type | Optional
frm | `any` | No

Returns : `void`

success
`success()`
Defined in src/app/register/register.component.ts:137
Returns : `void`

updateLabels
`updateLabels()`
Defined in src/app/register/register.component.ts:58
Returns : `void`

### Properties

form
Type : `FormGroup`
Defined in src/app/register/register.component.ts:12

set
Type : `NodeListOf<HTMLInputElement>`
Defined in src/app/register/register.component.ts:14

submitElement
Type : `HTMLInputElement`
Defined in src/app/register/register.component.ts:15

timeout
Type : `any`
Defined in src/app/register/register.component.ts:13

### Accessors

email
get `email()`
Defined in src/app/register/register.component.ts:27

password
get `password()`
Defined in src/app/register/register.component.ts:31

name
get `name()`
Defined in src/app/register/register.component.ts:35

username
get `username()`
Defined in src/app/register/register.component.ts:39

    import {Component, OnInit} from '@angular/core';
    import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
    import {first} from 'rxjs/operators';
    import {ApiService} from '../api.service';

    @Component({
      selector: 'app-register',
      templateUrl: './register.component.html',
      styleUrls: ['./register.component.scss']
    })
    export class RegisterComponent implements OnInit {
      form: FormGroup;
      timeout: any;
      set: NodeListOf<HTMLInputElement>;
      submitElement: HTMLInputElement;

      constructor(private fb: FormBuilder, private dataService: ApiService) {
        this.form = this.fb.group({
          name: new FormControl('', [Validators.required, Validators.minLength(1), Validators.maxLength(50)]),
          username: new FormControl('', [Validators.required, Validators.minLength(5), Validators.maxLength(50), Validators.pattern(/^[a-zA-Z0-9_]+$/)]),
          email: new FormControl('', [Validators.required, Validators.pattern(/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/)]),
          password: new FormControl('', [Validators.required, Validators.minLength(8)]),
          confirm_password: new FormControl('', [Validators.required, Validators.minLength(8)])
        });
      }

      get email(): AbstractControl {
        return this.form.get('email');
      }

      get password(): AbstractControl {
        return this.form.get('password');
      }

      get name(): AbstractControl {
        return this.form.get('name');
      }

      get username(): AbstractControl {
        return this.form.get('name');
      }

      ngOnInit(): void {
        this.submitElement = document.getElementById('submit') as HTMLInputElement;
        this.set = document.querySelectorAll('input:not([type=submit])');
        this.set.forEach(item => {
          item.addEventListener('focus', () => {
            item.parentElement.querySelector('label').classList.add('active');
          });
          item.addEventListener('blur', () => {
            if (item.value === '') {
              item.parentElement.querySelector('label').classList.remove('active');
            }
          });
        });
      }

      updateLabels(): void {
        this.set.forEach(item => {
          if (item.value !== '' && item.value !== null) {
            item.parentElement.querySelector('label').classList.add('active');
          } else {
            item.parentElement.querySelector('label').classList.remove('active');
          }
        });
      }

      postData(frm: any): void {

        if (this.submitElement.classList.contains('disabled')) {
          return;
        }
        this.submitElement.classList.add('disabled');

        if (this.form.get('name').invalid) {
          this.error('Invalid name. Please keep it 1 to 50 characters long.');
          return;
        } else if (this.form.get('username').invalid) {
          this.error('Invalid username. Please keep it 5 to 50 characters long with only alphanumeric characters and underscores.');
          return;
        } else if (this.form.get('email').invalid) {
          this.error('Invalid email address. Please recheck.');
          return;
        } else if (this.form.get('password').invalid || this.form.get('confirm_password').invalid) {
          this.error('Invalid password or the passwords don\'t match. Please keep the password at least 8 characters long.');
          this.form.get('password').setValue('');
          this.form.get('confirm_password').setValue('');
          return;
        } else if (this.form.get('password').value !== this.form.get('confirm_password').value) {
          this.error('Passwords don\'t match. Please recheck.');
          this.form.get('password').setValue('');
          this.form.get('confirm_password').setValue('');
          return;
        }

        this.dataService.userReg(frm.value.name, frm.value.email, frm.value.password, frm.value.username)
          .pipe(first())
          .subscribe(
            () => {
              this.success();
            },

            (err: any) => {
              console.log(err);
              this.error('Could not register you. The username or the email ID already exists.');
            });

      }

      error(str: string): void {
        const co = (document.getElementById('cover') as HTMLDivElement);
        const pu = (document.getElementById('error') as HTMLDivElement);
        pu.querySelector('.desc').innerHTML = str;

        co.querySelectorAll('.popup').forEach(item => {
          item.classList.remove('active');
        });

        co.style.display = 'block';
        setTimeout(() => {
          co.classList.add('active');
          pu.classList.add('active');
        }, 100);

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          pu.classList.remove('active');
          co.classList.remove('active');

          setTimeout(() => {
            co.style.display = 'none';
            this.submitElement.classList.remove('disabled');
          }, 500);
        }, 3000);
      }

      success(): void {
        const co = (document.getElementById('cover') as HTMLDivElement);
        const pu = (document.getElementById('success') as HTMLDivElement);

        co.querySelectorAll('.popup').forEach(item => {
          item.classList.remove('active');
        });

        co.style.display = 'block';
        setTimeout(() => {
          co.classList.add('active');
          pu.classList.add('active');
        }, 100);

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          pu.classList.remove('active');
          co.classList.remove('active');

          setTimeout(() => {
            co.style.display = 'none';
            this.submitElement.classList.remove('disabled');
          }, 500);

          this.form.reset();
          this.updateLabels();
        }, 3000);

      }

    }

    <form (ngSubmit)="postData(form)" [formGroup]="form" action="" id="login_form">

      <div class="form-row">
        <label for="name">Name</label>
        <input formControlName="name" id="name" spellcheck="false" type="text">
      </div>
      <div class="form-row">
        <label for="username">Username</label>
        <input formControlName="username" id="username" spellcheck="false" type="text">
      </div>
      <div class="form-row">
        <label for="email">Email</label>
        <input formControlName="email" id="email" spellcheck="false" type="text">
      </div>
      <div class="form-row">
        <label for="password">Password</label>
        <input formControlName="password" id="password" spellcheck="false" type="password">
      </div>
      <div class="form-row">
        <label for="confirm_password">Confirm Password</label>
        <input formControlName="confirm_password" id="confirm_password" spellcheck="false" type="password">
      </div>

      <div class="form-row">
        <input id="submit" type="submit" value="Submit">
      </div>
    </form>

    <div id="cover">
      <div class="popup" id="success">
        <div class="title">Success</div>
        <p class="desc">
          Registered successfully. You can login now to continue.
        </p>
      </div>

      <div class="popup" id="error">
        <div class="title">Error</div>
        <p class="desc">
          An error encountered while submitting the query. Please check your network and for the validity of the
          information.
        </p>
      </div>
    </div>

`./register.component.scss`

    form {
      margin-top: 50px;
      width: 100%;
      text-align: center;

      label {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      .form-row {

        input {
          display: relative;
          margin: 10px;
          background: none;
          border: 1px solid var(--color);
          color: inherit;
          font: inherit;
          width: 25%;
          padding: 5px 8px;
          transition: all 0.25s;

          &:focus {
            background: var(--dark);
            transform: scale(1.01);
          }
        }

        input[type=submit] {
          width: auto;
          cursor: pointer;
          -webkit-transition: 0.2s all;
          -o-transition: 0.2s all;
          transition: 0.2s all;

          &:hover {
            background: var(--color);
            color: var(--bgcolor);
          }

          &.disabled {
            opacity: 0.2;
            cursor: default;

            &:hover {
              background: transparent;
              color: #ddf;
            }
          }
        }

        label {
          position: absolute;
          margin-left: 20px;
          margin-top: 15px;
          -webkit-transition: 0.15s all;
          -o-transition: 0.15s all;
          transition: 0.15s all;

          &.active {
            -webkit-transform: translateX(calc(-100% - 20px));
            -ms-transform: translateX(calc(-100% - 20px));
            transform: translateX(calc(-100% - 20px));
            font-size: 1.1em;
          }
        }
      }
    }

    #cover {
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100%;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      -webkit-transition: all 0.25s;
      -o-transition: all 0.25s;
      transition: all 0.25s;
      opacity: 0;
      display: none;

      &.active {
        opacity: 1;
      }
    }

    .popup {
      position: fixed;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%) scale(0);
      -ms-transform: translate(-50%, -50%) scale(0);
      transform: translate(-50%, -50%) scale(0);
      width: 25vw;
      border: 2px solid var(--color);
      z-index: 100;
      padding: 20px;
      -webkit-transition: all 0.25s;
      -o-transition: all 0.25s;
      transition: all 0.25s;

      &#success {
        background-color: #060e;
      }

      &#error {
        background-color: #600e;
      }

      .title {
        font-size: 1.2em;
      }

      &.active {
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }
    }

    @media only screen and (max-width: 1340px) {
      .form-row {

        input[type=text],
        input[type=email],
        input[type=password] {
          width: 50% !important;
        }
      }

      .popup {
        width: 50vw !important;
      }

    }

    @media only screen and (max-width: 700px) {
      .form-row {

        margin: 20px 0;

        input[type=text],
        input[type=email],
        input[type=password] {
          width: 80% !important;
        }

        label {
          z-index: 5;

          &.active {
            background: var(--bgcolor) !important;
            -webkit-transform: translate(-10px, -20px) !important;
            -ms-transform: translate(-10px, -20px) !important;
            transform: translate(-10px, -20px) !important;
          }
        }
      }

      .popup {
        width: 75vw !important;
      }

    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""