Merge oidc settings for user directory view

dashboard/src/views/user-settings.html

@@ -99,15 +99,131 @@
   </div>
 </div>
 
+
+<!-- Modal client add -->
+<div class="modal fade" id="oidcClientAddModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title">{{ 'oidc.newClientDialog.title' | tr }}</h4>
+        </div>
+        <div class="modal-body">
+          {{ 'oidc.newClientDialog.description' | tr }}
+          <br/>
+          <br/>
+          <form name="clientAddForm" role="form" novalidate ng-submit="clientAdd.submit()" autocomplete="off">
+            <div class="form-group">
+              <label class="control-label" for="clientName">{{ 'oidc.client.name' | tr }}</label>
+              <input type="text" id="clientName" class="form-control" name="clientName" ng-model="clientAdd.name" autofocus required/>
+            </div>
+            <div class="form-group" ng-class="{ 'has-error': clientAdd.error.id }">
+              <label class="control-label" for="clientId">{{ 'oidc.client.id' | tr }}</label>
+              <input type="text" id="clientId" class="form-control" name="clientId" ng-model="clientAdd.id" required/>
+              <div class="control-label" ng-show="clientAdd.error.id">
+                <small>{{ clientAdd.error.id }}</small>
+              </div>
+            </div>
+            <div class="form-group">
+              <label class="control-label" for="clientSecret">{{ 'oidc.client.secret' | tr }}</label>
+              <input type="text" id="clientSecret" class="form-control" name="clientSecret" ng-model="clientAdd.secret" required/>
+            </div>
+            <div class="form-group">
+              <label class="control-label" for="loginRedirectUri">{{ 'oidc.client.loginRedirectUri' | tr }}</label>
+              <input type="text" id="loginRedirectUri" class="form-control" name="loginRedirectUri" ng-model="clientAdd.loginRedirectUri" required/>
+            </div>
+            <div class="form-group">
+              <label class="control-label">{{ 'oidc.client.signingAlgorithm' | tr }}</label>
+              <div class="control-label">
+                <select class="form-control" ng-model="clientAdd.tokenSignatureAlgorithm">
+                  <option value="RS256">RS256</option>
+                  <option value="EdDSA">EdDSA</option>
+                </select>
+              </div>
+            </div>
+            <input class="ng-hide" type="submit" ng-disabled="clientAddForm.$invalid"/>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.close' | tr }}</button>
+          <button type="button" class="btn btn-success" ng-click="clientAdd.submit()" ng-disabled="clientAddForm.$invalid || clientAdd.busy">
+            <i class="fa fa-circle-notch fa-spin" ng-show="clientAdd.busy"></i> {{ 'oidc.newClientDialog.createAction' | tr }}
+          </button>
+        </div>
+      </div>
+  </div>
+</div>
+
+<!-- Modal client edit -->
+<div class="modal fade" id="oidcClientEditModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title">{{ 'oidc.editClientDialog.title' | tr:{ client: clientEdit.id } }}</h4>
+        </div>
+        <div class="modal-body">
+          <form name="clientEditForm" role="form" novalidate ng-submit="clientEdit.submit()" autocomplete="off">
+            <div class="form-group">
+              <label class="control-label" for="inputEditClientName">{{ 'oidc.client.name' | tr }}</label>
+              <input type="text" id="inputEditClientName" class="form-control" name="clientName" ng-model="clientEdit.name" autofocus required/>
+            </div>
+            <div class="form-group">
+              <label class="control-label" for="inputEditClientSecret">{{ 'oidc.client.secret' | tr }}</label>
+              <input type="text" id="inputEditClientSecret" class="form-control" name="clientSecret" ng-model="clientEdit.secret" required/>
+            </div>
+            <div class="form-group">
+              <label class="control-label" for="inputEditLoginRedirectUri">{{ 'oidc.client.loginRedirectUri' | tr }}</label>
+              <input type="text" id="inputEditLoginRedirectUri" class="form-control" name="loginRedirectUri" ng-model="clientEdit.loginRedirectUri" required/>
+            </div>
+
+            <div class="form-group">
+              <label class="control-label">{{ 'oidc.client.signingAlgorithm' | tr }}</label>
+              <div class="control-label">
+                <select class="form-control" ng-model="clientEdit.tokenSignatureAlgorithm">
+                  <option value="RS256">RS256</option>
+                  <option value="EdDSA">EdDSA</option>
+                </select>
+              </div>
+            </div>
+            <input class="ng-hide" type="submit" ng-disabled="clientEditForm.$invalid"/>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.close' | tr }}</button>
+          <button type="button" class="btn btn-success" ng-click="clientEdit.submit()" ng-disabled="clientEditForm.$invalid || clientEdit.busy">
+            <i class="fa fa-circle-notch fa-spin" ng-show="clientEdit.busy"></i> {{ 'main.dialog.save' | tr }}
+          </button>
+        </div>
+      </div>
+  </div>
+</div>
+
+<!-- Modal client delete -->
+<div class="modal fade" id="oidcClientDeleteModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title">{{ 'oidc.deleteClientDialog.title' | tr:{ client: deleteClient.id } }}</h4>
+      </div>
+      <div class="modal-body">
+        <p>{{ 'oidc.deleteClientDialog.description' | tr }}</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
+        <button type="button" class="btn btn-danger" ng-click="deleteClient.submit()" ng-disabled="deleteClient.busy"><i class="fa fa-circle-notch fa-spin" ng-show="deleteClient.busy"></i> {{ 'main.dialog.delete' | tr }}</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="content content-large">
 
   <div class="text-left">
     <h1>
-      {{ 'users.settings.title' | tr }}
+      {{ 'users.title' | tr }}
     </h1>
   </div>
 
