Skip to content

Commit

Permalink
Merge branch 'feature/frontend-improvements'
Browse files Browse the repository at this point in the history
  • Loading branch information
oharsta committed Sep 2, 2021
2 parents 167c32e + dc9b495 commit 0d36fb5
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 35 deletions.
25 changes: 21 additions & 4 deletions mujina-idp/src/main/resources/public/main.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
body {
font-family: Helvetica, Verdana, serif;
font-size: 100%;
}

ul {
Expand Down Expand Up @@ -27,12 +28,18 @@ ul {
transform: rotate(15deg);
}

_:-ms-fullscreen, .login-container, .user-container {
justify-content: space-around;
}


.login {
display: flex;
position: relative;
align-items: center;
justify-content: center;
flex-direction: column;
-ms-flex-direction: column;
align-self: center;
margin: auto;
}
Expand Down Expand Up @@ -116,7 +123,7 @@ label.persist-me {
font-size: 14px;
}

section.add-attribute {
div.add-attribute {
display: flex;
margin-bottom: 10px;
align-items: center;
Expand Down Expand Up @@ -199,7 +206,7 @@ span.explain-link:hover {
height: 99%;
}

section.title {
.title {
position: relative;
padding: 20px 10px;
background-color: #4DB3CF;
Expand All @@ -208,11 +215,12 @@ section.title {
font-size: larger;
}

section.title p {
.title h2 {
margin: 0;
font-size: 1.2rem
}

section.explanation-content {
div.explanation-content {
padding: 0 10px;
}

Expand All @@ -230,3 +238,12 @@ a.close:focus {
border: none;
outline: none;
}

.sr-only {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
4 changes: 2 additions & 2 deletions mujina-idp/src/main/resources/public/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,14 @@ document.addEventListener("DOMContentLoaded", function () {
var val = selectedOption.value;
var text = selectedOption.text;
var multiplicity = selectedOption.dataset.multiplicity === "true";
var newElement = document.createElement("div");
var newElement = document.createElement("li");
newElement.setAttribute("class", "attribute-value");
var mainId = guid();
newElement.setAttribute("id", mainId);
var spanId = guid();
var inputId = guid();
newElement.innerHTML = "<label>" + val + "</label>" +
"<input class='input-attribute-value' type='text' id='" + inputId + "' name='" + val + "'></input>" +
"<input class='input-attribute-value' type='text' id='" + inputId + "' name='" + val + "'>" +
"<span id='" + spanId + "' class='remove-attribute-value'>🗑</span>";
document.getElementById("attribute-list").appendChild(newElement);
document.getElementById(spanId).addEventListener("click", function () {
Expand Down
65 changes: 36 additions & 29 deletions mujina-idp/src/main/resources/templates/login.html
Original file line number Diff line number Diff line change
@@ -1,68 +1,75 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Login page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/main.css"/>
<script th:src="@{/main.js}"></script>
</head>
<body>
<section id="explanation" class="explain hide">
<section class="container">
<section class="title">
<p>SAML Attribute Manipulation</p>
<a href="/close" id="close" class="close">&#9747;</a>
</section>
<section class="explanation-content"><p>
When the Mujina IDP sends a SAML assertion back to the service provider, all the attributes will be added as
SAML AttributeStatement elements.
</p>
<aside id="explanation" class="explain hide">
<div class="container">
<header class="title">
<h2>SAML Attribute Manipulation</h2>
<a href="/close" id="close" class="close"><span class="sr-only">Close </span>&#9747;</a>
</header>
<div class="explanation-content">
<p>
When the Mujina IDP sends a SAML assertion back to the service provider, all the attributes will be
added as SAML AttributeStatement elements.
</p>
<p>
Based on the Attribute Release Policy of the service provider they will be included in the authenticated
user identity.
</p>
<p>If you want to add multiple values for one attribute - for example isMemberOf - then add them multiple
times.</p>
<p></p>
times.
</p>

<hr/>

<p>If you add attributes and check the 'Persist me' box then the attributes will be saved under the 'Username'
you have entered. </p>
<p>On subsequent logins with the same username the same set of attributes will be send to the Service
Provider.</p>
</section>

</section>
</section>
<p>
If you add attributes and check the 'Persist me' box then the attributes will be saved under the
'Username' you have entered.
</p>
<p>
On subsequent logins with the same username the same set of attributes will be send to the Service
Provider.
</p>
</div>
</div>
</aside>

<section class="login-container">
<section class="login">
<main class="login-container">
<div class="login">
<h1>Mujina Identity Provider</h1>
<p th:if="${param.error}" class="error">Wrong user or password</p>
<form class="login-form" th:action="@{/login}" method="post">
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" name="username" autofocus="autofocus" placeholder="Username"/>
<label for="password" class="sr-only">Password</label>
<input type="password" id="password" name="password" placeholder="Password"/>
<input class="button" type="submit" value="Log in"/>
<div>
<input id="persist-me" name="persist-me" type="checkbox"/>
<label class="persist-me" for="persist-me">Persist me?</label>
</div>

<section class="add-attribute">
<div class="add-attribute">
<label for="add-attribute" class="sr-only">Select attributes</label>
<select class="attribute-select" id="add-attribute">
<option value="Add attribute...">Add attribute...</option>
<option th:each="attr : ${samlAttributes}" th:value="${attr.get('name')}"
th:text="${attr.get('id')}"
th:attr="data-multiplicity=${attr.get('multiplicity')}"></option>
</select>
<div class="help"><span class="explain-link">?</span></div>
</section>
<section id="attribute-list" class="attribute-list"></section>
</div>
<ul id="attribute-list" class="attribute-list"></ul>

</form>
</section>
<a class="powered-by" href="https://openconext.org/" target="_blank">Copyright © 2018 OpenConext</a>
</section>
</div>
<a class="powered-by" href="https://openconext.org/" target="_blank" rel="noreferrer noopener">Copyright © 2018 OpenConext</a>
</main>
</body>
</html>

0 comments on commit 0d36fb5

Please sign in to comment.