Add automatic link status check
This commit is contained in:
parent
f4fc6f18ec
commit
e1640b118d
1 changed files with 73 additions and 24 deletions
|
|
@ -24,7 +24,7 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
margin: 5px auto;
|
||||||
box-shadow: 0px 0px 10px lightgreen;
|
box-shadow: 0px 0px 10px lightgreen;
|
||||||
background-color: lightgreen;
|
background-color: lightgreen;
|
||||||
}
|
}
|
||||||
|
|
@ -36,6 +36,16 @@
|
||||||
max-width: 3em;
|
max-width: 3em;
|
||||||
max-height: 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 {
|
.login-box {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
@ -62,17 +72,9 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
.login-toolbox a.logout:hover {
|
|
||||||
background-color: orange;
|
|
||||||
}
|
|
||||||
.login-toolbox a:hover {
|
.login-toolbox a:hover {
|
||||||
background-color: lightgreen;
|
background-color: lightgreen;
|
||||||
}
|
}
|
||||||
.login-toolbox .link-to-protected {
|
|
||||||
margin: 1em;
|
|
||||||
background-color: cyan;
|
|
||||||
box-shadow: 0px 0px 20px cyan;
|
|
||||||
}
|
|
||||||
.debug-auth {
|
.debug-auth {
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
}
|
}
|
||||||
|
|
@ -82,36 +84,83 @@
|
||||||
.content {
|
.content {
|
||||||
text-align: left;
|
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>
|
</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>
|
</head>
|
||||||
<body>
|
<body onload="checkPerms()">
|
||||||
<h1>Test app for OIDC</h1>
|
<h1>Test app for OIDC</h1>
|
||||||
|
{% if not user %}
|
||||||
<div class="login-box">
|
<div class="login-box">
|
||||||
<div class="login-toolbox">
|
<div class="login-toolbox">
|
||||||
{% if user %}
|
|
||||||
<a href="logout" class="logout">Logout</a>
|
|
||||||
{% else %}
|
|
||||||
{% 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>
|
||||||
{% else %}
|
{% else %}
|
||||||
<span class="error">Cannot login: no oidc prodiver in settings.yaml</span>
|
<span class="error">Cannot login: no oidc prodiver in settings.yaml</span>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endif %}
|
|
||||||
<a class="link-to-protected" href="protected">
|
|
||||||
Ckeck here to get NOT_AUTHORIZED (401) or access protected content
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
{% endif %}
|
||||||
{% if user %}
|
{% if user %}
|
||||||
<div class="user-info">
|
<div class="user-info">
|
||||||
<p>Hey, {{ user.name }}</p>
|
<p>Hey, {{ user.name }}</p>
|
||||||
{% if user.picture %}
|
{% if user.picture %}
|
||||||
<img src="{{ user.picture }}" class="picture"></img>
|
<img src="{{ user.picture }}" class="picture"></img>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<p>{{ user.email }}</p>
|
<p>{{ user.email }}</p>
|
||||||
</div>
|
<a href="logout" class="logout">Logout</a>
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% 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 %}
|
{% if user and settings.oidc.show_session_details %}
|
||||||
<div class="debug-auth">
|
<div class="debug-auth">
|
||||||
<p>Session details:</p>
|
<p>Session details:</p>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue