Commit cc99a373 authored by jbuechele's avatar jbuechele
Browse files

#15 redesigned login screen, hide social providers

parent ce398a2e
<#import "template.ftl" as layout>
<@layout.registrationLayout displayInfo=social.displayInfo; section>
<#if section = "form">
<section>
<div class="container h-100">
<div class="row justify-content-md-center h-100">
<div class="card-wrapper">
<div class="text-center margin-bottom-30 margin-top-80">
<img src="${url.resourcesPath}/img/fairlogin.svg">
<section>
<div class="container h-100">
<div class="row justify-content-md-center h-100">
<div class="card-wrapper">
<div class="text-center margin-bottom-30 margin-top-80">
<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">
<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>
<li class="nav-item">
<a class="nav-link" id="register-tab" href="${url.registrationUrl}" aria-controls="register" aria-selected="false">Register</a>
</li>
</ul>
</div>
<div class="card fat">
<div class="card-body">
<h4 class="card-title">${msg("loginTitleShort")}
<#if realm.registrationAllowed>
${msg("or")}
<a href="${url.registrationUrl}">${msg("signUpTitle")}</a>
</#if>
</h4>
<#include "alert.ftl">
<form id="kc-form-login" class="form ${properties.kcFormClass!}" action="${url.loginAction}" method="post">
<div class="card-body fat">
<#include "alert.ftl">
<div class="tab-content" id="loginTabContent">
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<form action="${url.loginAction}" method="post">
<div class="form-group">
<label for="username">${msg("email")}</label>
<div class="form-group">
<label for="username">${msg("email")}</label>
<input id="username" type="text" class="form-control" name="username" value="" required autofocus>
</div>
<input id="username" type="text" class="form-control" name="username" value="" required autofocus>
</div>
<div class="form-group">
<label for="password">${msg("password")}
<#if realm.resetPasswordAllowed>
<a href="${url.loginResetCredentialsUrl}" class="float-right">
${msg("doForgotPassword")}
</a>
</#if>
</label>
<input id="password" type="password" class="form-control" name="password" required>
</div>
<div class="form-group">
<label for="password">${msg("password")}
<#if realm.resetPasswordAllowed>
<a href="${url.loginResetCredentialsUrl}" class="float-right">
${msg("doForgotPassword")}
</a>
</#if>
</label>
<input id="password" type="password" class="form-control" name="password" required>
</div>
<#if realm.rememberMe && !usernameEditDisabled??>
<div class="form-group">
<label>
<input type="checkbox" name="rememberMe">&nbsp;&nbsp;${msg("rememberMe")}
</label>
</div>
</#if>
<#if realm.rememberMe && !usernameEditDisabled??>
<div class="form-group">
<label>
<input type="checkbox" name="rememberMe">&nbsp;&nbsp;${msg("rememberMe")}
</label>
</div>
</#if>
<div class="form-group no-margin">
<button type="submit" class="btn btn-primary btn-block btn-main-action" name="login">
${msg("doLogIn")}
</button>
</div>
<div class="form-group no-margin">
<button type="submit" class="btn btn-primary btn-block btn-main-action" name="login">
${msg("doLogIn")}
</button>
</div>
</form>
<#if realm.password && social.providers??>
<hr class="separator" />
<p>${msg("getFairloginIdIdpDescription")}</p>
</form>
<div class="social-provider">
<#list social.providers as p>
<a href="${p.loginUrl}" id="zocial-${p.alias}" class="btn btn-block btn-social btn-${p.providerId}" style="margin-bottom: 5px">
<i class="fa fa-${p.providerId}"></i> Sign in with ${p.displayName}
<#if realm.password && social.providers??>
<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>
</#list>
<div class="collapse" id="socialProviders">
<div class="social-provider margin-top-20">
<#list social.providers as p>
<a href="${p.loginUrl}" id="zocial-${p.alias}" class="btn btn-block btn-social btn-${p.providerId}" style="margin-bottom: 5px">
<i class="fa fa-${p.providerId}"></i> Sign in with ${p.displayName}
</a>
</#list>
</div>
</div>
</#if>
</div>
</#if>
</div>
</div>
</div>
<#include "footer.ftl">
</div>
<#include "footer.ftl">
</div>
</div>
</section>
</div>
</div>
</section>
</#if>
</@layout.registrationLayout>
......@@ -26,4 +26,5 @@ loginTotpStep3=Geben Sie den von der Applikation generierten One-time Code ein u
loginTotpOneTime=One-time Code
errorWrongAnswer=Sie müssen eine korrekte Antwort auswählen.
correctAnswer=Gut gemacht!
or=oder
\ No newline at end of file
or=oder
moreSocialIdentityProviders=Weitere Social Identity Providers
\ No newline at end of file
......@@ -28,4 +28,5 @@ signUpTitle=Sign up
registerAlreadyAccountText=Already have an account?
errorWrongAnswer=You need to select a correct answer.
correctAnswer=Well done!
or=or
\ No newline at end of file
or=or
moreSocialIdentityProviders=More Social Identity Providers
\ No newline at end of file
<#import "template.ftl" as layout>
<@layout.registrationLayout; section>
<#if section="form">
<section>
<div class="container h-100">
<div class="row justify-content-md-center h-100">
<div class="card-wrapper">
<div class="text-center margin-bottom-30 margin-top-80">
<img src="${url.resourcesPath}/img/fairlogin.svg">
<section>
<div class="container h-100">
<div class="row justify-content-md-center h-100">
<div class="card-wrapper">
<div class="text-center margin-bottom-30 margin-top-80">
<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">
<li class="nav-item">
<a class="nav-link" id="login-tab" href="${url.loginUrl}" aria-controls="login" aria-selected="false">Login</a>
</li>
<li class="nav-item">
<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 fat">
<div class="card-body">
<h4 class="card-title">${msg("registerTitleFairlogin")}</h4>
<#include "alert.ftl">
<form action="${url.registrationAction}" method="post" onsubmit="return checkAnswer()">
<div class="card-body fat">
<#include "alert.ftl">
<div class="tab-content" id="registerTabContent">
<div class="tab-pane fade show active" id="register" role="tabpanel" aria-labelledby="register-tab">
<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>
</div>
<div class="form-group">
<label for="firstName" class="required">${msg("firstName")}</label>
<input id="firstName" type="text" class="form-control" name="firstName" required 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>
</div>
<div class="form-group">
<label for="lastName" class="required">${msg("lastName")}</label>
<input id="lastName" type="text" class="form-control" name="lastName" required>
</div>
<div class="form-group">
<label for="mobile">${msg("mobileNumber")}</label>
<input id="mobile" type="text" class="form-control" name="user.attributes.mobile">
</div>
<div class="form-group">
<label for="mobile">${msg("mobileNumber")}</label>
<input id="mobile" type="text" class="form-control" name="user.attributes.mobile">
</div>
<div class="form-group">
<label for="email" class="required">${msg("email")}</label>
<input id="email" type="email" class="form-control" name="email" required>
</div>
<div class="form-group">
<label for="email" class="required">${msg("email")}</label>
<input id="email" type="email" class="form-control" name="email" required>
</div>
<div class="form-group">
<label for="password" class="required">${msg("password")}</label>
<input id="password" type="password" class="form-control" name="password" required>
<div class="invalid-feedback">${msg("errorNotValidPassword")}</div>
</div>
<div class="form-group">
<label for="password" class="required">${msg("password")}</label>
<input id="password" type="password" class="form-control" name="password" required>
<div class="invalid-feedback">${msg("errorNotValidPassword")}</div>
</div>
<div class="form-group">
<label for="password-confirm" class="required">${msg("passwordConfirm")}</label>
<input id="password-confirm" type="password" class="form-control" name="password-confirm" required>
<div class="invalid-feedback">${msg("errorNotSamePassword")}</div>
</div>
<div class="form-group">
<label for="password-confirm" class="required">${msg("passwordConfirm")}</label>
<input id="password-confirm" type="password" class="form-control" name="password-confirm" required>
<div class="invalid-feedback">${msg("errorNotSamePassword")}</div>
</div>
<div class="form-group">
<label for="selection" id="selectionLabel" class="required"></label>
<select class="form-control" id="selection" onchange="checkAnswer()" required>
<option>-- select answer --</option>
</select>
<div class="invalid-feedback">${msg("errorWrongAnswer")}</div>
<div class="valid-feedback">${msg("correctAnswer")}</div>
</div>
<div class="form-group">
<label for="selection" id="selectionLabel" class="required"></label>
<select class="form-control" id="selection" onchange="checkAnswer()" required>
<option>-- select answer --</option>
</select>
<div class="invalid-feedback">${msg("errorWrongAnswer")}</div>
<div class="valid-feedback">${msg("correctAnswer")}</div>
</div>
<#if recaptchaRequired??>
<div class="form-group">
<div class="g-recaptcha" data-size="compact" data-sitekey="${recaptchaSiteKey}"></div>
</div>
</#if>
<#if recaptchaRequired??>
<div class="form-group">
<div class="g-recaptcha" data-size="compact" data-sitekey="${recaptchaSiteKey}"></div>
</div>
</#if>
<div class="form-group text-center margin-top-40">
<label>
<input id="agreeTerms" type="checkbox" name="user.attributes.agreeTerms"> I have read and agree to the <a href="${msg("termsOfServiceLink")}" class="text-muted">${msg("termsOfServiceText")}</a>
and <a href="${msg("cloudTermsLink")}" class="text-muted">${msg("cloudTermsText")}</a>.
</label>
</div>
<div class="form-group text-center margin-top-40">
<label>
<input id="agreeTerms" type="checkbox" name="user.attributes.agreeTerms"> I have read and agree to the
<a href="${msg(" termsOfServiceLink ")}" class="text-muted">${msg("termsOfServiceText")}</a>
and
<a href="${msg(" cloudTermsLink ")}" class="text-muted">${msg("cloudTermsText")}</a>.
</label>
</div>
<div class="form-group no-margin">
<button id="registerBtn" type="submit" class="btn btn-primary btn-block btn-main-action" disabled>
${msg("doRegister")}
</button>
</div>
<div class="margin-top20 text-center">
${msg("registerAlreadyAccountText")}
<a href="${url.loginUrl}">${msg("doLogIn")}</a>
<div class="form-group no-margin">
<button id="registerBtn" type="submit" class="btn btn-primary btn-block btn-main-action" disabled>
${msg("doRegister")}
</button>
</div>
<div class="margin-top20 text-center">
${msg("registerAlreadyAccountText")}
<a href="${url.loginUrl}">${msg("doLogIn")}</a>
</div>
</form>
</div>
</form>
</div>
</div>
</div>
<#include "footer.ftl">
</div>
<#include "footer.ftl">
</div>
</div>
</section>
</div>
</section>
</#if>
</@layout.registrationLayout>
\ No newline at end of file
......@@ -68,7 +68,6 @@ body.main-page {
}
.main-page .card {
border-color: transparent;
box-shadow: 0 0 40px rgba(0,0,0,.05);
}
......@@ -112,6 +111,10 @@ body.main-page {
margin-top: 40px;
}
.margin-top-20{
margin-top: 20px;
}
.btn-primary {
background-color: #00187D;
border-color: #00187D;
......@@ -205,6 +208,26 @@ img {
margin-right: 3px;
}
#login-tab {
color: #283583;
font-weight: 700;
}
#login-tab:not(.active) {
color: #888;
font-weight: 500;
}
#register-tab {
color: #283583;
font-weight: 700;
}
#register-tab:not(.active) {
color: #888;
font-weight: 500;
}
@media screen and (max-width: 425px) {
.main-page .card-wrapper {
width: 90%;
......
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