Skip to content
This repository has been archived by the owner on May 16, 2023. It is now read-only.

Commit

Permalink
feat: adding error messages in login pages (not yet functional) (#31)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChristianFirmenich
ChristianFirmenich authored May 27, 2020
1 parent aaf2900 commit 799adb0
Show file tree
Hide file tree
Showing 6 changed files with 85 additions and 22 deletions.
14 changes: 9 additions & 5 deletions src/main/resources/keycloak/themes/cwa/login/login-config-totp.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,18 +27,22 @@

<!-- BEGIN page specific content -->
<div class="text-big" style="top: 210px;">Anmeldung</div>
<div class="text" style="top: 290px;">1. Um ihr Benutzerkonto zu aktivieren, öffnen Sie bitte ihre FreeOTP App und
<div class="text" style="top: 280px;">1. Um ihr Benutzerkonto zu aktivieren, öffnen Sie bitte ihre FreeOTP App und
scannen Sie den unten angezeigten QR-Code
</div>
<img class="qr-code" style="position: fixed; left: 50%; width: 180px; margin-left: -90px; height: auto; top: 345px;"
<img class="qr-code" style="position: fixed; left: 50%; width: 180px; margin-left: -90px; height: auto; top: 335px;"
src="data:image/png;base64, ${totp.totpSecretQrCode}">
<div class="text" style="top: 550px;">2. Geben Sie das von der App erzeugte Einmal-Passwort ein</div>
<div class="text" style="top: 540px;">2. Geben Sie das von der App erzeugte Einmal-Passwort ein</div>
<form id="kc-totp-settings-form" action="${url.loginAction}" method="post">
<input class="input" style="top: 585px;" type="text" placeholder="Einmal-Passwort" name="totp" autocomplete="off"
<input class="input" style="top: 575px;" type="text" placeholder="Einmal-Passwort" name="totp" autocomplete="off"
required>
<input type="hidden" name="totpSecret" value="${totp.totpSecret}"/>
<input class="button" style="top: 650px;" type="submit" value="Abschicken">
<input class="button" style="top: 635px;" type="submit" value="Abschicken">
</form>
<#if message?? && message?has_content>
<div class="error" style="top: 695px">Das von Ihnen eingegebene Einmal-Passwort ist nicht korrekt.<br>Bitte korrigieren Sie Ihre Eingabe.</div>
</#if>

<!-- END page specific content -->
</body>
</html>
7 changes: 5 additions & 2 deletions src/main/resources/keycloak/themes/cwa/login/login-otp.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,12 @@
<div class="text" style="top: 320px;">Öffnen Sie bitte ihre FreeOTP App und geben Sie das von der App erzeugte Einmal-Passwort für den Benutzer ein
</div>
<form id="kc-otp-login-form" action="${url.loginAction}" method="post">
<input class="input" style="top: 435px;" placeholder="Einmal-Passwort" name="otp" autocomplete="off" type="text" autofocus/>
<input class="button" style="top: 500px;" type="submit" name="login" value="Abschicken">
<input class="input" style="top: 430px;" placeholder="Einmal-Passwort" name="otp" autocomplete="off" type="text" autofocus/>
<input class="button" style="top: 490px;" type="submit" name="login" value="Abschicken">
</form>
<#if message?? && message?has_content>
<div class="error" style="top: 550px">Das von Ihnen eingegebene Einmal-Passwort ist nicht korrekt.<br>Bitte korrigieren Sie Ihre Eingabe.</div>
</#if>
<!-- END page specific content -->
</body>
</html>
18 changes: 15 additions & 3 deletions src/main/resources/keycloak/themes/cwa/login/login-update-password.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,23 @@
<form id="kc-passwd-update-form" action="${url.loginAction}" method="post">
<input type="text" name="username" value="${username}" autocomplete="username" readonly="readonly"
style="display:none;"/>
<input class="input" style="top: 360px;" type="password" placeholder="Passwort" name="password-new" required>
<input class="input" style="top: 425px;" type="password" placeholder="Passwort bestätigen" name="password-confirm"
<input class="input" style="top: 360px;" type="password" id="pw1" placeholder="Passwort" name="password-new" required>
<input class="input" style="top: 420px;" type="password" id="pw2" placeholder="Passwort bestätigen" name="password-confirm"
required>
<input class="button" style="top: 500px;" type="submit" value="Abschicken">
<input class="button" style="top: 480px;" type="submit" value="Abschicken">
</form>
<#if message?? && message?has_content>
<div class="error" style="top: 540px">Die eingegebenen Passwörter stimmen nicht überein oder entsprechen nicht den Sicherheitsrichtlinien.
<span style="font-family: Telegrotesk Next Regular;">
<br><br>Ihr Password muss mindestens 8 Zeichen lang sein und aus mindestens drei der folgenden Zeichenkategorien bestehen:<br>
<br>&nbsp;&nbsp; • Kleinbuchstaben
<br>&nbsp;&nbsp; • Grosbuchstaben
<br>&nbsp;&nbsp; • Ziffern
<br>&nbsp;&nbsp; • Sonderzeichen
</span>
<br><br>Bitte korrigieren Sie Ihre Eingabe.
</div>
</#if>
<!-- END page specific content -->
</body>
</html>
8 changes: 6 additions & 2 deletions src/main/resources/keycloak/themes/cwa/login/login.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,13 @@
</div>
<form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
<input class="input" style="top: 420px;" type="text" placeholder="Benutzername" name="username" required>
<input class="input" style="top: 485px;" type="password" placeholder="Passwort" name="password" required>
<input class="button" style="top: 560px;" type="submit" value="Anmelden">
<input class="input" style="top: 480px;" type="password" placeholder="Passwort" name="password" required>
<input class="button" style="top: 540px;" type="submit" value="Anmelden">
</form>

<#if message?? && message?has_content>
<div class="error" style="top: 600px">Sie haben einen falschen Benutzernamen und/oder ein falsches Passwort eingegeben. Bitte versuchen sie es erneut oder wenden Sie sich an Ihren Administrator.</div>
</#if>
<!-- END page specific content -->
</body>
</html>
30 changes: 25 additions & 5 deletions src/main/resources/keycloak/themes/cwa/login/resources/teletan.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@
width: 600px;
margin-left: -300px;
text-align: center;
font-family: Telegrotesk Next Regular;
font-family: Telegrotesk Next Bold;
font-size: 18px;
color: #E20074;
}
Expand All @@ -126,13 +126,15 @@
font-size: 18px;
color: #FFFFFF;
background: #E20074;
border: none;
border-width: 1px;
border-radius: 4px;
border-color: #E20074;
}

