login page
This commit is contained in:
CHIEFSOFT\ameye
@@ -1,4 +1,4 @@
|
||||
<ion-content class="ion-padding">
|
||||
<ion-content class="no-scroll" style="padding: 0;">
|
||||
<div class="start-pages">
|
||||
<div class="page_logo">
|
||||
<img alt="WrenchBoard" src="/assets/images/wrenchboard-line.png" />
|
||||
@@ -20,25 +20,38 @@
|
||||
<div>
|
||||
|
||||
|
||||
<ion-label class="simp_lbl">Family Login</ion-label>
|
||||
<ion-item lines="none">
|
||||
<ion-icon slot="start" name="mail-outline"></ion-icon>
|
||||
<ion-input type="email" placeholder="UserCode" maxlength="12" [(ngModel)]='username'></ion-input>
|
||||
</ion-item>
|
||||
<ion-label class="simp_lbl">Kids Login</ion-label>
|
||||
<div class="login_box">
|
||||
<ion-item lines="none">
|
||||
<ion-icon slot="start" name="mail-outline"></ion-icon>
|
||||
<ion-input
|
||||
type="email"
|
||||
class ="login_entry"
|
||||
placeholder="UserCode"
|
||||
maxlength="12"
|
||||
[(ngModel)]='username'></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item lines="none">
|
||||
<ion-icon slot="start" name="pin-outline"></ion-icon>
|
||||
<ion-input type="password" placeholder="PIN" maxlength="4" [(ngModel)]='pin'></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<div class="check">
|
||||
<ion-checkbox mode="md" checked></ion-checkbox>
|
||||
<ion-label>Remember me</ion-label>
|
||||
<ion-item lines="none">
|
||||
<ion-icon slot="start" name="pin-outline"></ion-icon>
|
||||
<ion-input
|
||||
type="password"
|
||||
class ="login_entry"
|
||||
placeholder="PIN"
|
||||
maxlength="4"
|
||||
[(ngModel)]='pin'></ion-input>
|
||||
</ion-item>
|
||||
<div class="check" style="padding-left: 35px;">
|
||||
<ion-checkbox mode="md" checked></ion-checkbox>
|
||||
<ion-label>Remember me</ion-label>
|
||||
</div>
|
||||
<div style="margin-left: 55px;">
|
||||
<ion-button expand="block" (click)="startLogin()">
|
||||
Login
|
||||
</ion-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ion-button expand="block" (click)="startLogin()">
|
||||
Login
|
||||
</ion-button>
|
||||
|
||||
<!-- <ion-label class="forgot_lbl" (click)="onForgot()">Forgot your password ?</ion-label>-->
|
||||
|
||||
|
||||
@@ -10,47 +10,35 @@
|
||||
<!-- <ion-label class="simp_lbl">Login to continue</ion-label>-->
|
||||
|
||||
<div class="boxed_contents">
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="6">
|
||||
<ion-button fill="outline" size="large" class="scan_login_button" (click)="moveToStartScan()">
|
||||
<ion-icon slot="start" name="scan"></ion-icon>
|
||||
Scan Login</ion-button>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<ion-button class="login-type22" (click)="familyLogin()">
|
||||
<ion-icon name="people-circle-outline"></ion-icon>
|
||||
<span style="margin-left: 5px;">Kids Login</span></ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<!-- <ion-grid>-->
|
||||
<!-- <ion-row>-->
|
||||
<!-- <ion-col>-->
|
||||
<!-- <ion-button fill="outline" size="large" (click)="moveToStartScan()">-->
|
||||
<!-- <ion-icon slot="start" name="scan"></ion-icon>-->
|
||||
<!-- Scan Login</ion-button>-->
|
||||
<!-- </ion-col>-->
|
||||
<!-- <ion-col class="family_box">-->
|
||||
<!-- <ion-button expand="block" class="login-type" (click)="familyLogin()">-->
|
||||
<!-- <ion-icon name="people-circle-outline"></ion-icon>-->
|
||||
<!-- Go to Family Login</ion-button>-->
|
||||
<!-- </ion-col>-->
|
||||
|
||||
<!-- </ion-row>-->
|
||||
<!-- </ion-grid>-->
|
||||
<!-- <div style="display: flex;">-->
|
||||
<!-- <ion-label class="simp_lbl_tx" style="width: 50%;">Login or</ion-label>-->
|
||||
<div style="max-width: 450px; margin-left: auto; margin-right: auto;">
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="6">
|
||||
<ion-button
|
||||
fill="outline"
|
||||
size="large"
|
||||
class="scan_login_button"
|
||||
(click)="moveToStartScan()">
|
||||
<ion-icon slot="start" name="scan"></ion-icon>
|
||||
Scan Login</ion-button>
|
||||
</ion-col>
|
||||
<ion-col size="6">
|
||||
<ion-button
|
||||
class="login-type22"
|
||||
(click)="familyLogin()">
|
||||
<ion-icon name="people-circle-outline"></ion-icon>
|
||||
<span style="margin-left: 5px;">Kids Login</span></ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <ion-label class="simp_lbl_tx" style="width: 50%; text-align: right;" ><div (click)="onRegister()">Sign up</div></ion-label>-->
|
||||
<!-- </div>-->
|
||||
<div style="padding: 10px; background-color: #F6F6FF; border-radius: 10px; box-shadow: 3px 3px #d3d3d3; margin-top: 10px; max-width: 450px; margin-left: auto; margin-right: auto;">
|
||||
<div class="login_box">
|
||||
<ion-item lines="none">
|
||||
<ion-icon slot="start" name="mail-outline"></ion-icon>
|
||||
<ion-input
|
||||
style="background-color: white; border-radius: 5px;"
|
||||
class ="login_entry"
|
||||
(ionChange)="refreshBut()" type="email"
|
||||
placeholder="Email"
|
||||
maxlength="35"
|
||||
@@ -60,7 +48,7 @@
|
||||
<ion-item lines="none">
|
||||
<ion-icon slot="start" name="lock-closed-outline"></ion-icon>
|
||||
<ion-input
|
||||
style="background-color: white; border-radius: 5px;"
|
||||
class ="login_entry"
|
||||
(ionChange)="refreshBut()"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
|
||||
@@ -6,6 +6,7 @@ ion-content {
|
||||
font-weight: bolder;
|
||||
color:white;
|
||||
}
|
||||
|
||||
.pending-buttom{
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<ion-content>
|
||||
<ion-content class="no-scroll" style="padding: 0;">
|
||||
<div class="start-pages">
|
||||
<div class="page_logo">
|
||||
<img alt="WrenchBoard" src="/assets/images/wrenchboard-line.png" />
|
||||
@@ -9,37 +9,55 @@
|
||||
<div *ngIf="signup_state==2; then secondBlock"></div>
|
||||
<ng-template #startBlock>
|
||||
<div>
|
||||
<!-- <div class="login_box"></div>-->
|
||||
<div style="display: flex; width: 100%; ">
|
||||
<div class="simp_lbl" style="width: 40%;">Get Started.</div>
|
||||
<div style="width: 20%;"> </div>
|
||||
<div class="simp_lbl" style="text-align: right; width: 40%; margin-left: auto;">
|
||||
<div style="background-color: aliceblue; color: darkblue; font-weight: normal; width: 85px; border-radius: 10px; text-align: center" (click)="onLogin()">or Login</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ion-label class="simp_lbl">Create Your Account</ion-label>
|
||||
<div class="start-signup" >
|
||||
<div class="login_box" >
|
||||
|
||||
<ion-item lines="none">
|
||||
<ion-select (ionChange)="verReg()" label="Select Country" placeholder="Select Country" [(ngModel)]='country'>
|
||||
<ion-item lines="none" style="margin-bottom: 10px;">
|
||||
<ion-select style="width: 100%;" 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">
|
||||
<ion-item lines="none" style="margin-bottom: 10px;">
|
||||
<ion-icon slot="start" name="person-outline"></ion-icon>
|
||||
<ion-input (ionChange)="verReg()" type="firstname" placeholder="Firstname" [(ngModel)]='firstname'></ion-input>
|
||||
<ion-input
|
||||
class ="login_entry"
|
||||
maxlength="25"
|
||||
(ionChange)="verReg()"
|
||||
type="firstname" placeholder="Firstname"
|
||||
[(ngModel)]='firstname'></ion-input>
|
||||
</ion-item>
|
||||
|
||||
|
||||
<ion-item lines="none">
|
||||
<ion-item lines="none" style="margin-bottom: 10px;">
|
||||
<ion-icon slot="start" name="person-outline"></ion-icon>
|
||||
<ion-input (ionChange)="verReg()" type="lastname" placeholder="Lastname" [(ngModel)]='lastname'></ion-input>
|
||||
<ion-input
|
||||
class ="login_entry"
|
||||
maxlength="25"
|
||||
(ionChange)="verReg()"
|
||||
type="lastname"
|
||||
placeholder="Lastname"
|
||||
[(ngModel)]='lastname'></ion-input>
|
||||
</ion-item>
|
||||
|
||||
|
||||
<ion-item lines="none">
|
||||
<ion-item lines="none" style="margin-bottom: 10px;">
|
||||
<ion-icon slot="start" name="mail-outline"></ion-icon>
|
||||
<ion-input (ionChange)="verReg()" type="username" maxlength="35" placeholder="Email (Your Username)" [(ngModel)]='username'></ion-input>
|
||||
<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">
|
||||
<ion-item lines="none" style="margin-bottom: 10px;">
|
||||
<ion-icon slot="start" name="lock-closed-outline"></ion-icon>
|
||||
<ion-input (ionChange)="verReg()" type="password" placeholder="Password" maxlength="15" [(ngModel)]='password'></ion-input>
|
||||
<ion-input class ="login_entry" (ionChange)="verReg()" type="password" placeholder="Password" maxlength="15" [(ngModel)]='password'></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-button expand="block" [disabled]="isDisabled" (click)="onFillProfile()">
|
||||
@@ -80,63 +98,71 @@
|
||||
<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-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%;
|
||||
<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-col>
|
||||
</ion-row>
|
||||
|
||||
|
||||
<ion-row>
|
||||
<ion-col size="3" class="side_lb">
|
||||
Verification Code :
|
||||
</ion-col>
|
||||
<ion-col size="9">
|
||||
<!-- <ion-icon slot="start" name="mail-outline"></ion-icon>-->
|
||||
<ion-input type="text"
|
||||
autocomplete="false"
|
||||
(ionChange)="verReg2()"
|
||||
placeholder="Random text"
|
||||
maxlength="8" [(ngModel)]='random_text'></ion-input>
|
||||
<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="3" class="side_lb">Password</ion-col>
|
||||
<ion-col size="9">
|
||||
<ion-icon slot="start" name="lock-closed-outline"></ion-icon>
|
||||
<ion-input type="password" (ionChange)="verReg2()" placeholder="Password" maxlength="15" [(ngModel)]='password'></ion-input>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</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="2"></ion-col>
|
||||
<ion-col size="8">
|
||||
<ion-button
|
||||
expand="block"
|
||||
[disabled]="isDisabled2"
|
||||
(click)="onCompleteProfile()">
|
||||
Complete Signup
|
||||
</ion-button>
|
||||
<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-col>
|
||||
<!-- <ion-col size="2"></ion-col>-->
|
||||
</ion-row>
|
||||
|
||||
</ion-grid>
|
||||
</div>
|
||||
|
||||
</ion-grid>
|
||||
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
@@ -11,10 +11,11 @@ ion-content {
|
||||
|
||||
.simp_lbl {
|
||||
margin-top: 5px;
|
||||
font-size: 20px;
|
||||
font-size: 15px;
|
||||
letter-spacing: 1.2px;
|
||||
margin-bottom: 10px;
|
||||
font-family: 'semi-bold';
|
||||
//margin-bottom: 10px;
|
||||
padding: 5px;
|
||||
// font-family: 'semi-bold';
|
||||
}
|
||||
|
||||
.start-signup{
|
||||
|
||||
@@ -235,6 +235,7 @@ body.scanner-active {
|
||||
ion-content{
|
||||
margin-top: 0px !important;
|
||||
.start-pages{
|
||||
padding-top: 15px;
|
||||
// background-color: #3dc2ff;
|
||||
background-image: linear-gradient(white, aliceblue);
|
||||
margin: 0px;
|
||||
@@ -258,6 +259,20 @@ ion-content{
|
||||
}
|
||||
}
|
||||
|
||||
.login_entry{
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.login_box{
|
||||
padding: 10px;
|
||||
background-color: #F6F6FF;
|
||||
border-radius: 10px;
|
||||
box-shadow: 1px 1px #d3d3d3;
|
||||
margin-top: 10px;
|
||||
max-width: 350px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.extra_text{
|
||||
font-size: 11px;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user