Vmeda.Online/src/core/login/pages/email-signup/email-signup.html

<ion-header>
    <ion-navbar core-back-button>
        <ion-title>{{ 'core.login.newaccount' | translate }}</ion-title>

        <ion-buttons end>
            <button ion-button icon-only *ngIf="authInstructions" (click)="showAuthInstructions()" [attr.aria-label]="'core.login.instructions' | translate">
                <ion-icon name="help-circle"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>
<ion-content>
    <ion-refresher [enabled]="settingsLoaded && !isMinor" (ionRefresh)="refreshSettings($event)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>

    <core-loading [hideUntil]="settingsLoaded" *ngIf="!isMinor">

        <!-- Age verification. -->
        <form ion-list *ngIf="settingsLoaded && settings && ageDigitalConsentVerification" [formGroup]="ageVerificationForm" (ngSubmit)="verifyAge()">
            <ion-item-divider color="light" text-wrap>
                <p class="item-heading">{{ 'core.agelocationverification' | translate }}</p>
            </ion-item-divider>

            <ion-item text-wrap>
                <ion-label stacked core-mark-required="true">{{ 'core.whatisyourage' | translate }}</ion-label>
                <ion-input type="number" name="age" placeholder="0" formControlName="age" autocapitalize="none" autocorrect="off"></ion-input>
            </ion-item>

            <ion-item text-wrap>
                <ion-label stacked core-mark-required="true">{{ 'core.wheredoyoulive' | translate }}</ion-label>
                <ion-select name="country" formControlName="country">
                    <ion-option value="">{{ 'core.login.selectacountry' | translate }}</ion-option>
                    <ion-option *ngFor="let key of countriesKeys" [value]="key">{{countries[key]}}</ion-option>
                </ion-select>
            </ion-item>

            <!-- Submit button. -->
            <ion-item padding>
                <button ion-button block type="submit" [disabled]="!ageVerificationForm.valid">{{ 'core.proceed' | translate }}</button>
            </ion-item>

            <ion-item text-wrap>
                <p class="item-heading">{{ 'core.whyisthisrequired' | translate }}</p>
                <p>{{ 'core.explanationdigitalminor' | translate }}</p>
            </ion-item>
        </form>

        <!-- Signup form. -->
        <form ion-list *ngIf="settingsLoaded && settings && !ageDigitalConsentVerification" [formGroup]="signupForm" (ngSubmit)="create()">
            <ion-item text-wrap text-center>
                <!-- If no sitename show big siteurl. -->
                <p *ngIf="!siteName" padding class="item-heading">{{siteUrl}}</p>
                <!-- If sitename, show big sitename and small siteurl. -->
                <p *ngIf="siteName" padding class="item-heading"><core-format-text [text]="siteName"></core-format-text></p>
                <p *ngIf="siteName">{{siteUrl}}</p>
            </ion-item>

            <!-- Username and password. -->
            <ion-item-divider text-wrap color="light">
                {{ 'core.login.createuserandpass' | translate }}
            </ion-item-divider>
            <ion-item text-wrap>
                <ion-label stacked core-mark-required="true">{{ 'core.login.username' | translate }}</ion-label>
                <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}" formControlName="username" autocapitalize="none" autocorrect="off"></ion-input>
                <core-input-errors item-content [control]="signupForm.controls.username" [errorMessages]="usernameErrors"></core-input-errors>
            </ion-item>
            <ion-item text-wrap>
                <ion-label stacked core-mark-required="true">{{ 'core.login.password' | translate }}</ion-label>
                <core-show-password item-content [name]="'password'">
                    <ion-input type="password" name="password" placeholder="{{ 'core.login.password' | translate }}" formControlName="password" [clearOnEdit]="false"></ion-input>
                </core-show-password>
                <p *ngIf="settings.passwordpolicy" item-content class="core-input-footnote">
                    {{settings.passwordpolicy}}
                </p>
                <core-input-errors item-content [control]="signupForm.controls.password" [errorMessages]="passwordErrors"></core-input-errors>
            </ion-item>

            <!-- More details. -->
            <ion-item-divider text-wrap color="light">
                {{ 'core.login.supplyinfo' | translate }}
            </ion-item-divider>
            <ion-item text-wrap>
                <ion-label stacked core-mark-required="true">{{ 'core.user.email' | translate }}</ion-label>
                <ion-input type="email" name="email" placeholder="{{ 'core.user.email' | translate }}" formControlName="email" autocapitalize="none" autocorrect="off"></ion-input>
                <core-input-errors item-content [control]="signupForm.controls.email" [errorMessages]="emailErrors"></core-input-errors>
            </ion-item>
            <ion-item text-wrap>
                <ion-label stacked core-mark-required="true">{{ 'core.user.emailagain' | translate }}</ion-label>
                <ion-input type="email" name="email2" placeholder="{{ 'core.user.emailagain' | translate }}" formControlName="email2" autocapitalize="none" autocorrect="off" pattern="{{signupForm.controls.email.value}}"></ion-input>
                <core-input-errors item-content [control]="signupForm.controls.email2" [errorMessages]="email2Errors"></core-input-errors>
            </ion-item>
            <ion-item *ngFor="let nameField of settings.namefields" text-wrap>
                <ion-label stacked core-mark-required="true">{{ 'core.user.' + nameField | translate }}</ion-label>
                <ion-input type="text" name="nameField" placeholder="{{ 'core.user.' + nameField | translate }}" formControlName="{{nameField}}" autocorrect="off"></ion-input>
                <core-input-errors item-content [control]="signupForm.controls[nameField]" [errorMessages]="namefieldsErrors[nameField]"></core-input-errors>
            </ion-item>
            <ion-item text-wrap>
                <ion-label 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 text-wrap>
                <ion-label stacked id="core-login-signup-country">{{ 'core.user.country' | translate }}</ion-label>
                <ion-select name="country" formControlName="country" aria-labelledby="core-login-signup-country">
                    <ion-option value="">{{ 'core.login.selectacountry' | translate }}</ion-option>
                    <ion-option *ngFor="let key of countriesKeys" [value]="key">{{countries[key]}}</ion-option>
                </ion-select>
            </ion-item>

            <!-- Other categories. -->
            <ng-container *ngFor="let category of categories">
                <ion-item-divider text-wrap color="light">{{ category.name }}</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 text-wrap color="light">{{ 'core.login.security_question' | translate }}</ion-item-divider>
                <ion-item text-wrap>
                    <core-recaptcha [publicKey]="settings.recaptchapublickey" [model]="captcha" [siteUrl]="siteUrl"></core-recaptcha>
                </ion-item>
            </ng-container>

            <!-- Site policy (if any). -->
            <ng-container *ngIf="settings.sitepolicy">
                <ion-item-divider text-wrap color="light">{{ 'core.login.policyagreement' | translate }}</ion-item-divider>
                <ion-item text-wrap>
                    <p><a [href]="settings.sitepolicy" core-link capture="false">{{ 'core.login.policyagreementclick' | translate }}</a></p>
                </ion-item>
                <ion-item text-wrap>
                    <ion-label>
                        <span [core-mark-required]="true">{{ 'core.login.policyaccept' | translate }}</span>
                        <core-input-errors [control]="signupForm.controls.policyagreed" [errorMessages]="policyErrors"></core-input-errors>
                    </ion-label>
                    <ion-checkbox item-end name="policyagreed" formControlName="policyagreed"></ion-checkbox>
                </ion-item>
            </ng-container>

            <!-- Submit button. -->
            <ion-item padding>
                <button ion-button block color="primary" type="submit">{{ 'core.login.createaccount' | translate }}</button>
            </ion-item>
        </form>
    </core-loading>

    <ion-list *ngIf="isMinor">
        <ion-item-divider color="light" text-wrap>
            <p *ngIf="siteName" class="item-heading padding"><core-format-text [text]="siteName"></core-format-text></p>
        </ion-item-divider>
        <ion-item text-wrap>
            <p class="item-heading">{{ 'core.considereddigitalminor' | translate }}</p>
            <p>{{ 'core.digitalminor_desc' | translate }}</p>
            <p *ngIf="supportName">{{ supportName }}</p>
            <p *ngIf="supportEmail">{{ supportEmail }}</p>
            <div padding *ngIf="!supportName && !supportEmail">
                <button ion-button block (click)="showContactOnSite()">
                    {{ 'core.openinbrowser' | translate }}
                </button>
            </div>
        </ion-item>
    </ion-list>
</ion-content>