-  <div class="card card-large" ng-show="user.isAtLeastAdmin">
+  <div class="card card-large">
     <form name="profileConfigForm" role="form" novalidate ng-submit="profileConfig.submit()" autocomplete="off">
       <fieldset ng-disabled="profileConfig.busy">
         <div class="checkbox">
@@ -137,11 +253,11 @@
 
   </div>
 
-  <div class="text-left section-header" ng-show="user.isAtLeastAdmin">
+  <div class="text-left section-header">
     <h3>{{ 'users.externalLdap.title' | tr }}</h3>
   </div>
 
-  <div class="card card-large" ng-show="user.isAtLeastAdmin">
+  <div class="card card-large">
     <div class="row">
       <div class="col-md-12">{{ 'users.externalLdap.description' | tr }}</div>
     </div>
@@ -296,11 +412,11 @@
     </div>
   </div>
 
-  <div class="text-left section-header" ng-show="user.isAtLeastAdmin">
+  <div class="text-left section-header">
     <h3>{{ 'users.exposedLdap.title' | tr }}</h3>
   </div>
 
-  <div class="card card-large" ng-show="user.isAtLeastAdmin">
+  <div class="card card-large">
     <div class="row">
       <div class="col-md-12">
         <div>{{ 'users.exposedLdap.description' | tr }}</div>
@@ -351,16 +467,85 @@
     </div>
   </div>
 
-  <div class="text-left section-header" ng-show="user.isAtLeastAdmin">
+  <div class="text-left section-header">
     <h3>{{ 'oidc.title' | tr }}</h3>
   </div>
 
-  <div class="card card-large" ng-show="user.isAtLeastAdmin">
-    <div class="row">
-      <div class="col-md-12" style="line-height: 34px;">
-        {{ 'oidc.description' | tr }}
-        <a href="/#/oidc" class="btn btn-outline btn-primary pull-right">{{ 'main.settings' | tr }}</a>
+  <div class="card card-large">
+    <div class="grid-item-top">
+      <div class="row">
+        <div class="col-md-12">
+          <table width="100%">
+            <tr>
+              <td class="text-muted" style="vertical-align: top;">{{ 'oidc.env.discoveryUrl' | tr }}</td>
+              <td class="text-right" style="vertical-align: top;" ng-click-select>https://{{ config.adminFqdn }}/.well-known/openid-configuration</td>
+            </tr>
+            <tr>
+              <td class="text-muted" style="vertical-align: top;">{{ 'oidc.env.authEndpoint' | tr }}</td>
+              <td class="text-right" style="vertical-align: top;" ng-click-select>https://{{ config.adminFqdn }}/openid/auth</td>
+            </tr>
+            <tr>
+              <td class="text-muted" style="vertical-align: top;">{{ 'oidc.env.tokenEndpoint' | tr }}</td>
+              <td class="text-right" style="vertical-align: top;" ng-click-select>https://{{ config.adminFqdn }}/openid/token</td>
+            </tr>
+            <tr>
+              <td class="text-muted" style="vertical-align: top;">{{ 'oidc.env.keysEndpoint' | tr }}</td>
+              <td class="text-right" style="vertical-align: top;" ng-click-select>https://{{ config.adminFqdn }}/openid/jwks</td>
+            </tr>
+            <tr>
+              <td class="text-muted" style="vertical-align: top;">{{ 'oidc.env.profileEndpoint' | tr }}</td>
+              <td class="text-right" style="vertical-align: top;" ng-click-select>https://{{ config.adminFqdn }}/openid/me</td>
+            </tr>
+            <tr>
+              <td class="text-muted" style="vertical-align: top;">{{ 'oidc.env.logoutUrl' | tr }}</td>
+              <td class="text-right" style="vertical-align: top;" ng-click-select>https://{{ config.adminFqdn }}/openid/session/end</td>
+            </tr>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <hr/>
+
+    <div>
+      <h4>{{ 'oidc.clients.title' | tr }} <button class="btn btn-primary btn-sm pull-right" ng-click="clientAdd.show()"><i class="fa fa-plus"></i> {{ 'oidc.clients.newClient' | tr }}</button></h4>
+      <div class="grid-item-top">
+        <div class="row">
+          <div class="col-xs-12">
+            <table class="table table-hover">
+              <thead>
+                <tr>
+                  <th style="width: 33%">{{ 'oidc.client.name' | tr }}</th>
+                  <th style="width: 33%">{{ 'oidc.client.id' | tr }}</th>
+                  <th style="width: 33%">{{ 'oidc.client.signingAlgorithm' | tr }}</th>
+                  <th style="width: 10%" class="text-right">{{ 'main.actions' | tr }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr ng-show="oidcClients.length === 0">
+                  <td colspan="3" class="text-center">{{ 'oidc.clients.empty' | tr }}</td>
+                </tr>
+                <tr ng-repeat="client in oidcClients">
+                  <td class="text-left elide-table-cell hand" ng-click="clientEdit.show(client)">
+                    {{ client.name }}
+                  </td>
+                  <td class="text-left elide-table-cell hand" ng-click="clientEdit.show(client)">
+                    {{ client.id }}
+                  </td>
+                  <td class="text-left elide-table-cell hand" ng-click="clientEdit.show(client)">
+                    {{ client.tokenSignatureAlgorithm }}
+                  </td>
+                  <td class="text-right no-wrap" style="vertical-align: bottom">
+                    <button class="btn btn-xs btn-danger" ng-click="deleteClient.show(client)" uib-tooltip="Delete"><i class="far fa-trash-alt"></i></button>
+                    <button class="btn btn-xs btn-default" ng-click="clientEdit.show(client)" uib-tooltip="Edit"><i class="fa fa-pencil-alt"></i></button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
       </div>
     </div>
   </div>
+
 </div>