philorg/oidc-fastapi-test
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Cosmetic

Browse source
This commit is contained in:
phil 2025-01-03 13:36:22 +01:00
parent e1640b118d
commit e44d89e512
1 changed files with 42 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

71
src/templates/index.html
View file

@ -37,7 +37,7 @@
max-height: 3em max-height: 3em
} }
.user-info a.logout { .user-info a.logout {
background-color: darkkhaki; border: 2px solid darkkhaki;
padding: 3px 6px; padding: 3px 6px;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
@ -49,6 +49,9 @@
.login-box { .login-box {
text-align: center; text-align: center;
} }
.login-box p {
margin: 0;
}
.login-toolbox { .login-toolbox {
max-width: 20em; max-width: 20em;
margin: auto; margin: auto;
@ -77,21 +80,34 @@
} }
.debug-auth { .debug-auth {
font-size: 90%; font-size: 90%;
background-color: #d8bebc75;
padding: 6px;
} }
.debug-auth p, .debug .key { .debug-auth * {
margin: 0;
}
.debug-auth p {
text-align: center;
border-bottom: 1px solid black;
}
.debug-auth ul {
padding: 0;
list-style: none;
}
.debug-auth p, .debug-auth .key {
font-weight: bold; font-weight: bold;
} }
.content { .content {
text-align: left; text-align: left;
} }
.content .links-to-protected { .content #links-to-check {
display: flex; display: flex;
text-align: center; text-align: center;
} }
.content .links-to-protected a { .content #links-to-check a {
margin: 5px; margin: 5px;
color: black; color: black;
padding: 3px 5px; padding: 3px 6px;
text-decoration: none; text-decoration: none;
} }
.hasResponseStatus { .hasResponseStatus {
@ -105,31 +121,29 @@
} }
</style> </style>
<script> <script>
function setStatus(theUrl, theId) { function checkHref(elem) {
var xmlHttp = new XMLHttpRequest(); var xmlHttp = new XMLHttpRequest()
xmlHttp.onreadystatechange = function() { xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) { if (xmlHttp.readyState == 4) {
var elem = document.getElementById(theId)
elem.classList.add("hasResponseStatus") elem.classList.add("hasResponseStatus")
elem.classList.add("status-" + xmlHttp.status) elem.classList.add("status-" + xmlHttp.status)
elem.title = "Response code " + xmlHttp.status elem.title = "Response code: " + xmlHttp.status
//console.log(theUrl, xmlHttp.status, elem)
} }
} }
xmlHttp.open("GET", theUrl, true); // true for asynchronous xmlHttp.open("GET", elem.href, true) // true for asynchronous
xmlHttp.send(null); xmlHttp.send(null)
} }
function checkPerms() { function checkPerms(rootId) {
setStatus("/protected", "protected") var rootElem = document.getElementById(rootId)
setStatus("/protected-by-foorole", "protectedByfoorole") Array.from(rootElem.children).forEach(elem => checkHref(elem))
setStatus("/protected-by-barrole", "protectedBybarrole")
} }
</script> </script>
</head> </head>
<body onload="checkPerms()"> <body onload="checkPerms('links-to-check')">
<h1>Test app for OIDC</h1> <h1>FastAPI test app for OIDC</h1>
{% if not user %} {% if not user %}
<div class="login-box"> <div class="login-box">
<p>Not logged in</p>
<div class="login-toolbox"> <div class="login-toolbox">
{% for provider in settings.oidc.providers %} {% for provider in settings.oidc.providers %}
<a href="login?provider={{ provider.name }}">Login with: {{ provider.name }}</a> <a href="login?provider={{ provider.name }}">Login with: {{ provider.name }}</a>
@ -150,20 +164,19 @@
</div> </div>
{% endif %} {% endif %}
<div class="content"> <div class="content">
<div class="links-to-protected"> <p>
<a id="protected" href="protected"> These links should get different response codes depending on the authorization:
Access protected content </p>
</a> <div id="links-to-check">
<a id="protectedByfoorole" href="protected-by-foorole"> <a href="public">Public</a>
Access + foorole protected content <a href="protected">Access protected content</a>
</a> <a href="protected-by-foorole">Access + foorole protected content</a>
<a id="protectedBybarrole" href="protected-by-barrole"> <a href="protected-by-barrole">Access + barrole protected content</a>
Access + barrole protected content <a href="other">Other</a>
</a>
</div> </div>
{% if user and settings.oidc.show_session_details %} {% if user and settings.oidc.show_session_details %}
<div class="debug-auth"> <div class="debug-auth">
<p>Session details:</p> <p>Session details</p>
<ul> <ul>
{% for key, value in auth_data.items() %} {% for key, value in auth_data.items() %}
<li> <li>