121 lines
8.0 KiB
HTML
121 lines
8.0 KiB
HTML
<ion-header>
|
||
<ion-navbar>
|
||
<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" (ionRefresh)="refreshSettings($event)">
|
||
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
|
||
</ion-refresher>
|
||
|
||
<core-loading [hideUntil]="settingsLoaded">
|
||
<form ion-list *ngIf="settingsLoaded && settings" [formGroup]="signupForm" (ngSubmit)="create()" class="list list-inset">
|
||
<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">{{siteName}}</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"></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. @todo: Implement once user profile fields are implemented. -->
|
||
<!-- <div *ngFor="let category in categories">
|
||
<ion-item-divider text-wrap color="light">{{ category.name }}</div>
|
||
<core-user-profile-field *ngFor="let field in category.fields" field="field" edit="true" signup="true" register-auth="email" model="data" scroll-handle="mmLoginEmailSignupScroll"></core-user-profile-field>
|
||
</div> -->
|
||
|
||
<!-- ReCAPTCHA -->
|
||
<div *ngIf="settings.recaptchachallengehash && settings.recaptchachallengeimage">
|
||
<ion-item-divider text-wrap color="light">{{ 'core.login.security_question' | translate }}</ion-item-divider>
|
||
<ion-item>
|
||
<img [src]="settings.recaptchachallengeimage" alt="{{ 'core.login.recaptchachallengeimage' | translate }}">
|
||
</ion-item>
|
||
<ion-item text-wrap>
|
||
<ion-label stacked core-mark-required="true">{{ 'core.login.enterthewordsabove' | translate }}</ion-label>
|
||
<ion-input type="text" name="recaptcharesponse" placeholder="{{ 'core.login.enterthewordsabove' | translate }}" formControlName="recaptcharesponse" autocapitalize="none" autocorrect="off"></ion-input>
|
||
<core-input-errors item-content [control]="signupForm.controls.recaptcharesponse"></core-input-errors>
|
||
</ion-item>
|
||
<ion-item padding>
|
||
<!-- Use anchor instead of button to prevent marking form as submitted. -->
|
||
<a ion-button block (click)="requestCaptcha()">{{ 'core.login.getanothercaptcha' | translate }}</a>
|
||
</ion-item>
|
||
</div>
|
||
|
||
<!-- Site policy (if any). -->
|
||
<div *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 core-mark-required="true">{{ 'core.login.policyaccept' | translate }}</ion-label>
|
||
<ion-checkbox item-right name="policyagreed" formControlName="policyagreed"></ion-checkbox>
|
||
<core-input-errors [control]="signupForm.controls.policyagreed" [errorMessages]="policyErrors"></core-input-errors>
|
||
</ion-item>
|
||
</div>
|
||
|
||
<!-- Submit button. -->
|
||
<ion-item padding>
|
||
<button ion-button block color="primary">{{ 'core.login.createaccount' | translate }}</button>
|
||
</ion-item>
|
||
</form>
|
||
</core-loading>
|
||
</ion-content>
|