Skip to content

Commit

Permalink
collapsibles refactor to use native details summary components (#1960)
Browse files Browse the repository at this point in the history
  • Loading branch information
@JMach1
JMach1 authored Sep 28, 2022
1 parent f4ad331 commit d812a1e
Show file tree
Hide file tree
Showing 8 changed files with 577 additions and 645 deletions.
148 changes: 72 additions & 76 deletions src/components/operations/operation-details/ko/runtime/authorization.html
View file
Original file line number Diff line number Diff line change
@@ -1,94 +1,90 @@
<!-- ko if: $component.authorizationServer() || $component.subscriptionKeyRequired() -->
<h3 class="pt-0">Authorization
<button aria-label="Collapse authorization" class="no-border" data-bind="activate: $component.collapseAuth">
<!-- ko if: $component.collapsedAuth -->
<i class="icon-emb icon-emb-chevron-down"></i>
<!-- /ko -->
<!-- ko ifnot: $component.collapsedAuth -->
<i class="icon-emb icon-emb-chevron-up"></i>
<!-- /ko -->
</button>
</h3>
<details open class="details-styled">
<summary>
<h3 class="pt-0">
Authorization
<i class="icon-emb icon-emb-chevron-down"></i>
</h3>
</summary>

<!-- ko ifnot: $component.collapsedAuth -->
<!-- ko if: $component.authorizationServer -->
<div class="row flex flex-row">
<div class="col-4">
<label for="authServer" class="text-monospace form-label"
data-bind="text: $component.authorizationServer().displayName"></label>
</div>
<div class="col-7">
<div class="form-group">
<select id="authServer" class="form-control"
data-bind="options: $component.authorizationServer().grantTypes, value: $component.selectedGrantType, optionsCaption: 'No auth'">
</select>
<!-- ko if: $component.authorizationServer -->
<div class="row flex flex-row">
<div class="col-4">
<label for="authServer" class="text-monospace form-label"
data-bind="text: $component.authorizationServer().displayName"></label>
</div>
</div>
</div>
<!-- ko if: $component.selectedGrantType() === 'password' && !$component.authenticated() -->
<div class="row flex flex-row">
<div class="col-4">
<label for="username" class="text-monospace form-label">Username</label>
</div>
<div class="col-7">
<div class="form-group">
<input type="text" id="username" class="form-control" data-bind="textInput: $component.username" />
<div class="col-7">
<div class="form-group">
<select id="authServer" class="form-control"
data-bind="options: $component.authorizationServer().grantTypes, value: $component.selectedGrantType, optionsCaption: 'No auth'">
</select>
</div>
</div>
</div>
</div>
<div class="row flex flex-row">
<div class="col-4">
<label for="password" class="text-monospace form-label">Password</label>
</div>
<div class="col-7">
<div class="form-group">
<input type="password" id="password" class="form-control" data-bind="textInput: $component.password" />
<span class="invalid-feedback" data-bind="text: $component.authorizationError"></span>
<!-- ko if: $component.selectedGrantType() === 'password' && !$component.authenticated() -->
<div class="row flex flex-row">
<div class="col-4">
<label for="username" class="text-monospace form-label">Username</label>
</div>
<div class="col-7">
<div class="form-group">
<input type="text" id="username" class="form-control" data-bind="textInput: $component.username" />
</div>
</div>
</div>
</div>
<div class="row flex flex-row">
<div class="col-4">
<div class="row flex flex-row">
<div class="col-4">
<label for="password" class="text-monospace form-label">Password</label>
</div>
<div class="col-7">
<div class="form-group">
<input type="password" id="password" class="form-control" data-bind="textInput: $component.password" />
<span class="invalid-feedback" data-bind="text: $component.authorizationError"></span>
</div>
</div>
</div>
<div class="col-7">
<div class="form-group">
<button class="button button-primary"
data-bind="click: $component.authenticateOAuthWithPassword">Authorize</button>
<div class="row flex flex-row">
<div class="col-4">
</div>
<div class="col-7">
<div class="form-group">
<button class="button button-primary"
data-bind="click: $component.authenticateOAuthWithPassword">Authorize</button>
</div>
</div>
</div>
</div>
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->



<!-- ko if: $component.subscriptionKeyRequired -->
<div class="row flex flex-row">
<div class="col-4">
<label for="subscriptionKey" class="text-monospace form-label">
Subscription key
</label>
</div>
<div class="col-7">
<div class="form-group">
<!-- ko if: $component.products() && $component.products().length > 0 -->
<select id="subscriptionKey" class="form-control" data-bind="value: $component.selectedSubscriptionKey">
<!-- ko foreach: { data: $component.products, as: 'product' } -->
<optgroup data-bind="attr: { label: product.name }">
<!-- ko foreach: { data: product.subscriptionKeys, as: 'subscriptionKey' } -->
<option data-bind="value: subscriptionKey.value, text: subscriptionKey.name"></option>
<!-- ko if: $component.subscriptionKeyRequired -->
<div class="row flex flex-row">
<div class="col-4">
<label for="subscriptionKey" class="text-monospace form-label">
Subscription key
</label>
</div>
<div class="col-7">
<div class="form-group">
<!-- ko if: $component.products() && $component.products().length > 0 -->
<select id="subscriptionKey" class="form-control" data-bind="value: $component.selectedSubscriptionKey">
<!-- ko foreach: { data: $component.products, as: 'product' } -->
<optgroup data-bind="attr: { label: product.name }">
<!-- ko foreach: { data: product.subscriptionKeys, as: 'subscriptionKey' } -->
<option data-bind="value: subscriptionKey.value, text: subscriptionKey.name"></option>
<!-- /ko -->
</optgroup>
<!-- /ko -->
</optgroup>
</select>
<!-- /ko -->
<!-- ko if: !$component.products() || $component.products().length === 0 -->
<input id="subscriptionKey" type="text" class="form-control" placeholder="subscription key"
data-bind="textInput: $component.selectedSubscriptionKey" />
<!-- /ko -->
</select>
<!-- /ko -->
<!-- ko if: !$component.products() || $component.products().length === 0 -->
<input id="subscriptionKey" type="text" class="form-control" placeholder="subscription key"
data-bind="textInput: $component.selectedSubscriptionKey" />
<!-- /ko -->
</div>
</div>
</div>
</div>
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
</details>
<!-- /ko -->
6 changes: 0 additions & 6 deletions src/components/operations/operation-details/ko/runtime/authorization.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ export class Authorization {
public readonly authorizationError: ko.Observable<string>;
public readonly products: ko.Observable<Product[]>;
public readonly selectedSubscriptionKey: ko.Observable<string>;
public readonly collapsedAuth: ko.Observable<boolean>;
private deleteAuthorizationHeader: boolean = false;

constructor(
Expand All @@ -45,7 +44,6 @@ export class Authorization {
private readonly apiService: ApiService,
private readonly productService: ProductService,
) {
this.collapsedAuth = ko.observable(false);
this.authorizationServer = ko.observable();
this.selectedGrantType = ko.observable();
this.api = ko.observable<Api>();
Expand Down Expand Up @@ -456,8 +454,4 @@ export class Authorization {
this.updateRequestSummary();
}
}

public collapseAuth(): void {
this.collapsedAuth(!this.collapsedAuth());
}
}
Loading

0 comments on commit d812a1e

Please sign in to comment.