.input {
position: fixed;
left: 50%;
width: 490px;
width: 485px;
height: 45px;
line-height: 45px;
margin-left: -250px;
Expand All @@ -145,6 +147,22 @@
border-color: #dddddd;
}

.error {
position: fixed;
left: 50%;
width: 480px;
margin-left: -250px;
padding: 10px;
font-family: Telegrotesk Next Bold;
font-size: 14px;
color: #E20074;
background-color: rgba(226, 0, 74, 0.1);
border-width: 1px;
border-radius: 4px;
border-color: rgba(226, 0, 74, 0.1);

}

.user {
position: fixed;
right: 40px;
Expand All @@ -158,6 +176,7 @@
position: fixed;
right: 40px;
top: 150px;
width: 100px;
visibility: hidden;
font-family: Telegrotesk Next Regular;
font-size: 18px;
Expand All @@ -180,6 +199,8 @@
height: auto;
}



@font-face {
font-family: 'Telegrotesk Next Regular';
font-style: normal;
Expand All @@ -197,5 +218,4 @@
font-style: bold;
src: url('telegrotesknext-bold.woff');
}



30 changes: 25 additions & 5 deletions src/main/resources/static/teletan.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@
width: 600px;
margin-left: -300px;
text-align: center;
font-family: Telegrotesk Next Regular;
font-family: Telegrotesk Next Bold;
font-size: 18px;
color: #E20074;
}
Expand All @@ -126,13 +126,15 @@
font-size: 18px;
color: #FFFFFF;
background: #E20074;
border: none;
border-width: 1px;
border-radius: 4px;
border-color: #E20074;
}

.input {
position: fixed;
left: 50%;
width: 490px;
width: 485px;
height: 45px;
line-height: 45px;
margin-left: -250px;
Expand All @@ -145,6 +147,22 @@
border-color: #dddddd;
}

.error {
position: fixed;
left: 50%;
width: 480px;
margin-left: -250px;
padding: 10px;
font-family: Telegrotesk Next Bold;
font-size: 14px;
color: #E20074;
background-color: rgba(226, 0, 74, 0.1);
border-width: 1px;
border-radius: 4px;
border-color: rgba(226, 0, 74, 0.1);

}

.user {
position: fixed;
right: 40px;
Expand All @@ -158,6 +176,7 @@
position: fixed;
right: 40px;
top: 150px;
width: 100px;
visibility: hidden;
font-family: Telegrotesk Next Regular;
font-size: 18px;
Expand All @@ -180,6 +199,8 @@
height: auto;
}



@font-face {
font-family: 'Telegrotesk Next Regular';
font-style: normal;
Expand All @@ -197,5 +218,4 @@
font-style: bold;
src: url('telegrotesknext-bold.woff');
}



0 comments on commit 799adb0

Please sign in to comment.