File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
|
submitInteractEdata
|
Type : any
|
|
|
|
telemetryCdata
|
Type : any
|
|
|
|
telemetryImpression
|
Type : any
|
|
|
Outputs
|
triggerIsMinor
|
Type : EventEmitter<boolean>
|
|
|
|
triggerNext
|
Type : EventEmitter<boolean>
|
|
|
Methods
|
Private
_filter
|
_filter(value: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| value |
string
|
No
|
Returns : string[]
|
|
changeBirthYear
|
changeBirthYear(selectedBirthYear)
|
|
|
Parameters :
| Name |
Optional |
| selectedBirthYear |
No
|
|
|
initiateYearSelecter
|
initiateYearSelecter()
|
|
|
|
|
|
Public
isNumber
|
isNumber(evt)
|
|
|
|
|
|
birthYearOptions
|
Type : Array<string>
|
Default value : []
|
|
|
|
filteredYOB
|
Type : Observable<number[]>
|
|
|
import { Component, EventEmitter, OnInit,Input, Output } from '@angular/core';
import { ResourceService, UtilService, ConfigService } from '@sunbird/shared';
import { Observable } from 'rxjs';
import { TelemetryService } from '@sunbird/telemetry';
import { IStartEventInput, IImpressionEventInput, IInteractEventEdata } from '@sunbird/telemetry';
import { UntypedFormBuilder, Validators, UntypedFormGroup } from '@angular/forms';
import { map, startWith } from 'rxjs/operators';
import * as _ from 'lodash-es';
@Component({
selector: 'app-signup-basic-info',
templateUrl: './signup-basic-info.component.html',
styleUrls: ['./signup-basic-info.component.scss' , '../signup/signup_form.component.scss']
})
export class SignupBasicInfoComponent implements OnInit {
@Output() subformInitialized: EventEmitter<{}> = new EventEmitter<{}>();
@Output() triggerIsMinor: EventEmitter<boolean> = new EventEmitter<boolean>();
@Output() triggerNext: EventEmitter<boolean> = new EventEmitter<boolean>();
public personalInfoForm: UntypedFormGroup;
@Input() isIOSDevice;
@Input() telemetryImpression;
@Input() submitInteractEdata;
@Input() telemetryCdata;
@Input() routeParams;
birthYearOptions: Array<string> = [];
filteredYOB: Observable<number[]>;
yearOfBirth: string;
isMinor: boolean;
@Input() startingForm: object;
instance: ''
constructor(
public resourceService: ResourceService, public telemetryService: TelemetryService,
public utilService: UtilService, public configService: ConfigService, private _fb: UntypedFormBuilder) { }
ngOnInit(): void {
const endYear = new Date().getFullYear();
const startYear = endYear - this.configService.constants.SIGN_UP.MAX_YEARS;
this.instance = _.upperCase(this.resourceService.instance || 'SUNBIRD');
this.personalInfoForm = this._fb.group({
name: ['', Validators.required],
yearOfBirth: ['', [Validators.required,
Validators.pattern(/^-?(0|[1-9]\d*)?$/),
Validators.min(startYear),
Validators.max(endYear),
]]
})
this.initiateYearSelecter();
// @ts-ignore
this.filteredYOB = this.personalInfoForm.controls.yearOfBirth.valueChanges.pipe(
startWith(''),
map(value => this._filter(value)),
);
// console.log('Global Object data => ', this.startingForm); // TODO: log!
}
private _filter(value: string): string[] {
const filterValue = value.toLowerCase();
return this.birthYearOptions.filter(option => option.toLowerCase().includes(filterValue));
}
public isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
next() {
if(this.personalInfoForm.valid) {
let userDetails;
if(localStorage.getItem('guestUserDetails')) {
userDetails = JSON.parse(localStorage.getItem('guestUserDetails'));
} else {
userDetails = {name: this.personalInfoForm.controls.name.value}
}
userDetails.name = this.personalInfoForm.controls.name.value;
localStorage.setItem('guestUserDetails', JSON.stringify(userDetails));
const signupStage1Details = {
name: userDetails.name,
yearOfBirth: this.personalInfoForm.controls.yearOfBirth.value,
isMinor: this.isMinor
}
this.subformInitialized.emit(signupStage1Details);
this.triggerNext.emit();
} else {
console.log("Invalid form");
}
}
initiateYearSelecter() {
const endYear = new Date().getFullYear();
const startYear = endYear - this.configService.constants.SIGN_UP.MAX_YEARS;
for (let year = endYear; year > startYear; year--) {
this.birthYearOptions.push(year.toString());
}
}
changeBirthYear(selectedBirthYear) {
let _selectedYOB = parseInt(_.get(selectedBirthYear, 'option.value'));
if (this.isIOSDevice) {
_selectedYOB = parseInt(selectedBirthYear.target.value);
this.personalInfoForm.controls.yearOfBirth.setValue(_selectedYOB);
}
const currentYear = new Date().getFullYear();
this.yearOfBirth = `${_selectedYOB}`;
const userAge = currentYear - _selectedYOB;
this.isMinor = userAge < this.configService.constants.SIGN_UP.MINIMUN_AGE;
this.triggerIsMinor.emit(this.isMinor);
}
}
<div [formGroup]="personalInfoForm" class="signup-form-content">
<h5 tabindex="0" *ngIf="telemetryImpression" [ngClass]="{'hide': routeParams?.loginMode == 'gmail','show':routeParams?.loginMode != 'gmail'}" [appTelemetryImpression]="telemetryImpression"
class="font-weight-bold text-center mb-24">
{{resourceService.frmelmnts.lbl.registerOn | interpolate:'{instance}': instance}}</h5>
<h5 tabindex="0" *ngIf="telemetryImpression" [ngClass]="{'show': routeParams?.loginMode == 'gmail','hide': routeParams?.loginMode != 'gmail'}" [appTelemetryImpression]="telemetryImpression"
class="font-weight-bold text-center mb-24">
{{resourceService.frmelmnts.lbl.followingdetails | interpolate:'{instance}': instance}}</h5>
<div class="required mb-16">
<label for="signup-form-name" class="mb-8 font-weight-bold">
{{resourceService.frmelmnts?.lbl?.name}}<span class="sb-color-red">*</span>
</label>
<input id="signup-form-name" class="sb-form-control"
[ngClass]="{'orange-border': personalInfoForm.controls.name.touched && personalInfoForm.controls['name'].errors}"
formControlName="name" type="text" name="name" autocomplete="off" aria-required="true" placeholder="{{resourceService.frmelmnts?.intxt?.enterfulname}}">
<div class="sb-color-red pt-0" aria-describedby="signup-form-name" tabindex="0" aria-label="enter name" *ngIf="personalInfoForm.controls.name.touched && personalInfoForm.controls['name'].errors && personalInfoForm.controls['name'].errors.required">{{resourceService.frmelmnts?.lbl?.enterName}}</div>
<div class="sb-color-red pt-0" aria-describedby="signup-form-name" tabindex="0" aria-label="enter a valid name" *ngIf="personalInfoForm.controls.name.touched && personalInfoForm.controls['name'].errors && personalInfoForm.controls['name'].errors.pattern">{{resourceService.frmelmnts.lbl.enterValidName}}</div>
</div>
<div class="year-birth mb-16 required">
<label for="signup-form-yearofbirth" class="mb-8 font-weight-bold">{{resourceService.frmelmnts?.lbl?.yearOfBirth}}<span class="sb-color-red">*</span></label>
<mat-form-field *ngIf="!isIOSDevice" aria-required="true" appearance="fill" class="sb-mat__dropdown sb-mat__dropdown--autocmp w-100">
<!-- <mat-label>{{resourceService.frmelmnts?.lbl?.yearOfBirth}}<span class="sb-color-red">*</span>
</mat-label> -->
<input type="text" (keypress)="isNumber(event)" formControlName="yearOfBirth" tabindex="0"
placeholder="Select year" [attr.aria-label]="resourceService.frmelmnts?.lbl?.yearOfBirth" matInput
[matAutocomplete]="auto" maxlength="4">
<mat-autocomplete (optionSelected)="changeBirthYear($event)" role="combobox" #auto="matAutocomplete">
<mat-option class="mat-dropdown__options" role="listbox" *ngFor="let option of filteredYOB | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<label *ngIf="isIOSDevice">
<select name="birthYearOptions" id="birthYearOptions" class="sb-form-control birthYearOptions"
(change)="changeBirthYear($event, true)">
<option value="" disabled selected>{{resourceService.frmelmnts?.lbl?.year}}</option>
<option *ngFor="let option of birthYearOptions" [value]="option">{{option}}</option>
</select>
</label>
<div class="sb-color-red pt-0" aria-describedby="signup-form-yearofbirth" tabindex="0" [attr.aria-label]="resourceService.frmelmnts?.lbl?.yearOfBirth" *ngIf="personalInfoForm.controls.yearOfBirth.touched && personalInfoForm.controls['yearOfBirth'].errors && personalInfoForm.controls['yearOfBirth'].errors.required">{{resourceService.frmelmnts?.lbl?.yearOfBirth}}</div>
<div class="sb-color-red pt-0" aria-describedby="signup-form-yearofbirth" tabindex="0" [attr.aria-label]="resourceService.frmelmnts?.lbl?.yearOfBirth" *ngIf="personalInfoForm.controls.yearOfBirth.touched && personalInfoForm.controls['yearOfBirth'].errors && personalInfoForm.controls['yearOfBirth'].errors.pattern">{{resourceService.frmelmnts.lbl.yearOfBirth}}</div>
<div class="sb-color-red pt-0" aria-describedby="signup-form-yearofbirth" tabindex="0" [attr.aria-label]="resourceService.frmelmnts?.lbl?.validYearOfBirth" *ngIf="personalInfoForm.controls.yearOfBirth.touched && personalInfoForm.controls['yearOfBirth'].errors && (personalInfoForm.controls['yearOfBirth'].errors.min || personalInfoForm.controls['yearOfBirth'].errors.max) && !(personalInfoForm.controls.yearOfBirth.touched && personalInfoForm.controls['yearOfBirth'].errors && (personalInfoForm.controls['yearOfBirth'].errors.pattern || personalInfoForm.controls['yearOfBirth'].errors.required))">{{resourceService.frmelmnts?.lbl?.validYearOfBirth}}</div>
</div>
<button [attr.aria-disabled]="!personalInfoForm.valid" [disabled]="!personalInfoForm.valid" type="biutton" appTelemetryInteract
[telemetryInteractEdata]="submitInteractEdata" [telemetryInteractCdata]="telemetryCdata"
[ngClass]="{'sb-btn-disabled':!personalInfoForm.valid, 'sb-btn-primary':personalInfoForm.valid}"
class="sb-btn sb-btn-sm text-uppercase width-100 mt-16 flex-basis-1" tabindex="0" (click)="next()"><span>{{resourceService.frmelmnts.lbl.continue}}</span><span
class='arrow-icon pl-8'><i class="icon-svg icon-svg--xxs icon-back">
<svg class="icon icon-svg--white">
<use xlink:href="./assets/images/sprite.svg#arrow-long-right"></use>
</svg></i></span></button>
</div>
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.sb-mat__dropdown.sb-mat__dropdown--autocmp {
border: calculateRem(1px) solid var(--gray-200);
border-radius: calculateRem(24px);
}
::ng-deep {
html[layout=joy] .sb-form-control {
min-height: 2.5rem !important;
border-radius: calculateRem(40px) !important;
}
html[layout="joy"] .sb-form-control:hover {
border: 0.0625rem solid var(--gray-200);
}
span.arrow-icon.pl-8 {
float: right;
}
}
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.signup-form-content,.logo-content{
width: 100%;
max-width: calculateRem(360px);
margin: 0 auto;
padding:0 1rem
}
Legend
Html element with directive