Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.html

@@ -1,6 +1,6 @@
 <div class="login" fxLayout="column">
   <div class="login-wrapper">
-    <div class="slider">
+    <!--<div class="slider">
       <div
         *ngFor="let infomation of rotateInfomation; let i = index"
         [ngClass]="[
@@ -17,7 +17,9 @@
               'background-image':
                 ' url(./assets/images/login/bg_login0' + (i + 1) + '.png)'
             }"
-          ></div>
+          >
+          <div class="slider_back" >
+          </div>
         </div>
         <div
           class="slider_inner"
@@ -49,7 +51,7 @@
         <div class="slider_indicator" data-slide="3"></div>
       </div>
     </div>
-
+  -->
     <ucap-account-login
       [companyList]="companyList$ | async"
       [curCompanyCode]="fixedCompany"

projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss

@@ -21,9 +21,12 @@ $mob-l-width: 640px;
 
   .login-wrapper {
     flex: 1 0 auto;
-    //background: url(/assets/images/bg_login.png) no-repeat 50% bottom;
+    background-color: #ffffff;
     background-size: 100% auto;
     position: relative;
+    justify-content: center;
+    align-items: center;
+    display: flex;
   }
 }
 
@@ -50,9 +53,8 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
   position: relative;
   height: 100%;
   width: 100%;
-  background: $main;
+  //background: $main;
   overflow: hidden;
