Commit f43870ff authored by jbuechele's avatar jbuechele
Browse files

#15: redesigned card header, added firstName and lastName optional

parent cc99a373
...@@ -9,16 +9,18 @@ ...@@ -9,16 +9,18 @@
<img src="${url.resourcesPath}/img/fairlogin.svg"> <img src="${url.resourcesPath}/img/fairlogin.svg">
</div> </div>
<div class="card"> <div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs nav-fill" id="loginRegisterTab" role="tablist"> <ul class="nav nav-pills nav-fill" id="loginRegisterTab" role="tablist">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" id="login-tab" data-toggle="tab" href="#login" role="tab" aria-controls="login" aria-selected="true">Login</a> <a class="nav-link active" id="login-tab" data-toggle="tab" href="#login" role="tab" aria-controls="login" aria-selected="true">Login</a>
</li> </li>
<#if realm.registrationAllowed>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" id="register-tab" href="${url.registrationUrl}" aria-controls="register" aria-selected="false">Register</a> <a class="nav-link" id="register-tab" href="${url.registrationUrl}" aria-controls="register" aria-selected="false">Register</a>
</li> </li>
</#if>
</ul> </ul>
</div>
<div class="card-body fat"> <div class="card-body fat">
<#include "alert.ftl"> <#include "alert.ftl">
<div class="tab-content" id="loginTabContent"> <div class="tab-content" id="loginTabContent">
...@@ -62,9 +64,11 @@ ...@@ -62,9 +64,11 @@
<hr class="separator" /> <hr class="separator" />
<p>${msg("getFairloginIdIdpDescription")}</p> <p>${msg("getFairloginIdIdpDescription")}</p>
<a class="btn btn-primary" data-toggle="collapse" href="#socialProviders" role="button" aria-expanded="false" aria-controls="social.providers"> <div class="text-center">
${msg("moreSocialIdentityProviders")} <a class="btn btn-primary" data-toggle="collapse" href="#socialProviders" role="button" aria-expanded="false" aria-controls="social.providers">
</a> ${msg("moreSocialIdentityProviders")}
</a>
</div>
<div class="collapse" id="socialProviders"> <div class="collapse" id="socialProviders">
<div class="social-provider margin-top-20"> <div class="social-provider margin-top-20">
<#list social.providers as p> <#list social.providers as p>
......
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
<img src="${url.resourcesPath}/img/fairlogin.svg"> <img src="${url.resourcesPath}/img/fairlogin.svg">
</div> </div>
<div class="card"> <div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs nav-fill" id="loginRegisterTab" role="tablist"> <ul class="nav nav-pills nav-fill" id="loginRegisterTab" role="tablist">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" id="login-tab" href="${url.loginUrl}" aria-controls="login" aria-selected="false">Login</a> <a class="nav-link" id="login-tab" href="${url.loginUrl}" aria-controls="login" aria-selected="false">Login</a>
</li> </li>
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<a class="nav-link active" id="register-tab" data-toggle="tab" href="#register" role="tab" aria-controls="register" aria-selected="true">Register</a> <a class="nav-link active" id="register-tab" data-toggle="tab" href="#register" role="tab" aria-controls="register" aria-selected="true">Register</a>
</li> </li>
</ul> </ul>
</div>
<div class="card-body fat"> <div class="card-body fat">
<#include "alert.ftl"> <#include "alert.ftl">
<div class="tab-content" id="registerTabContent"> <div class="tab-content" id="registerTabContent">
...@@ -26,13 +26,13 @@ ...@@ -26,13 +26,13 @@
<form action="${url.registrationAction}" method="post" onsubmit="return checkAnswer()"> <form action="${url.registrationAction}" method="post" onsubmit="return checkAnswer()">
<div class="form-group"> <div class="form-group">
<label for="firstName" class="required">${msg("firstName")}</label> <label for="firstName">${msg("firstName")}</label>
<input id="firstName" type="text" class="form-control" name="firstName" required autofocus> <input id="firstName" type="text" class="form-control" name="firstName" autofocus>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="lastName" class="required">${msg("lastName")}</label> <label for="lastName">${msg("lastName")}</label>
<input id="lastName" type="text" class="form-control" name="lastName" required> <input id="lastName" type="text" class="form-control" name="lastName">
</div> </div>
<div class="form-group"> <div class="form-group">
......
...@@ -228,6 +228,19 @@ img { ...@@ -228,6 +228,19 @@ img {
font-weight: 500; font-weight: 500;
} }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
background-color: #FFF;
border-bottom: 2px solid #283583;
border-radius: 0;
}
.nav-pills .nav-link {
padding: .75rem 1.25rem;
background-color: #fafafa;
border-bottom: 1px solid rgba(0,0,0,.125);
border-radius: 0;
}
@media screen and (max-width: 425px) { @media screen and (max-width: 425px) {
.main-page .card-wrapper { .main-page .card-wrapper {
width: 90%; width: 90%;
......
...@@ -50,4 +50,14 @@ $(document).ready(() => { ...@@ -50,4 +50,14 @@ $(document).ready(() => {
setNickname(); setNickname();
} }
}); });
$('form').submit(() => {
if(!$('#firstName').val()) {
$('#firstName').val('unknown')
}
if(!$('#lastName').val()) {
$('#lastName').val('unknown')
}
})
}); });
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment