File
Implements
Methods
|
Async
continue
|
continue()
|
|
|
|
|
|
initializeForm
|
initializeForm()
|
|
|
|
|
|
initiateYearSelecter
|
initiateYearSelecter()
|
|
|
|
|
|
Async
ngOnInit
|
ngOnInit()
|
|
|
|
|
|
redirectToLogin
|
redirectToLogin()
|
|
|
|
|
|
appName
|
Type : string
|
Default value : ''
|
|
|
|
birthYearOptions
|
Type : []
|
Default value : []
|
|
|
|
btnColor
|
Type : string
|
Default value : '#8FC4FF'
|
|
|
|
currentYear
|
Type : any
|
Default value : (new Date()).getFullYear()
|
|
|
|
date
|
Type : any
|
Default value : new Date().toISOString()
|
|
|
|
personalInfoForm
|
Type : FormGroup
|
|
|
import { Component, Inject, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NavigationExtras, Router } from '@angular/router';
import { AppGlobalService, AppHeaderService, CommonUtilService } from '@app/services';
import { ProfileService } from 'sunbird-sdk';
import { RouterLinks } from '../../app.constant';
import { Location } from '@angular/common';
@Component({
selector: 'app-signup-basic-info',
templateUrl: './signup-basic-info.page.html',
styleUrls: ['./signup-basic-info.page.scss'],
})
export class SignupBasicInfoPage implements OnInit {
birthYearOptions = [];
date: any = new Date().toISOString();
currentYear: any = (new Date()).getFullYear();
personalInfoForm: FormGroup;
btnColor = '#8FC4FF';
appName = '';
constructor(
@Inject('PROFILE_SERVICE') private profileService: ProfileService,
private router: Router,
private fb: FormBuilder,
private appGlobalService: AppGlobalService,
private commonUtilService: CommonUtilService,
private appHeaderService: AppHeaderService,
private location: Location,
) {
this.initializeForm();
}
async ngOnInit() {
this.appName = await this.commonUtilService.getAppName();
this.appHeaderService.hideHeader();
this.initiateYearSelecter();
}
async continue() {
const req = {
userId: this.appGlobalService.getCurrentUser().uid,
name: this.personalInfoForm.value.name,
dob: this.personalInfoForm.value.dob
};
const navigationExtras: NavigationExtras = {
state: {
isGoogleSignIn: true,
userData: {
name: this.personalInfoForm.value.name,
dob: this.personalInfoForm.value.dob,
isMinor: (new Date().getFullYear() - this.personalInfoForm.value.dob) < 18
}
}
};
await this.router.navigate(['/', RouterLinks.DISTRICT_MAPPING], navigationExtras);
}
initiateYearSelecter() {
const endYear = new Date().getFullYear();
for (let year = endYear; year > 1921; year--) {
this.birthYearOptions.push(year);
}
}
initializeForm() {
this.personalInfoForm = this.fb.group({
name: ['', Validators.required],
dob: ['', Validators.required]
});
}
redirectToLogin() {
this.router.navigate([RouterLinks.SIGN_IN]);
}
goBack() {
this.location.back();
}
}
<ion-header>
<ion-toolbar>
<ion-buttons slot="start" *ngIf="birthYearOptions.length>0">
<ion-button icon-only (click)="goBack()">
<ion-icon class="arrow-icon back-arrow" role="button" aria-label="back" name="arrow-back"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title role="heading" aria-level="1">{{'FRMELEMNTS_LBL_STEP' | translate:{'page_number': '1/4'} }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="sign-up-div">
<div class="header">
<div class="logos">
<img src="assets/imgs/ic_launcher.png" alt="app">
</div>
<h1 class="title">{{'APP_TITLE' | translate:{'%s': appName} }}</h1>
<h5 class="subtitle">{{'FRMELEMNTS_LBL_REGISTER_TO' | translate:{'appName': appName} }}</h5>
</div>
<form [formGroup]="personalInfoForm">
<ion-item lines="none">
<ion-label position="stacked" class="important">{{'FULL_NAME' | translate}}</ion-label>
<ion-input formControlName="name" type="text" placeholder="{{'FRMELEMNTS_LBL_ENTER_NAME' | translate}}" required></ion-input>
</ion-item>
<ion-item lines="none">
<ion-label position="stacked" class="important" style="margin-bottom: .7rem;">{{'YOB_TITLE' | translate}}
</ion-label>
<ion-select formControlName="dob" placeholder="{{'SELECT_YOB' | translate}}" interface="popover" mode="ios"
class="yob-info ion-text-capitalize">
<ion-select-option *ngFor="let year of birthYearOptions" value="{{year}}">
{{year}}</ion-select-option>
</ion-select>
</ion-item>
</form>
<div style="padding: 1rem;">
<ion-button expand="block" [ngStyle]="{'background-color': btnColor}" (click)="continue()"
[disabled]="!personalInfoForm.valid">
<span>{{'CONTINUE' | translate}}</span>
<ion-icon class="mg-popup-btn-icon" name="arrow-forward" slot="end"></ion-icon>
</ion-button>
</div>
</div>
</ion-content>
<div class="footer">
<label>{{'HAVE_ACCOUNT' | translate }}</label>
<button class="login-info sb-btn sb-btn-normal sb-btn-outline-primary text-uppercase"
aria-label="Already have an account? Login here" tabindex="0" (click)="redirectToLogin()" type="submit">{{'SIGN_IN'
| translate}}</button>
</div>
@import "src/assets/styles/base/_variables.scss";
@import "src/assets/styles/_custom-mixins.scss";
@import "src/assets/styles/fonts.scss";
@import "src/assets/styles/_variables.scss";
.sign-up-div {
margin-top: 10vh;
.header {
text-align: center;
margin: auto;
.logos {
justify-content: center;
align-items: center;
img {
width: 4rem;
padding: 10px;
}
}
.title {
color: #005A9E;
font-weight: bold;
margin-top: 2px;
}
.subtitle {
font-weight: bold;
color: #333333;
}
}
}
ion-input,
section {
border: 1px solid gray;
border-radius: 16px;
margin: 10px auto;
padding-left: 1rem !important;
}
section {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0 1rem;
ion-icon {
font-size: 23px;
color: gray;
position: absolute;
top: 50%;
right: 0px;
transform: translateY(-50%);
}
}
ion-datetime {
width: 100%;
padding: 7px 0;
}
.important::after {
content: '*';
color: red;
margin-left: 5px;
}
.bold {
font-weight: bold;
}
.footer {
background: #F8FAFC;
border-top: 1px solid #d1d6dd;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
width: 100%;
padding: 1rem;
a {
color: #005A9E;
}
label {
margin-bottom: 0!important;
}
}
ion-slides {
height: 100%;
}
.swiper-slide {
display: block;
}
.yob-info {
border: 1px solid #999999 !important;
border-radius: 22px;
padding-left: 0.75rem !important;
}
.btn-info{
padding: 12px;
text-align: center;
}
.button-disabled {
--background: #707070 !important;
}
ion-button{
height: 40px;
box-shadow: var(--button-style-shadow) !important;
border-radius: 1rem;
}
ion-select{
.select-text{
margin-left: .75rem !important;
}
padding-left: .75rem !important;
.select-placeholder{
margin-left: .75rem !important;
}
}
.select-text{
margin-left: .75rem !important;
}
.select-placeholder{
margin-left: .75rem !important;
}
Legend
Html element with directive