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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucap-webmessenger",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "author": {
     "name": "LG CNS",
     "email": "lgucap@lgcns.com"

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss

@@ -16,7 +16,6 @@
 .left-side-tabs-body {
   position: relative;
   height: 100%;
-  width: calc(100% - 60px);
   div[id^='tabs'] {
     height: 100%;
     width: 100%;
@@ -31,7 +30,6 @@
 
 .mat-tab-group {
   display: flex;
-  width: 60px;
   flex-direction: row;
 }
 

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html

@@ -10,7 +10,7 @@
       </button> -->
     </div>
   </div>
-  <div class="list-search">
+  <div class="list-search-frame">
     <div class="searchbox">
       <form [formGroup]="fgSearch" class="w-100-p">
         <mat-form-field floatLabel="never">
@@ -65,7 +65,7 @@
   </perfect-scrollbar>
   <!-- <cdk-virtual-scroll-viewport
     #cvsvChatList
-    itemSize="80"
+    itemSize="60"
     perfectScrollbar
     fxFlexFill
   >
@@ -96,7 +96,7 @@
     </ucap-room-list-item>
   </perfect-scrollbar>
   <!-- <cdk-virtual-scroll-viewport
-    itemSize="20"
+    itemSize="60"
     class="app-layout-chat-left-sidenav-chat-list-viewport"
   >
     <ucap-room-list-item

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss

@@ -13,63 +13,13 @@
   }
 }
 
-.list-search {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0;
-  font-size: 14px;
-  background-color: #f9f9f9;
-  border-bottom: 1px solid #dddddd;
-  .searchbox {
-    width: 100%;
-    height: 100%;
-  }
-}
-::ng-deep .searchbox {
-  .mat-form-field {
-    display: block;
-    .mat-form-field-wrapper {
-      padding: 0;
-      padding-bottom: 0 !important;
-      height: 100%;
-      .mat-form-field-flex {
-        height: 59px;
-        padding: 0 10px 0 20px;
-        align-items: center;
-        .mat-form-field-infix {
-          width: 100%;
-          font-size: 14px;
-          border: none;
-          min-height: 20px;
-        }
-        .mat-form-field-suffix {
-          .mat-icon {
-            line-height: 24px;
-          }
-        }
-      }
-    }
-  }
-  .mat-form-field-appearance-legacy {
-    .mat-form-field-wrapper {
-      padding: 0;
-    }
-    .mat-form-field-underline {
-      bottom: 0;
-      background-color: unset !important;
-    }
-  }
-}
-
 .app-layout-chat-left-sidenav-chat-header {
   width: 100%;
   height: 50px;
 }
 
 .app-layout-chat-left-sidenav-chat-list {
-  height: calc(100% - 120px);
+  //height: calc(100% - 120px);
   position: relative;
 }
 

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss

@@ -18,7 +18,7 @@
 }
 
 .search-result {
-  height: calc(100% - 130px);
+  //height: calc(100% - 130px);
   overflow: auto;
   .result-num {
     padding: 10px;

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html

@@ -10,7 +10,7 @@
       </button> -->
     </div>
   </div>
-  <div class="list-search">
+  <div class="list-search-frame">
     <div class="searchbox">
       <form [formGroup]="fgSearch" class="w-100-p">
         <mat-form-field floatLabel="never">

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss

@@ -16,55 +16,6 @@
     align-items: center;
   }
 }
-
-.list-search {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0;
-  font-size: 14px;
-  background-color: #f9f9f9;
-  border-bottom: 1px solid #dddddd;
-  .searchbox {
-    width: 100%;
-    height: 100%;
-  }
-}
-::ng-deep .searchbox {
-  .mat-form-field {
-    display: block;
-    .mat-form-field-wrapper {
-      padding: 0;
-      padding-bottom: 0 !important;
-      height: 100%;
-      .mat-form-field-flex {
-        height: 59px;
-        padding: 0 10px 0 20px;
-        align-items: center;
-        .mat-form-field-infix {
-          width: 90%;
-          font-size: 14px;
-          border: none;
-        }
-        .mat-form-field-suffix {
-          .mat-icon {
-            line-height: 24px;
-          }
-        }
-      }
-    }
-  }
-  .mat-form-field-appearance-legacy {
-    .mat-form-field-wrapper {
-      padding: 0;
-    }
-    .mat-form-field-underline {
-      bottom: 0;
-      background-color: unset !important;
-    }
-  }
-}
-
 .mat-tab-label-active {
   opacity: 1;
 }
