Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/demosp UI #477

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Feature/demosp UI #477

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3ba44b0
vernice de demo-sp
baszoetekouw Sep 6, 2023
bf00fb8
wip: fancier layout using bootstrap
baszoetekouw Oct 10, 2023
ef51f7f
fix supported attributes
baszoetekouw Oct 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions roles/demo-sp/defaults/main.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,6 @@ demosp_user: "sram-demosp"
demosp_group: "sram-demosp"
demosp_dir: "/opt/{{demosp_name}}"
demosp_html_dir: "{{demosp_dir}}/html"

demosp_bootstrap_url: "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
demosp_bootstrap_chksum: "sha256:3017df4a76db5f01c2b99b603d88b03106df13bcfe18e67b7c13c2341d3a67df"
Binary file added roles/demo-sp/files/Nunito-ExtraBold.woff2
View file
Open in desktop
Binary file not shown.
Binary file added roles/demo-sp/files/SourceSansPro-Regular.woff2
View file
Open in desktop
Binary file not shown.
60 changes: 0 additions & 60 deletions roles/demo-sp/files/auth.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +0,0 @@
.attr_val {
white-space: pre;
font-family: monospace;
}

.not_found {
color: red;
}

/* generated by https://divtable.com/table-styler/ */
table.redTable {
border: 2px solid #A40808;
background-color: #EEE7DB;
text-align: left;
border-collapse: collapse;
}

table.redTable td,
table.redTable th {
border: 1px solid #AAAAAA;
padding: .2em 1em;
}

table.redTable tr:nth-child(even) {
background: #F5C8BF;
}

