design test

src/app/pages/auth/auth-page.component.html

@@ -1 +1,3 @@
-<router-outlet></router-outlet>
+<div class="login-body">
+    <router-outlet></router-outlet>
+</div>

src/app/pages/auth/auth-page.component.scss

@@ -0,0 +1,33 @@
+$image_path: "/assets/layout/images/" !default;
+
+.auth_background {
+    background-image:url($image_path + 'login11.jpg');
+    margin: 0;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+}
+.auth_card {
+    position: relative;
+    margin: auto auto;
+    width: 500px;
+}
+
+$prefix: 'auth';
+
+.#{$prefix} {
+
+  &-container {
+    background-image:url($image_path + 'login11.jpg');
+    min-height: 100%;
+    background-size: cover;
+    padding: 10px auto;
+  }
+
+  &-main {
+    position: relative;
+    margin: auto auto;
+    width: 500px;
+  }
+}

src/app/pages/auth/signin/signin-page.component.html

@@ -1,12 +1 @@
-<div fxLayout="column" fxFlexFill fxLayoutAlign="center center" style="background-image:url('../../../../../assets/images/login11.jpg');
+<of-member-signin></of-member-signin>
-  margin-top: 10px;
-  height: 100%;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover; ">
-    <div fxLayout="column" >
-        <div class=" mat-elevation-z4">
-          <of-member-signin></of-member-signin>
-        </div>
-    </div>
-</div>

src/app/pages/auth/signup/signup-page.component.html

@@ -1,13 +1 @@
-<div fxLayout="column" fxFlexFill fxLayoutAlign="center center" style="background-image:url('../../../../../assets/images/login11.jpg');
+<of-member-signup></of-member-signup>
-  margin-top: 10px;
-  height: 100%;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover; ">
-  <div fxLayout="column" >
-    <div class=" mat-elevation-z4">
-      <of-member-signup></of-member-signup>
-    </div>
-  </div>
-</div>
-

src/packages/member/component/reset-password/reset-password.component.html

@@ -1 +1,29 @@
-<div>reset-password</div>
+<form [formGroup]="resetPassword" (ngSubmit)="sendResetPassword()">
+    <div class="card login-panel ui-fluid">
+        <div class="ui-g">
+            <div class="ui-g-12">
+                <!--img src="assets/layout/images/logo-ultima.svg" -->
+                <img src="assets/layout/images/overFlow_CI_blue_185.png">
+            </div>
+            <div class="ui-g-12">
+                <span class="md-inputfield">
+                    <input type="email" id="email" autocomplete="off" placeholder="Please enter your email" formControlName="email" required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
+                </span>
+                <div *ngIf="formErrors.email" class="help is-danger">
+                    {{ formErrors.email }}
+                </div>
+            </div>
+
+            <div class="ui-g-12">
+                <button  (click)="sendResetPassword()" type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
+                    <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span>
+                    <span class="ui-button-text ui-c">Reset Password</span>
+                </button>
+
+                <a href="#" (click)="signinBtnClick()">Sign In</a>
+                | 
+                <a href="#" (click)="signupBtnClick()">Sign Up</a>
+            </div>
+        </div>
+    </div>
+</form>

src/packages/member/component/reset-password/reset-password.component.scss

@@ -1,40 +0,0 @@
-$gray-lighter: #eceeef !default;
-$image_path: "/assets/images/" !default;
-
-$prefix: 'reset-password';
-
-.#{$prefix} {
-
-  &-conainer {
-    min-height: 100%;
-    background-size: cover;
-    padding: 100px;
-  }
-
-  &-main {
-    position: relative;
-    margin: 0 auto;
-    width: 500px;
-  }
-}
-
-.full-width {
-  width: 100%;
-}
-
-.help {
-
-}
-
-.is-danger {
-
-}
-
-.button {
-  width:300px;
-}
-.redirect {
-  font-size: 14px;
-  margin-left: 10px;
-  color: #00AAAA;
-}

src/packages/member/component/signin/signin.component.html

@@ -2,7 +2,7 @@
     <div class="card login-panel ui-fluid">
         <div class="ui-g">
             <div class="ui-g-12">
-                <img src="assets/layout/images/logo-ultima.svg">
+                <img src="assets/layout/images/overFlow_CI_blue_185.png">
             </div>
             <div class="ui-g-12">
                 <span class="md-inputfield">
@@ -19,16 +19,9 @@
                     <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span>
                     <span class="ui-button-text ui-c">Sign In</span>
                 </button>
-
+                <a href="javascript:void(0)" (click)="resetPasswordBtnClick()">Forgot Password</a>
-                <button type="button" (click)="resetPasswordBtnClick()" class="secondary ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
+                | 
-                    <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-help"></span>
+                <a href="javascript:void(0)" (click)="signupBtnClick()">Sign Up</a>
-                    <span class="ui-button-text ui-c">Forgot Password</span>
-                </button>
-
-                <button type="button" (click)="signupBtnClick()" class="secondary ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
-                    <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-help"></span>
-                    <span class="ui-button-text ui-c">Sign Up</span>
-                </button>
             </div>
         </div>
     </div>

src/packages/member/component/signup/signup.component.html

@@ -2,7 +2,7 @@
     <div class="card login-panel ui-fluid">
         <div class="ui-g">
             <div class="ui-g-12">
-                <img src="assets/layout/images/logo-ultima.svg">
+                <img src="assets/layout/images/overFlow_CI_blue_185.png">
             </div>
             <div class="ui-g-12">
                 <span class="md-inputfield">
@@ -63,6 +63,8 @@
                     <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span>
                     <span class="ui-button-text ui-c">Sign Up</span>
                 </button>
+
+                <a href="#">Sign In</a>
             </div>
         </div>
     </div>

src/packages/member/component/signup/signup.component.scss

@@ -1,37 +0,0 @@
-$gray-lighter: #eceeef !default;
-$image_path: "/assets/images/" !default;
-
-$prefix: 'signup';
-
-.#{$prefix} {
-
-  &-conainer {
-    min-height: 100%;
-    background-size: cover;
-    padding: 100px;
-  }
-
-  &-main {
-    position: relative;
-    margin: 0 auto;
-    width: 500px;
-  }
-}
-
-.full-width {
-  width: 100%;
-}
-
-.help {
-
-}
-
-.is-danger {
-
-}
-
-.redirect {
-  font-size: 14px;
-  margin-left: 10px;
-  color: #00AAAA;
-}

src/styles.scss

@@ -1 +1,15 @@
 /* You can add global styles to this file, and also import other style files */
+
+//auth style
+.login-body {
+    //background:  url("../images/login/login.png") top left no-repeat #f7f7f7;
+    background:  url("/assets/layout/images/login11.jpg") top left no-repeat #f7f7f7 !important;
+    margin: -100px 0 0 0 !important;
+    padding: 100px 0 !important;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
+    .login-body {
+        //background: url("../images/login/login2x.png") top left no-repeat #f7f7f7;
+        background:  url("/assets/layout/images/login11.jpg") top left no-repeat #f7f7f7 !important; 
+    }
+}