Skip to content

Commit 4f22c60

Browse files
mrin9mrin9
committed
fixed api-key-value not considered in security scheme component
1 parent 4e6417c commit 4f22c60

File tree

5 files changed

+43
-28
lines changed

5 files changed

+43
-28
lines changed

‎src/components/api-request.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@ export default class ApiRequest extends LitElement {
266266

267267
let mimeReqCount = 0;
268268
const shortMimeTypes = {};
269-
const bodyDescrHtml = this.request_body.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(this.request_body.description || ''))}</div>` : '';
269+
const bodyDescrHtml = this.request_body.description ? html`<div class="m-markdown">${unsafeHTML(marked(this.request_body.description || ''))}</div>` : '';
270270
let textareaExampleHtml;
271271
let formDataHtml = '';
272272
const formDataTableRows = [];
@@ -554,7 +554,6 @@ export default class ApiRequest extends LitElement {
554554

555555
fetchUrl = me.path;
556556
const fetchOptions = {
557-
mode: 'cors',
558557
method: this.method.toUpperCase(),
559558
headers: {},
560559
};

‎src/components/security-schemes.js‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,14 @@ import InputStyles from '@/styles/input-styles';
88

99

1010
export default class SecuritySchemes extends LitElement {
11+
static get properties() {
12+
return {
13+
schemes: { type: Object },
14+
selectedApiKeyName: { type: String, attribute: 'selected-api-key-name' },
15+
selectedApiKeyValue: { type: String, attribute: 'selected-api-key-value' },
16+
};
17+
}
18+
1119
/* eslint-disable indent */
1220
render() {
1321
if (Object.keys(this.schemes).length === 0) {
@@ -28,7 +36,7 @@ export default class SecuritySchemes extends LitElement {
2836
<table class="m-table">
2937
<tr>
3038
<th >Type </th>
31-
<th> Authentication Procedure </th>
39+
<th> Authentication Procedure</th>
3240
</tr>
3341
3442
${Object.keys(this.schemes).map((s) => html`
@@ -55,7 +63,14 @@ export default class SecuritySchemes extends LitElement {
5563
data-inputname="${s}"
5664
style="margin:5px 0" spellcheck="false"
5765
>
58-
<input type="text" name="${s}-token" style="width:202px;" placeholder="api-token" >
66+
<input
67+
type = "text"
68+
name = "${s}-token"
69+
value = "${this.selectedApiKeyValue}"
70+
style = "width:200px;"
71+
placeholder = "api-token"
72+
spellcheck = "false"
73+
>
5974
<button class="m-btn" name="${s}-button" data-class="${s}-class"
6075
data-action="${this.selectedApiKeyValue ? 'CLEAR' : 'SET'}"
6176
@click="${this.dispatchChange}"
@@ -84,7 +99,14 @@ export default class SecuritySchemes extends LitElement {
8499
? html`
85100
Send <code>'Authorization'</code> in header which will contains the word <code>'Bearer'</code> followed by a space and a Token String.
86101
<div class="${s}-class" data-type="${this.schemes[s].type}" data-scheme="${this.schemes[s].scheme}" data-in="header" data-name="Authorization" data-inputname="${s}" style="margin:15px 0">
87-
<input type="text" name="${s}-bearer-token" style="width:202px;" placeholder="bearer-token" spellcheck="false" >
102+
<input
103+
type = "text"
104+
name = "${s}-bearer-token"
105+
value = "${this.selectedApiKeyValue}"
106+
style = "width:202px;"
107+
placeholder = "bearer-token"
108+
spellcheck = "false"
109+
>
88110
<button class="m-btn" name="${s}-button" data-class="${s}-class"
89111
data-action="${this.selectedApiKeyValue ? 'CLEAR' : 'SET'}"
90112
@click="${this.dispatchChange}"
@@ -125,14 +147,6 @@ export default class SecuritySchemes extends LitElement {
125147
}
126148
/* eslint-enable indent */
127149

128-
static get properties() {
129-
return {
130-
schemes: { type: Object },
131-
selectedApiKeyName: { type: String, attribute: 'selected-api-key-name' },
132-
selectedApiKeyValue: { type: String, attribute: 'selected-api-key-value' },
133-
};
134-
}
135-
136150
dispatchChange(e) {
137151
const apiEl = e.target.closest(`.${e.target.dataset.class}`);
138152
if (!apiEl) {

‎src/rapidoc.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,8 +120,8 @@ export default class RapiDoc extends LitElement {
120120
${InputStyles}
121121
${FlexStyles}
122122
${TableStyles}
123-
124123
${this.theme === 'dark' ? SetTheme('dark', newTheme) : SetTheme('light', newTheme)}
124+
125125
<style>
126126
:host {
127127
--layout:${this.layout ? `${this.layout}` : 'row'};
@@ -146,6 +146,7 @@ export default class RapiDoc extends LitElement {
146146
background-color:var(--bg);
147147
font-family:var(--font-regular);
148148
}
149+
::selection { background: var(--bg3); }
149150
.body {
150151
display:flex;
151152
height:100%;
@@ -716,6 +717,7 @@ export default class RapiDoc extends LitElement {
716717
// Public Method
717718
updateTheme(baseTheme, objTheme = {}) {
718719
SetTheme(baseTheme, objTheme);
720+
this.render();
719721
}
720722

721723
// Public Method

‎src/styles/font-styles.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { html } from 'lit-element';
22

33
export default html`
44
<style>
5+
::selection { background: var(--bg3); }
56
.regular-font{ font-family:var(--font-regular); }
67
.mono-font{ font-family:var(--font-mono); }
78
.title{ font-size: 30px;font-weight:normal }
@@ -91,7 +92,7 @@ export default html`
9192
background-color: var(--bg3);
9293
padding: 1px 6px;
9394
border-radius: 2px;
94-
color: var(--green);
95+
color: var(--red);
9596
font-size: calc(var(--font-size-mono) - 1px);
9697
line-height: var(--font-mono-line-height);
9798
}

‎src/utils/theme.js‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,15 @@ import ColorUtils from '@/utils/color-utils';
55
export default function setTheme(baseTheme, theme = {}) {
66
let newTheme = {};
77
const primaryColor = theme.primaryColor ? theme.primaryColor : '#FF791A';
8-
const primaryColorInvert = ColorUtils.color.invert(primaryColor);
9-
108
if (baseTheme === 'dark') {
119
const bg1 = theme.bg1 ? theme.bg1 : '#333';
1210
const fg1 = theme.fg1 ? theme.fg1 : '#bbb';
1311

1412
const bg2 = theme.bg2 ? theme.bg2 : ColorUtils.color.brightness(bg1, 5); // or #383838;
15-
const bg3 = theme.bg3 ? theme.bg3 : ColorUtils.color.brightness(bg1, 10); // or #444;
16-
const fg2 = theme.fg2 ? theme.fg2 : ColorUtils.color.brightness(fg1, -5); // or #ababab
17-
const fg3 = theme.fg3 ? theme.fg3 : ColorUtils.color.brightness(fg1, -10); // or #aaa
18-
const lightFg = theme.fg3 ? theme.fg3 : ColorUtils.color.brightness(fg1, -30); // or #777
13+
const bg3 = theme.bg3 ? theme.bg3 : ColorUtils.color.brightness(bg1, 15); // or #444;
14+
const fg2 = theme.fg2 ? theme.fg2 : ColorUtils.color.brightness(fg1, -15); // or #ababab
15+
const fg3 = theme.fg3 ? theme.fg3 : ColorUtils.color.brightness(fg1, -20); // or #aaa
16+
const lightFg = theme.fg3 ? theme.fg3 : ColorUtils.color.brightness(fg1, -80); // or #777
1917
const headerColor = theme.headerColor ? theme.headerColor : ColorUtils.color.brightness(bg1, 10);
2018

2119
const navBgColor = theme.navBgColor ? theme.navBgColor : ColorUtils.color.brightness(bg1, 10);
@@ -32,6 +30,7 @@ export default function setTheme(baseTheme, theme = {}) {
3230
fg2,
3331
fg3,
3432
lightFg,
33+
primaryColor,
3534

3635
navBgColor,
3736
navTextColor,
@@ -78,11 +77,11 @@ export default function setTheme(baseTheme, theme = {}) {
7877
const fg1 = theme.fg1 ? theme.fg1 : '#444';
7978

8079
const bg2 = theme.bg2 ? theme.bg2 : ColorUtils.color.brightness(bg1, -5); // or '#fafafa'
81-
const bg3 = theme.bg3 ? theme.bg3 : ColorUtils.color.brightness(bg2, -10); // or '#f6f6f6'
80+
const bg3 = theme.bg3 ? theme.bg3 : ColorUtils.color.brightness(bg1, -15); // or '#f6f6f6'
8281

83-
const fg2 = theme.fg2 ? theme.fg2 : ColorUtils.color.brightness(fg1, 5); // or '#555'
84-
const fg3 = theme.fg3 ? theme.fg3 : ColorUtils.color.brightness(fg1, 10); // or #666
85-
const lightFg = theme.fg3 ? theme.fg3 : ColorUtils.color.brightness(fg1, 30); // or #999
82+
const fg2 = theme.fg2 ? theme.fg2 : ColorUtils.color.brightness(fg1, 17); // or '#555'
83+
const fg3 = theme.fg3 ? theme.fg3 : ColorUtils.color.brightness(fg1, 30); // or #666
84+
const lightFg = theme.fg3 ? theme.fg3 : ColorUtils.color.brightness(fg1, 80); // or #999
8685
const headerColor = theme.headerColor ? theme.headerColor : ColorUtils.color.brightness(bg1, -180);
8786

8887
const navBgColor = theme.navBgColor ? theme.navBgColor : ColorUtils.color.brightness(bg1, -10);
@@ -99,6 +98,7 @@ export default function setTheme(baseTheme, theme = {}) {
9998
fg2,
10099
fg3,
101100
lightFg,
101+
primaryColor,
102102

103103
navBgColor,
104104
navTextColor,
@@ -189,9 +189,8 @@ export default function setTheme(baseTheme, theme = {}) {
189189
--nav-accent-color:${newTheme.navAccentColor};
190190
191191
/* Primary Colors */
192-
--primary-color:${primaryColor};
193-
--primary-color-invert:${primaryColorInvert};
194-
192+
--primary-color:${newTheme.primaryColor};
193+
--primary-color-invert:${ColorUtils.color.invert(newTheme.primaryColor)};
195194
}
196195
</style>`;
197196
}

0 commit comments

Comments
 (0)