Add resource provider queries

public/styles.css

@@ -0,0 +1,206 @@
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  background-color: floralwhite;
+  margin: 0;
+}
+h1 {
+  text-align: center;
+  background-color: #f786867d;
+  margin: 0 0 0.2em 0;
+}
+p {
+  margin: 0.2em;
+}
+hr {
+  margin: 0.2em;
+}
+.hidden {
+  display: none;
+}
+.center {
+  text-align: center;
+}
+.content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.user-info {
+  padding: 0.5em;
+  display: flex;
+  gap: 0.5em;
+  flex-direction: column;
+  width: fit-content;
+  align-items: center;
+  margin: 5px auto;
+  box-shadow: 0px 0px 10px lightgreen;
+  background-color: lightgreen;
+  border-radius: 8px;
+}
+.user-info * {
+  flex: 2 1 auto;
+  margin: 0;
+}
+.user-info .picture {
+  max-width: 3em;
+  max-height: 3em
+}
+.user-info a.logout {
+  border: 2px solid darkkhaki;
+  padding: 3px 6px;
+  text-decoration: none;
+  text-align: center;
+  color: black;
+}
+.user-info a.logout:hover {
+  background-color: orange;
+}
+.debug-auth {
+  font-size: 90%;
+  background-color: #d8bebc75;
+  padding: 6px;
+}
+.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;
+}
+.content {
+  text-align: left;
+}
+.hasResponseStatus {
+  background-color: #88888840;
+}
+.hasResponseStatus.status-200 {
+  background-color: #00ff0040;
+}
+.hasResponseStatus.status-401 {
+  background-color: #ff000040;
+}
+.hasResponseStatus.status-403 {
+  background-color: #ff990040;
+}
+.hasResponseStatus.status-404 {
+  background-color: #ffCC0040;
+}
+.hasResponseStatus.status-503 {
+  background-color: #ffA88050;
+}
+.role {
+  padding: 3px 6px;
+  background-color: #44228840;
+}
+
+/* For home */
+
+.login-box {
+  text-align: center;
+  background-color: antiquewhite;
+  margin: 0.5em auto;
+  width: fit-content;
+  box-shadow: 0 0 10px #49759b88;
+  border-radius: 8px;
+}
+.login-box .description {
+  font-style: italic;
+  font-weight: bold;
+  background-color: #f7c7867d;
+  padding: 6px;
+  margin: 0;
+  border-radius: 8px 8px 0 0;
+}
+.providers {
+  justify-content: center;
+  padding: 0.8em;
+}
+.providers .provider {
+  min-height: 2em;
+}
+.providers .provider a.link {
+  text-decoration: none;
+  max-height: 2em;
+}
+.providers .provider .link div {
+  text-align: center;
+  background-color: #f7c7867d;
+  border-radius: 8px;
+  padding: 6px;
+  text-align: center;
+  color: black;
+  font-weight: bold;
+  cursor: pointer;
+}
+.providers .provider .hint {
+  font-size: 80%;
+  max-width: 13em;
+}
+.providers .error {
+  color: darkred;
+  padding: 3px 6px;
+  text-align: center;
+  font-weight: bold;
+  flex: 1 1 auto;
+}
+.content .links-to-check {
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  gap: 0.5em;
+  flex-flow: wrap;
+}
+.content .links-to-check a {
+  color: black;
+  padding: 5px 10px;
+  text-decoration: none;
+  border-radius: 8px;
+}
+
+.token {
+  overflow-wrap: anywhere;
+  font-family: monospace;
+}
+
+.from-keycloak-vue {
+  display: none;
+}
+
+.actions {
+  display: flex;
+  justify-content: center;
+}
+
+.resource {
+  padding: 0.5em;
+  display: flex;
+  gap: 0.5em;
+  flex-direction: column;
+  width: fit-content;
+  align-items: center;
+  margin: 5px auto;
+  box-shadow: 0px 0px 10px #90c3ee;
+  background-color: #90c3ee;
+  border-radius: 8px;
+}
+
+.resources {
+  display: flex;
+}
+
+.resource {
+  text-align: center;
+}
+
+.resource .key {
+  font-weight: bold;
+}