220 lines
7.7 KiB
HTML
220 lines
7.7 KiB
HTML
<ion-content class="no-scroll" style="padding: 0">
|
|
<div class="start-pages">
|
|
<div class="page_logo" style="padding-top: 15px">
|
|
<img alt="WrenchBoard" src="/assets/images/wrenchboard-line.png" />
|
|
</div>
|
|
<div class="boxed_contents">
|
|
<div class="ion-padding space">
|
|
<div *ngIf="signup_state==1; then startBlock"></div>
|
|
<div *ngIf="signup_state==2; then secondBlock"></div>
|
|
<ng-template #startBlock>
|
|
<div>
|
|
<div class="login_box">
|
|
<ion-label
|
|
style="padding-top: 2px; padding-bottom: 10px"
|
|
class="simp_lbl"
|
|
>Get Started</ion-label
|
|
>
|
|
<ion-item lines="none" style="margin-bottom: 10px">
|
|
<ion-icon slot="start" name="flag-outline"></ion-icon>
|
|
<ion-select
|
|
style="width: 100%; padding-left: 10px"
|
|
class="login_entry"
|
|
(ionChange)="verReg()"
|
|
label="Select Country"
|
|
placeholder="Select Country"
|
|
[(ngModel)]="country"
|
|
>
|
|
<ion-select-option
|
|
*ngFor="let item of signupCountry"
|
|
value="{{item.code}}"
|
|
>{{item.country}}</ion-select-option
|
|
>
|
|
</ion-select>
|
|
</ion-item>
|
|
|
|
<ion-item lines="none" style="margin-bottom: 10px">
|
|
<ion-icon slot="start" name="person-outline"></ion-icon>
|
|
<ion-input
|
|
class="login_entry"
|
|
maxlength="25"
|
|
(ionChange)="verReg()"
|
|
type="firstname"
|
|
placeholder="Firstname"
|
|
[(ngModel)]="firstname"
|
|
></ion-input>
|
|
</ion-item>
|
|
|
|
<ion-item lines="none" style="margin-bottom: 10px">
|
|
<ion-icon slot="start" name="person-outline"></ion-icon>
|
|
<ion-input
|
|
class="login_entry"
|
|
maxlength="25"
|
|
(ionChange)="verReg()"
|
|
type="lastname"
|
|
placeholder="Lastname"
|
|
[(ngModel)]="lastname"
|
|
></ion-input>
|
|
</ion-item>
|
|
|
|
<ion-item lines="none" style="margin-bottom: 10px">
|
|
<ion-icon slot="start" name="mail-outline"></ion-icon>
|
|
<ion-input
|
|
class="login_entry"
|
|
(ionChange)="verReg()"
|
|
type="username"
|
|
maxlength="35"
|
|
placeholder="Email (Your Username)"
|
|
[(ngModel)]="username"
|
|
></ion-input>
|
|
</ion-item>
|
|
|
|
<ion-item lines="none" style="margin-bottom: 0px">
|
|
<ion-icon slot="start" name="lock-closed-outline"></ion-icon>
|
|
<ion-input
|
|
class="login_entry"
|
|
(ionChange)="verReg()"
|
|
type="password"
|
|
placeholder="Password (8 chars. minimum)"
|
|
maxlength="15"
|
|
[(ngModel)]="password"
|
|
></ion-input>
|
|
</ion-item>
|
|
<ion-item
|
|
lines="none"
|
|
style="margin-bottom: 10px; padding-left: 50px"
|
|
>
|
|
<div>.</div>
|
|
</ion-item>
|
|
|
|
<ion-button
|
|
expand="block"
|
|
[disabled]="isDisabled"
|
|
(click)="onFillProfile()"
|
|
>
|
|
Register
|
|
</ion-button>
|
|
</div>
|
|
|
|
<div *ngIf="showSocial == true ">
|
|
<ion-label class="or">Or Continue With</ion-label>
|
|
|
|
<div class="button">
|
|
<ion-buttons>
|
|
<ion-button>
|
|
<ion-icon name="logo-facebook"></ion-icon>
|
|
</ion-button>
|
|
</ion-buttons>
|
|
|
|
<ion-buttons>
|
|
<ion-button>
|
|
<ion-icon name="logo-google"></ion-icon>
|
|
</ion-button>
|
|
</ion-buttons>
|
|
|
|
<ion-buttons>
|
|
<ion-button>
|
|
<ion-icon name="logo-twitter"></ion-icon>
|
|
</ion-button>
|
|
</ion-buttons>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
<ng-template #secondBlock>
|
|
<div>
|
|
<ion-label class="simp_lbl">Complete Account</ion-label>
|
|
<div class="login_box">
|
|
<ion-grid style="margin-top: 15px">
|
|
<ion-row>
|
|
<ion-col size="3" class="side_lb">Country</ion-col>
|
|
<ion-col size="9">{{signup_country}}</ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
<ion-col size="3" class="side_lb">Username</ion-col>
|
|
<ion-col size="9">{{signup_username}}</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col>
|
|
<ion-label
|
|
class="or"
|
|
style="
|
|
width: 100%;
|
|
background-color: #f5eff4;
|
|
color: red;
|
|
font-weight: bolder;
|
|
height: 45px;
|
|
margin: 5px;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
"
|
|
>Enter Confirmation Received In Email</ion-label
|
|
>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col size="4" class="side_lb">
|
|
Verification Code :
|
|
</ion-col>
|
|
<ion-col size="8">
|
|
<!-- <ion-icon slot="start" name="mail-outline"></ion-icon>-->
|
|
<ion-input
|
|
type="text"
|
|
autocomplete="false"
|
|
class="login_entry"
|
|
(ionChange)="verReg2()"
|
|
placeholder="Random text"
|
|
maxlength="8"
|
|
[(ngModel)]="random_text"
|
|
></ion-input>
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
<ion-col size="4" class="side_lb">Password</ion-col>
|
|
<ion-col size="8">
|
|
<ion-icon
|
|
slot="start"
|
|
name="lock-closed-outline"
|
|
></ion-icon>
|
|
<ion-input
|
|
type="password"
|
|
class="login_entry"
|
|
(ionChange)="verReg2()"
|
|
placeholder="Password"
|
|
maxlength="15"
|
|
[(ngModel)]="password"
|
|
></ion-input>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col size="4"></ion-col>
|
|
<ion-col size="8" style="text-align: right">
|
|
<ion-button
|
|
expand="block"
|
|
[disabled]="isDisabled2"
|
|
(click)="onCompleteProfile()"
|
|
>
|
|
Complete Signup
|
|
</ion-button>
|
|
</ion-col>
|
|
<!-- <ion-col size="2"></ion-col>-->
|
|
</ion-row>
|
|
</ion-grid>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<div class="bottom">
|
|
<ion-label class="last_lbl"
|
|
>Already have an account?
|
|
<span (click)="onLogin()">Login</span></ion-label
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ion-content>
|