File

packages/ui/src/lib/utility/signup-form/signup-form.component.ts

Description

Login Form Component with validation. Fires success event with credentials on submit. https://components.entrecode.de/ui/login?e=1

Extends

LoginFormComponent

Implements

OnInit WithLoader

Metadata

selector	`ec-signup-form`
templateUrl	`./signup-form.component.html`

Index

Inputs

buttonLabel
Default value : `this.symbol.resolve('signup.button.label')`
Defined in packages/ui/src/lib/utility/signup-form/signup-form.component.ts:16
The Label of the submit button. Defaults to Login

invite
Default value : `''`
Defined in packages/ui/src/lib/utility/signup-form/signup-form.component.ts:20
If set, the invite field will be hidden and the given code will be used for signup

invitePlaceholder
Default value : `this.symbol.resolve('signup.invite.placeholder')`
Defined in packages/ui/src/lib/utility/signup-form/signup-form.component.ts:18
The Placeholder of the mail Field

buttonClasses
Default value : `''`
Inherited from `LoginFormComponent`
Defined in `LoginFormComponent:42`
Additional Button classes

buttonLabel
Default value : `this.symbol.resolve('login.button.label')`
Inherited from `LoginFormComponent`
Defined in `LoginFormComponent:40`
The Label of the submit button. Defaults to Login

emailLabel
Default value : `this.symbol.resolve('login.email.label')`
Inherited from `LoginFormComponent`
Defined in `LoginFormComponent:32`
The Label of the Mail field

emailPlaceholder
Default value : `this.symbol.resolve('login.email.placeholder')`
Inherited from `LoginFormComponent`
Defined in `LoginFormComponent:34`
The Placeholder of the mail Field

loader
Type : `LoaderComponent`
Inherited from `LoginFormComponent`
Defined in `LoginFormComponent:28`
The loader that should be shown during login

passwordLabel
Default value : `this.symbol.resolve('login.password.label')`
Inherited from `LoginFormComponent`
Defined in `LoginFormComponent:36`
The Label of the password field.

passwordPlaceholder
Default value : `this.symbol.resolve('login.password.placeholder')`
Inherited from `LoginFormComponent`
Defined in `LoginFormComponent:38`
The Placeholder of the password field

showLabels
Default value : `true`
Inherited from `LoginFormComponent`
Defined in `LoginFormComponent:30`
If true, email and password wont have labels

Outputs

error
Type : `EventEmitter<any>`
Inherited from `LoginFormComponent`
Defined in `LoginFormComponent:26`
Event that emits when calling showError.

success
Type : `EventEmitter<any>`
Inherited from `LoginFormComponent`
Defined in `LoginFormComponent:24`
Event that emits on succesful submit of the form, passing the login credentials.

Methods

ngOnInit

ngOnInit()

Defined in packages/ui/src/lib/utility/signup-form/signup-form.component.ts:28

Initializes the form

Returns : void

onSubmit

onSubmit()

Defined in packages/ui/src/lib/utility/signup-form/signup-form.component.ts:37

Is called when the form has been successfully submitted. Calls login and resets the form after.

Returns : void

signup

signup(value)

Defined in packages/ui/src/lib/utility/signup-form/signup-form.component.ts:22

Method that is meant to be overwritten by a subclass to communicate with an API.

Parameters :

Name	Optional
value	No

Returns : any

login

login(value)

Inherited from LoginFormComponent

Defined in LoginFormComponent:66

Method that is meant to be overwritten by a subclass to communicate with an API.

Parameters :

Name	Optional
value	No

Returns : any

ngOnInit

ngOnInit()

Inherited from LoginFormComponent

Defined in LoginFormComponent:50

Initializes the form

Returns : void

onSubmit

onSubmit()

Inherited from LoginFormComponent

Defined in LoginFormComponent:72

Is called when the form has been successfully submitted. Calls login and resets the form after.

Returns : void

showError

showError(err)

Inherited from LoginFormComponent

Defined in LoginFormComponent:58

Shows the given error in the form. Clears the password field and emits the error event.

Parameters :

Name	Optional
err	No