@@ -74,7 +25,7 @@
 ::ng-deep .message-box {
   .message-section {
     position: relative;
-    height: calc(100% - 120px);
+    //height: calc(100% - 120px);
     .message-tab {
       position: relative;
       height: 100%;

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html

@@ -63,7 +63,7 @@
     </div>
     <div *ngIf="!isShowSearch" class="search-list">
       <cdk-virtual-scroll-viewport
-        itemSize="64"
+        itemSize="60"
         #cvsvDeptUser
         perfectScrollbar
         fxFlexFill
@@ -89,7 +89,7 @@
     <div *ngIf="isShowSearch" class="search-result">
       <cdk-virtual-scroll-viewport
         #cvsvDeptSearchUser
-        itemSize="64"
+        itemSize="60"
         perfectScrollbar
         fxFlexFill
       >

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss

@@ -16,15 +16,6 @@
 }
 
 .current-head {
-  /*display: flex;
-  justify-content: center;
-  padding: 0 10px;
-  height: 70px;
-  background-color: #eeeeee;
-  background: #f15f79;
-  background: -webkit-linear-gradient(to right, #352a37, #f15f79);
-  background: linear-gradient(to right, #352a37, #ef4c73);
-  color: #ffffff;*/
   h3 {
     display: inline-flex;
     padding-left: 10px;
@@ -52,7 +43,7 @@
 }
 
 .oraganization-tab {
-  height: calc(100% - 120px);
+  // height: calc(100% - 120px);
   flex-direction: inherit;
   display: flex;
   .oraganization-tab-tree {

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html

@@ -82,7 +82,7 @@
                   {{ roomInfoSubject.value.roomName }}
                 </ng-template>
                 <ng-template #roomNameNotExist>
-                  {{ _roomUserInfos | ucapTranslate: 'name':',' }}
+                  {{ getRoomNameByRoomUser(_roomUserInfos) }}
                 </ng-template>
               </ng-container>
             </ng-container>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts

@@ -6,7 +6,8 @@ import {
   AfterViewInit,
   Output,
   EventEmitter,
-  Inject
+  Inject,
+  ChangeDetectorRef
 } from '@angular/core';
 import {
   ucapAnimations,
@@ -67,7 +68,12 @@ import {
   RightDrawer,
   KEY_STICKER_HISTORY
 } from '@app/types';
-import { RoomInfo, UserInfo, RoomType } from '@ucap-webmessenger/protocol-room';
+import {
+  RoomInfo,
+  UserInfo,
+  RoomType,
+  UserInfoShort
+} from '@ucap-webmessenger/protocol-room';
 import { tap, take, map, catchError, finalize } from 'rxjs/operators';
 import {
   FormComponent as UCapUiChatFormComponent,
@@ -119,6 +125,8 @@ import {
 } from '../dialogs/chat/mass-detail.component';
 import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
 import { TranslateService } from '@ngx-translate/core';
+import { TranslatePipe } from 'projects/ucap-webmessenger-ui/src/lib/pipes/translate.pipe';
+import { TranslateService as UiTranslateService } from '@ucap-webmessenger/ui';
 
 @Component({
   selector: 'app-layout-messenger-messages',
@@ -223,7 +231,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
     private localStorageService: LocalStorageService,
     private commonApiService: CommonApiService,
     private clipboardService: ClipboardService,
+    private uiTranslateService: UiTranslateService,
     private translateService: TranslateService,
+    private changeDetectorRef: ChangeDetectorRef,
     private dialogService: DialogService,
     private snackBarService: SnackBarService,
     @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService,
@@ -461,6 +471,18 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
       .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
   }
 
+  getRoomNameByRoomUser(roomUserInfos: (UserInfo | UserInfoShort)[]) {
+    let roomName = new TranslatePipe(
+      this.uiTranslateService,
+      this.changeDetectorRef
+    ).transform(roomUserInfos, 'name', ',');
+
+    if (!roomName || roomName.trim().length === 0) {
+      roomName = this.translateService.instant('chat.noRoomUser');
+    }
+    return roomName;
+  }
+
   /** 대화전송 가능한 방인지 판단 */
   getEnableSend() {
     if (!this.roomInfoSubject.value) {
@@ -1505,13 +1527,11 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
           });
 
           if (!!result && !!result.choice && result.choice) {
-            const userSeqs: number[] = this.userInfoListSubject.value.map(
+            // include me here..
-              userInfo => {
+            const userSeqs: number[] = this.userInfoListSubject.value
-                if (userInfo.isJoinRoom) {
+              .filter(userInfo => userInfo.isJoinRoom)
-                  return userInfo.seq;
+              .map(userInfo => userInfo.seq);
-                }
+
-              }
-            );
             if (
               !!result.selectedUserList &&
               result.selectedUserList.length > 0

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html

@@ -65,6 +65,7 @@
         />
         <video
           controls
+          controlsList="nodownload nofullscreen"
           *ngIf="selectedFile.info.type === FileType.Video"
           [src]="getImageUrl(selectedFile)"
           class="preview-video"

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.ts

@@ -14,7 +14,7 @@ import * as AppStore from '@app/store';
 import * as SyncStore from '@app/store/messenger/sync';
 import * as RoomStore from '@app/store/messenger/room';
 
-import { UserInfo, RoomInfo } from '@ucap-webmessenger/protocol-room';
+import { UserInfo, RoomInfo, RoomType } from '@ucap-webmessenger/protocol-room';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import {
@@ -154,11 +154,11 @@ export class RoomUserListComponent implements OnInit, OnDestroy {
     });
 
     if (!!result && !!result.choice && result.choice) {
-      const userSeqs: number[] = this.userInfoList.map(userInfo => {
+      // include me here..
-        if (userInfo.isJoinRoom) {
+      const userSeqs: number[] = this.userInfoList
-          return userInfo.seq;
+        .filter(userInfo => userInfo.isJoinRoom)
-        }
+        .map(userInfo => userInfo.seq);
-      });
+
       if (!!result.selectedUserList && result.selectedUserList.length > 0) {
         result.selectedUserList.forEach(user => {
           if (userSeqs.indexOf(user.seq) < 0) {
@@ -168,9 +168,6 @@ export class RoomUserListComponent implements OnInit, OnDestroy {
       }
 
       if (userSeqs.length > 0) {
-        // include me
-        userSeqs.push(this.loginRes.userSeq);
-
         this.store.dispatch(
           RoomStore.inviteOrOpen({
             req: {
@@ -220,6 +217,9 @@ export class RoomUserListComponent implements OnInit, OnDestroy {
     event.preventDefault();
     event.stopPropagation();
 
+    if (this.roomInfo.roomType !== RoomType.Multi) {
+      return;
+    }
     if (buddy.seq === this.loginRes.userSeq) {
       return;
     }

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.ts

@@ -424,7 +424,7 @@ export class MessageDetailDialogComponent implements OnInit {
                     // single :: success
                     this.snackBarService.open(
                       this.translateService.instant(
-                        'common.file.errors.savedToPath',
+                        'common.file.results.savedToPath',
                         { path: attachFile.downloadType }
                       ),
                       '',
@@ -437,7 +437,7 @@ export class MessageDetailDialogComponent implements OnInit {
                     // all
                     this.snackBarService.open(
                       this.translateService.instant(
-                        'common.file.errors.savedAll'
+                        'common.file.results.savedAll'
                       ),
                       '',
                       {

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/organization/selected-user-list.dialog.component.html

@@ -22,7 +22,7 @@
   <mat-card-content>
     <div class="item-list">
       <cdk-virtual-scroll-viewport
-        itemSize="64"
+        itemSize="60"
         #cvsvDeptUser
         perfectScrollbar
         fxFlexFill

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss

@@ -2,17 +2,13 @@
   .app-layout-native-title-bar {
     -webkit-user-select: none;
     -webkit-app-region: drag;
-
     position: fixed;
     right: 0;
     top: 0;
     display: flex;
     padding: 0 10px;
     cursor: pointer;
-    height: 60px;
     color: #ffffff;
-    //background: rgba(37, 27, 30, 0.9);
-    //border-bottom: 1px solid #d5dadb;
 
     .app-layout-native-title-bar-logo {
       width: 32px;

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

@@ -33,6 +33,7 @@ import { AppUserInfo, KEY_APP_USER_INFO } from '@app/types/app-user-info.type';
 import { LogoutInfo, KEY_LOGOUT_INFO } from '@app/types';
 import { AppAuthenticationService } from '@app/services/authentication.service';
 import { logoutInitialize } from '@app/store/account/authentication';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-page-account-login',
@@ -85,6 +86,7 @@ export class LoginPageComponent implements OnInit, OnDestroy {
   constructor(
     private store: Store<any>,
     private router: Router,
+    private translateService: TranslateService,
     private dialogService: DialogService,
     private protocolService: ProtocolService,
     private localStorageService: LocalStorageService,
@@ -114,7 +116,7 @@ export class LoginPageComponent implements OnInit, OnDestroy {
         (this.rotateInfomationIndex + 1) % this.rotateInfomation.length;
     }, 8000);
 
-    this.defatulLoginBtnText = 'LOGIN';
+    this.defatulLoginBtnText = this.translateService.instant('accounts.login');
     this.defatulWaitingTime = 5 * 60; // sec
 
     this.store.dispatch(
@@ -140,8 +142,10 @@ export class LoginPageComponent implements OnInit, OnDestroy {
               >(AlertDialogComponent, {
                 width: '360px',
                 data: {
-                  title: '로그인',
+                  title: '',
-                  html: `아이디 또는 패스워드가<br/>일치하지 않습니다.`
+                  html: this.translateService.instant(
+                    'accounts.errors.loginFail'
+                  )
                 }
               });
             }
@@ -154,8 +158,10 @@ export class LoginPageComponent implements OnInit, OnDestroy {
               >(AlertDialogComponent, {
                 width: '360px',
                 data: {
-                  title: '로그인',
+                  title: '',
-                  html: `비밀번호 오류 횟수 초과입니다.<br/>비밀번호를 확인하신 후<br/>잠시 후 다시 시작해 주세요.`
+                  html: this.translateService.instant(
+                    'accounts.errors.loginFailOverTry'
+                  )
                 }
               });
 
@@ -182,11 +188,26 @@ export class LoginPageComponent implements OnInit, OnDestroy {
       KEY_LOGOUT_INFO
     );
 
-    if (
+    if (!!personLogout && !!personLogout.reasonCode) {
-      !!personLogout &&
+      let msg = this.translateService.instant('accounts.results.doLogout');
-      !!personLogout.reasonCode &&
+      switch (personLogout.reasonCode) {
-      personLogout.reasonCode === ServerErrorCode.ERRCD_DUPLICATE
+        case ServerErrorCode.ERRCD_DUPLICATE:
-    ) {
+          msg = this.translateService.instant(
+            'accounts.results.doLogoutDuplicate',
+            {
+              ip: personLogout.ip,
+              mac: personLogout.mac
+            }
+          );
+
+          break;
+        case ServerErrorCode.ERRCD_FORCE_INIT:
+          msg = this.translateService.instant(
+            'accounts.results.doLogoutByOthers'
+          );
+          break;
+      }
+
       const result = this.dialogService.open<
         AlertDialogComponent,
         AlertDialogData,
@@ -195,7 +216,7 @@ export class LoginPageComponent implements OnInit, OnDestroy {
         width: '360px',
         data: {
           title: '',
-          html: `다른 디바이스에서 로그인하였습니다.<br/> * Ip : ${personLogout.ip}<br/> * Mac : ${personLogout.mac}`
+          html: msg
         }
       });
 
@@ -206,7 +227,9 @@ export class LoginPageComponent implements OnInit, OnDestroy {
 
     // Daesang..
     this.fixedCompany = environment.companyConfig.fixedCompanyCode;
-    this.fixedNotiBtnText = '이용 주의사항';
+    this.fixedNotiBtnText = this.translateService.instant(
+      'accounts.usageNotes'
+    );
   }
 
   ngOnDestroy(): void {

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss

@@ -2,7 +2,6 @@
   height: 100%;
   display: flex;
   flex-flow: row;
-  padding-top: 57px;
   border-top: none;
   .split-area {
     overflow: hidden;

projects/ucap-webmessenger-app/src/app/services/authentication.service.ts

@@ -110,5 +110,27 @@ export class AppAuthenticationService {
     this.sessionStorageService.remove(KEY_LOGIN_INFO);
     this.sessionStorageService.remove(KEY_URL_INFO);
     this.sessionStorageService.remove(KEY_AUTH_INFO);
+
+    let appUserInfo = this.localStorageService.encGet<AppUserInfo>(
+      KEY_APP_USER_INFO,
+      environment.customConfig.appKey
+    );
+
+    appUserInfo = {
+      ...appUserInfo,
+      settings: {
+       ...appUserInfo.settings,
+       general: {
+         ...appUserInfo.settings.general,
+         autoLogin: false
+       }
+      }
+    };
+
+    this.localStorageService.encSet<AppUserInfo>(
+      KEY_APP_USER_INFO,
+      appUserInfo,
+      environment.customConfig.appKey
+    );
   }
 }

projects/ucap-webmessenger-app/src/app/services/notification.service.ts

@@ -113,6 +113,7 @@ import { MessageType } from '@ucap-webmessenger/api-message';
 import { LogoutInfo, KEY_LOGOUT_INFO } from '@app/types';
 import { TranslateService } from '@ngx-translate/core';
 import { deleteMessageSuccess } from '@app/store/messenger/message';
+import { ServerErrorCode } from '@ucap-webmessenger/protocol';
 
 @Injectable()
 export class AppNotificationService {
@@ -161,6 +162,12 @@ export class AppNotificationService {
                   'Notification::authenticationProtocolService::LogoutRemoteNotification',
                   noti
                 );
+
+                this.sessionStorageService.set<LogoutInfo>(KEY_LOGOUT_INFO, {
+                  personLogout: true,
+                  reasonCode: ServerErrorCode.ERRCD_FORCE_INIT,
+                  forceType: noti.requestDeviceType
+                } as LogoutInfo);
               }
               break;
             default:

projects/ucap-webmessenger-app/src/app/types/logout-info.type.ts

@@ -5,4 +5,5 @@ export interface LogoutInfo {
   reasonCode?: number;
   ip?: string;
   mac?: string;
+  forceType?: string;
 }

projects/ucap-webmessenger-app/src/assets/i18n/en.json

@@ -15,11 +15,15 @@
     "consentOfPrivacy": "Agreement of ",
     "changePassword": "Change password",
     "resetPassword": "Reset password",
+    "usageNotes": "Usage Notes",
     "passwordExpired": "Password expired",
     "descriptionOfPasswordExpired": "Password has expired.<br/>Please change your password and log in again.",
     "confirmLogout": "Do you want to log out?",
     "results": {
-      "changedPassword": "Password changed. Please log in again."
+      "changedPassword": "Password changed. Please log in again.",
+      "doLogout": "You have been logged out.",
+      "doLogoutDuplicate": "You logged in from another device.<br/> * Ip : {{ip}}<br/> * Mac : {{mac}}",
+      "doLogoutByOthers": "Forced logout by user."
     },
     "errors": {
       "requireLoginId": "Login ID is required.",
@@ -38,7 +42,9 @@
       "notAllowedConsecutiveAlphaNumOver3TimesForPassword": "You cannot use consecutive numbers or letters more than 3 times.",
       "notSatisfiedCombineForPassword": "Combination of two or more kinds of letters, numbers and special characters.",
       "minLengthCombineForPassword": "Password must be {{lengthOfPassword}} characters if {{countOfCombine}} combination.",
-      "failToChangePassword": "Failed to change password."
+      "failToChangePassword": "Failed to change password.",
+      "loginFail": "Username or password do not match.",
+      "loginFailOverTry": "Password error count exceeded. <br/> Check your password <br/> Please try again later."
     }
   },
   "profile": {
@@ -203,6 +209,7 @@
     "btnAttachFile": "Attach files",
     "btnSticker": "Sticker",
     "btnTranslate": "Translate",
+    "noRoomUser": "No chat users",
     "event": {
       "inviteToRoomWith": "{{owner}} invited {{inviter}}.",
       "exitFromRoomWith": "{{exitor}} has left.",

projects/ucap-webmessenger-app/src/assets/i18n/ko.json

@@ -15,11 +15,15 @@
     "consentOfPrivacy": "개인정보 동의",
     "changePassword": "비밀번호 변경",
     "resetPassword": "비밀번호 초기화",
+    "usageNotes": "이용 주의사항",
     "passwordExpired": "비밀번호 만기",
     "descriptionOfPasswordExpired": "비밀번호가 만료되었습니다.<br/>비밀번호 변경 후 다시 로그인 하세요.",
     "confirmLogout": "로그아웃 하시겠습니까?",
     "results": {
-      "changedPassword": "비밀번호가 변경되었습니다. 다시 로그인하여 주십시오"
+      "changedPassword": "비밀번호가 변경되었습니다. 다시 로그인하여 주십시오",
+      "doLogout": "로그아웃 되었습니다.",
+      "doLogoutDuplicate": "다른 디바이스에서 로그인하였습니다.<br/> * Ip : {{ip}}<br/> * Mac : {{mac}}",
+      "doLogoutByOthers": "사용자에 의해 강제로그아웃 하였습니다."
     },
     "errors": {
       "requireLoginId": "로그인 아이디를 입력해 주세요.",
@@ -38,7 +42,9 @@
       "notAllowedConsecutiveAlphaNumOver3TimesForPassword": "연속되는 숫자나 문자를 3번이상 사용할 수 없습니다",
       "notSatisfiedCombineForPassword": "문자, 숫자, 특수문자 중 2종류 이상 조합을 해야 합니다",
       "minLengthCombineForPassword": "비밀번호는 {{countOfCombine}}가지가 조합된 경우 {{lengthOfPassword}}자를 넘어야 합니다",
-      "failToChangePassword": "비밀번호 변경에 실패하였습니다."
+      "failToChangePassword": "비밀번호 변경에 실패하였습니다.",
+      "loginFail": "아이디 또는 패스워드가<br/>일치하지 않습니다.",
+      "loginFailOverTry": "비밀번호 오류 횟수 초과입니다.<br/>비밀번호를 확인하신 후<br/>잠시 후 다시 시작해 주세요."
     }
   },
   "profile": {
@@ -203,6 +209,7 @@
     "btnAttachFile": "첨부파일",
     "btnSticker": "스티커",
     "btnTranslate": "번역",
+    "noRoomUser": "대화상대 없음",
     "event": {
       "inviteToRoomWith": "{{owner}}이 {{inviter}}을 초대했습니다.",
       "exitFromRoomWith": "{{exitor}}님이 퇴장하셨습니다.",

projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss

@@ -16,7 +16,7 @@ body {
   color: #333;
   font-family: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움',
     Gulim, '굴림';
-  font-size: 13px;
+  font-size: 14px;
   line-height: 18px !important;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -259,7 +259,7 @@ $daesang-grey: (
     background-color: mat-color($accent, B100);
   }
   .main-container {
-    border: 3px solid mat-color($accent, B100);
+    border-color: mat-color($accent, B100);
   }
   .global-menu {
     background-color: mat-color($accent, B100);
@@ -337,7 +337,6 @@ $daesang-grey: (
     display: flex;
     justify-content: center;
     padding: 0 10px;
-    height: 60px;
     background-color: #eeeeee;
     background: $gradient-light;
     background: -webkit-linear-gradient(
@@ -349,10 +348,6 @@ $daesang-grey: (
     color: #ffffff;
   }
 
-  .list-search{
-    height:60px;
-  }
-
   mat-tab-group[vertical] {
     display: flex;
     flex-direction: row;

projects/ucap-webmessenger-protocol-authentication/src/lib/protocols/logout-remote.ts

@@ -46,8 +46,10 @@ export const decodeLogoutRemote: ProtocolDecoder<LogoutRemoteResponse> = (
   } as LogoutRemoteResponse);
 };
 
-export const decodeLogoutRemoteNotification: ProtocolDecoder<
+export const decodeLogoutRemoteNotification: ProtocolDecoder<LogoutRemoteNotification> = (
-  LogoutRemoteNotification
+  message: ProtocolMessage
-> = (message: ProtocolMessage) => {
+) => {
-  return { requestDeviceType: message.bodyList[0] } as LogoutRemoteNotification;
+  return decodeProtocolMessage(message, {
+    requestDeviceType: message.bodyList[0]
+  } as LogoutRemoteNotification);
 };

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html

@@ -1,6 +1,6 @@
 <cdk-virtual-scroll-viewport
   #cvsvGroup
-  itemSize="64"
+  itemSize="60"
   perfectScrollbar
   fxFlexFill
 >

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss

@@ -13,8 +13,6 @@
 
 .tree-node-frame {
   border-bottom: 1px solid #dddddd;
-  height: 64px;
-
   .tree-node-header {
     position: relative;
     width: 100%;

projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html

@@ -57,7 +57,7 @@
         *ngIf="!!message.resType && message.resType === ContentType.AttachFile"
         >attach_file</mat-icon
       >
-      {{ message.title }}
+      <span class="final-message">{{ message.title }}</span>
     </dd>
   </dl>
   <div class="date">

projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.scss

@@ -1,13 +1,13 @@
 .message-list {
   &.list-item {
     dl {
+      position: relative;
       display: flex;
       flex-flow: column;
       flex: 1 1 auto;
-      width: calc(100% - 80px);
+      width: calc(100% - 90px);
       dt {
         .name {
-          font-size: 1.1em;
           overflow: hidden;
           text-overflow: ellipsis;
           display: block;
@@ -22,21 +22,21 @@
       }
 
       dd {
-        color: #777777;
+        display: flex;
-        white-space: nowrap;
-        word-wrap: normal;
-        text-overflow: ellipsis;
-        display: block;
         width: 100%;
         position: relative;
-        overflow: hidden;
+        justify-items: center;
-        font-size: 0.9em;
+        .final-message {
+          white-space: nowrap;
+          word-wrap: normal;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
       }
     }
     .date {
       display: flex;
       flex-flow: column;
-      font-size: 0.9em;
       height: 40px;
       .noti-new {
         border-radius: 50%;

projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html

@@ -1,4 +1,4 @@
-<div class="list-search">
+<div class="list-search-frame">
   <div class="selectbox">
     <!--<mat-label>회사선택</mat-label>-->
     <mat-select [(value)]="companyCode">
@@ -30,16 +30,3 @@
     </mat-form-field>
   </div>
 </div>
-<!--검색창만 있는 경우--------------------------------------------------------------------------
-<div class="list-search">
-  <div class="searchbox">
-    <input
-      matInput
-      #searchWordInput
-      placeholder="name"
-      (keydown.enter)="onKeyDownEnter(searchWordInput.value)"
-    />
-    <div class="btn-search"><i class="material-icons">search</i></div>
-  </div>
-</div>
--->

projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss

@@ -11,55 +11,3 @@
     display: none;
   }
 }
-
-.list-search {
-  display: flex;
-  flex-direction: row;
-  position: relative;
-  height: 60px;
-  align-items: center;
-  padding: 0 10px 0 20px;
-  font-size: 14px;
-  background-color: #f9f9f9;
-  border-bottom: 1px solid #dddddd;
-  .selectbox {
-    display: inline-flex;
-    width: 38%;
-    margin-right: 2%;
-  }
-  .searchbox {
-    width: 60%;
-    display: flex;
-    input {
-      display: inline-flex;
-      width: 100%;
-      font-size: 14px;
-      padding-left: 0;
-      &:focus {
-        & + .mat-form-field-label-wrapper {
-          .mat-form-field-appearance-legacy {
-            .mat-form-field-label {
-              color: red;
-            }
-          }
-        }
-      }
-    }
-    .btn-search {
-      color: #777777;
-      font-size: 12px;
-      display: inline-flex;
-      margin-left: auto;
-      flex: none;
-    }
-  }
-}
-.selectbox {
-  display: inline-flex;
-  width: 45%;
-  margin-right: 1%;
-}
-+ .searchbox {
-  width: 54%;
-  display: inline-flex;
-}

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html

@@ -16,22 +16,22 @@
       </div>
       <span
         *ngIf="getPresence(PresenceType.MOBILE) === 'mobileOn'"
-        class="text-accent-color badge-mobile-state"
+        class="text-accent-color marker-mobile-state"
       >
         <mat-icon>phone_android</mat-icon>
       </span>
     </dt>
     <dd class="info">
-      <div class="detail">
+      <div class="user-info">
-        <div class="user-info">
+        <div class="user">
           <span
             *ngIf="getWorkstatusInfo('text').length > 0"
             class="work-status"
             [ngClass]="getWorkstatusInfo('style')"
             >{{ getWorkstatusInfo('text') }}</span
           >
-          <span class="name">
+          <span class="detail">
-            <b>{{ userInfo | ucapTranslate: 'name' }}</b>
+            <b class="name">{{ userInfo | ucapTranslate: 'name' }}</b>
             <span class="grade">{{ userInfo | ucapTranslate: 'grade' }}</span>
           </span>
         </div>

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss

@@ -48,16 +48,6 @@ $thumbnail-msize: 40px;
   border-radius: 4px;
 }
 
-/*.list-item {
-  @extend %list-item;
-  &:hover {
-    background-color: $bg-list-hover;
-  }
-  .mat-checkbox {
-    padding-left: 10px;
-  }
-}*/
-
 .item-default {
   display: flex;
   width: 100%;
@@ -77,36 +67,29 @@ $thumbnail-msize: 40px;
     padding: 0;
     width: calc(100% - 50px);
     transform: translateY(2px);
-    .detail {
+    .user-info {
-      .user-info {
+      .user {
         display: flex;
         flex-flow: row;
         margin-bottom: 2px;
         .work-status {
-          margin-right: 4px;
+          display: inline-flex;
-          border-radius: 4px;
+          justify-content: center;
-          padding: 0 6px;
-          color: #ffffff;
-          font-size: 0.9em;
-          width: 40px;
           justify-items: center;
+          color: #ffffff;
           height: 100%;
+          min-width: 32px;
+          margin-right: 4px;
+          border-radius: 24px;
+          flex: 0 0 auto;
         }
-        .name {
+        .detail {
-          margin-bottom: 2px;
           color: $font-dark;
           width: calc(100% - 40px);
           @include ellipsis(1);
-          b {
-            font-weight: 600;
-          }
-          .grade {
-            font-size: 0.9em;
-          }
         }
       }
       .dept {
-        font-size: 0.9em;
         color: $font-mid;
         @include ellipsis(1);
       }

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html

@@ -10,7 +10,7 @@
           [default]="defaultPath"
         />
       </div>
-      <span *ngIf="roomInfo.isTimeRoom" class="text-warn-color badge-timer">
+      <span *ngIf="roomInfo.isTimeRoom" class="text-warn-color marker-timer">
         <mat-icon>timer</mat-icon>
       </span>
       <!-- <div style="position: relative;">
@@ -24,8 +24,8 @@
       </div> -->
     </dt>
     <dd class="info">
-      <div class="detail">
+      <div class="room-info">
-        <div class="room-name">
+        <div class="detail">
           <div class="name">
             <ng-container [ngSwitch]="roomInfo.roomType">
               <ng-container *ngSwitchCase="RoomType.Mytalk">
@@ -51,13 +51,13 @@
                   {{ roomInfo.roomName }}
                 </ng-template>
                 <ng-template #roomNameNotExist>
-                  {{ _roomUserInfos | ucapTranslate: 'name':',' }}
+                  {{ getRoomNameByRoomUser(_roomUserInfos) }}
                 </ng-template>
               </ng-container>
             </ng-container>
           </div>
           <div
-            class="num bg-accent-light"
+            class="member bg-accent-light"
             *ngIf="roomInfo.roomType === RoomType.Multi"
           >
             {{ roomInfo.joinUserCount }}{{ 'common.units.persons' | translate }}
@@ -66,7 +66,7 @@
             <mat-icon>notifications_off</mat-icon>
           </div>
         </div>
-        <div class="room-msg">
+        <div class="final-message">
           {{ finalEventMessage }}
         </div>
       </div>
@@ -87,13 +87,12 @@
   </dl>
 
   <span
-    class="notiBadge"
+    class="noti-sum"
     *ngIf="roomInfo.noReadCnt > 0"
     [matBadgeHidden]="roomInfo.noReadCnt === 0"
     [matBadge]="roomInfo.noReadCnt"
     matBadgeOverlap="true"
     matBadgeColor="accent"
     matBadgePosition="below after"
-  >
+  ></span>
-  </span>
 </div>

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss

@@ -78,20 +78,19 @@ $thumbnail-msize: 40px;
   .info {
     position: relative;
     display: flex;
+    flex: 0 0 auto;
     margin: 0;
     padding: 0;
 
-    .detail {
+    .room-info {
       flex-direction: column;
       width: calc(100% - 80px);
-      .room-name {
+      .detail {
         display: inline-flex;
         color: $font-dark;
         width: 100%;
         align-items: center;
         .name {
-          font-size: 1.1em;
-          @include ellipsis(1);
           font-weight: 600;
         }
         .mat-icon {
@@ -105,8 +104,7 @@ $thumbnail-msize: 40px;
           margin-left: 4px;
           line-height: unset;
         }
-        .num {
+        .member {
-          font-size: 0.9em;
           flex: none;
           margin-left: 6px;
           border-radius: 3px;
@@ -114,10 +112,8 @@ $thumbnail-msize: 40px;
           color: #ffffff;
         }
       }
-      .room-msg {
+      .final-message {
-        font-size: 12px;
         color: $font-mid;
-        @include ellipsis(1);
       }
     }
     .date {
@@ -127,7 +123,8 @@ $thumbnail-msize: 40px;
       text-align: right;
       margin-left: 10px;
       color: $font-mid;
-      @include ellipsis(1);
+      align-items: flex-start;
+      margin-top: -2px;
     }
   }
 
@@ -145,21 +142,3 @@ $thumbnail-msize: 40px;
     background-color: $bg-list-hover;
   }
 }
-
-.noti {
-  position: absolute;
-  right: 22px;
-  bottom: 22px;
-  max-width: 60px;
-  padding: 0 6px;
-  font-size: 11px;
-  color: #ffffff;
-  @include ellipsis(1);
-  border-radius: 50%;
-}
-
-.notiBadge {
-  position: absolute !important;
-  right: 22px;
-  bottom: 22px;
-}

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.ts

@@ -4,7 +4,8 @@ import {
   Input,
   Output,
   EventEmitter,
-  ViewChildren
+  ViewChildren,
+  ChangeDetectorRef
 } from '@angular/core';
 import {
   RoomInfo,
@@ -15,8 +16,9 @@ import {
 import { NGXLogger } from 'ngx-logger';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
-import { FormsModule } from '@angular/forms';
+import { TranslatePipe } from 'projects/ucap-webmessenger-ui/src/lib/pipes/translate.pipe';
-import { MatCheckbox } from '@angular/material';
+import { TranslateService as uiTranslateService } from '@ucap-webmessenger/ui';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'ucap-room-list-item',
@@ -50,7 +52,12 @@ export class ListItemComponent implements OnInit {
   finalEventMessage: string;
   RoomType = RoomType;
 
-  constructor(private logger: NGXLogger) {}
+  constructor(
+    private logger: NGXLogger,
+    private uiTranslateService: uiTranslateService,
+    private translateService: TranslateService,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {}
 
   ngOnInit() {
     if (this.roomInfo.isTimeRoom) {
@@ -96,6 +103,18 @@ export class ListItemComponent implements OnInit {
       .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
   }
 
+  getRoomNameByRoomUser(roomUserInfos: (RoomUserInfo | UserInfoShort)[]) {
+    let roomName = new TranslatePipe(
+      this.uiTranslateService,
+      this.changeDetectorRef
+    ).transform(roomUserInfos, 'name', ',');
+
+    if (!roomName || roomName.trim().length === 0) {
+      roomName = this.translateService.instant('chat.noRoomUser');
+    }
+    return roomName;
+  }
+
   // getChecked(value: boolean, roomInfo: RoomInfo) {
   //   if (value && !this.multiCheckable) {
   //     if (this.selected === roomInfo.roomSeq) {

projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss

@@ -6,6 +6,7 @@
 
 // Partials
 @import 'partials/breakpoints';
+@import 'partials/main-frame';
 @import 'partials/forms';
 @import 'partials/general';
 @import 'partials/helpers';
@@ -14,6 +15,7 @@
 @import 'partials/scrollbars';
 @import 'partials/paginator';
 @import 'partials/presence';
+@import 'partials/search-frame';
 @import 'partials/list-item';
 @import 'partials/dialogs';
 

projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss

@@ -1,32 +1,40 @@
 @charset 'utf-8';
 
-.ellipsis {
+@mixin ellipsis($row) {
   overflow: hidden;
   text-overflow: ellipsis;
-  display: block;
+  @if $row == 1 {
-  white-space: nowrap;
+    white-space: nowrap;
-  word-wrap: normal;
+    word-wrap: normal;
-}
+  } @else if $row >= 2 {
-.ellipsis2 {
+    display: -webkit-box;
-  overflow: hidden;
+    -webkit-line-clamp: $row;
-  text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
+    word-wrap: break-word;
-  -webkit-box-orient: vertical;
+  }
-  word-wrap: break-word;
 }
 
-$listH-row2: 64px;
+$listH-row2: 60px;
 $line-basic: 1px solid #dddddd;
 %list-item {
   position: relative;
   display: flex;
   align-items: center;
-  font-size: 14px;
   width: 100%;
   height: $listH-row2;
   border-bottom: $line-basic;
   padding: 0 20px;
 }
+
+//expansion-panel 높이
+.group-tree {
+  .tree-node-frame {
+    height: $listH-row2;
+    .group-name {
+      font-size: 0.96em;
+    }
+  }
+}
 .mat-card-header .mat-card-title {
   margin: 0 -16px;
   padding-bottom: 10px;
@@ -56,7 +64,12 @@ $line-basic: 1px solid #dddddd;
       }
     }
   }
-  span[class*='badge'] {
+  &.checkbox {
+    .mat-checkbox {
+      margin-left: auto;
+    }
+  }
+  span[class*='marker'] {
     position: absolute;
     background-color: #ffffff;
     width: 20px;
@@ -77,4 +90,37 @@ $line-basic: 1px solid #dddddd;
       min-height: 18px;
     }
   }
+  .noti-sum.mat-badge {
+    position: absolute;
+    right: 30px;
+    bottom: 20px;
+    font-size: 0.9em;
+  }
+}
+
+//list-item 폰트 사이즈
+.list-item {
+  font-size: 1em;
+  .name {
+    font-weight: 600;
+    @include ellipsis(1);
+  }
+  .grade {
+    font-size: 0.8em;
+    margin-left: 4px;
+    color: #777777;
+  }
+  .work-status,
+  .member {
+    font-size: 0.8em;
+  }
+  .final-message,
+  .dept {
+    font-size: 0.86em;
+    @include ellipsis(1);
+  }
+  .date {
+    font-size: 0.7em;
+    @include ellipsis(1);
+  }
 }

projects/ucap-webmessenger-ui/src/assets/scss/partials/_main-frame.scss

@@ -0,0 +1,50 @@
+$frame-border: 3px;
+$frame-outside: 50px;
+$current-head: 50px;
+$search-frame: 50px;
+
+@mixin div-box-shadow {
+  width: calc(100% - #{$frame-outside});
+}
+
+.mat-toolbar {
+  &.mat-toolbar-single-row {
+    height: $frame-outside;
+  }
+}
+
+.main-container {
+  padding-top: $frame-outside;
+  border-width: $frame-border;
+  border-style: solid;
+  .mat-tab-group {
+    &.global-menu {
+      width: $frame-outside;
+    }
+  }
+  .left-side-tabs-body {
+    @include div-box-shadow;
+  }
+}
+
+.current-head {
+  height: $frame-outside;
+}
+
+// 글로벌 메뉴 별 리스트 높이 값
+.left-side-tabs-contents {
+  .left-group-side {
+    .search-result {
+      height: calc(100% - #{$current-head + $search-frame});
+    }
+  }
+  .app-layout-chat-left-sidenav-chat-list {
+    height: calc(100% - #{$current-head + $search-frame});
+  }
+  .oraganization-tab {
+    height: calc(100% - #{$current-head + $search-frame});
+  }
+  .message-section {
+    height: calc(100% - #{$current-head + $search-frame});
+  }
+}

projects/ucap-webmessenger-ui/src/assets/scss/partials/_search-frame.scss

@@ -0,0 +1,112 @@
+$search-font-size: 14px;
+
+@mixin list-search {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  height: $search-frame;
+  align-items: center;
+  // padding: 0 10px 0 20px;
+  font-size: $search-font-size;
+  background-color: #f9f9f9;
+  border-bottom: 1px solid #dddddd;
+}
+
+.list-search-frame {
+  @include list-search;
+  .searchbox {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    input {
+      display: inline-flex;
+      width: 100%;
+      font-size: 1em;
+      padding-left: 0;
+    }
+    .btn-search {
+      color: #777777;
+      font-size: 12px;
+      display: inline-flex;
+      margin-left: auto;
+      flex: none;
+    }
+  }
+}
+
+/*.list-search-frame {
+  .selectbox {
+    display: inline-flex;
+    width: 40%;
+    padding: 0 20px;
+  }
+  & + .searchbox {
+    width: 60%;
+    padding-right: 20px;
+  }
+}
+*/
+.list-search-frame {
+  .searchbox {
+    height: 100%;
+    .mat-form-field {
+      width: 100%;
+      height: $search-frame;
+      .mat-form-field-wrapper {
+        padding: 0;
+        padding-bottom: 0 !important;
+        height: 100%;
+        .mat-form-field-flex {
+          height: 100%;
+          align-items: center;
+          flex: 1 1 auto;
+          padding: 0 20px;
+          .mat-form-field-infix {
+            font-size: 14px;
+            border: none;
+          }
+          .mat-form-field-suffix {
+            margin-left: auto;
+            .mat-icon {
+              line-height: 24px;
+            }
+          }
+        }
+      }
+    }
+    .mat-form-field-appearance-legacy {
+      .mat-form-field-wrapper {
+        padding: 0;
+      }
+      .mat-form-field-underline {
+        bottom: 0;
+        background-color: unset !important;
+      }
+    }
+  }
+}
+
+.selectbox {
+  display: inline-flex;
+  width: 46%;
+  padding-left: 20px;
+
+  & + .searchbox {
+    width: 54%;
+    display: inline-flex;
+    input {
+      display: inline-flex;
+      width: 100%;
+      font-size: 1em;
+      padding-left: 0;
+    }
+    .btn-search {
+      color: #777777;
+      font-size: 12px;
+      display: inline-flex;
+      margin-left: auto;
+      flex: none;
+    }
+  }
+}