forked from EVOgeek/Vmeda.Online
MOBILE-3833 signup: Add a wrapper container and remove refresher
This commit is contained in:
Pau Ferrer Ocaña
parent
3627e3fde5
commit
e502c73392
@ -17,12 +17,8 @@
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-refresher slot="fixed" [disabled]="!settingsLoaded || isMinor" (ionRefresh)="refreshSettings($event.target)">
|
||||
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<div class="list-item-limited-width">
|
||||
|
||||
<core-loading [hideUntil]="settingsLoaded" *ngIf="!isMinor">
|
||||
<core-loading [hideUntil]="settingsLoaded" *ngIf="!isMinor">
|
||||
<div class="list-item-limited-width">
|
||||
|
||||
<!-- Site has an unsupported required field. -->
|
||||
<ion-list *ngIf="!allRequiredSupported">
|
||||
@ -36,195 +32,197 @@
|
||||
</ion-button>
|
||||
</ion-list>
|
||||
|
||||
<!-- Age verification. -->
|
||||
<form *ngIf="allRequiredSupported && settingsLoaded && settings && ageDigitalConsentVerification"
|
||||
[formGroup]="ageVerificationForm" (ngSubmit)="verifyAge($event)" #ageForm>
|
||||
<ng-container *ngIf="allRequiredSupported && settingsLoaded && settings">
|
||||
<!-- Age verification. -->
|
||||
<form *ngIf="ageDigitalConsentVerification" [formGroup]="ageVerificationForm" (ngSubmit)="verifyAge($event)" #ageForm>
|
||||
|
||||
<ion-item-divider class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<h3>{{ 'core.agelocationverification' | translate }}</h3>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item-divider class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<h3>{{ 'core.agelocationverification' | translate }}</h3>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label position="stacked">
|
||||
<span core-mark-required="true">{{ 'core.whatisyourage' | translate }}</span>
|
||||
</ion-label>
|
||||
<ion-input type="number" name="age" placeholder="0" formControlName="age" autocapitalize="none" autocorrect="off">
|
||||
</ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label position="stacked">
|
||||
<span core-mark-required="true">{{ 'core.wheredoyoulive' | translate }}</span>
|
||||
</ion-label>
|
||||
<ion-select name="country" formControlName="country" [placeholder]="'core.login.selectacountry' | translate">
|
||||
<ion-select-option value="">{{ 'core.login.selectacountry' | translate }}</ion-select-option>
|
||||
<ion-select-option *ngFor="let country of countries" [value]="country.code">{{country.name}}</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<!-- Submit button. -->
|
||||
<ion-button expand="block" class="ion-margin" type="submit" [disabled]="!ageVerificationForm.valid">
|
||||
{{ 'core.proceed' | translate }}
|
||||
</ion-button>
|
||||
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<h3 class="item-heading">{{ 'core.whyisthisrequired' | translate }}</h3>
|
||||
<p>{{ 'core.explanationdigitalminor' | translate }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</form>
|
||||
|
||||
<!-- Signup form. -->
|
||||
<form *ngIf="allRequiredSupported && settingsLoaded && settings && !ageDigitalConsentVerification" [formGroup]="signupForm"
|
||||
(ngSubmit)="create($event)" #signupFormEl>
|
||||
|
||||
<ion-item class="ion-text-wrap ion-text-center">
|
||||
<ion-label>
|
||||
<!-- If no sitename show big siteurl. -->
|
||||
<p *ngIf="!siteName" class="ion-padding item-heading">{{siteUrl}}</p>
|
||||
<!-- If sitename, show big sitename and small siteurl. -->
|
||||
<p *ngIf="siteName" class="ion-padding item-heading">
|
||||
<core-format-text [text]="siteName" [filter]="false"></core-format-text>
|
||||
</p>
|
||||
<p *ngIf="siteName">{{siteUrl}}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<!-- Username and password. -->
|
||||
<ion-item-divider class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<h3>{{ 'core.login.createuserandpass' | translate }}</h3>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label position="stacked">
|
||||
<span core-mark-required="true">{{ 'core.login.username' | translate }}</span>
|
||||
</ion-label>
|
||||
<ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}" formControlName="username"
|
||||
autocapitalize="none" autocorrect="off">
|
||||
</ion-input>
|
||||
<core-input-errors [control]="signupForm.controls.username" [errorMessages]="usernameErrors"></core-input-errors>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label position="stacked">
|
||||
<span core-mark-required="true">{{ 'core.login.password' | translate }}</span>
|
||||
</ion-label>
|
||||
<core-show-password name="password">
|
||||
<ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
|
||||
formControlName="password" [clearOnEdit]="false" autocomplete="new-password" required="true">
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label position="stacked">
|
||||
<span core-mark-required="true">{{ 'core.whatisyourage' | translate }}</span>
|
||||
</ion-label>
|
||||
<ion-input type="number" name="age" placeholder="0" formControlName="age" autocapitalize="none" autocorrect="off">
|
||||
</ion-input>
|
||||
</core-show-password>
|
||||
<p *ngIf="settings.passwordpolicy" class="core-input-footnote">
|
||||
{{settings.passwordpolicy}}
|
||||
</p>
|
||||
<core-input-errors [control]="signupForm.controls.password" [errorMessages]="passwordErrors"></core-input-errors>
|
||||
</ion-item>
|
||||
</ion-item>
|
||||
|
||||
<!-- More details. -->
|
||||
<ion-item-divider class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<h3>{{ 'core.login.supplyinfo' | translate }}</h3>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label position="stacked">
|
||||
<span core-mark-required="true">{{ 'core.user.email' | translate }}</span>
|
||||
</ion-label>
|
||||
<ion-input type="email" name="email" placeholder="{{ 'core.user.email' | translate }}" formControlName="email"
|
||||
autocapitalize="none" autocorrect="off">
|
||||
</ion-input>
|
||||
<core-input-errors [control]="signupForm.controls.email" [errorMessages]="emailErrors"></core-input-errors>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label position="stacked">
|
||||
<span core-mark-required="true">{{ 'core.user.emailagain' | translate }}</span>
|
||||
</ion-label>
|
||||
<ion-input type="email" name="email2" placeholder="{{ 'core.user.emailagain' | translate }}" autocapitalize="none"
|
||||
formControlName="email2" autocorrect="off" [pattern]="escapeMail(signupForm.controls.email.value)">
|
||||
</ion-input>
|
||||
<core-input-errors [control]="signupForm.controls.email2" [errorMessages]="email2Errors"></core-input-errors>
|
||||
</ion-item>
|
||||
<ion-item *ngFor="let nameField of settings.namefields" class="ion-text-wrap">
|
||||
<ion-label position="stacked">
|
||||
<span core-mark-required="true">{{ 'core.user.' + nameField | translate }}</span>
|
||||
</ion-label>
|
||||
<ion-input type="text" name="nameField" placeholder="{{ 'core.user.' + nameField | translate }}"
|
||||
formControlName="{{nameField}}" autocorrect="off">
|
||||
</ion-input>
|
||||
<core-input-errors [control]="signupForm.controls[nameField]" [errorMessages]="namefieldsErrors![nameField]">
|
||||
</core-input-errors>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label position="stacked">{{ 'core.user.city' | translate }}</ion-label>
|
||||
<ion-input type="text" name="city" placeholder="{{ 'core.user.city' | translate }}" formControlName="city"
|
||||
autocorrect="off">
|
||||
</ion-input>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label position="stacked" id="core-login-signup-country">{{ 'core.user.country' | translate }}</ion-label>
|
||||
<ion-select name="country" formControlName="country" aria-labelledby="core-login-signup-country"
|
||||
[placeholder]="'core.login.selectacountry' | translate">
|
||||
|
||||
<ion-select-option value="">{{ 'core.login.selectacountry' | translate }}</ion-select-option>
|
||||
<ion-select-option *ngFor="let country of countries" [value]="country.code">{{country.name}}</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<!-- Other categories. -->
|
||||
<ng-container *ngFor="let category of categories">
|
||||
<ion-item-divider class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<p class="item-heading">{{ category.name }}</p>
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label position="stacked">
|
||||
<span core-mark-required="true">{{ 'core.wheredoyoulive' | translate }}</span>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<core-user-profile-field *ngFor="let field of category.fields" [field]="field" [edit]="true" [signup]="true"
|
||||
registerAuth="email" [form]="signupForm"></core-user-profile-field>
|
||||
</ng-container>
|
||||
<ion-select name="country" formControlName="country" [placeholder]="'core.login.selectacountry' | translate">
|
||||
<ion-select-option value="">{{ 'core.login.selectacountry' | translate }}</ion-select-option>
|
||||
<ion-select-option *ngFor="let country of countries" [value]="country.code">{{country.name}}</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<!-- ReCAPTCHA -->
|
||||
<ng-container *ngIf="settings.recaptchapublickey">
|
||||
<ion-item-divider class="ion-text-wrap">
|
||||
<!-- Submit button. -->
|
||||
<ion-button expand="block" class="ion-margin" type="submit" [disabled]="!ageVerificationForm.valid">
|
||||
{{ 'core.proceed' | translate }}
|
||||
</ion-button>
|
||||
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<h3><span [core-mark-required]="true">{{ 'core.login.security_question' | translate }}</span></h3>
|
||||
<h3 class="item-heading">{{ 'core.whyisthisrequired' | translate }}</h3>
|
||||
<p>{{ 'core.explanationdigitalminor' | translate }}</p>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<core-recaptcha [publicKey]="settings.recaptchapublickey" [model]="captcha" [siteUrl]="siteUrl"></core-recaptcha>
|
||||
</ng-container>
|
||||
</ion-item>
|
||||
</form>
|
||||
|
||||
<!-- Site policy (if any). -->
|
||||
<ng-container *ngIf="settings.sitepolicy">
|
||||
<!-- Signup form. -->
|
||||
<form *ngIf="!ageDigitalConsentVerification" [formGroup]="signupForm" (ngSubmit)="create($event)" #signupFormEl>
|
||||
|
||||
<ion-item class="ion-text-wrap ion-text-center">
|
||||
<ion-label>
|
||||
<!-- If no sitename show big siteurl. -->
|
||||
<p *ngIf="!siteName" class="ion-padding item-heading">{{siteUrl}}</p>
|
||||
<!-- If sitename, show big sitename and small siteurl. -->
|
||||
<p *ngIf="siteName" class="ion-padding item-heading">
|
||||
<core-format-text [text]="siteName" [filter]="false"></core-format-text>
|
||||
</p>
|
||||
<p *ngIf="siteName">{{siteUrl}}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<!-- Username and password. -->
|
||||
<ion-item-divider class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<h3>{{ 'core.login.policyagreement' | translate }}</h3>
|
||||
<h3>{{ 'core.login.createuserandpass' | translate }}</h3>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<a [href]="settings.sitepolicy" core-link capture="false">
|
||||
{{ 'core.login.policyagreementclick' | translate }}
|
||||
</a>
|
||||
<ion-label position="stacked">
|
||||
<span core-mark-required="true">{{ 'core.login.username' | translate }}</span>
|
||||
</ion-label>
|
||||
<ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}"
|
||||
formControlName="username" autocapitalize="none" autocorrect="off">
|
||||
</ion-input>
|
||||
<core-input-errors [control]="signupForm.controls.username" [errorMessages]="usernameErrors"></core-input-errors>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<span [core-mark-required]="true">{{ 'core.login.policyacceptmandatory' | translate }}</span>
|
||||
<core-input-errors [control]="signupForm.controls.policyagreed" [errorMessages]="policyErrors">
|
||||
</core-input-errors>
|
||||
<ion-label position="stacked">
|
||||
<span core-mark-required="true">{{ 'core.login.password' | translate }}</span>
|
||||
</ion-label>
|
||||
<ion-checkbox slot="end" name="policyagreed" formControlName="policyagreed"></ion-checkbox>
|
||||
<core-show-password name="password">
|
||||
<ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
|
||||
formControlName="password" [clearOnEdit]="false" autocomplete="new-password" required="true">
|
||||
</ion-input>
|
||||
</core-show-password>
|
||||
<p *ngIf="settings.passwordpolicy" class="core-input-footnote">
|
||||
{{settings.passwordpolicy}}
|
||||
</p>
|
||||
<core-input-errors [control]="signupForm.controls.password" [errorMessages]="passwordErrors"></core-input-errors>
|
||||
</ion-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Submit button. -->
|
||||
<ion-button expand="block" class="ion-margin" type="submit">{{ 'core.login.createaccount' | translate }}</ion-button>
|
||||
<!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
|
||||
<input type="submit" class="core-submit-hidden-enter" />
|
||||
</form>
|
||||
</core-loading>
|
||||
<!-- More details. -->
|
||||
<ion-item-divider class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<h3>{{ 'core.login.supplyinfo' | translate }}</h3>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label position="stacked">
|
||||
<span core-mark-required="true">{{ 'core.user.email' | translate }}</span>
|
||||
</ion-label>
|
||||
<ion-input type="email" name="email" placeholder="{{ 'core.user.email' | translate }}" formControlName="email"
|
||||
autocapitalize="none" autocorrect="off">
|
||||
</ion-input>
|
||||
<core-input-errors [control]="signupForm.controls.email" [errorMessages]="emailErrors"></core-input-errors>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label position="stacked">
|
||||
<span core-mark-required="true">{{ 'core.user.emailagain' | translate }}</span>
|
||||
</ion-label>
|
||||
<ion-input type="email" name="email2" placeholder="{{ 'core.user.emailagain' | translate }}" autocapitalize="none"
|
||||
formControlName="email2" autocorrect="off" [pattern]="escapeMail(signupForm.controls.email.value)">
|
||||
</ion-input>
|
||||
<core-input-errors [control]="signupForm.controls.email2" [errorMessages]="email2Errors"></core-input-errors>
|
||||
</ion-item>
|
||||
<ion-item *ngFor="let nameField of settings.namefields" class="ion-text-wrap">
|
||||
<ion-label position="stacked">
|
||||
<span core-mark-required="true">{{ 'core.user.' + nameField | translate }}</span>
|
||||
</ion-label>
|
||||
<ion-input type="text" name="nameField" placeholder="{{ 'core.user.' + nameField | translate }}"
|
||||
formControlName="{{nameField}}" autocorrect="off">
|
||||
</ion-input>
|
||||
<core-input-errors [control]="signupForm.controls[nameField]" [errorMessages]="namefieldsErrors![nameField]">
|
||||
</core-input-errors>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label position="stacked">{{ 'core.user.city' | translate }}</ion-label>
|
||||
<ion-input type="text" name="city" placeholder="{{ 'core.user.city' | translate }}" formControlName="city"
|
||||
autocorrect="off">
|
||||
</ion-input>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label position="stacked" id="core-login-signup-country">{{ 'core.user.country' | translate }}</ion-label>
|
||||
<ion-select name="country" formControlName="country" aria-labelledby="core-login-signup-country"
|
||||
[placeholder]="'core.login.selectacountry' | translate">
|
||||
|
||||
<ion-select-option value="">{{ 'core.login.selectacountry' | translate }}</ion-select-option>
|
||||
<ion-select-option *ngFor="let country of countries" [value]="country.code">{{country.name}}</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<!-- Other categories. -->
|
||||
<ng-container *ngFor="let category of categories">
|
||||
<ion-item-divider class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<p class="item-heading">{{ category.name }}</p>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<core-user-profile-field *ngFor="let field of category.fields" [field]="field" [edit]="true" [signup]="true"
|
||||
registerAuth="email" [form]="signupForm"></core-user-profile-field>
|
||||
</ng-container>
|
||||
|
||||
<!-- ReCAPTCHA -->
|
||||
<ng-container *ngIf="settings.recaptchapublickey">
|
||||
<ion-item-divider class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<h3><span [core-mark-required]="true">{{ 'core.login.security_question' | translate }}</span></h3>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<core-recaptcha [publicKey]="settings.recaptchapublickey" [model]="captcha" [siteUrl]="siteUrl"></core-recaptcha>
|
||||
</ng-container>
|
||||
|
||||
<!-- Site policy (if any). -->
|
||||
<ng-container *ngIf="settings.sitepolicy">
|
||||
<ion-item-divider class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<h3>{{ 'core.login.policyagreement' | translate }}</h3>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<a [href]="settings.sitepolicy" core-link capture="false">
|
||||
{{ 'core.login.policyagreementclick' | translate }}
|
||||
</a>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<span [core-mark-required]="true">{{ 'core.login.policyacceptmandatory' | translate }}</span>
|
||||
<core-input-errors [control]="signupForm.controls.policyagreed" [errorMessages]="policyErrors">
|
||||
</core-input-errors>
|
||||
</ion-label>
|
||||
<ion-checkbox slot="end" name="policyagreed" formControlName="policyagreed"></ion-checkbox>
|
||||
</ion-item>
|
||||
</ng-container>
|
||||
|
||||
<!-- Submit button. -->
|
||||
<ion-button expand="block" class="ion-margin" type="submit">{{ 'core.login.createaccount' | translate }}</ion-button>
|
||||
<!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
|
||||
<input type="submit" class="core-submit-hidden-enter" />
|
||||
</form>
|
||||
</ng-container>
|
||||
</div>
|
||||
</core-loading>
|
||||
|
||||
<div class="list-item-limited-width">
|
||||
<ion-list *ngIf="allRequiredSupported && isMinor">
|
||||
<ion-item-divider class="ion-text-wrap">
|
||||
<ion-label>
|
||||
|
||||
@ -14,7 +14,6 @@
|
||||
|
||||
import { Component, ViewChild, ElementRef, OnInit, ChangeDetectorRef } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
|
||||
import { IonRefresher } from '@ionic/angular';
|
||||
|
||||
import { CoreSites } from '@services/sites';
|
||||
import { CoreDomUtils } from '@services/utils/dom';
|
||||
@ -256,17 +255,6 @@ export class CoreLoginEmailSignupPage implements OnInit {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Pull to refresh.
|
||||
*
|
||||
* @param event Event.
|
||||
*/
|
||||
refreshSettings(event?: IonRefresher): void {
|
||||
this.fetchData().finally(() => {
|
||||
event?.complete();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Create account.
|
||||
*
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user