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

Add automatic link status check

Browse source
This commit is contained in:
phil 2025-01-03 12:39:41 +01:00
parent f4fc6f18ec
commit e1640b118d
1 changed files with 73 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

97
src/templates/index.html
View file

@ -24,7 +24,7 @@
flex-direction: column;
width: fit-content;
align-items: center;
justify-content: center;
margin: 5px auto;
box-shadow: 0px 0px 10px lightgreen;
background-color: lightgreen;
}
@ -36,6 +36,16 @@
max-width: 3em;
max-height: 3em
}
.user-info a.logout {
background-color: darkkhaki;
padding: 3px 6px;
text-decoration: none;
text-align: center;
color: black;
}
.user-info a.logout:hover {
background-color: orange;
}
.login-box {
text-align: center;
}
@ -62,17 +72,9 @@
font-weight: bold;
flex: 1 1 auto;
}
.login-toolbox a.logout:hover {
background-color: orange;
}
.login-toolbox a:hover {
background-color: lightgreen;
}
.login-toolbox .link-to-protected {
margin: 1em;
background-color: cyan;
box-shadow: 0px 0px 20px cyan;
}
.debug-auth {
font-size: 90%;
}
@ -82,36 +84,83 @@
.content {
text-align: left;
}
.content .links-to-protected {
display: flex;
text-align: center;
}
.content .links-to-protected a {
margin: 5px;
color: black;
padding: 3px 5px;
text-decoration: none;
}
.hasResponseStatus {
background-color: #88888840;
}
.hasResponseStatus.status-200 {
background-color: #00ff0040;
}
.hasResponseStatus.status-401 {
background-color: #ff000040;
}
</style>
<script>
function setStatus(theUrl, theId) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
var elem = document.getElementById(theId)
elem.classList.add("hasResponseStatus")
elem.classList.add("status-" + xmlHttp.status)
elem.title = "Response code " + xmlHttp.status
//console.log(theUrl, xmlHttp.status, elem)
}
}
xmlHttp.open("GET", theUrl, true); // true for asynchronous
xmlHttp.send(null);
}
function checkPerms() {
setStatus("/protected", "protected")
setStatus("/protected-by-foorole", "protectedByfoorole")
setStatus("/protected-by-barrole", "protectedBybarrole")
}
</script>
</head>
<body>
<body onload="checkPerms()">
<h1>Test app for OIDC</h1>
{% if not user %}
<div class="login-box">
<div class="login-toolbox">
{% if user %}
<a href="logout" class="logout">Logout</a>
{% else %}
{% for provider in settings.oidc.providers %}
<a href="login?provider={{ provider.name }}">Login with: {{ provider.name }}</a>
{% else %}
<span class="error">Cannot login: no oidc prodiver in settings.yaml</span>
{% endfor %}
{% endif %}
<a class="link-to-protected" href="protected">
Ckeck here to get NOT_AUTHORIZED (401) or access protected content
</a>
</div>
</div>
<div class="content">
{% endif %}
{% if user %}
<div class="user-info">
<p>Hey, {{ user.name }}</p>
{% if user.picture %}
<img src="{{ user.picture }}" class="picture"></img>
{% endif %}
<p>{{ user.email }}</p>
</div>
<p>Hey, {{ user.name }}</p>
{% if user.picture %}
<img src="{{ user.picture }}" class="picture"></img>
{% endif %}
<p>{{ user.email }}</p>
<a href="logout" class="logout">Logout</a>
</div>
{% endif %}
<div class="content">
<div class="links-to-protected">
<a id="protected" href="protected">
Access protected content
</a>
<a id="protectedByfoorole" href="protected-by-foorole">
Access + foorole protected content
</a>
<a id="protectedBybarrole" href="protected-by-barrole">
Access + barrole protected content
</a>
</div>
{% if user and settings.oidc.show_session_details %}
<div class="debug-auth">
<p>Session details:</p>