From 457d1a75ba6124ec499a49433f3232f4ceeb1536 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcell=20F=C3=9CL=C3=96P?= <marekful@domainloop.net>
Date: Fri, 24 Feb 2023 15:11:08 +0000
Subject: [PATCH] chore: improve oidc setting ui

---
 frontend/js/app/settings/oidc-config/main.ejs | 29 ++++++++++++-------
 frontend/js/app/settings/oidc-config/main.js  |  2 +-
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/frontend/js/app/settings/oidc-config/main.ejs b/frontend/js/app/settings/oidc-config/main.ejs
index 6bd7c342..1395a920 100644
--- a/frontend/js/app/settings/oidc-config/main.ejs
+++ b/frontend/js/app/settings/oidc-config/main.ejs
@@ -9,26 +9,35 @@
                 <div class="col-sm-12 col-md-12">
                     <div class="form-group">
                         <div class="form-label"><%- description %></div>
+                        <div>
+                            <p><%- i18n('settings', 'oidc-config-hint-1') %></p>
+                            <p><%- i18n('settings', 'oidc-config-hint-2') %></p>
+                        </div>
                         <div class="custom-controls-stacked">
                             <div class="form-group">
-                                <div class="form-label">Name</div>
-                                <input class="form-control name-input" name="meta[name]" placeholder="" type="text" value="<%- meta && typeof meta.name !== 'undefined' ? meta.name : '' %>">
+                                <label class="form-label">Name <span class="form-required">*</span>
+                                    <input class="form-control name-input" name="meta[name]" required type="text" value="<%- meta && typeof meta.name !== 'undefined' ? meta.name : '' %>">
+                                </label>
                             </div>
                             <div class="form-group">
-                                <div class="form-label">Client ID</div>
-                                <input class="form-control id-input" name="meta[clientID]" placeholder="" type="text" value="<%- meta && typeof meta.clientID !== 'undefined' ? meta.clientID : '' %>">
+                                <label class="form-label">Client ID <span class="form-required">*</span>
+                                    <input class="form-control id-input" name="meta[clientID]" required type="text" value="<%- meta && typeof meta.clientID !== 'undefined' ? meta.clientID : '' %>">
+                                </label>
                             </div>
                             <div class="form-group">
-                                <div class="form-label">Client Secret</div>
-                                <input class="form-control secret-input" name="meta[clientSecret]" placeholder="" type="text" value="<%- meta && typeof meta.clientSecret !== 'undefined' ? meta.clientSecret : '' %>">
+                                <label class="form-label">Client Secret <span class="form-required">*</span>
+                                    <input class="form-control secret-input" name="meta[clientSecret]" required type="text" value="<%- meta && typeof meta.clientSecret !== 'undefined' ? meta.clientSecret : '' %>">
+                                </label>
                             </div>
                             <div class="form-group">
-                                <div class="form-label">Issuer URL</div>
-                                <input class="form-control issuer-input" name="meta[issuerURL]" placeholder="https://" type="url" value="<%- meta && typeof meta.issuerURL !== 'undefined' ? meta.issuerURL : '' %>">
+                                <label class="form-label">Issuer URL <span class="form-required">*</span>
+                                    <input class="form-control issuer-input" name="meta[issuerURL]" required placeholder="https://" type="url" value="<%- meta && typeof meta.issuerURL !== 'undefined' ? meta.issuerURL : '' %>">
+                                </label>
                             </div>
                             <div class="form-group">
-                                <div class="form-label">Redirect URL</div>
-                                <input class="form-control redirect-url-input" name="meta[redirectURL]" placeholder="https://" type="url" value="<%- meta && typeof meta.redirectURL !== 'undefined' ? meta.redirectURL : '' %>">
+                                <label class="form-label">Redirect URL <span class="form-required">*</span>
+                                    <input class="form-control redirect-url-input" name="meta[redirectURL]" required placeholder="https://" type="url" value="<%- meta && typeof meta.redirectURL !== 'undefined' ? meta.redirectURL : document.location.origin + '/api/oidc/callback' %>">
+                                </label>
                             </div>
                             <div class="form-group">
                                 <div class="form-label">Enabled</div>
diff --git a/frontend/js/app/settings/oidc-config/main.js b/frontend/js/app/settings/oidc-config/main.js
index 8fffcd69..b4499785 100644
--- a/frontend/js/app/settings/oidc-config/main.js
+++ b/frontend/js/app/settings/oidc-config/main.js
@@ -7,7 +7,7 @@ require('selectize');
 
 module.exports = Mn.View.extend({
     template:  template,
-    className: 'modal-dialog',
+    className: 'modal-dialog wide',
 
     ui: {
         form:     'form',