-
   &_wrap {
     position: absolute;
     width: 100%;
@@ -79,6 +81,7 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
     background-position: center;
     background-repeat: none;
     transition: filter $time/4 $ease-in-out;
+    background-color: #2d3a4a;
   }
 
   &_inner {
@@ -94,7 +97,7 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
     transition: transform $time/4 $ease-in-out, box-shadow $time/4 $ease-in-out,
       opacity $time/4 step-end;
     opacity: 0;
-    box-shadow: 0 $base $base rgba(darken($accent, 50%), 0);
+    //box-shadow: 0 $base $base rgba(darken($accent, 50%), 0);
     padding: $base * 3;
     box-sizing: border-box;
     border: 1px solid #ffffff;
@@ -270,21 +273,25 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
 
 ::ng-deep .login-form-box {
   position: absolute;
-  width: 26vw;
+  width: 20vw;
-  height: 70%;
+  height: 50%;
-  top: 15%;
+  min-height: 480px;
-  right: 15%;
   display: flex;
   justify-content: flex-end;
   z-index: 100;
   @media screen and (max-width: #{$desktop-l-width}) {
-    width: 28vw;
+    width: 24vw;
+    min-height: 480px;
   }
 
-  @media screen and (max-width: #{$tablet-l-width}), (max-height: $tablet-s-width) {
+  @media screen and (max-width: #{$tablet-l-width}) {
-    width: 34vw;
+    width: 36vw;
+    min-height: 420px;
   }
-  .mat-form-field {
+  .mat-form-field-label-wrapper {
+    color: #06b2d6;
+  }
+  /*.mat-form-field {
     padding-top: 20px;
     .mat-form-field-wrapper {
       padding-bottom: 0;
@@ -324,7 +331,7 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
   }
   .error-container {
     padding-top: 10px;
-  }
+  }*/
 }
 
 .mat-card > .notice {

projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html

@@ -21,11 +21,56 @@
       </mat-select>
     </mat-form-field>
 
+    <div class="input-lineless">
+      <!--<span class="icon-img"><i class="mid mdi-account-tie-outline"></i></span>-->
+      <span class="icon-img">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.82 22">
+          <path
+            d="M14.39,11.88a5.7,5.7,0,1,0-4.78,0A10.41,10.41,0,0,0,1.59,22v1H22.41V22A10.41,10.41,0,0,0,14.39,11.88Z"
+            transform="translate(-1.59 -1)"
+            style="fill:#fff"
+          />
+          <path
+            d="M14.39,11.88a5.7,5.7,0,1,0-4.78,0A10.41,10.41,0,0,0,1.59,22v1H22.41V22A10.41,10.41,0,0,0,14.39,11.88ZM8.3,6.7A3.71,3.71,0,1,1,12,10.41,3.7,3.7,0,0,1,8.3,6.7ZM3.65,21a8.42,8.42,0,0,1,7.58-7.37L10,16.58l2,2,2-2-1.23-2.95A8.42,8.42,0,0,1,20.35,21Z"
+            transform="translate(-1.59 -1)"
+          />
+        </svg>
+      </span>
       <mat-form-field class="login-id">
         <mat-label>{{ 'accounts.fieldLoginId' | translate }}</mat-label>
         <input matInput [formControl]="loginIdFormControl" />
       </mat-form-field>
+    </div>
 
+    <div class="input-lineless">
+      <!--<span class="icon-img"><i class="mid mdi-lock-outline"></i></span>-->
+      <span class="icon-img">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 22.07">
+          <title>login-lock</title>
+          <path
+            d="M19,10H18V7A6,6,0,0,0,6,7v3H5a3,3,0,0,0-3,3v7a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V13A3,3,0,0,0,19,10Z"
+            transform="translate(-2 -0.93)"
+            style="fill:#fff"
+          />
+          <rect x="9.08" y="12.94" width="1.84" height="3.72" />
+          <path
+            d="M19,22.93H5a3,3,0,0,1-3-3v-7a3,3,0,0,1,3-3H19a3,3,0,0,1,3,3v7A3,3,0,0,1,19,22.93Zm-14-11a1,1,0,0,0-1,1v7a1,1,0,0,0,1,1H19a1,1,0,0,0,1-1v-7a1,1,0,0,0-1-1Z"
+            transform="translate(-2 -0.93)"
+          />
+          <path
+            d="M17,11.93a1,1,0,0,1-1-1v-4a4,4,0,0,0-8,0v4a1,1,0,0,1-2,0v-4a6,6,0,0,1,12,0v4A1,1,0,0,1,17,11.93Z"
+            transform="translate(-2 -0.93)"
+          />
+          <rect
+            x="9.58"
+            y="13.36"
+            width="0.84"
+            height="2.72"
+            style="fill:#fff"
+          />
+          <rect x="9.08" y="12.86" width="1.84" height="3.72" />
+        </svg>
+      </span>
       <mat-form-field class="login-pw">
         <mat-label>{{ 'accounts.fieldLoginPw' | translate }}</mat-label>
         <input
@@ -35,6 +80,7 @@
           #loginPw
         />
       </mat-form-field>
+    </div>
 
     <div class="error-container">
       <mat-error
@@ -105,7 +151,8 @@
     </div>
   </div>
 
-  <div class="policy bg-accent-light">
+  <div class="policy">
+    <div class="icon-img"><i class="mid mdi-alarm-light"></i></div>
     <a class="link" (click)="onClickNoti()">{{
       !!notiText ? notiText : '개인정보 처리방침'
     }}</a>

projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss

@@ -31,7 +31,6 @@ $login-max-height: 800px;
   min-width: 100%;
   top: 0;
   right: 0;
-  padding: 14%;
   text-align: center;
   background-color: rgba(255, 255, 255, 1);
   border-radius: 0px;
@@ -40,8 +39,8 @@ $login-max-height: 800px;
   .mat-title {
     margin: 10px 0 10px 0;
     text-indent: -10000000px;
-    width: 140px;
+    width: 120px;
-    height: 140px;
+    height: 120px;
     background-repeat: no-repeat;
     display: inline-flex;
     background-size: 100% auto;
@@ -53,15 +52,36 @@ $login-max-height: 800px;
     width: 100%;
     text-align: left;
 
+    .input-lineless {
+      background-color: #e0e0e0;
+      padding: 14px 20px;
+      margin-top: 6px;
+      display: flex;
+      flex-flow: row;
+      @media screen and (max-width: #{$tablet-s-width}) {
+        padding: 8px 20px;
+      }
+      .icon-img {
+        width: 20px;
+        height: 20px;
+        margin-right: 10px;
+        svg {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
       mat-form-field {
         width: 100%;
+        color: #333333;
         &.login-pw {
-        margin-top: 10px;
+          //margin-top: 10px;
           @media screen and (max-width: #{$tablet-s-width}) {
             margin-top: 0;
           }
         }
       }
+    }
 
     mat-checkbox {
       margin: 0;
@@ -83,8 +103,14 @@ $login-max-height: 800px;
     .submit-button {
       width: 100%;
       margin: 0 auto;
-      margin: 1.4vh 0;
+      margin: 20px 0 10px;
       display: block;
+      border-radius: 0;
+      line-height: 50px;
+      font-size: 1.1em;
+      @media screen and (max-width: #{$tablet-s-width}) {
+        line-height: 38px;
+      }
     }
   }
 
@@ -132,18 +158,32 @@ $login-max-height: 800px;
   }
   .policy {
     position: absolute;
-    bottom: 5vh;
+    bottom: 2vh;
     display: block;
-    text-align: center;
+    background-color: #58b0b1;
-    opacity: 0.7;
+    width: 100%;
-    padding: 6px;
+    color: #ffffff;
-    border-radius: 100px;
-    width: 72%;
-    color: #333333;
     font-size: 0.86em;
+    display: flex;
+    flex-flow: row;
+    align-items: center;
     &:hover {
       opacity: 1;
     }
+    .icon-img {
+      padding: 12px 10px;
+      width: 50px;
+      color: #ffffff;
+      padding-right: 10px;
+      border-right: 1px solid rgba(255, 255, 255, 0.7);
+      flex: 0 0 auto;
+      @media screen and (max-width: #{$tablet-s-width}) {
+        padding: 9px 10px;
+      }
+    }
+    a {
+      margin-left: 10px;
+    }
   }
   button {
     &.google,
@@ -156,22 +196,11 @@ $login-max-height: 800px;
   }
 }
 
-@include desktop-m {
-  .login-form {
-    .mat-title {
-      background-size: 86% auto;
-    }
-  }
-}
-
 @include tab {
   .login-form {
     font-size: 0.9em;
-    padding: 12%;
     .mat-title {
-      width: 14vh;
+      background-size: 90% auto;
-      height: 14vh;
-      margin: 10px 0 10px 0;
     }
     .mat-form-field .mat-form-field-infix input {
       font-size: 0.9em;
@@ -179,13 +208,11 @@ $login-max-height: 800px;
     .policy {
       position: absolute;
       bottom: 0;
-      display: block;
+      display: flex;
-      text-align: center;
+      flex-flow: row;
-      opacity: 0.7;
       padding: 0;
       border-radius: 0;
       width: 100%;
-      margin-left: -12%;
       font-size: 0.9em;
       padding: 0px;
       line-height: 3em;