feat(settings/account): configure sso usage and direct login blocking…

… + design changes KMCNG-2567 (#1063) * sso configuration * sso configuration form * move sso config to popups
kaltura · Feb 19, 2024 · ca21dde · ca21dde
1 parent 57152ff
commit ca21dde
Show file tree

Hide file tree

Showing 15 changed files with 350 additions and 144 deletions.
diff --git a/...ra-ngx-client-12.0.0-v20231126-085457.tgz → ...ra-ngx-client-12.0.0-v20240218-122253.tgz b/...ra-ngx-client-12.0.0-v20231126-085457.tgz → ...ra-ngx-client-12.0.0-v20240218-122253.tgz
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -73,7 +73,7 @@
     "jquery": "~3.7.1",
     "jsnlog": "~2.26.2",
     "jsonschema": "~1.4.0",
-    "kaltura-ngx-client": "file:libs/kaltura-ngx-client-12.0.0-v20231126-085457.tgz",
+    "kaltura-ngx-client": "file:libs/kaltura-ngx-client-12.0.0-v20240218-122253.tgz",
     "moment": "~2.22.2",
     "ngx-page-scroll": "~5.0.1",
     "ngx-webstorage": "~5.0.0",

diff --git a/src/applications/settings-account-settings-app/ep-sso-config/ep-sso-config.component.html b/src/applications/settings-account-settings-app/ep-sso-config/ep-sso-config.component.html
@@ -82,14 +82,15 @@
                 </div>
             </div>
           </div>
-
-            <div class="kSaveBtnContainer kRow">
-                <button pButton class="kButtonBranded kSaveBtn" (click)="_performAction()"
-                        label="{{'applications.settings.accountSettings.apply' | translate}}"
-                        [disabled]="_ssoConfigForm.pristine || _ssoConfigForm.invalid || _disableConfig"></button>
-            </div>
         </form>
       </div>
+        <div class="kSaveBtnContainer kRow">
+            <button pButton class="kButtonDefault kButton kCancelBtn" (click)="parentPopupWidget.close()"
+                    [label]="'applications.settings.myUserSettings.cancel' | translate"></button>
+            <button pButton class="kButtonBranded kSaveBtn" (click)="_performAction()"
+                    label="{{'applications.settings.accountSettings.apply' | translate}}"
+                    [disabled]="_ssoConfigForm.pristine || _ssoConfigForm.invalid"></button>
+        </div>
     </div>
   </div>
 </k-area-blocker>
diff --git a/src/applications/settings-account-settings-app/ep-sso-config/ep-sso-config.component.scss b/src/applications/settings-account-settings-app/ep-sso-config/ep-sso-config.component.scss
@@ -3,104 +3,103 @@
 .kSSOConfig {
     display: flex;
     flex-direction: column;
-    .kInfo {
-        margin-left: 24px;
-        margin-top: 24px;
+    position: relative;
+    height: 420px;
+    .kSaveBtnContainer {
+        border-top: 1px solid #cccccc;
+        position: absolute;
+        bottom: 0px;
+        width: 100%;
         display: flex;
-        i {
+        align-items: center;
+        justify-content: center;
+        height: 78px;
+        .kCancelBtn {
+            width: 125px;
+            height: 34px;
+            font-weight: 400;
             margin-right: 8px;
         }
-    }
-    .kSaveBtnContainer {
-        padding-top: 60px;
         .kSaveBtn {
-            margin-left: auto;
             width: 125px;
             height: 34px;
             font-weight: 400;
-            margin-right: 2px;
+            margin-left: 8px;
         }
     }
-      .kTitle {
-          color: $kGrayscale1;
-          font-weight: 700;
-          height: 29px;
-          font-size: 24px;
-          display: block;
-          margin-left: 24px;
-          margin-top: 24px;
-      }
+    .kTitle {
+        color: $kGrayscale1;
+        font-weight: 700;
+        font-size: 24px;
+        text-align: center;
+        border-bottom: 1px solid #cccccc;
+        line-height: 78px;
+    }
 
 
     .kContainer {
-      flex: 1 1 auto;
-      overflow-y: hidden;
-      max-height: calc(100vh - 158px);
-      .kProfileForm {
-        padding: 0 28px 28px 28px;
-      }
-
-      .kRow {
-        display: flex;
-        padding-top: 24px;
-          width: 710px;
-
-        .kLabel {
-          width: 272px;
-          flex: 0 0 auto;
-          height: 18px;
-          color: $kGrayscale1;
-          font-size: 15px;
-          line-height: 18px;
+        flex: 1 1 auto;
+        overflow-y: hidden;
+        max-height: calc(100vh - 158px);
+        .kProfileForm {
+            padding: 0 24px 0px 0px;
         }
-        .labelWithHelpTip {
+
+        .kRow {
             display: flex;
-            align-items: center;
-            width: 280px;
-            &.notRequired {
-                width: 308px;
-            }
+            padding-top: 24px;
+            width: 706px;
+
             .kLabel {
-                width: auto;
-                margin-right: 4px;
+                width: 234px;
+                flex: 0 0 auto;
+                height: 18px;
+                color: $kGrayscale1;
+                font-size: 15px;
+                line-height: 18px;
             }
-        }
-        .kRequired {
-          width: 20px;
-          font-size: 24px;
-          color: $kGrayscale3;
-          &.kHasError {
-            color: $kDandger;
-            font-weight: bold;
-          }
-        }
-        .kRequired, .kLabel {
-          padding: 8px 4px;
-          height: 18px;
-        }
-        .kControl, kProfilesList {
-          height: 34px;
-          width: 400px;
-          &.kHasError {
-            border: 1px solid $kDandger;
-            background: initial;
-          }
-            &.disabled {
-                opacity: 0.3;
-                cursor: default;
-                pointer-events: none;
+            .labelWithHelpTip {
+                display: flex;
+                align-items: center;
+                width: 280px;
+                &.notRequired {
+                    width: 308px;
+                }
+                .kLabel {
+                    width: auto;
+                    margin-right: 4px;
+                }
+            }
+            .kRequired {
+                font-size: 24px;
+                color: $kGrayscale3;
+                &.kHasError {
+                    color: $kDandger;
+                    font-weight: bold;
+                }
+            }
+            .kRequired, .kLabel {
+                padding: 8px 16px;
+                height: 18px;
+            }
+            .kControl, kProfilesList {
+                height: 34px;
+                width: 400px;
+                &.kHasError {
+                    border: 1px solid $kDandger;
+                    background: initial;
+                }
             }
-        }
 
-        textarea.kControl {
-          height: 76px;
-        }
+            textarea.kControl {
+                height: 76px;
+            }
 
-        .kError {
-          color: $kDandger;
-          padding-top: 8px;
+            .kError {
+                color: $kDandger;
+                padding-top: 8px;
+            }
         }
-      }
     }
 }
 

diff --git a/src/applications/settings-account-settings-app/ep-sso-config/ep-sso-config.component.ts b/src/applications/settings-account-settings-app/ep-sso-config/ep-sso-config.component.ts
@@ -1,7 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, ValidatorFn, ValidationErrors } from '@angular/forms';
 import { AppLocalization } from '@kaltura-ng/mc-shared';
-import { AreaBlockerMessage } from '@kaltura-ng/kaltura-ui';
+import {AreaBlockerMessage, PopupWidgetComponent} from '@kaltura-ng/kaltura-ui';
 import {
     App, AppSubscription,
     AuthProfile, LoadApplicationResponse,
@@ -21,7 +21,7 @@ import {SortDirection} from "../../content-rooms-app/rooms/rooms-store/rooms-sto
   ]
 })
 export class EpSsoConfigComponent implements OnInit {
-
+  @Input() parentPopupWidget: PopupWidgetComponent;
   public _ssoConfigForm: FormGroup;
   public _profilesField: AbstractControl;
   public _domainField: AbstractControl;
@@ -216,6 +216,7 @@ export class EpSsoConfigComponent implements OnInit {
               severity: 'success',
               detail: this._appLocalization.get('app.common.updateSuccess')
           });
+          this.parentPopupWidget.close();
       }
 
       const createSubscription = () => {

diff --git a/src/applications/settings-account-settings-app/settings-account-settings-app.module.ts b/src/applications/settings-account-settings-app/settings-account-settings-app.module.ts
@@ -4,7 +4,7 @@ import {SettingsAccountSettingsComponent} from './settings-account-settings.comp
 import {routing} from "./settings-account-settings-app.routes";
 import {RouterModule} from "@angular/router";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {AreaBlockerModule, TooltipModule, InputHelperModule} from "@kaltura-ng/kaltura-ui";
+import {AreaBlockerModule, TooltipModule, InputHelperModule, PopupWidgetModule} from '@kaltura-ng/kaltura-ui';
 import {TranslateModule} from "@ngx-translate/core";
 import { KMCPermissionsModule } from 'app-shared/kmc-shared/kmc-permissions';
 import { SettingsAccountSettingsCanDeactivateService } from './settings-account-settings-can-deactivate.service';
@@ -15,23 +15,26 @@ import { MultiSelectModule } from '@kaltura-ng/kaltura-primeng-ui';
 import { SsoConfigComponent } from "./sso-config/sso-config.component";
 import { ProfilesStoreService } from "../settings-authentication-app/profiles-store/profiles-store.service";
 import { EpSsoConfigComponent } from './ep-sso-config/ep-sso-config.component';
+import {InputSwitchModule} from 'primeng/inputswitch';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    RouterModule.forChild(routing),
-    FormsModule,
-    ReactiveFormsModule,
-    DropdownModule,
-    MultiSelectModule,
-    InputTextModule,
-    TooltipModule,
-    ButtonModule,
-    AreaBlockerModule,
-    InputHelperModule,
-    TranslateModule,
-    KMCPermissionsModule
-  ],
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routing),
+        FormsModule,
+        ReactiveFormsModule,
+        DropdownModule,
+        MultiSelectModule,
+        InputTextModule,
+        TooltipModule,
+        ButtonModule,
+        AreaBlockerModule,
+        InputHelperModule,
+        TranslateModule,
+        KMCPermissionsModule,
+        InputSwitchModule,
+        PopupWidgetModule
+    ],
   declarations: [SettingsAccountSettingsComponent, SsoConfigComponent, EpSsoConfigComponent],
     providers:[SettingsAccountSettingsCanDeactivateService, ProfilesStoreService]
 })