From ee00aac1ee34223b59961544453bc008a57926aa Mon Sep 17 00:00:00 2001
From: "CHIEFSOFT\\ameye" <ameye@chiefsfot.com>
Date: Thu, 5 Sep 2024 08:07:29 -0400
Subject: [PATCH] login page

---
 .../pages/familylogin/familylogin.page.html   |  47 ++++--
 src/app/pages/login/login.page.html           |  62 +++-----
 src/app/pages/login/login.page.scss           |   1 +
 src/app/pages/register/register.page.html     | 148 ++++++++++--------
 src/app/pages/register/register.page.scss     |   7 +-
 src/global.scss                               |  15 ++
 6 files changed, 162 insertions(+), 118 deletions(-)

diff --git a/src/app/pages/familylogin/familylogin.page.html b/src/app/pages/familylogin/familylogin.page.html
index 1d16993..880f7eb 100644
--- a/src/app/pages/familylogin/familylogin.page.html
+++ b/src/app/pages/familylogin/familylogin.page.html
@@ -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>-->
 
diff --git a/src/app/pages/login/login.page.html b/src/app/pages/login/login.page.html
index 8bbaf52..19dd103 100644
--- a/src/app/pages/login/login.page.html
+++ b/src/app/pages/login/login.page.html
@@ -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"
diff --git a/src/app/pages/login/login.page.scss b/src/app/pages/login/login.page.scss
index 75310ab..433a0bf 100644
--- a/src/app/pages/login/login.page.scss
+++ b/src/app/pages/login/login.page.scss
@@ -6,6 +6,7 @@ ion-content {
   font-weight: bolder;
   color:white;
 }
+
   .pending-buttom{
     padding-top: 25px;
   }
diff --git a/src/app/pages/register/register.page.html b/src/app/pages/register/register.page.html
index 338c76d..27d6e88 100644
--- a/src/app/pages/register/register.page.html
+++ b/src/app/pages/register/register.page.html
@@ -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>
diff --git a/src/app/pages/register/register.page.scss b/src/app/pages/register/register.page.scss
index a186271..d4dee37 100644
--- a/src/app/pages/register/register.page.scss
+++ b/src/app/pages/register/register.page.scss
@@ -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{
diff --git a/src/global.scss b/src/global.scss
index 7d96755..e6f7bd0 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -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;