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

frontend/js/app/nginx/proxy/form.ejs

@@ -11,6 +11,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">
 
@@ -270,6 +271,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>

frontend/js/app/nginx/proxy/form.js

@@ -43,7 +43,9 @@ module.exports = Mn.View.extend({
         dns_provider_credentials: 'textarea[name="meta[dns_provider_credentials]"]',
         propagation_seconds:      'input[name="meta[propagation_seconds]"]',
         forward_scheme:           'select[name="forward_scheme"]',
-        letsencrypt:              '.letsencrypt'
+        letsencrypt:              '.letsencrypt',
+        openidc_enabled:          'input[name="openidc_enabled"]',
+        openidc:                  '.openidc'
     },
 
     regions: {
@@ -129,6 +131,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();
 
@@ -167,6 +180,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.meta === 'undefined') data.meta = {};
             data.meta.letsencrypt_agree = data.meta.letsencrypt_agree == 1;
@@ -203,6 +217,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;
 
@@ -344,6 +364,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) {

frontend/js/models/proxy-host.js

@@ -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: