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

fairlogin/login/login.ftl

@@ -9,16 +9,18 @@
                     <img src="${url.resourcesPath}/img/fairlogin.svg">
                 </div>
                 <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">
                                 <a class="nav-link active" id="login-tab" data-toggle="tab" href="#login" role="tab" aria-controls="login" aria-selected="true">Login</a>
                             </li>
+                            <#if realm.registrationAllowed>
                             <li class="nav-item">
                                 <a class="nav-link" id="register-tab" href="${url.registrationUrl}" aria-controls="register" aria-selected="false">Register</a>
                             </li>
+                            </#if>
                         </ul>
-                    </div>
+                 
                     <div class="card-body fat">
                         <#include "alert.ftl">
                             <div class="tab-content" id="loginTabContent">
@@ -62,9 +64,11 @@
                                         <hr class="separator" />
                                         <p>${msg("getFairloginIdIdpDescription")}</p>
                                         
-                                        <a class="btn btn-primary" data-toggle="collapse" href="#socialProviders" role="button" aria-expanded="false" aria-controls="social.providers">
-                                            ${msg("moreSocialIdentityProviders")}
-                                        </a>
+                                        <div class="text-center">
+                                            <a class="btn btn-primary" data-toggle="collapse" href="#socialProviders" role="button" aria-expanded="false" aria-controls="social.providers">
+                                                ${msg("moreSocialIdentityProviders")}
+                                            </a>
+                                        </div>
                                         <div class="collapse" id="socialProviders">
                                         <div class="social-provider margin-top-20">
                                             <#list social.providers as p>

fairlogin/login/register.ftl

@@ -9,8 +9,8 @@
                     <img src="${url.resourcesPath}/img/fairlogin.svg">
                 </div>
                 <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">
                                 <a class="nav-link" id="login-tab" href="${url.loginUrl}" aria-controls="login" aria-selected="false">Login</a>
                             </li>
@@ -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>
                             </li>
                         </ul>
-                    </div>
+                    
                     <div class="card-body fat">
                         <#include "alert.ftl">
                             <div class="tab-content" id="registerTabContent">
@@ -26,13 +26,13 @@
                                     <form action="${url.registrationAction}" method="post" onsubmit="return checkAnswer()">
 
                                         <div class="form-group">
-                                            <label for="firstName" class="required">${msg("firstName")}</label>
-                                            <input id="firstName" type="text" class="form-control" name="firstName" required autofocus>
+                                            <label for="firstName">${msg("firstName")}</label>
+                                            <input id="firstName" type="text" class="form-control" name="firstName" autofocus>
                                         </div>
 
                                         <div class="form-group">
-                                            <label for="lastName" class="required">${msg("lastName")}</label>
-                                            <input id="lastName" type="text" class="form-control" name="lastName" required>
+                                            <label for="lastName">${msg("lastName")}</label>
+                                            <input id="lastName" type="text" class="form-control" name="lastName">
                                         </div>
 
                                         <div class="form-group">

fairlogin/login/resources/css/fairlogin.css

@@ -228,6 +228,19 @@ img {
 	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) {
 	.main-page .card-wrapper {
 		width: 90%;

fairlogin/login/resources/js/fairlogin.js

@@ -50,4 +50,14 @@ $(document).ready(() => {
 			setNickname();
 		}
 	});
+
+	$('form').submit(() => {
+		if(!$('#firstName').val()) {
+			$('#firstName').val('unknown')
+		}
+
+		if(!$('#lastName').val()) {
+			$('#lastName').val('unknown')
+		}
+	})
 });