File

src/app/register/register.component.ts

Implements

OnInit

Metadata

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

Index

Properties
Methods
Accessors

Constructor

constructor(fb: FormBuilder, dataService: ApiService)
Parameters :
Name Type Optional
fb FormBuilder No
dataService ApiService No

Methods

error
error(str: string)
Parameters :
Name Type Optional
str string No
Returns : void
ngOnInit
ngOnInit()
Returns : void
postData
postData(frm: any)
Parameters :
Name Type Optional
frm any No
Returns : void
success
success()
Returns : void
updateLabels
updateLabels()
Returns : void

Properties

form
Type : FormGroup
set
Type : NodeListOf<HTMLInputElement>
submitElement
Type : HTMLInputElement
timeout
Type : any

Accessors

email
getemail()
password
getpassword()
name
getname()
username
getusername()
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 ""