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: {
@@ -113,7 +115,7 @@ module.exports = Mn.View.extend({
             } else {
                 this.ui.dns_provider.prop('required', false);
                 this.ui.dns_provider_credentials.prop('required', false);
-                this.ui.dns_challenge_content.hide();                
+                this.ui.dns_challenge_content.hide();
             }
         },
 
@@ -125,13 +127,24 @@ module.exports = Mn.View.extend({
                 this.ui.credentials_file_content.show();
             } else {
                 this.ui.dns_provider_credentials.prop('required', false);
-                this.ui.credentials_file_content.hide();                
+                this.ui.credentials_file_content.hide();
+            }
+        },
+
+        '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();
-            
+
             const model = new ProxyLocationModel.Model();
             this.locationsCollection.add(model);
         },
@@ -167,17 +180,18 @@ 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;
             data.meta.dns_challenge = data.meta.dns_challenge == 1;
-            
+
             if(!data.meta.dns_challenge){
                 data.meta.dns_provider = undefined;
                 data.meta.dns_provider_credentials = undefined;
                 data.meta.propagation_seconds = undefined;
             } else {
-                if(data.meta.propagation_seconds === '') data.meta.propagation_seconds = undefined; 
+                if(data.meta.propagation_seconds === '') data.meta.propagation_seconds = undefined;
             }
 
             if (typeof data.domain_names === 'string' && data.domain_names) {
@@ -185,7 +199,7 @@ module.exports = Mn.View.extend({
             }
 
             // Check for any domain names containing wildcards, which are not allowed with letsencrypt
-            if (data.certificate_id === 'new') {                
+            if (data.certificate_id === 'new') {
                 let domain_err = false;
                 if (!data.meta.dns_challenge) {
                     data.domain_names.map(function (name) {
@@ -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: