Add UI tab for specifying OpenID Connect options for proxy hosts.

This commit is contained in:
Subv
2020-05-22 11:28:30 -05:00
parent fff31b0f34
commit 46a2911bad
3 changed files with 79 additions and 1 deletions

View File

@@ -10,6 +10,7 @@
<li role="presentation" class="nav-item"><a href="#locations" aria-controls="tab4" role="tab" data-toggle="tab" class="nav-link"><i class="fe fe-layers"></i> <%- i18n('all-hosts', 'locations') %></a></li>
<li role="presentation" class="nav-item"><a href="#ssl-options" aria-controls="tab2" role="tab" data-toggle="tab" class="nav-link"><i class="fe fe-shield"></i> <%- i18n('str', 'ssl') %></a></li>
<li role="presentation" class="nav-item"><a href="#advanced" aria-controls="tab3" role="tab" data-toggle="tab" class="nav-link"><i class="fe fe-settings"></i> <%- i18n('all-hosts', 'advanced') %></a></li>
<li role="presentation" class="nav-item"><a href="#openidc" aria-controls="tab3" role="tab" data-toggle="tab" class="nav-link"><i class="fe fe-settings"></i>OpenID Connect</a></li>
</ul>
<div class="tab-content">
@@ -177,6 +178,54 @@
</div>
</div>
</div>
<!-- OpenID Connect -->
<div role="tabpanel" class="tab-pane" id="openidc">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<label class="custom-switch">
<input type="checkbox" class="custom-switch-input" name="openidc_enabled" value="1<%- openidc_enabled ? ' checked' : '' %>">
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description">Use OpenID Connect authentication <span class="form-required">*</span></span>
</label>
</div>
</div>
<div class="col-sm-12 col-md-12 openidc">
<div class="form-group">
<label class="form-label">Redirect URI<span class="form-required">*</span></label>
<input type="text" name="openidc_redirect_uri" class="form-control text-monospace" placeholder="" value="<%- openidc_redirect_uri %>" autocomplete="off" maxlength="255" required>
</div>
</div>
<div class="col-sm-12 col-md-12 openidc">
<div class="form-group">
<label class="form-label">Well-known discovery endpoint<span class="form-required">*</span></label>
<input type="text" name="openidc_discovery" class="form-control text-monospace" placeholder="" value="<%- openidc_discovery %>" autocomplete="off" maxlength="255" required>
</div>
</div>
<div class="col-sm-12 col-md-12 openidc">
<div class="form-group">
<label class="form-label">Token endpoint auth method<span class="form-required">*</span></label>
<select name="openidc_auth_method" class="form-control custom-select" placeholder="client_secret_post">
<option value="client_secret_post" <%- openidc_auth_method === 'client_secret_post' ? 'selected' : '' %>>client_secret_post</option>
<option value="client_secret_basic" <%- openidc_auth_method === 'client_secret_basic' ? 'selected' : '' %>>client_secret_basic</option>
</select>
</div>
</div>
<div class="col-sm-12 col-md-12 openidc">
<div class="form-group">
<label class="form-label">Client ID<span class="form-required">*</span></label>
<input type="text" name="openidc_client_id" class="form-control text-monospace" placeholder="" value="<%- openidc_client_id %>" autocomplete="off" maxlength="255" required>
</div>
</div>
<div class="col-sm-12 col-md-12 openidc">
<div class="form-group">
<label class="form-label">Client secret<span class="form-required">*</span></label>
<input type="text" name="openidc_client_secret" class="form-control text-monospace" placeholder="" value="<%- openidc_client_secret %>" autocomplete="off" maxlength="255" required>
</div>
</div>
</div>
</div>
</div>
</form>
</div>

View File

@@ -34,7 +34,9 @@ module.exports = Mn.View.extend({
hsts_subdomains: 'input[name="hsts_subdomains"]',
http2_support: 'input[name="http2_support"]',
forward_scheme: 'select[name="forward_scheme"]',
letsencrypt: '.letsencrypt'
letsencrypt: '.letsencrypt',
openidc_enabled: 'input[name="openidc_enabled"]',
openidc: '.openidc'
},
regions: {
@@ -91,6 +93,17 @@ module.exports = Mn.View.extend({
}
},
'change @ui.openidc_enabled': function () {
console.log('Changing');
let checked = this.ui.openidc_enabled.prop('checked');
if (checked) {
this.ui.openidc.show().find('input').prop('required', true);
} else {
this.ui.openidc.hide().find('input').prop('required', false);
}
},
'click @ui.add_location_btn': function (e) {
e.preventDefault();
@@ -128,6 +141,7 @@ module.exports = Mn.View.extend({
data.hsts_enabled = !!data.hsts_enabled;
data.hsts_subdomains = !!data.hsts_subdomains;
data.ssl_forced = !!data.ssl_forced;
data.openidc_enabled = data.openidc_enabled === '1';
if (typeof data.domain_names === 'string' && data.domain_names) {
data.domain_names = data.domain_names.split(',');
@@ -152,6 +166,12 @@ module.exports = Mn.View.extend({
data.certificate_id = parseInt(data.certificate_id, 10);
}
// OpenID Connect won't work with multiple domain names because the redirect URL has to point to a specific one
if (data.openidc_enabled && data.domain_names.length > 1) {
alert('Cannot use mutliple domain names when OpenID Connect is enabled');
return;
}
let method = App.Api.Nginx.ProxyHosts.create;
let is_new = true;
@@ -266,6 +286,9 @@ module.exports = Mn.View.extend({
view.ui.certificate_select[0].selectize.setValue(view.model.get('certificate_id'));
}
});
// OpenID Connect
this.ui.openidc.hide().find('input').prop('required', false);
},
initialize: function (options) {

View File

@@ -22,6 +22,12 @@ const model = Backbone.Model.extend({
block_exploits: false,
http2_support: false,
advanced_config: '',
openidc_enabled: false,
openidc_redirect_uri: null,
openidc_discovery: null,
openidc_auth_method: null,
openidc_client_id: null,
openidc_client_secret: null,
enabled: true,
meta: {},
// The following are expansions: