Remove item icon and OAuth sign-in and sign-up message (#1553)

Author: jsorohova

src/components/operations/operation-details/ko/runtime/operation-console.html

@@ -115,7 +115,7 @@ <h3>Parameters</h3>
                     </div>
                 </div>
             </div>
-            <div class="col-6">
+            <div class="col-7">
                 <div class="form-group">
                     <!-- ko if: parameter.options.length > 0 -->
                     <select class="form-control" aria-label="Parameter value"
@@ -142,8 +142,8 @@ <h3>Parameters</h3>
                     </div>
                 </div>
             </div>
-            <div class="col-2">
-                <a href="#" role="button" data-bind="click: $component.removeQueryParameter">Remove</a>
+            <div class="col-1">
+                <a href="#" role="button" data-bind="click: $component.removeQueryParameter" class="btn-centered-vert btn-inline" aria-label="Remove parameter"><i class="icon-emb icon-emb-trash"></i></a>
             </div>
         </div>
     </div>
@@ -173,7 +173,7 @@ <h3>Headers</h3>
                     </div>
                 </div>
             </div>
-            <div class="col-6">
+            <div class="col-7">
                 <div class="form-group">
                     <!-- ko if: header.options && header.options.length > 0 -->
                     <select class="form-control" aria-label="Header value"
@@ -199,8 +199,8 @@ <h3>Headers</h3>
                     <!-- /ko -->
                 </div>
             </div>
-            <div class="col-2">
-                <a href="#" role="button" data-bind="click: $component.removeHeader">Remove</a>
+            <div class="col-1">
+                <a href="#" role="button" data-bind="click: $component.removeHeader" class="btn-centered-vert btn-inline" aria-label="Remove header"><i class="icon-emb icon-emb-trash"></i></a>
             </div>
         </div>
     </div>

src/components/users/signin-social/ko/signinSocial.html

@@ -1,9 +1,18 @@
 <div data-bind="secured: roles">
-<!-- ko if: aadConfig -->
-<signin-aad data-bind="attr: { params: aadConfig }"></signin-aad>
-<!-- /ko -->
+    <!-- ko if: aadConfig -->
+    <signin-aad data-bind="attr: { params: aadConfig }"></signin-aad>
+    <!-- /ko -->
 
-<!-- ko if: aadB2CConfig -->
-<signin-aad-b2c data-bind="attr: { params: aadB2CConfig }"></signin-aad-b2c>
-<!-- /ko -->
+    <!-- ko if: aadB2CConfig -->
+    <signin-aad-b2c data-bind="attr: { params: aadB2CConfig }"></signin-aad-b2c>
+    <!-- /ko -->
+
+    <!-- ko ifnot: aadConfig && aadB2CConfig && (mode === "publishing") -->
+    <div class="not-configured">This widget will display additional sign-in buttons when you configure <a
+            href="https://aka.ms/apim-how-to-aad" target="_blank">Azure Active Directory</a> or <a
+            href="https://aka.ms/apim-how-to-aadb2c" target="_blank">Azure Active Directory B2C</a>
+        integration in your API Management service. This message appears only in the portal's administrative mode and
+        the widget will be rendered as an empty space in the published portal, so you don't need to remove it.
+    </div>
+    <!-- /ko -->
 </div>

src/components/users/signin-social/ko/signinSocialViewModel.ts

@@ -15,6 +15,7 @@ export class SigninSocialViewModel {
     public readonly aadB2CLabel: ko.Observable<string>;
     public readonly styles: ko.Observable<StyleModel>;
     public readonly roles: ko.ObservableArray<string>;
+    public readonly mode: ko.Observable<string>;
 
     constructor() {
         this.aadConfig = ko.observable<string>();
@@ -23,5 +24,6 @@ export class SigninSocialViewModel {
         this.aadB2CLabel = ko.observable<string>();
         this.styles = ko.observable<StyleModel>();
         this.roles = ko.observableArray<string>();
+        this.mode = ko.observable<string>();
     }
 }

src/components/users/signin-social/ko/signinSocialViewModelBinder.ts

@@ -6,13 +6,15 @@ import { ViewModelBinder } from "@paperbits/common/widgets";
 import { IdentityService } from "../../../../services/identityService";
 import { SigninSocialModel } from "../signinSocialModel";
 import { SigninSocialViewModel } from "./signinSocialViewModel";
+import { ISettingsProvider } from "@paperbits/common/configuration";
 
 
 export class SigninSocialViewModelBinder implements ViewModelBinder<SigninSocialModel, SigninSocialViewModel> {
     constructor(
         private readonly identityService: IdentityService,
         private readonly styleCompiler: StyleCompiler,
-        private readonly eventManager: EventManager
+        private readonly eventManager: EventManager,
+        private readonly settingsProvider: ISettingsProvider
     ) { }
 
     public async modelToViewModel(model: SigninSocialModel, viewModel?: SigninSocialViewModel, bindingContext?: Bag<any>): Promise<SigninSocialViewModel> {
@@ -67,6 +69,9 @@ export class SigninSocialViewModelBinder implements ViewModelBinder<SigninSocial
             viewModel.aadB2CConfig(JSON.stringify(aadB2CConfig));
         }
 
+        const settings = await this.settingsProvider.getSettings();
+        viewModel.mode(settings["environment"]);
+
         return viewModel;
     }
 

src/components/users/signup-social/ko/signupSocial.html

@@ -1 +1,12 @@
+<!-- ko if: identityProvider -->
 <signup-social-runtime></signup-social-runtime>
+<!-- /ko -->
+
+<!-- ko ifnot: identityProvider && (mode === "publishing") -->
+<div class="not-configured">This widget will display a sign-up form when you configure <a
+        href="https://aka.ms/apim-how-to-aad" target="_blank">Azure Active Directory</a> or<a
+        href="https://aka.ms/apim-how-to-aadb2c" target="_blank">Azure Active Directory B2C</a> integration in your API
+    Management service. This message appears only in the portal's administrative mode and the widget will be rendered as
+    an empty space in the published portal, so you don't need to remove it.
+</div>
+<!-- /ko -->

src/components/users/signup-social/ko/signupSocialViewModel.ts

@@ -6,4 +6,12 @@ import { Component } from "@paperbits/common/ko/decorators";
     selector: "signup-social",
     template: template
 })
