Skip to content

Commit 1f9846a

Browse files
FerticidioFerticidio
authored
@W-21859986 improve login modal (#13)
* WIP @W-21859986 Redesign auth modal to match Figma and design system * @W-21859986 Add tabbed auth methods, rename to Context Variables, fix split button bg * @W-21859986 Replace hard-coded values with design system tokens in auth modal
1 parent 01a2680 commit 1f9846a

3 files changed

Lines changed: 118 additions & 95 deletions

File tree

‎scripts/portal_generator/assets/portal.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1647,6 +1647,16 @@ function closeAuthModal() {
16471647
if (modal._previousFocus) modal._previousFocus.focus();
16481648
}
16491649

1650+
function switchAuthTab(tab) {
1651+
var tabs = document.querySelectorAll('.auth-tab');
1652+
var panels = document.querySelectorAll('.auth-tab-content');
1653+
tabs.forEach(function(t) { t.classList.toggle('active', t.getAttribute('data-tab') === tab); });
1654+
panels.forEach(function(p) { p.classList.remove('active'); });
1655+
var targetId = tab === 'bearer' ? 'authTabBearer' : 'authTabOauth2';
1656+
var target = document.getElementById(targetId);
1657+
if (target) target.classList.add('active');
1658+
}
1659+
16501660
function isTokenExpired() {
16511661
var token = sessionStorage.getItem('anypoint_token');
16521662
if (!token) return true;
@@ -1848,7 +1858,7 @@ async function loginOAuth2() {
18481858
var clientId = document.getElementById('authClientId').value.trim();
18491859
var clientSecret = document.getElementById('authClientSecret').value.trim();
18501860
if (!clientId || !clientSecret) {
1851-
showAuthMessage('Please enter Client ID and Client Secret.', true);
1861+
showAuthMessage('Please enter Client Id and Client Secret.', true);
18521862
return;
18531863
}
18541864
var serverBase = getSelectedBaseUrl();

‎scripts/portal_generator/assets/styles.css‎

Lines changed: 72 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3611,7 +3611,7 @@ details[open] .examples-toggle-icon {
36113611
font-family: var(--font-sans);
36123612
font-weight: var(--font-weight-normal);
36133613
color: #3289CE;
3614-
background: var(--color-bg-primary);
3614+
background: var(--color-bg-surface);
36153615
border: 1px solid var(--color-slate);
36163616
border-right: none;
36173617
border-radius: var(--radius-xl) 0 0 16px;
@@ -4895,8 +4895,8 @@ details[open] .examples-toggle-icon {
48954895

48964896
.auth-modal-content {
48974897
position: relative;
4898-
background: var(--color-neutral-1);
4899-
border-radius: var(--radius-large);
4898+
background: var(--color-bg-surface);
4899+
border-radius: var(--radius-xl);
49004900
width: 700px;
49014901
max-width: 95vw;
49024902
max-height: 90vh;
@@ -4910,20 +4910,19 @@ details[open] .examples-toggle-icon {
49104910
display: flex;
49114911
align-items: center;
49124912
justify-content: space-between;
4913-
padding: var(--space-large);
4914-
border-bottom: 1px solid var(--color-neutral-4);
4913+
padding: var(--space-x-large) var(--space-x-large) var(--space-medium);
49154914
}
49164915

49174916
.auth-modal-header h3 {
49184917
margin: 0;
49194918
font-family: var(--font-sans);
4920-
font-size: var(--font-size-6);
4921-
font-weight: var(--font-weight-semibold);
4922-
color: var(--color-neutral-10);
4919+
font-size: var(--font-size-8);
4920+
font-weight: var(--font-weight-regular);
4921+
color: var(--color-text-primary);
49234922
}
49244923

49254924
.auth-modal-body {
4926-
padding: var(--space-large);
4925+
padding: var(--space-medium) var(--space-x-large) var(--space-x-large);
49274926
overflow-y: auto;
49284927
}
49294928

@@ -4934,29 +4933,22 @@ details[open] .examples-toggle-icon {
49344933

49354934
.auth-section h4 {
49364935
font-size: var(--font-size-4);
4937-
font-weight: var(--font-weight-semibold);
4938-
color: var(--color-neutral-10);
4936+
font-weight: var(--font-weight-regular);
4937+
color: var(--color-text-primary);
49394938
margin-bottom: var(--space-small);
49404939
text-transform: uppercase;
49414940
letter-spacing: 0.05em;
49424941
}
49434942

4944-
.server-config {
4945-
background: var(--color-neutral-2);
4946-
border: 1px solid var(--color-neutral-4);
4947-
border-radius: var(--radius-medium);
4948-
padding: var(--space-medium);
4949-
}
4950-
49514943
.server-select {
49524944
width: 100%;
4953-
padding: var(--space-small);
4954-
border: 1px solid var(--color-neutral-5);
4955-
border-radius: var(--radius-small);
4956-
background: var(--color-neutral-1);
4945+
padding: var(--space-small) var(--space-medium);
4946+
border: 1px solid var(--color-border-primary);
4947+
border-radius: var(--radius-medium);
4948+
background: var(--color-bg-surface);
49574949
font-family: var(--font-sans);
49584950
font-size: var(--font-size-4);
4959-
color: var(--color-neutral-10);
4951+
color: var(--color-text-primary);
49604952
cursor: pointer;
49614953
}
49624954

@@ -5005,25 +4997,49 @@ details[open] .examples-toggle-icon {
50054997
padding: 0 var(--space-medium);
50064998
}
50074999

5008-
.auth-methods {
5000+
/* Auth method tabs */
5001+
.auth-tabs {
50095002
display: flex;
5010-
gap: var(--space-large);
5011-
align-items: stretch;
5003+
gap: var(--space-x-small);
5004+
margin-bottom: var(--space-large);
5005+
border-bottom: 1px solid var(--color-border-primary);
5006+
padding-bottom: var(--space-x-small);
50125007
}
50135008

5014-
.auth-method {
5009+
.auth-tab {
50155010
flex: 1;
5016-
display: flex;
5017-
flex-direction: column;
5018-
background: var(--color-neutral-2);
5019-
border: 1px solid var(--color-neutral-4);
5020-
border-radius: var(--radius-medium);
5021-
padding: var(--space-medium);
5011+
display: inline-flex;
5012+
align-items: center;
5013+
justify-content: center;
5014+
padding: var(--space-x-small) var(--space-medium);
5015+
background: transparent;
5016+
border: none;
5017+
border-radius: 20px;
5018+
font-family: var(--font-sans);
5019+
font-size: var(--font-size-4);
5020+
font-weight: var(--font-weight-medium);
5021+
color: var(--color-text-secondary);
5022+
cursor: pointer;
5023+
transition: all 0.2s ease;
50225024
}
50235025

5024-
.auth-method h4 {
5025-
margin-top: 0;
5026-
margin-bottom: var(--space-small);
5026+
.auth-tab:hover {
5027+
background: var(--hover-bg);
5028+
}
5029+
5030+
.auth-tab.active {
5031+
background: var(--selected-bg);
5032+
color: var(--color-text-primary);
5033+
font-weight: var(--font-weight-semibold);
5034+
}
5035+
5036+
/* Auth tab content panels */
5037+
.auth-tab-content {
5038+
display: none;
5039+
}
5040+
5041+
.auth-tab-content.active {
5042+
display: block;
50275043
}
50285044

50295045
.auth-divider-vertical {
@@ -5052,27 +5068,31 @@ details[open] .examples-toggle-icon {
50525068
.auth-form {
50535069
display: flex;
50545070
flex-direction: column;
5055-
gap: var(--space-small);
5071+
gap: var(--space-medium);
50565072
flex: 1;
50575073
}
50585074

50595075
.auth-form input {
5060-
padding: var(--space-small);
5061-
border: 1px solid var(--color-neutral-5);
5062-
border-radius: var(--radius-small);
5076+
padding: var(--space-small) var(--space-medium);
5077+
border: 1px solid var(--color-border-primary);
5078+
border-radius: var(--radius-medium);
50635079
font-size: var(--font-size-4);
5080+
background: var(--color-bg-surface);
5081+
color: var(--color-text-primary);
50645082
}
50655083

50665084
.btn-auth-login {
50675085
margin-top: auto;
5068-
padding: var(--space-small);
5086+
padding: var(--space-small) var(--space-x-large);
50695087
background: var(--color-primary);
50705088
color: var(--color-white);
50715089
border: none;
5072-
border-radius: var(--radius-small);
5090+
border-radius: var(--radius-xxxl);
5091+
font-size: var(--font-size-4);
50735092
font-weight: var(--font-weight-semibold);
50745093
cursor: pointer;
50755094
transition: background 0.2s;
5095+
align-self: flex-end;
50765096
}
50775097

50785098
.btn-auth-login:hover {
@@ -5104,9 +5124,9 @@ details[open] .examples-toggle-icon {
51045124
============================================================================ */
51055125

51065126
.env-vars-section {
5107-
margin-top: var(--space-medium);
5127+
margin-top: var(--space-large);
51085128
padding-top: var(--space-medium);
5109-
border-top: 1px solid var(--color-neutral-4);
5129+
border-top: 1px solid var(--color-border-primary);
51105130
}
51115131

51125132
.env-vars-header {
@@ -5119,18 +5139,18 @@ details[open] .examples-toggle-icon {
51195139
.env-vars-header h4 {
51205140
margin: 0;
51215141
font-family: var(--font-sans);
5122-
font-size: var(--font-size-4);
5123-
font-weight: var(--font-weight-semibold);
5124-
color: var(--color-neutral-10);
5142+
font-size: var(--font-size-5);
5143+
font-weight: var(--font-weight-regular);
5144+
color: var(--color-text-primary);
51255145
}
51265146

51275147
.btn-env-add {
5128-
padding: var(--space-xx-small) var(--space-small);
5129-
background: var(--color-neutral-1);
5130-
border: 1px solid var(--color-neutral-5);
5131-
border-radius: var(--radius-small);
5148+
padding: var(--space-small) var(--space-x-large);
5149+
background: transparent;
5150+
border: 1px solid var(--color-border-primary);
5151+
border-radius: var(--radius-xxxl);
51325152
font-family: var(--font-sans);
5133-
font-size: var(--font-size-2);
5153+
font-size: var(--font-size-4);
51345154
color: var(--color-primary);
51355155
font-weight: var(--font-weight-medium);
51365156
cursor: pointer;
@@ -6366,14 +6386,6 @@ details[open] .examples-toggle-icon {
63666386

63676387

63686388
@media (max-width: 768px) {
6369-
.auth-methods {
6370-
flex-direction: column;
6371-
}
6372-
6373-
.auth-divider {
6374-
padding-top: 0;
6375-
}
6376-
63776389
.skill-toolbar-actions {
63786390
flex-direction: column;
63796391
}

‎scripts/portal_generator/templates/partials/auth_panel.html‎

Lines changed: 35 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -44,56 +44,57 @@ <h1 class="api-title"><a href="#overview" class="api-title-link">{{ api_name }}<
4444
<div class="auth-modal-overlay" onclick="closeAuthModal()"></div>
4545
<div class="auth-modal-content">
4646
<div class="auth-modal-header">
47-
<h3 id="authModalTitle">Authentication & Context</h3>
47+
<h3 id="authModalTitle">Authentication and Context</h3>
4848
<button class="btn-close-modal" onclick="closeAuthModal()" aria-label="Close modal">✕</button>
4949
</div>
5050
<div class="auth-modal-body" id="authPanelBody">
5151
<!-- Server Selection Section -->
5252
<div class="auth-section server-section">
5353
<h4>Server</h4>
54-
<div class="server-config">
55-
<div class="server-select-wrapper">
56-
<select id="serverSelect" onchange="onServerChange()" class="server-select" aria-label="Select Anypoint Platform Server">
57-
<option value="us">anypoint.mulesoft.com (US)</option>
58-
<option value="eu">eu1.anypoint.mulesoft.com (EU)</option>
59-
<option value="platform">Regional (platform.mulesoft.com)</option>
60-
</select>
61-
</div>
62-
<div class="server-region-row" id="serverRegionRow" style="display:none">
63-
<select id="regionPreset" onchange="onRegionPresetChange()" class="server-select region-preset-select" aria-label="Select region">
64-
<option value="ca1">Canada (ca1)</option>
65-
<option value="custom">Custom</option>
66-
</select>
67-
<input type="text" id="regionCustomInput" class="server-var-input" placeholder="e.g. ca1" style="display:none" aria-label="Custom region">
68-
</div>
54+
<div class="server-select-wrapper">
55+
<select id="serverSelect" onchange="onServerChange()" class="server-select" aria-label="Select Anypoint Platform Server">
56+
<option value="us">anypoint.mulesoft.com (US)</option>
57+
<option value="eu">eu1.anypoint.mulesoft.com (EU)</option>
58+
<option value="platform">Regional (platform.mulesoft.com)</option>
59+
</select>
60+
</div>
61+
<div class="server-region-row" id="serverRegionRow" style="display:none">
62+
<select id="regionPreset" onchange="onRegionPresetChange()" class="server-select region-preset-select" aria-label="Select region">
63+
<option value="ca1">Canada (ca1)</option>
64+
<option value="custom">Custom</option>
65+
</select>
66+
<input type="text" id="regionCustomInput" class="server-var-input" placeholder="e.g. ca1" style="display:none" aria-label="Custom region">
6967
</div>
7068
</div>
7169

72-
<div class="auth-divider"><span>Authentication Methods</span></div>
70+
<div class="auth-tabs">
71+
<button class="auth-tab active" data-tab="bearer" onclick="switchAuthTab('bearer')">
72+
Bearer Token (User)
73+
</button>
74+
<button class="auth-tab" data-tab="oauth2" onclick="switchAuthTab('oauth2')">
75+
OAuth2 (Client)
76+
</button>
77+
</div>
7378

74-
<div class="auth-methods">
75-
<div class="auth-method">
76-
<h4>Bearer Token (User)</h4>
77-
<div class="auth-form">
78-
<input id="authUsername" type="text" placeholder="Username" autocomplete="username" aria-label="Username">
79-
<input id="authPassword" type="password" placeholder="Password" autocomplete="current-password" aria-label="Password">
80-
<button class="btn-auth-login" onclick="loginBearer()">Login</button>
81-
</div>
79+
<div class="auth-tab-content active" id="authTabBearer">
80+
<div class="auth-form">
81+
<input id="authUsername" type="text" placeholder="Username" autocomplete="username" aria-label="Username">
82+
<input id="authPassword" type="password" placeholder="Password" autocomplete="current-password" aria-label="Password">
83+
<button class="btn-auth-login" onclick="loginBearer()">Login</button>
8284
</div>
83-
<div class="auth-divider-vertical"><span>OR</span></div>
84-
<div class="auth-method">
85-
<h4>OAuth2 (Client)</h4>
86-
<div class="auth-form">
87-
<input id="authClientId" type="text" placeholder="Client ID" aria-label="Client ID">
88-
<input id="authClientSecret" type="password" placeholder="Client Secret" aria-label="Client Secret">
89-
<button class="btn-auth-login" onclick="loginOAuth2()">Get Token</button>
90-
</div>
85+
</div>
86+
87+
<div class="auth-tab-content" id="authTabOauth2">
88+
<div class="auth-form">
89+
<input id="authClientId" type="text" placeholder="Client Id" aria-label="Client Id">
90+
<input id="authClientSecret" type="password" placeholder="Client Secret" aria-label="Client Secret">
91+
<button class="btn-auth-login" onclick="loginOAuth2()">Get Token</button>
9192
</div>
9293
</div>
9394

9495
<div class="env-vars-section">
9596
<div class="env-vars-header">
96-
<h4>Environment Variables</h4>
97+
<h4>Context Variables</h4>
9798
<button class="btn-env-add" onclick="addEnvVar()">+ Add Variable</button>
9899
</div>
99100
<div class="env-vars-list" id="envVarsList"></div>

0 commit comments

Comments
 (0)