Skip to content

Commit c440e32

Browse files
julianlamjulianlam
committed
feat: support for custom label text and icon
1 parent 315a4e0 commit c440e32

File tree

3 files changed

+87
-52
lines changed

3 files changed

+87
-52
lines changed

‎library.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,11 +96,20 @@ OAuth.loadStrategies = async (strategies) => {
9696
passport.use(configured[idx].name, strategy);
9797
});
9898

99-
strategies.push(...configured.map(({ name, scope }) => ({
99+
strategies.push(...configured.map(({ name, scope, loginLabel, registerLabel, faIcon }) => ({
100100
name,
101101
url: `/auth/${name}`,
102102
callbackURL: `/auth/${name}/callback`,
103103
icon: 'fa-check-square',
104+
icons: {
105+
normal: `fa ${faIcon || 'fa-right-to-bracket'}`,
106+
square: `fa ${faIcon || 'fa-right-to-bracket'}`,
107+
},
108+
labels: {
109+
login: loginLabel || 'Log In',
110+
register: registerLabel || 'Register',
111+
},
112+
color: '#666',
104113
scope: scope || 'openid email profile',
105114
})));
106115

‎static/lib/admin.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export function init() {
2424
confirm({
2525
title,
2626
message,
27+
size: 'xl',
2728
callback: handleEditStrategy,
2829
onShown: handleAutoDiscovery,
2930
});
@@ -39,6 +40,7 @@ export function init() {
3940
confirm({
4041
title,
4142
message,
43+
size: 'xl',
4244
callback: handleEditStrategy,
4345
onShown: handleAutoDiscovery,
4446
});

‎static/templates/partials/edit-oauth2-strategy.tpl‎

Lines changed: 75 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,94 @@
11
<form role="form">
2-
<div class="form-check form-switch">
3-
<input type="checkbox" class="form-check-input" id="enabled" name="enabled" {{{ if (./enabled == "true") }}}checked{{{ end }}}>
4-
<label for="enabled" class="form-check-label">Enabled</label>
5-
</div>
6-
7-
<div class="mb-3">
8-
<label class="form-label" for="name">Name</label>
9-
<input type="text" id="name" name="name" title="Name" class="form-control" placeholder="Name" value="{./name}" {{{ if ./name }}}readonly{{{ end }}}>
10-
<p class="form-text">
11-
Enter something unique to your OAuth provider in lowercase, like <code>github</code>, or <code>nodebb</code>.
12-
</p>
13-
</div>
14-
15-
<div class="mb-3">
16-
<label class="form-label" for="domain">Domain</label>
17-
<div class="input-group">
18-
<input type="text" id="domain" name="domain" title="domain" class="form-control" placeholder="foo.example.org">
19-
<span class="input-group-text text-success d-none" id="discovery-success">&check;</span>
20-
<span class="input-group-text text-warning d-none" id="discovery-failure">&cross;</span>
2+
<div class="row">
3+
<div class="col-sm-6">
4+
<div class="form-check form-switch">
5+
<input type="checkbox" class="form-check-input" id="enabled" name="enabled" {{{ if (./enabled == "true") }}}checked{{{ end }}}>
6+
<label for="enabled" class="form-check-label">Enabled</label>
217
</div>
22-
<p class="form-text">
23-
<strong>Optional</strong> — fill in a domain to automatically discover the URLs if provided by the server.
24-
</p>
25-
</div>
26-
27-
<hr />
288

29-
<fieldset id="details">
309
<div class="mb-3">
31-
<label class="form-label" for="authUrl">Authorization URL</label>
32-
<input type="text" id="authUrl" name="authUrl" title="Authorization URL" class="form-control" placeholder="https://..." value="{./authUrl}">
10+
<label class="form-label" for="name">Name</label>
11+
<input type="text" id="name" name="name" title="Name" class="form-control" placeholder="Name" value="{./name}" {{{ if ./name }}}readonly{{{ end }}}>
12+
<p class="form-text">
13+
Enter something unique to your OAuth provider in lowercase, like <code>github</code>, or <code>nodebb</code>.
14+
</p>
3315
</div>
3416

3517
<div class="mb-3">
36-
<label class="form-label" for="tokenUrl">Token URL</label>
37-
<input type="text" id="tokenUrl" name="tokenUrl" title="Token URL" class="form-control" placeholder="https://..." value="{./tokenUrl}">
18+
<label class="form-label" for="domain">Domain</label>
19+
<div class="input-group">
20+
<input type="text" id="domain" name="domain" title="domain" class="form-control" placeholder="foo.example.org">
21+
<span class="input-group-text text-success d-none" id="discovery-success">&check;</span>
22+
<span class="input-group-text text-warning d-none" id="discovery-failure">&cross;</span>
23+
</div>
24+
<p class="form-text">
25+
<strong>Optional</strong> — fill in a domain to automatically discover the URLs if provided by the server.
26+
</p>
3827
</div>
3928

40-
<div class="mb-3">
41-
<label class="form-label" for="id">Client ID</label>
42-
<input type="text" id="id" name="id" title="Client ID" class="form-control" value="{./id}">
43-
</div>
29+
<hr />
4430

4531
<div class="mb-3">
46-
<label class="form-label" for="secret">Client Secret</label>
47-
<input type="text" id="secret" name="secret" title="Client Secret" class="form-control" value="{./secret}">
32+
<label class="form-label" for="faIcon">FontAwesome Icon</label>
33+
<input type="text" id="name" name="faIcon" title="Name" class="form-control" placeholder="FontAwesome Icon" value="{./faIcon}">
34+
<p class="form-text">
35+
Enter the name of the FontAwesome icon you wish to use in the login/register button.
36+
If none is set, then <i class="fa fa-right-to-bracket"></i> will be used.
37+
</p>
4838
</div>
4939

5040
<div class="mb-3">
51-
<label class="form-label" for="userRoute">User Info URL</label>
52-
<input type="text" id="userRoute" name="userRoute" title="User Info URL" class="form-control" placeholder="/userinfo" value="{./userRoute}">
53-
<p class="form-text">
54-
If a relative path is specified here, we will assume the hostname from the authorization URL.
55-
</p>
41+
<label class="form-label" for="loginLabel">&quot;Login&quot; Label Text</label>
42+
<input type="text" id="name" name="loginLabel" title="Name" class="form-control" placeholder="Log in via..." value="{./loginLabel}">
5643
</div>
5744

5845
<div class="mb-3">
59-
<label class="form-label" for="scope">User Info URL</label>
60-
<input type="text" id="scope" name="scope" title="User Info URL" class="form-control" placeholder="openid email profile" value="{./scope}">
61-
<p class="form-text">
62-
Scopes are used to limit the information returned by the user info URL to only that which is necessary.
63-
Different implementations use different values.
64-
</p>
65-
<p class="form-text">
66-
<strong>Default</strong> &mdash; <code>openid email profile</code>
67-
</p>
46+
<label class="form-label" for="registerLabel">&quot;Register&quot; Label Text</label>
47+
<input type="text" id="name" name="registerLabel" title="Name" class="form-control" placeholder="Register via..." value="{./registerLabel}">
6848
</div>
69-
</fieldset>
49+
</div>
50+
<div class="col-sm-6">
51+
<fieldset id="details">
52+
<div class="mb-3">
53+
<label class="form-label" for="authUrl">Authorization URL</label>
54+
<input type="text" id="authUrl" name="authUrl" title="Authorization URL" class="form-control" placeholder="https://..." value="{./authUrl}">
55+
</div>
56+
57+
<div class="mb-3">
58+
<label class="form-label" for="tokenUrl">Token URL</label>
59+
<input type="text" id="tokenUrl" name="tokenUrl" title="Token URL" class="form-control" placeholder="https://..." value="{./tokenUrl}">
60+
</div>
61+
62+
<div class="mb-3">
63+
<label class="form-label" for="id">Client ID</label>
64+
<input type="text" id="id" name="id" title="Client ID" class="form-control" value="{./id}">
65+
</div>
66+
67+
<div class="mb-3">
68+
<label class="form-label" for="secret">Client Secret</label>
69+
<input type="text" id="secret" name="secret" title="Client Secret" class="form-control" value="{./secret}">
70+
</div>
71+
72+
<div class="mb-3">
73+
<label class="form-label" for="userRoute">User Info URL</label>
74+
<input type="text" id="userRoute" name="userRoute" title="User Info URL" class="form-control" placeholder="/userinfo" value="{./userRoute}">
75+
<p class="form-text">
76+
If a relative path is specified here, we will assume the hostname from the authorization URL.
77+
</p>
78+
</div>
79+
80+
<div class="mb-3">
81+
<label class="form-label" for="scope">Scope</label>
82+
<input type="text" id="scope" name="scope" title="User Info URL" class="form-control" placeholder="openid email profile" value="{./scope}">
83+
<p class="form-text">
84+
Scopes are used to limit the information returned by the user info URL to only that which is necessary.
85+
Different implementations use different values.
86+
</p>
87+
<p class="form-text">
88+
<strong>Default</strong> &mdash; <code>openid email profile</code>
89+
</p>
90+
</div>
91+
</fieldset>
92+
</div>
93+
</div>
7094
</form>

0 commit comments

Comments
 (0)