@egain/egain-mcp-server 1.0.13 → 1.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/hooks/auth-pages/browser-error.html +217 -0
- package/src/hooks/auth-pages/config-page.html +519 -0
- package/src/hooks/auth-pages/safari-warning.html +84 -0
- package/src/hooks/img/accesstoken-tooltip.png +0 -0
- package/src/hooks/img/apidomain-tooltip.png +0 -0
- package/src/hooks/img/authurl-tooltip.png +0 -0
- package/src/hooks/img/clientid-tooltip.png +0 -0
- package/src/hooks/img/clientsecret-tooltip.png +0 -0
- package/src/hooks/img/env-tooltip.png +0 -0
- package/src/hooks/img/redirect-tooltip.png +0 -0
- package/src/hooks/img/scopeprefix-tooltip.png +0 -0
package/package.json
CHANGED
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Browser Monitoring Issue - eGain MCP</title>
|
|
7
|
+
<style>
|
|
8
|
+
* {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
body {
|
|
15
|
+
font-family: "Open Sans", "Segoe UI", "SegoeUI", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
|
|
16
|
+
background: #fef1fd;
|
|
17
|
+
min-height: 100vh;
|
|
18
|
+
display: flex;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
align-items: center;
|
|
21
|
+
padding: 20px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.container {
|
|
25
|
+
background: white;
|
|
26
|
+
border-radius: 16px;
|
|
27
|
+
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.12);
|
|
28
|
+
max-width: 600px;
|
|
29
|
+
width: 100%;
|
|
30
|
+
padding: 32px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.warning-icon {
|
|
34
|
+
font-size: 64px;
|
|
35
|
+
margin-bottom: 20px;
|
|
36
|
+
text-align: center;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
h1 {
|
|
40
|
+
color: #e74c3c;
|
|
41
|
+
font-size: 28px;
|
|
42
|
+
margin-bottom: 20px;
|
|
43
|
+
font-weight: 600;
|
|
44
|
+
text-align: center;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.error-details {
|
|
48
|
+
background: #fff0f6;
|
|
49
|
+
border-left: 4px solid #d946a6;
|
|
50
|
+
padding: 20px;
|
|
51
|
+
margin: 20px 0;
|
|
52
|
+
border-radius: 4px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.error-details strong {
|
|
56
|
+
color: #a21361;
|
|
57
|
+
display: block;
|
|
58
|
+
margin-bottom: 12px;
|
|
59
|
+
font-size: 16px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.error-details p {
|
|
63
|
+
color: #a21361;
|
|
64
|
+
font-size: 14px;
|
|
65
|
+
line-height: 1.6;
|
|
66
|
+
margin-bottom: 12px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.error-details ul {
|
|
70
|
+
color: #a21361;
|
|
71
|
+
font-size: 14px;
|
|
72
|
+
line-height: 1.8;
|
|
73
|
+
margin-left: 20px;
|
|
74
|
+
margin-top: 8px;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.solution {
|
|
78
|
+
background: #f0f9ff;
|
|
79
|
+
border-left: 4px solid #3b82f6;
|
|
80
|
+
padding: 20px;
|
|
81
|
+
margin: 20px 0;
|
|
82
|
+
border-radius: 4px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.solution strong {
|
|
86
|
+
color: #1e40af;
|
|
87
|
+
display: block;
|
|
88
|
+
margin-bottom: 12px;
|
|
89
|
+
font-size: 16px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.solution p {
|
|
93
|
+
color: #1e40af;
|
|
94
|
+
font-size: 14px;
|
|
95
|
+
line-height: 1.6;
|
|
96
|
+
margin-bottom: 12px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.solution ol {
|
|
100
|
+
color: #1e40af;
|
|
101
|
+
font-size: 14px;
|
|
102
|
+
line-height: 1.8;
|
|
103
|
+
margin-left: 20px;
|
|
104
|
+
margin-top: 8px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.button-group {
|
|
108
|
+
display: flex;
|
|
109
|
+
gap: 10px;
|
|
110
|
+
margin-top: 30px;
|
|
111
|
+
justify-content: center;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
button {
|
|
115
|
+
padding: 12px 24px;
|
|
116
|
+
border: 2px solid transparent;
|
|
117
|
+
border-radius: 8px;
|
|
118
|
+
font-size: 15px;
|
|
119
|
+
font-weight: 600;
|
|
120
|
+
cursor: pointer;
|
|
121
|
+
transition: all 0.2s;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.btn-primary {
|
|
125
|
+
background: linear-gradient(135deg, #b91d8f 0%, #7a1460 100%);
|
|
126
|
+
color: white;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.btn-primary:hover {
|
|
130
|
+
transform: translateY(-2px);
|
|
131
|
+
box-shadow: 0 6px 20px rgba(185, 29, 143, 0.4);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.btn-secondary {
|
|
135
|
+
background: #f6f8fa;
|
|
136
|
+
color: #666;
|
|
137
|
+
border: 2px solid #e1e4e8;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.btn-secondary:hover {
|
|
141
|
+
background: #e1e4e8;
|
|
142
|
+
}
|
|
143
|
+
</style>
|
|
144
|
+
</head>
|
|
145
|
+
<body>
|
|
146
|
+
<div class="container">
|
|
147
|
+
<div class="warning-icon">⚠️</div>
|
|
148
|
+
<h1>Browser Monitoring Issue</h1>
|
|
149
|
+
|
|
150
|
+
<div class="error-details">
|
|
151
|
+
<strong>What happened?</strong>
|
|
152
|
+
<p id="errorMessage">We're having trouble reading the current page URL from your browser. This prevents us from detecting when authentication completes.</p>
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
<div class="solution" id="chromeSolution" style="display: none;">
|
|
156
|
+
<strong>Solution for Chrome:</strong>
|
|
157
|
+
<ol>
|
|
158
|
+
<li><strong>Fully quit Chrome</strong> (not just close windows):
|
|
159
|
+
<ul>
|
|
160
|
+
<li>macOS: Chrome menu → Quit Chrome, or press <code>Cmd+Q</code></li>
|
|
161
|
+
<li>Windows: Right-click Chrome in taskbar → Close window, or press <code>Alt+F4</code></li>
|
|
162
|
+
</ul>
|
|
163
|
+
</li>
|
|
164
|
+
<li>Wait a few seconds for Chrome to fully close</li>
|
|
165
|
+
<li>Reopen Chrome</li>
|
|
166
|
+
<li>Click "Try Again" below to restart authentication</li>
|
|
167
|
+
</ol>
|
|
168
|
+
<p style="margin-top: 12px; font-size: 13px; color: #666;">
|
|
169
|
+
<strong>Why?</strong> Chrome sometimes enters a state where it reports "about:blank" instead of the actual page URL. Restarting Chrome resolves this.
|
|
170
|
+
</p>
|
|
171
|
+
</div>
|
|
172
|
+
|
|
173
|
+
<div class="solution" id="firefoxSolution" style="display: none;">
|
|
174
|
+
<strong>Firefox Not Supported:</strong>
|
|
175
|
+
<p style="margin-bottom: 12px;">
|
|
176
|
+
Firefox does not support AppleScript automation for reading page URLs, which is required to detect when authentication completes. <strong>Firefox cannot be used for authentication with this MCP server.</strong>
|
|
177
|
+
</p>
|
|
178
|
+
<ol>
|
|
179
|
+
<li><strong>Please use Chrome, Edge, or Brave instead</strong></li>
|
|
180
|
+
<li><strong>Close this Firefox window</strong></li>
|
|
181
|
+
<li><strong>Restart authentication</strong> - The MCP server will detect a supported browser</li>
|
|
182
|
+
</ol>
|
|
183
|
+
<p style="margin-top: 12px; font-size: 13px; color: #666;">
|
|
184
|
+
<strong>Why?</strong> The OAuth redirect goes to an external URL (not localhost). The MCP server needs to monitor the browser URL to detect when the authorization code appears. Firefox doesn't support this automation, so authentication cannot complete.
|
|
185
|
+
</p>
|
|
186
|
+
</div>
|
|
187
|
+
|
|
188
|
+
<div class="button-group">
|
|
189
|
+
<button class="btn-secondary" onclick="window.close()">Close</button>
|
|
190
|
+
<button class="btn-primary" onclick="retryAuthentication()">Try Again</button>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
|
|
194
|
+
<script>
|
|
195
|
+
// Detect browser and show appropriate solution
|
|
196
|
+
const userAgent = navigator.userAgent.toLowerCase();
|
|
197
|
+
const errorType = new URLSearchParams(window.location.search).get('type') || 'unknown';
|
|
198
|
+
const browserName = new URLSearchParams(window.location.search).get('browser') || '';
|
|
199
|
+
|
|
200
|
+
if (errorType === 'aboutblank' || (browserName.toLowerCase().includes('chrome') && errorType !== 'monitoring')) {
|
|
201
|
+
document.getElementById('chromeSolution').style.display = 'block';
|
|
202
|
+
document.getElementById('errorMessage').textContent =
|
|
203
|
+
'Chrome is reporting "about:blank" instead of the actual page URL. This prevents us from detecting when authentication completes.';
|
|
204
|
+
} else if (browserName.toLowerCase().includes('firefox') || errorType === 'monitoring') {
|
|
205
|
+
document.getElementById('firefoxSolution').style.display = 'block';
|
|
206
|
+
document.getElementById('errorMessage').textContent =
|
|
207
|
+
'We cannot read the current page URL from your browser. This is usually due to missing macOS Automation permissions or a browser compatibility issue.';
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
function retryAuthentication() {
|
|
211
|
+
// Redirect back to config page to restart authentication
|
|
212
|
+
window.location.href = '/config';
|
|
213
|
+
}
|
|
214
|
+
</script>
|
|
215
|
+
</body>
|
|
216
|
+
</html>
|
|
217
|
+
|
|
@@ -0,0 +1,519 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>eGain MCP - Sign In</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
+
body {
|
|
10
|
+
font-family: "Open Sans", "Segoe UI", "SegoeUI", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
|
|
11
|
+
background: #fef1fd;
|
|
12
|
+
min-height: 100vh;
|
|
13
|
+
display: flex;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
align-items: center;
|
|
16
|
+
padding: 20px;
|
|
17
|
+
}
|
|
18
|
+
.container {
|
|
19
|
+
background: white;
|
|
20
|
+
border-radius: 16px;
|
|
21
|
+
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.12);
|
|
22
|
+
max-width: 500px;
|
|
23
|
+
width: 100%;
|
|
24
|
+
padding: 32px;
|
|
25
|
+
}
|
|
26
|
+
h1 { color: #333; margin-bottom: 8px; font-size: 24px; }
|
|
27
|
+
.subtitle { color: #666; margin-bottom: 20px; font-size: 13px; }
|
|
28
|
+
.quick-signin {
|
|
29
|
+
display: none;
|
|
30
|
+
text-align: center;
|
|
31
|
+
position: relative;
|
|
32
|
+
}
|
|
33
|
+
.quick-signin .icon { font-size: 64px; }
|
|
34
|
+
.quick-signin h1 { text-align: center; }
|
|
35
|
+
.saved-config {
|
|
36
|
+
background: #f8f9fa;
|
|
37
|
+
border-radius: 8px;
|
|
38
|
+
padding: 20px;
|
|
39
|
+
margin: 30px 0;
|
|
40
|
+
text-align: left;
|
|
41
|
+
}
|
|
42
|
+
.saved-config-title {
|
|
43
|
+
font-size: 12px;
|
|
44
|
+
font-weight: 600;
|
|
45
|
+
color: #666;
|
|
46
|
+
text-transform: uppercase;
|
|
47
|
+
margin-bottom: 15px;
|
|
48
|
+
text-align: center;
|
|
49
|
+
}
|
|
50
|
+
.config-item {
|
|
51
|
+
display: flex;
|
|
52
|
+
justify-content: space-between;
|
|
53
|
+
padding: 8px 0;
|
|
54
|
+
border-bottom: 1px solid #e1e4e8;
|
|
55
|
+
font-size: 13px;
|
|
56
|
+
}
|
|
57
|
+
.config-item:last-child { border-bottom: none; }
|
|
58
|
+
.config-label { color: #666; font-weight: 500; }
|
|
59
|
+
.config-value {
|
|
60
|
+
color: #333;
|
|
61
|
+
font-family: 'Courier New', monospace;
|
|
62
|
+
max-width: 300px;
|
|
63
|
+
overflow: hidden;
|
|
64
|
+
text-overflow: ellipsis;
|
|
65
|
+
white-space: nowrap;
|
|
66
|
+
}
|
|
67
|
+
.config-value.masked { color: #999; }
|
|
68
|
+
.form-view { display: none; }
|
|
69
|
+
.form-group { margin-bottom: 16px; }
|
|
70
|
+
label {
|
|
71
|
+
display: flex;
|
|
72
|
+
align-items: center;
|
|
73
|
+
gap: 6px;
|
|
74
|
+
margin-bottom: 6px;
|
|
75
|
+
color: #333;
|
|
76
|
+
font-weight: 500;
|
|
77
|
+
font-size: 14px;
|
|
78
|
+
}
|
|
79
|
+
input {
|
|
80
|
+
width: 100%;
|
|
81
|
+
padding: 10px 12px;
|
|
82
|
+
border: 2px solid #e1e4e8;
|
|
83
|
+
border-radius: 8px;
|
|
84
|
+
font-size: 13px;
|
|
85
|
+
font-family: "Helvetica Neue LT Pro", "Open Sans", 'Courier New', monospace !important;
|
|
86
|
+
transition: border-color 0.2s;
|
|
87
|
+
}
|
|
88
|
+
input:focus {
|
|
89
|
+
outline: none;
|
|
90
|
+
border-color: #b91d8f;
|
|
91
|
+
}
|
|
92
|
+
.optional {
|
|
93
|
+
color: #999;
|
|
94
|
+
font-weight: normal;
|
|
95
|
+
font-size: 12px;
|
|
96
|
+
}
|
|
97
|
+
.tooltip {
|
|
98
|
+
position: relative;
|
|
99
|
+
display: inline-flex;
|
|
100
|
+
align-items: center;
|
|
101
|
+
justify-content: center;
|
|
102
|
+
width: 16px;
|
|
103
|
+
height: 16px;
|
|
104
|
+
background: #b91d8f;
|
|
105
|
+
color: white;
|
|
106
|
+
border-radius: 50%;
|
|
107
|
+
font-size: 11px;
|
|
108
|
+
font-weight: bold;
|
|
109
|
+
cursor: pointer;
|
|
110
|
+
flex-shrink: 0;
|
|
111
|
+
user-select: none;
|
|
112
|
+
}
|
|
113
|
+
.tooltip-content {
|
|
114
|
+
display: none !important;
|
|
115
|
+
position: fixed;
|
|
116
|
+
max-width: 380px;
|
|
117
|
+
width: max-content;
|
|
118
|
+
background: white;
|
|
119
|
+
border-radius: 8px;
|
|
120
|
+
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
|
121
|
+
z-index: 10000;
|
|
122
|
+
overflow: hidden;
|
|
123
|
+
border: 2px solid #b91d8f;
|
|
124
|
+
pointer-events: auto;
|
|
125
|
+
}
|
|
126
|
+
.tooltip-content.active {
|
|
127
|
+
display: block !important;
|
|
128
|
+
}
|
|
129
|
+
.tooltip-arrow {
|
|
130
|
+
position: absolute;
|
|
131
|
+
width: 0;
|
|
132
|
+
height: 0;
|
|
133
|
+
border: 8px solid transparent;
|
|
134
|
+
z-index: 1;
|
|
135
|
+
}
|
|
136
|
+
.tooltip-arrow.left {
|
|
137
|
+
left: -16px;
|
|
138
|
+
top: 50%;
|
|
139
|
+
transform: translateY(-50%);
|
|
140
|
+
border-right-color: #b91d8f;
|
|
141
|
+
}
|
|
142
|
+
.tooltip-arrow.right {
|
|
143
|
+
right: -16px;
|
|
144
|
+
top: 50%;
|
|
145
|
+
transform: translateY(-50%);
|
|
146
|
+
border-left-color: #b91d8f;
|
|
147
|
+
}
|
|
148
|
+
.tooltip-arrow.top {
|
|
149
|
+
top: -16px;
|
|
150
|
+
left: 50%;
|
|
151
|
+
transform: translateX(-50%);
|
|
152
|
+
border-bottom-color: #b91d8f;
|
|
153
|
+
}
|
|
154
|
+
.tooltip-arrow.bottom {
|
|
155
|
+
bottom: -16px;
|
|
156
|
+
left: 50%;
|
|
157
|
+
transform: translateX(-50%);
|
|
158
|
+
border-top-color: #b91d8f;
|
|
159
|
+
}
|
|
160
|
+
.tooltip-header {
|
|
161
|
+
background: #b91d8f;
|
|
162
|
+
color: white;
|
|
163
|
+
padding: 8px 12px;
|
|
164
|
+
font-weight: 600;
|
|
165
|
+
font-size: 13px;
|
|
166
|
+
}
|
|
167
|
+
.tooltip-body {
|
|
168
|
+
padding: 10px 12px;
|
|
169
|
+
}
|
|
170
|
+
.tooltip-image {
|
|
171
|
+
width: 100%;
|
|
172
|
+
max-height: 200px;
|
|
173
|
+
object-fit: contain;
|
|
174
|
+
border-radius: 4px;
|
|
175
|
+
margin-bottom: 6px;
|
|
176
|
+
border: 1px solid #e1e4e8;
|
|
177
|
+
background: #f8f9fa;
|
|
178
|
+
}
|
|
179
|
+
.tooltip-text {
|
|
180
|
+
color: #555;
|
|
181
|
+
font-size: 12px;
|
|
182
|
+
line-height: 1.4;
|
|
183
|
+
font-style: italic;
|
|
184
|
+
}
|
|
185
|
+
.button-group {
|
|
186
|
+
display: flex;
|
|
187
|
+
gap: 10px;
|
|
188
|
+
margin-top: 20px;
|
|
189
|
+
}
|
|
190
|
+
button {
|
|
191
|
+
flex: 1;
|
|
192
|
+
padding: 12px;
|
|
193
|
+
border: 2px solid transparent;
|
|
194
|
+
border-radius: 8px;
|
|
195
|
+
font-size: 15px;
|
|
196
|
+
font-weight: 600;
|
|
197
|
+
cursor: pointer;
|
|
198
|
+
transition: all 0.2s;
|
|
199
|
+
}
|
|
200
|
+
.btn-primary {
|
|
201
|
+
background: linear-gradient(135deg, #b91d8f 0%, #7a1460 100%);
|
|
202
|
+
color: white;
|
|
203
|
+
}
|
|
204
|
+
.btn-primary:hover {
|
|
205
|
+
transform: translateY(-2px);
|
|
206
|
+
box-shadow: 0 6px 20px rgba(185, 29, 143, 0.4);
|
|
207
|
+
}
|
|
208
|
+
.btn-secondary {
|
|
209
|
+
background: #f6f8fa;
|
|
210
|
+
color: #666;
|
|
211
|
+
}
|
|
212
|
+
.btn-secondary:hover {
|
|
213
|
+
background: #e1e4e8;
|
|
214
|
+
}
|
|
215
|
+
.btn-danger {
|
|
216
|
+
background: white;
|
|
217
|
+
color: #b91d8f;
|
|
218
|
+
border: 2px solid #b91d8f;
|
|
219
|
+
}
|
|
220
|
+
.btn-danger:hover {
|
|
221
|
+
background: #fef1fd;
|
|
222
|
+
transform: translateY(-1px);
|
|
223
|
+
}
|
|
224
|
+
.btn-link {
|
|
225
|
+
background: transparent;
|
|
226
|
+
color: #b91d8f;
|
|
227
|
+
padding: 8px;
|
|
228
|
+
font-size: 14px;
|
|
229
|
+
}
|
|
230
|
+
.btn-link:hover {
|
|
231
|
+
background: #f6f8fa;
|
|
232
|
+
}
|
|
233
|
+
.status {
|
|
234
|
+
margin-top: 20px;
|
|
235
|
+
padding: 12px;
|
|
236
|
+
border-radius: 8px;
|
|
237
|
+
font-size: 14px;
|
|
238
|
+
display: none;
|
|
239
|
+
}
|
|
240
|
+
.status.success {
|
|
241
|
+
background: #d4edda;
|
|
242
|
+
color: #155724;
|
|
243
|
+
border: 1px solid #c3e6cb;
|
|
244
|
+
}
|
|
245
|
+
.status.error {
|
|
246
|
+
background: #f8d7da;
|
|
247
|
+
color: #721c24;
|
|
248
|
+
border: 1px solid #f5c6cb;
|
|
249
|
+
}
|
|
250
|
+
.status.info {
|
|
251
|
+
background: #d1ecf1;
|
|
252
|
+
color: #0c5460;
|
|
253
|
+
border: 1px solid #bee5eb;
|
|
254
|
+
}
|
|
255
|
+
/* Loading overlay and spinner */
|
|
256
|
+
.loading-overlay {
|
|
257
|
+
display: none;
|
|
258
|
+
position: absolute;
|
|
259
|
+
top: -32px;
|
|
260
|
+
left: -32px;
|
|
261
|
+
right: -32px;
|
|
262
|
+
bottom: -32px;
|
|
263
|
+
background: rgba(255, 255, 255, 0.85);
|
|
264
|
+
backdrop-filter: blur(2px);
|
|
265
|
+
border-radius: 16px;
|
|
266
|
+
z-index: 1000;
|
|
267
|
+
justify-content: center;
|
|
268
|
+
align-items: center;
|
|
269
|
+
flex-direction: column;
|
|
270
|
+
gap: 16px;
|
|
271
|
+
}
|
|
272
|
+
.loading-overlay.active {
|
|
273
|
+
display: flex;
|
|
274
|
+
}
|
|
275
|
+
.spinner {
|
|
276
|
+
width: 48px;
|
|
277
|
+
height: 48px;
|
|
278
|
+
border: 4px solid #e1e4e8;
|
|
279
|
+
border-top-color: #b91d8f;
|
|
280
|
+
border-radius: 50%;
|
|
281
|
+
animation: spin 0.8s linear infinite;
|
|
282
|
+
}
|
|
283
|
+
@keyframes spin {
|
|
284
|
+
to { transform: rotate(360deg); }
|
|
285
|
+
}
|
|
286
|
+
.loading-message {
|
|
287
|
+
color: #666;
|
|
288
|
+
font-size: 14px;
|
|
289
|
+
font-weight: 500;
|
|
290
|
+
text-align: center;
|
|
291
|
+
max-width: 300px;
|
|
292
|
+
}
|
|
293
|
+
.form-view {
|
|
294
|
+
position: relative;
|
|
295
|
+
}
|
|
296
|
+
.modal-overlay {
|
|
297
|
+
display: none;
|
|
298
|
+
position: fixed;
|
|
299
|
+
top: 0;
|
|
300
|
+
left: 0;
|
|
301
|
+
right: 0;
|
|
302
|
+
bottom: 0;
|
|
303
|
+
background: rgba(0, 0, 0, 0.5);
|
|
304
|
+
z-index: 10001;
|
|
305
|
+
justify-content: center;
|
|
306
|
+
align-items: center;
|
|
307
|
+
}
|
|
308
|
+
.modal-overlay.active {
|
|
309
|
+
display: flex;
|
|
310
|
+
}
|
|
311
|
+
.modal-content {
|
|
312
|
+
background: white;
|
|
313
|
+
border-radius: 12px;
|
|
314
|
+
padding: 30px;
|
|
315
|
+
max-width: 400px;
|
|
316
|
+
width: 90%;
|
|
317
|
+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
|
318
|
+
}
|
|
319
|
+
.modal-title {
|
|
320
|
+
font-size: 20px;
|
|
321
|
+
font-weight: 600;
|
|
322
|
+
color: #333;
|
|
323
|
+
margin-bottom: 12px;
|
|
324
|
+
}
|
|
325
|
+
.modal-message {
|
|
326
|
+
font-size: 14px;
|
|
327
|
+
color: #666;
|
|
328
|
+
margin-bottom: 24px;
|
|
329
|
+
line-height: 1.5;
|
|
330
|
+
}
|
|
331
|
+
.modal-buttons {
|
|
332
|
+
display: flex;
|
|
333
|
+
gap: 10px;
|
|
334
|
+
justify-content: flex-end;
|
|
335
|
+
}
|
|
336
|
+
.modal-buttons button {
|
|
337
|
+
padding: 10px 20px;
|
|
338
|
+
font-size: 14px;
|
|
339
|
+
flex: none;
|
|
340
|
+
}
|
|
341
|
+
</style>
|
|
342
|
+
</head>
|
|
343
|
+
<body>
|
|
344
|
+
<div class="container">
|
|
345
|
+
<div id="quickSigninView" class="quick-signin">
|
|
346
|
+
<div id="loadingOverlayQuickSignin" class="loading-overlay">
|
|
347
|
+
<div class="spinner"></div>
|
|
348
|
+
<div id="loadingMessageQuickSignin" class="loading-message">Redirecting to login...</div>
|
|
349
|
+
</div>
|
|
350
|
+
<div class="icon">🔐</div>
|
|
351
|
+
<h1>Welcome Back!</h1>
|
|
352
|
+
<p class="subtitle">Ready to sign in with your saved configuration</p>
|
|
353
|
+
<div class="saved-config">
|
|
354
|
+
<div class="saved-config-title">Saved Configuration</div>
|
|
355
|
+
<div id="savedConfigList"></div>
|
|
356
|
+
</div>
|
|
357
|
+
<div class="button-group">
|
|
358
|
+
<button type="button" class="btn-danger" onclick="clearConfigAndShowForm()">Clear All</button>
|
|
359
|
+
<button type="button" class="btn-primary" onclick="signInWithSavedConfig()">Sign In</button>
|
|
360
|
+
</div>
|
|
361
|
+
<button type="button" class="btn-link" onclick="showForm()" style="width: 100%; margin-top: 10px;">Edit Configuration</button>
|
|
362
|
+
</div>
|
|
363
|
+
<div id="formView" class="form-view">
|
|
364
|
+
<div id="loadingOverlay" class="loading-overlay">
|
|
365
|
+
<div class="spinner"></div>
|
|
366
|
+
<div id="loadingMessage" class="loading-message">Saving configuration...</div>
|
|
367
|
+
</div>
|
|
368
|
+
<h1>🔐 eGain MCP Configuration</h1>
|
|
369
|
+
<p class="subtitle">Enter details from your eGain <strong>Admin Console</strong></p>
|
|
370
|
+
<form id="configForm">
|
|
371
|
+
<div class="form-group">
|
|
372
|
+
<label for="egainUrl">
|
|
373
|
+
<span>eGain Environment URL</span>
|
|
374
|
+
<span class="tooltip" onmouseenter="showTooltip(event, 'egainUrl')" onmouseleave="hideTooltip(event, 'egainUrl')">?</span>
|
|
375
|
+
</label>
|
|
376
|
+
<input type="text" id="egainUrl" name="egainUrl" placeholder="https://your-environment.egain.cloud" required>
|
|
377
|
+
</div>
|
|
378
|
+
<div class="form-group">
|
|
379
|
+
<label for="authUrl">
|
|
380
|
+
<span>Authorization URL</span>
|
|
381
|
+
<span class="tooltip" onmouseenter="showTooltip(event, 'authUrl')" onmouseleave="hideTooltip(event, 'authUrl')">?</span>
|
|
382
|
+
</label>
|
|
383
|
+
<input type="text" id="authUrl" name="authUrl" placeholder="https://login.egain.cloud/.../oauth2/authorize" required>
|
|
384
|
+
</div>
|
|
385
|
+
<div class="form-group">
|
|
386
|
+
<label for="accessTokenUrl">
|
|
387
|
+
<span>Access Token URL</span>
|
|
388
|
+
<span class="tooltip" onmouseenter="showTooltip(event, 'accessTokenUrl')" onmouseleave="hideTooltip(event, 'accessTokenUrl')">?</span>
|
|
389
|
+
</label>
|
|
390
|
+
<input type="text" id="accessTokenUrl" name="accessTokenUrl" placeholder="https://login.egain.cloud/.../oauth2/token" required>
|
|
391
|
+
</div>
|
|
392
|
+
<div class="form-group">
|
|
393
|
+
<label for="clientId">
|
|
394
|
+
<span>Client ID</span>
|
|
395
|
+
<span class="tooltip" onmouseenter="showTooltip(event, 'clientId')" onmouseleave="hideTooltip(event, 'clientId')">?</span>
|
|
396
|
+
</label>
|
|
397
|
+
<input type="text" id="clientId" name="clientId" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" required>
|
|
398
|
+
</div>
|
|
399
|
+
<div class="form-group">
|
|
400
|
+
<label for="redirectUrl">
|
|
401
|
+
<span>Redirect URL</span>
|
|
402
|
+
<span class="tooltip" onmouseenter="showTooltip(event, 'redirectUrl')" onmouseleave="hideTooltip(event, 'redirectUrl')">?</span>
|
|
403
|
+
</label>
|
|
404
|
+
<input type="text" id="redirectUrl" name="redirectUrl" placeholder="https://your-redirect-url.com/" required>
|
|
405
|
+
</div>
|
|
406
|
+
|
|
407
|
+
<!-- Advanced Settings Toggle -->
|
|
408
|
+
<div style="margin: 12px 0;">
|
|
409
|
+
<button type="button" onclick="toggleAdvancedSettings()" style="padding: 6px 0; font-size: 13px; display: flex; align-items: center; gap: 6px; background: none; border: none; color: #b91d8f; cursor: pointer; font-family: inherit;">
|
|
410
|
+
<span id="advancedToggleIcon">▶</span>
|
|
411
|
+
<span>Advanced Settings</span>
|
|
412
|
+
<span style="color: #999; font-size: 11px;">(optional)</span>
|
|
413
|
+
</button>
|
|
414
|
+
</div>
|
|
415
|
+
|
|
416
|
+
<!-- Advanced Settings Section (hidden by default) -->
|
|
417
|
+
<div id="advancedSettings" style="display: none;">
|
|
418
|
+
<div class="form-group">
|
|
419
|
+
<label for="clientSecret">
|
|
420
|
+
<span>Client Secret</span>
|
|
421
|
+
<span class="tooltip" onmouseenter="showTooltip(event, 'clientSecret')" onmouseleave="hideTooltip(event, 'clientSecret')">?</span>
|
|
422
|
+
<span class="optional">(optional)</span>
|
|
423
|
+
</label>
|
|
424
|
+
<input type="password" id="clientSecret" name="clientSecret" placeholder="Required for normal authentication flow/non-PKCE">
|
|
425
|
+
</div>
|
|
426
|
+
<div class="form-group">
|
|
427
|
+
<label for="scopePrefix">
|
|
428
|
+
<span>Scope Prefix</span>
|
|
429
|
+
<span class="tooltip" onmouseenter="showTooltip(event, 'scopePrefix')" onmouseleave="hideTooltip(event, 'scopePrefix')">?</span>
|
|
430
|
+
<span class="optional">(optional)</span>
|
|
431
|
+
</label>
|
|
432
|
+
<input type="text" id="scopePrefix" name="scopePrefix" placeholder="https://your.scope-prefix.cloud/auth/">
|
|
433
|
+
</div>
|
|
434
|
+
</div>
|
|
435
|
+
<div style="font-size: 11px; color: #999; margin: 12px 0 0 0; line-height: 1.4;">
|
|
436
|
+
🔒 Your configuration will be securely saved to your <code style="background: #f0f0f0; padding: 2px 4px; border-radius: 3px; font-size: 10px;">~/.egain-mcp/config.json</code>.
|
|
437
|
+
</div>
|
|
438
|
+
<div class="button-group">
|
|
439
|
+
<button type="button" class="btn-secondary" onclick="cancelForm()">Cancel</button>
|
|
440
|
+
<button type="submit" class="btn-primary">Save & Authenticate</button>
|
|
441
|
+
</div>
|
|
442
|
+
</form>
|
|
443
|
+
</div>
|
|
444
|
+
<div id="status" class="status"></div>
|
|
445
|
+
</div>
|
|
446
|
+
|
|
447
|
+
<!-- Confirmation Modal -->
|
|
448
|
+
<div id="confirmModal" class="modal-overlay" onclick="if(event.target === this) closeModal(false)">
|
|
449
|
+
<div class="modal-content">
|
|
450
|
+
<div class="modal-title" id="modalTitle">Confirm Action</div>
|
|
451
|
+
<div class="modal-message" id="modalMessage">Are you sure?</div>
|
|
452
|
+
<div class="modal-buttons">
|
|
453
|
+
<button type="button" class="btn-secondary" onclick="closeModal(false)">Cancel</button>
|
|
454
|
+
<button type="button" class="btn-danger" id="modalConfirmBtn" onclick="closeModal(true)">Confirm</button>
|
|
455
|
+
</div>
|
|
456
|
+
</div>
|
|
457
|
+
</div>
|
|
458
|
+
|
|
459
|
+
<!-- Tooltip Popups (outside container for proper fixed positioning) -->
|
|
460
|
+
<div id="tooltip-egainUrl" class="tooltip-content">
|
|
461
|
+
<div class="tooltip-header">eGain Environment URL</div>
|
|
462
|
+
<div class="tooltip-body">
|
|
463
|
+
<img src="/img/env-tooltip.png" class="tooltip-image" alt="eGain Environment URL" onerror="this.style.display='none'">
|
|
464
|
+
<div class="tooltip-text">Enter the domain URL displayed in your browser when accessing the eGain application.</div>
|
|
465
|
+
</div>
|
|
466
|
+
</div>
|
|
467
|
+
|
|
468
|
+
<div id="tooltip-authUrl" class="tooltip-content">
|
|
469
|
+
<div class="tooltip-header">Authorization URL</div>
|
|
470
|
+
<div class="tooltip-body">
|
|
471
|
+
<img src="/img/authurl-tooltip.png" class="tooltip-image" alt="Authorization URL" onerror="this.style.display='none'">
|
|
472
|
+
<div class="tooltip-text">In the Partition space, go to Integration → Client Application → Metadata, and copy the Authorization URL.</div>
|
|
473
|
+
</div>
|
|
474
|
+
</div>
|
|
475
|
+
|
|
476
|
+
<div id="tooltip-accessTokenUrl" class="tooltip-content">
|
|
477
|
+
<div class="tooltip-header">Access Token URL</div>
|
|
478
|
+
<div class="tooltip-body">
|
|
479
|
+
<img src="/img/accesstoken-tooltip.png" class="tooltip-image" alt="Access Token URL" onerror="this.style.display='none'">
|
|
480
|
+
<div class="tooltip-text">In the Partition space, go to Integration → Client Application → Metadata, and copy the Access Token URL.</div>
|
|
481
|
+
</div>
|
|
482
|
+
</div>
|
|
483
|
+
|
|
484
|
+
<div id="tooltip-clientId" class="tooltip-content">
|
|
485
|
+
<div class="tooltip-header">Client ID</div>
|
|
486
|
+
<div class="tooltip-body">
|
|
487
|
+
<img src="/img/clientid-tooltip.png" class="tooltip-image" alt="Client ID" onerror="this.style.display='none'">
|
|
488
|
+
<div class="tooltip-text">In the Partition space, go to Integration → Client Application, select your client app, and copy the Client ID.</div>
|
|
489
|
+
</div>
|
|
490
|
+
</div>
|
|
491
|
+
|
|
492
|
+
<div id="tooltip-redirectUrl" class="tooltip-content">
|
|
493
|
+
<div class="tooltip-header">Redirect URL</div>
|
|
494
|
+
<div class="tooltip-body">
|
|
495
|
+
<img src="/img/redirect-tooltip.png" class="tooltip-image" alt="Redirect URL" onerror="this.style.display='none'">
|
|
496
|
+
<div class="tooltip-text">In the Partition space, go to Integration → Client Application, select your client app, and copy the Redirect URL.</div>
|
|
497
|
+
</div>
|
|
498
|
+
</div>
|
|
499
|
+
|
|
500
|
+
<div id="tooltip-clientSecret" class="tooltip-content">
|
|
501
|
+
<div class="tooltip-header">Client Secret</div>
|
|
502
|
+
<div class="tooltip-body">
|
|
503
|
+
<img src="/img/clientsecret-tooltip.png" class="tooltip-image" alt="Client Secret" onerror="this.style.display='none'">
|
|
504
|
+
<div class="tooltip-text">In the Partition space, go to Integration → Client Application, select your client app, and copy the Client Secret under Secrets.</div>
|
|
505
|
+
</div>
|
|
506
|
+
</div>
|
|
507
|
+
|
|
508
|
+
<div id="tooltip-scopePrefix" class="tooltip-content">
|
|
509
|
+
<div class="tooltip-header">Scope Prefix</div>
|
|
510
|
+
<div class="tooltip-body">
|
|
511
|
+
<img src="/img/scopeprefix-tooltip.png" class="tooltip-image" alt="Scope Prefix" onerror="this.style.display='none'">
|
|
512
|
+
<div class="tooltip-text">In the Partition space, go to Integration → Client Application → Metadata, and copy the API Permission Prefix.</div>
|
|
513
|
+
</div>
|
|
514
|
+
</div>
|
|
515
|
+
|
|
516
|
+
<script src="/config-page.js"></script>
|
|
517
|
+
</body>
|
|
518
|
+
</html>
|
|
519
|
+
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Safari Not Supported - eGain MCP</title>
|
|
7
|
+
<style>
|
|
8
|
+
* {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
body {
|
|
15
|
+
font-family: "Open Sans", "Segoe UI", "SegoeUI", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
|
|
16
|
+
background: #fef1fd;
|
|
17
|
+
min-height: 100vh;
|
|
18
|
+
display: flex;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
align-items: center;
|
|
21
|
+
padding: 20px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.container {
|
|
25
|
+
background: white;
|
|
26
|
+
border-radius: 16px;
|
|
27
|
+
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.12);
|
|
28
|
+
max-width: 500px;
|
|
29
|
+
width: 100%;
|
|
30
|
+
padding: 32px;
|
|
31
|
+
text-align: center;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.warning-icon {
|
|
35
|
+
font-size: 64px;
|
|
36
|
+
margin-bottom: 20px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
h1 {
|
|
40
|
+
color: #e74c3c;
|
|
41
|
+
font-size: 28px;
|
|
42
|
+
margin-bottom: 30px;
|
|
43
|
+
font-weight: 600;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.reason {
|
|
47
|
+
background: #fff0f6;
|
|
48
|
+
border-left: 4px solid #d946a6;
|
|
49
|
+
padding: 20px;
|
|
50
|
+
text-align: left;
|
|
51
|
+
border-radius: 4px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.reason strong {
|
|
55
|
+
color: #a21361;
|
|
56
|
+
display: block;
|
|
57
|
+
margin-bottom: 12px;
|
|
58
|
+
font-size: 16px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.reason p {
|
|
62
|
+
color: #a21361;
|
|
63
|
+
font-size: 14px;
|
|
64
|
+
line-height: 1.6;
|
|
65
|
+
}
|
|
66
|
+
</style>
|
|
67
|
+
</head>
|
|
68
|
+
<body>
|
|
69
|
+
<div class="container">
|
|
70
|
+
<div class="warning-icon">⚠️</div>
|
|
71
|
+
<h1>Safari Not Supported</h1>
|
|
72
|
+
|
|
73
|
+
<div class="reason">
|
|
74
|
+
<strong>Why?</strong>
|
|
75
|
+
<p>
|
|
76
|
+
Safari doesn't support private browsing mode via command line, which is required
|
|
77
|
+
to protect your OAuth credentials from being cached or leaked. We prioritize your
|
|
78
|
+
security over convenience.
|
|
79
|
+
</p>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</body>
|
|
83
|
+
</html>
|
|
84
|
+
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|