Returns : any

Properties

Public errorMessage

Type : string

Inherited from LoginFormComponent

Defined in LoginFormComponent:22

Contains possible error messages.

Public form

Type : FormGroup

Inherited from LoginFormComponent

Defined in LoginFormComponent:18

The login's form group.

notifications

Type : Notification[]

Inherited from LoginFormComponent

Defined in LoginFormComponent:44

Recent error Notifications

Protected submitted

Type : boolean

Inherited from LoginFormComponent

Defined in LoginFormComponent:20

Flips true when submitted.

Public symbol

Type : SymbolService

Inherited from LoginFormComponent

Defined in LoginFormComponent:47

import { Component, Input, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { FieldValidators } from '../../utility/validators/field-validators';
import { WithLoader } from '../../loader/with-loader.interface';
import { LoginFormComponent } from '../login-form/login-form.component';

/** Login Form Component with validation. Fires success event with credentials on submit.
 * <example-url>https://components.entrecode.de/ui/login?e=1</example-url>
 */
@Component({
  selector: 'ec-signup-form',
  templateUrl: './signup-form.component.html',
})
export class SignupFormComponent extends LoginFormComponent implements OnInit, WithLoader {
  /** The Label of the submit button. Defaults to Login */
  @Input() buttonLabel = this.symbol.resolve('signup.button.label');
  /** The Placeholder of the mail Field */
  @Input() invitePlaceholder = this.symbol.resolve('signup.invite.placeholder');
  /** If set, the invite field will be hidden and the given code will be used for signup */
  @Input() invite = '';
  /** Method that is meant to be overwritten by a subclass to communicate with an API. */
  signup(value) {
    // meant to be overridden
    return Promise.resolve(value);
  }

  /** Initializes the form */
  ngOnInit() {
    this.form = this.fb.group({
      email: ['', [Validators.required, FieldValidators.email]], // emailAvailable?
      password: ['', [Validators.required]],
      invite: [this.invite, [Validators.required]], // FieldValidators.uuid
    });
  }

  /** Is called when the form has been successfully submitted. Calls login and resets the form after. */
  onSubmit() {
    this.submitted = true;
    delete this.errorMessage;
    if (!this.form.valid) {
      return;
    }
    const login = this.signup(this.form.value).then((res) => {
      // this.form.reset();
      this.success.emit(res);
    });
    if (this.loader) {
      this.loader.wait(login);
    }
  }
}

<form novalidate [formGroup]="form" (ngSubmit)="onSubmit()" class="ec-auth ec-auth_signup">
  <p class="error" *ngIf="errorMessage">
    {{errorMessage}}
  </p>
  <div class="field-group ec-auth__email">
    <label class="field-group__label" for="ecAuthEmail" *ngIf="showLabels">{{emailLabel}}</label>
    <input type="email" formControlName="email" id="ecAuthEmail" class="input" [placeholder]="emailPlaceholder">
    <ec-input-errors [control]="form?.get('email')"></ec-input-errors>
  </div>
  <div class="field-group ec-auth__password">
    <label class="field-group__label" for="ecAuthPassword" *ngIf="showLabels">Passwort</label>
    <input type="password" formControlName="password" id="ecAuthPassword" class="input" [placeholder]="passwordPlaceholder">
    <ec-input-errors [control]="form?.get('password')"></ec-input-errors>
  </div>
  <div class="field-group ec-auth__invite" *ngIf="!invite">
    <label class="field-group__label" for="ecAuthInvite" *ngIf="showLabels">Invite</label>
    <input type="text" formControlName="invite" id="ecAuthInvite" class="input" [placeholder]="invitePlaceholder">
    <ec-input-errors [control]="form?.get('invite')"></ec-input-errors>
  </div>

  <button type="submit" [disabled]="form?.invalid" [class.is-disabled]="form?.invalid" class="btn ec-auth__btn" [ngClass]="buttonClasses">
    {{buttonLabel}}
  </button>
</form>

Legend

Html element

Component

Html element with directive

File

Description

Extends

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

Inputs

Outputs

Methods

Properties

result-matching ""

No results matching ""