table.redTable thead {
background: #A40808;
background: -moz-linear-gradient(top, #bb4646 0%, #ad2020 66%, #A40808 100%);
background: -webkit-linear-gradient(top, #bb4646 0%, #ad2020 66%, #A40808 100%);
background: linear-gradient(to bottom, #bb4646 0%, #ad2020 66%, #A40808 100%);
}

table.redTable thead th {
font-weight: bold;
color: #FFFFFF;
text-align: center;
border-left: 2px solid #A40808;
}

table.redTable thead th:first-child {
border-left: none;
}

table.redTable tfoot td {
font-size: 13px;
}

table.redTable tfoot .links {
text-align: right;
}

table.redTable tfoot .links a {
display: inline-block;
background: #FFFFFF;
color: #A40808;
padding: 2px 8px;
border-radius: 5px;
}
119 changes: 60 additions & 59 deletions roles/demo-sp/files/auth.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,13 @@
<html lang="en">
<head>
<meta charset="utf-8">
<link href="/auth.css" rel="stylesheet">
<title>SRAM Demo SP</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="/bootstrap.min.css" rel="stylesheet">
<link href="/demosp.css" rel="stylesheet">

<title>SURF Research Access Management Demo SP</title>
</head>
<body>
<?php
Expand All @@ -13,7 +18,7 @@
$ENVS = array("test","acc","prd");
$FORMATS = array("table", "json", "raw");

$SUPPORTED = array(
$ATTRIBUTES = array(
'cn',
'displayName',
'givenName',
Expand All @@ -32,11 +37,6 @@
'sshPublicKey',
);

$UNSUPPORTED = array(
'eduPersonAssurance',
'schacHomeOrganization',
);

# sanitize user input
$env = $_SERVER['PATH_INFO'];
if (!in_array($env, $ENVS)) {
Expand Down Expand Up @@ -75,30 +75,51 @@
$user_attr = $as->getAttributes();

if ($format=="raw") {
print('<pre id="data">');
print(json_encode($user_attr, JSON_PRETTY_PRINT));
print('</pre>');
print('</body></html>');
exit();
print('<div id="raw">');
print('<h1>Raw attributes</h1>');
print('<code style="white-space: pre;">');
print_r($user_attr);
print('</code>');
print('</div>');
print('</body></html>');
exit();
}

if ($format=="json") {
print('<pre id="data">');
print(json_encode($user_attr, JSON_PRETTY_PRINT));
print('</pre>');
print('</body></html>');
exit();
}
?>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="/">SRAM Demo SP</a>
</div>
</nav>
<main>
<div class="container">

<a href="auth.php?format=json" class="btn button-primary">Get as JSON</a>

<div class="card mt-4">
<div class="card-header">Supported attributes</div>
<div class="card-body d-flex flex-column">
<?php

print('<div id="known">');
print('<h1>Known attributes</h1>');
print('<table class="redTable">');
print('<div class="table-responsive">');
print('<table class="table">');
print('<thead><tr><th>Attribute</th><th>Value</th></thead>'); print("\n");
foreach ($SUPPORTED as $attr) {
foreach ($ATTRIBUTES as $attr) {
print('<tr>');
print("<td>{$attr}</td>"); print("\n");
print('<td>');
print("<th>{$attr}</th>"); print("\n");
print('<td class="font-monospace text-nowrap">');
if (array_key_exists($attr, $user_attr)) {
sort($user_attr[$attr]);
foreach ($user_attr[$attr] as $val) {
Expand All @@ -115,63 +136,43 @@
print('</table>');
print('</div>');

?>
</div>
</div>

<div class="card mt-4">
<div class="card-header">Unsupported attributes</div>
<div class="card-body d-flex flex-column">
<?php

print('<div id="unsupported">');
print('<h1>Unsupported attributes</h1>');
print('<table class="redTable">');
$unknown_attr = array_diff( array_keys($user_attr), $ATTRIBUTES);
print('<div class="table-responsive">');
print('<table class="table">');
print('<thead><tr><th>Attribute</th><th>Value</th></thead>'); print("\n");
foreach ($UNSUPPORTED as $attr) {
foreach ($unknown_attr as $attr) {
print('<tr>');
print("<td>{$attr}</td>"); print("\n");
print('<td>');
if (array_key_exists($attr, $user_attr)) {
print("<th>{$attr}</th>"); print("\n");
print('<td class="font-monospace text-nowrap">');
foreach ($user_attr[$attr] as $val) {
sort($user_attr[$attr]);
foreach ($user_attr[$attr] as $val) {
print('<div class="attr_val">');
print($val);
print('</div>');
}
} else {
print('<span class="not_found">not present</span>');
print('<div class="attr_val">');
print($val);
print('</span>');
}
print('</td>'); print("\n");
print('</tr>'); print("\n");
}
print('</table>');
print('</div>');
?>
</div>
</div>

$known_attr = array_merge(
$SUPPORTED,
$UNSUPPORTED,
);

$unknown_attr = array_diff( array_keys($user_attr), $known_attr );
if ( !empty($unknown_attr) ) {
print('<div id="unknown">');
print('<h1>Unknown attributes</h1>');
print('<table class="redTable">');
print('<thead><tr><th>Attribute</th><th>Value</th></thead>'); print("\n");
foreach ($unknown_attr as $attr) {
print('<tr>');
print("<td>{$attr}</td>"); print("\n");
print('<td>');
foreach ($user_attr[$attr] as $val) {
sort($user_attr[$attr]);
print('<span class="attr_val">');
print($val);
print('</span>');
}
print('</td>'); print("\n");
print('</tr>'); print("\n");
}
print('</table>');
print('</div>');
}

echo("<br>\n");
<?php
$url = $as->getLogoutURL("/");
printf('<div><a href="%1$s">logout</a></div>', htmlspecialchars($url));

printf('<div class="mt-4"><a href="%1$s" class="btn btn-primary">logout</a></div>', htmlspecialchars($url));
?>
</div></div>
</main>
</body>
</html>
71 changes: 52 additions & 19 deletions roles/demo-sp/files/demosp.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,73 @@
.card-body img {
@font-face {
font-family: "Nunito";
src: url("Nunito-ExtraBold.woff2") format("woff2");
font-weight: bold;
font-style: normal;
}

.card-header {
background-color: #ffa640!important;
@font-face {
font-family: "SourceSansPro";
src: url("SourceSansPro-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}

.navbar div {
width: 966px
}

.navbar-brand img {
width: 158px;
svg.logo-surf .shape {
fill: white;
}

svg.logo-surf .text {
fill: black;
}

a.navbar-brand {
font-size: xx-large;
font-weight: bold;
color: white!important;
font-family: Nunito, sans-serif;
font-weight: bold;
font-size: xx-large;
padding-left: 1em;
}

.card-header {
background-color: #e67300!important;
color: white!important;
font-weight: bold;
}

.bg-light {
background-color: #ffa640!important;
background-color: #e67300!important;
}

div.card-header {
font-weight: bold;
.btn-primary {
background-color: #0077c8!important;
border-color: #0077c8!important;
}

.btn-primary:hover {
background-color: #004c97!important;
border-color: #004c97!important;
}

html {
position: relative;
min-height: 100%;
position: relative;
min-height: 100%;

}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
font-family: SourceSansPro, sans-serif;
margin-bottom: 60px; /* Margin bottom by footer height */
background-color: #eaebf0;
}

.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
10 changes: 2 additions & 8 deletions roles/demo-sp/files/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@
<div class="card h-100">
<div class="card-header">SAML Test</div>
<div class="card-body d-flex flex-column">
<img class="p-3" src="/images/edugain.png" alt="">
<p class="card-text">Start SAML authentication using the SRAM Test environment</p>
<a href="/auth/test" class="btn mt-auto btn-primary">Login using SRAM Test</a>
</div>
Expand All @@ -36,8 +35,7 @@
<div class="card h-100">
<div class="card-header">SAML Acceptance</div>
<div class="card-body d-flex flex-column">
<img class="p-3" src="/images/surfconext.png" alt="">
<p class="card-text">Start SAML authentication using the SRAM Accpetance environment</p>
<p class="card-text">Start SAML authentication using the SRAM Acceptance environment</p>
<a href="/auth/acc" class="btn mt-auto btn-primary">Login using SRAM Acceptance</a>
</div>
</div>
Expand All @@ -47,7 +45,6 @@
<div class="card h-100">
<div class="card-header">SAML Production</div>
<div class="card-body d-flex flex-column">
<img class="p-3" src="/images/surfconext.png" alt="">
<p class="card-text">Start SAML authentication using the SRAM Production environment</p>
<a href="/auth/prd" class="btn mt-auto btn-primary">Login using SRAM Production</a>
</div>
Expand All @@ -60,7 +57,6 @@
<div class="card h-100">
<div class="card-header">OIDC Test</div>
<div class="card-body d-flex flex-column">
<img class="p-3" src="/images/edugain.png" alt="">
<p class="card-text">Start OIDC authentication using the SRAM Test environment</p>
<a href="/rp/test" class="btn mt-auto btn-primary">Login using SRAM Test</a>
</div>
Expand All @@ -71,8 +67,7 @@
<div class="card h-100">
<div class="card-header">OIDC Acceptance</div>
<div class="card-body d-flex flex-column">
<img class="p-3" src="/images/surfconext.png" alt="">
<p class="card-text">Start OIDC authentication using the SRAM Accpetance environment</p>
<p class="card-text">Start OIDC authentication using the SRAM Acceptance environment</p>
<a href="/rp/acc" class="btn mt-auto btn-primary">Login using SRAM Acceptance</a>
</div>
</div>
Expand All @@ -82,7 +77,6 @@
<div class="card h-100">
<div class="card-header">OIDC Production</div>
<div class="card-body d-flex flex-column">
<img class="p-3" src="/images/surfconext.png" alt="">
<p class="card-text">Start OIDC authentication using the SRAM Production environment</p>
<a href="/rp/prd" class="btn mt-auto btn-primary">Login using SRAM Production</a>
</div>
Expand Down
Loading