aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMike Crute <mike@crute.us>2021-11-21 20:56:07 -0800
committerMike Crute <mike@crute.us>2021-11-21 20:56:07 -0800
commit20484058825f0137a89712f41ae8c50dcc7e697d (patch)
tree1a99cfecd9bb0d2fc33381501e223bc39ad6bd30
parent98b08625108e4f97b88074f392535eed6726bd36 (diff)
downloadcloud-identity-broker-20484058825f0137a89712f41ae8c50dcc7e697d.tar.bz2
cloud-identity-broker-20484058825f0137a89712f41ae8c50dcc7e697d.tar.xz
cloud-identity-broker-20484058825f0137a89712f41ae8c50dcc7e697d.zip
Tweak HTML styles and page layout
Diffstat
-rw-r--r--templates/index.tpl145
1 files changed, 88 insertions, 57 deletions
diff --git a/templates/index.tpl b/templates/index.tpl
index 98ca31a..3a6acbf 100644
--- a/templates/index.tpl
+++ b/templates/index.tpl
@@ -1,30 +1,34 @@
1<!DOCTYPE html> 1<!DOCTYPE html>
2<html lang="en"> 2<html lang="en">
3 <head> 3 <head>
4 <title>Select Account</title> 4 <title>Select Account</title>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <style type="text/css"> 6 <style type="text/css">
7 html {
8 display: grid;
9 grid-template-columns: [left] 10% [main] auto [right] 10%;
10 grid-template-rows: [main] auto;
11 }
7 body { 12 body {
8 margin: 0 10%; 13 grid-column: main;
14 grid-row: main;
9 } 15 }
10 table { 16 table {
11 width: 100%; 17 width: 100%;
12 border: 1px solid black; 18 border: 1px solid black;
13 border-collapse: collapse; 19 border-collapse: collapse;
14 } 20 }
15 td, th { 21 td, th {
16 border: 1px solid black; 22 border: 1px solid black;
17 padding: 0.5em; 23 padding: 0.5em;
18 } 24 }
19 th { 25 th {
20 background-color: #CCCCCC; 26 background-color: #CCCCCC;
21 } 27 }
22 td.alt-creds {
23 text-align: center;
24 }
25 textarea { 28 textarea {
26 height: 10em; 29 height: 10em;
27 width: 100%; 30 width: 100%;
31 resize: none;
28 } 32 }
29 a, a:visited { 33 a, a:visited {
30 color: blue; 34 color: blue;
@@ -52,30 +56,40 @@
52 text-align: center; 56 text-align: center;
53 display: none; 57 display: none;
54 } 58 }
55 </style> 59 #account-table tr td:nth-child(2),
56 <script id="shell_template" type="text/template"> 60 #account-table tr td:nth-child(3) {
57 export AWS_CREDS_EXPIRATION="[[ .expiration ]]" 61 text-align: center;
58 export AWS_ACCESS_KEY_ID="[[ .access_key ]]" 62 }
59 export AWS_SECRET_ACCESS_KEY="[[ .secret_key ]]" 63 .admin {
60 export AWS_SESSION_TOKEN="[[ .session_token ]]" 64 display: none;
61 </script> 65 }
62 <script id="powershell_template" type="text/template"> 66 body.isAdmin .admin {
63 Set-Item -path env:AWS_CREDS_EXPIRATION -value '[[ .expiration ]]' 67 display: initial;
64 Set-Item -path env:AWS_ACCESS_KEY_ID -value '[[ .access_key ]]' 68 }
65 Set-Item -path env:AWS_SECRET_ACCESS_KEY -value '[[ .secret_key ]]' 69 </style>
66 Set-Item -path env:AWS_SESSION_TOKEN -value '[[ .session_token ]]' 70 <script id="shell_template" type="text/template">
67 </script> 71 export AWS_CREDS_EXPIRATION="[[ .expiration ]]"
68 <script id="aws_config_template" type="text/template"> 72 export AWS_ACCESS_KEY_ID="[[ .access_key ]]"
69 [profile [[ .ShortName ]]] 73 export AWS_SECRET_ACCESS_KEY="[[ .secret_key ]]"
70 aws_access_key_id=[[ .access_key ]] 74 export AWS_SESSION_TOKEN="[[ .session_token ]]"
71 aws_secret_access_key=[[ .secret_key ]] 75 </script>
72 aws_session_token=[[ .session_token ]] 76 <script id="powershell_template" type="text/template">
73 expiration=[[ .expiration ]] 77 Set-Item -path env:AWS_CREDS_EXPIRATION -value '[[ .expiration ]]'
74 </script> 78 Set-Item -path env:AWS_ACCESS_KEY_ID -value '[[ .access_key ]]'
75 <script id="credential_row_template" type="text/template"> 79 Set-Item -path env:AWS_SECRET_ACCESS_KEY -value '[[ .secret_key ]]'
80 Set-Item -path env:AWS_SESSION_TOKEN -value '[[ .session_token ]]'
81 </script>
82 <script id="aws_config_template" type="text/template">
83 [profile [[ .ShortName ]]]
84 aws_access_key_id=[[ .access_key ]]
85 aws_secret_access_key=[[ .secret_key ]]
86 aws_session_token=[[ .session_token ]]
87 expiration=[[ .expiration ]]
88 </script>
89 <script id="credential_row_template" type="text/template">
76 <body> 90 <body>
77 <tr id="credentials-for-[[ .Account ]]"> 91 <tr id="credentials-for-[[ .Account ]]">
78 <td colspan="2"> 92 <td colspan="3">
79 <textarea>[[ .Content ]]</textarea> 93 <textarea>[[ .Content ]]</textarea>
80 <button>Close</button> 94 <button>Close</button>
81 </td> 95 </td>
@@ -84,14 +98,16 @@
84 </script> 98 </script>
85 <script id="account_row_template" type="text/template"> 99 <script id="account_row_template" type="text/template">
86 <tr id="account-row-[[ .short_name ]]" data-account-name="[[ .short_name ]]" data-global-credential-endpoint="[[ .global_credential_url ]]"> 100 <tr id="account-row-[[ .short_name ]]" data-account-name="[[ .short_name ]]" data-global-credential-endpoint="[[ .global_credential_url ]]">
87 <td>[[ .name ]]</td> 101 <td>[[ .name ]]</td>
88 <td class="alt-creds"> 102 <td>[[ .vendor ]]</td>
103 <td>
89 <a href="[[ .console_redirect_url ]]">Console</a> | 104 <a href="[[ .console_redirect_url ]]">Console</a> |
90 <a data-template="aws_config_template" href="#/cli/[[ .short_name ]]">AWS CLI</a> | 105 <a data-template="aws_config_template" href="#/cli/[[ .short_name ]]">AWS CLI</a> |
91 <a data-template="shell_template" href="#/sh/[[ .short_name ]]">Bash</a> | 106 <a data-template="shell_template" href="#/sh/[[ .short_name ]]">Bash</a> |
92 <a data-template="powershell_template" href="#/ps/[[ .short_name ]]">Powershell</a> 107 <a data-template="powershell_template" href="#/ps/[[ .short_name ]]">Powershell</a>
93 </td> 108 <span class="admin">| <a>Edit</a></span>
94 </tr> 109 </td>
110 </tr>
95 </script> 111 </script>
96 <script type="text/javascript"> 112 <script type="text/javascript">
97 function fillTemplate(templateId, values) { 113 function fillTemplate(templateId, values) {
@@ -174,8 +190,16 @@
174 return document.cookie.match(new RegExp(name + "=\"?([^;\"]*)\"?;?"))[1]; 190 return document.cookie.match(new RegExp(name + "=\"?([^;\"]*)\"?;?"))[1];
175 } 191 }
176 192
193 function parseJWT(token) {
194 return JSON.parse(atob(token.split(".")[1]));
195 }
196
177 function parseJWTExpires(token) { 197 function parseJWTExpires(token) {
178 return new Date(JSON.parse(atob(token.split(".")[1]))["exp"] * 1000); 198 return new Date(parseJWT(token)["exp"] * 1000);
199 }
200
201 function isAdmin(token) {
202 return parseJWT(token)["admin"];
179 } 203 }
180 204
181 function populateAPIKey() { 205 function populateAPIKey() {
@@ -185,18 +209,25 @@
185 209
186 window.addEventListener('load', populateAPIKey); 210 window.addEventListener('load', populateAPIKey);
187 window.addEventListener('load', populateAccountTable); 211 window.addEventListener('load', populateAccountTable);
212 window.addEventListener('load', function() {
213 if (isAdmin(getCookie("github-token"))) {
214 document.body.classList.add("isAdmin");
215 }
216 });
188 </script> 217 </script>
189 </head> 218 </head>
190 <body> 219 <body>
191 <p id="api-error">Error communicating with the API.</p> 220 <p id="api-error">Error communicating with the API.</p>
192 221
193 <h1>AWS Accounts</h1> 222 <h1>Cloud Accounts</h1>
194 <table id="account-table"> 223 <table id="account-table">
195 <tr> 224 <tr>
196 <th>Console Login</th> 225 <th>Console Login</th>
197 <th>Get Credentials</th> 226 <th>Vendor</th>
198 </tr> 227 <th>Credentials</th>
199 </table> 228 </tr>
229 </table>
230 <p><button class="admin">Add Account</button></p>
200 231
201 <h1>API Key</h1> 232 <h1>API Key</h1>
202 <div id="api-key"> 233 <div id="api-key">
@@ -204,5 +235,5 @@
204 <textarea>Bearer {token}</textarea> 235 <textarea>Bearer {token}</textarea>
205 <p><b>Token Expires:</b> <span id="session-expires"></span></p> 236 <p><b>Token Expires:</b> <span id="session-expires"></span></p>
206 </div> 237 </div>
207 </body> 238 </body>
208</html> 239</html>
© 2015 Mike Crute