-export class SignupSocialViewModel { }
+export class SignupSocialViewModel {
+    public readonly identityProvider: ko.Observable<boolean>;
+    public readonly mode: ko.Observable<string>;
+
+    constructor() {
+        this.identityProvider = ko.observable<boolean>();
+        this.mode = ko.observable<string>();
+    }
+}

src/components/users/signup-social/ko/signupSocialViewModelBinder.ts

@@ -1,10 +1,17 @@
 import { Bag } from "@paperbits/common";
 import { ComponentFlow } from "@paperbits/common/editing";
 import { ViewModelBinder } from "@paperbits/common/widgets";
+import { IdentityService } from "../../../../services/identityService";
 import { SignupSocialModel } from "../signupSocialModel";
 import { SignupSocialViewModel } from "./signupSocialViewModel";
+import { ISettingsProvider } from "@paperbits/common/configuration";
 
 export class SignupSocialViewModelBinder implements ViewModelBinder<SignupSocialModel, SignupSocialViewModel> {
+    constructor(
+        private readonly identityService: IdentityService,
+        private readonly settingsProvider: ISettingsProvider
+    ) { }
+
     public async modelToViewModel(model: SignupSocialModel, viewModel?: SignupSocialViewModel, bindingContext?: Bag<any>): Promise<SignupSocialViewModel> {
         if (!viewModel) {
             viewModel = new SignupSocialViewModel();
@@ -17,6 +24,17 @@ export class SignupSocialViewModelBinder implements ViewModelBinder<SignupSocial
             draggable: true
         };
 
+        const identityProviders = await this.identityService.getIdentityProviders();
+
+        const identityProvider = identityProviders.find(x => x.type === "aad" || x.type === "aadB2C");
+
+        if (identityProvider) {
+            viewModel.identityProvider(true);
+        }
+
+        const settings = await this.settingsProvider.getSettings();
+        viewModel.mode(settings["environment"]);
+
         return viewModel;
     }
 

src/themes/website/styles/buttons.scss

@@ -0,0 +1,9 @@
+.btn-centered-vert {
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+.btn-inline {
+    padding-bottom: 1rem;
+}

src/themes/website/styles/forms.scss

@@ -281,4 +281,4 @@ $search-button-width: 30px;
 }
 .input-password::-ms-reveal {
     display: none;
-}
+}

src/themes/website/styles/styles.scss

@@ -24,5 +24,6 @@
 @import "utils.scss";
 @import "pills.scss";
 @import "resizables.scss";
+@import "buttons.scss";
 @import "badges.scss";
-@import "panels.scss";
+@import "panels.scss";