jce-keycloak/juice/login/register.ftl

<#import "template.ftl" as layout>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('firstName','lastName','email','username','password','password-confirm'); section>
    <#if section = "header">
        <div class="welcome-container">
            <div class="header-login-welcome">${msg("welcome")}</div>
            <#if realm.internationalizationEnabled  && locale.supported?size gt 1>
                    <div id="kc-locale">
                        <div id="kc-locale-wrapper" class="${properties.kcLocaleWrapperClass!}">
                            <div class="kc-dropdown" id="kc-locale-dropdown">
                                <a href="#" id="kc-current-locale-link">${locale.current}</a>
                                <ul>
                                    <#list locale.supported as l>
                                        <#if locale.current==l.label>
                                            <li class="kc-dropdown-item selected ${l.label}"><a href="${l.url}">${l.label}</a></li>
                                        <#else>
                                            <li class="kc-dropdown-item ${l.label}"><a href="${l.url}">${l.label}</a></li>
                                        </#if>
                                    </#list>
                            </ul>
                        </div>
                    </div>
                </div>
            </#if>
        </div>
        <div class="header-login-title">${msg("registerTitle")} <br /> ${msg("registerTitle1")}</div>
    <#elseif section = "form">
        <form id="kc-register-form"  action="${url.registrationAction}" method="post">

            <div>
                <div class="${properties.kcFormGroupClass!} register-form">
                    <input type="text" id="email" class="${properties.kcInputClass!}" name="email"
                           value="${(register.formData.email!'')}" autocomplete="off"
                           placeholder=${msg("email")}
                           aria-invalid="<#if messagesPerField.existsError('email')>true</#if>"
                    />
                    <label class="login-form-input-label">${msg("email")}</label>

                    <#if messagesPerField.existsError('email')>
                        <div id="input-error-email" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
                            ${kcSanitize(messagesPerField.get('email'))?no_esc}
                        </div>
                    </#if>
                </div>
                
            <#if passwordRequired??>
                <div class="${properties.kcFormGroupClass!}  register-form">
                        <input type="password" id="password" class="${properties.kcInputClass!}" name="password"
                               autocomplete="off"
                               placeholder=${msg("password")}
                               aria-invalid="<#if messagesPerField.existsError('password','password-confirm')>true</#if>"
                        />
                        <label for="password" class="login-form-input-label">${msg("password")}</label>

                        <#if messagesPerField.existsError('password')>
                            <div id="input-error-password" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
                                ${kcSanitize(messagesPerField.get('password'))?no_esc}
                            </div>
                        </#if>
                </div>

                <div class="${properties.kcFormGroupClass!}">
                        <input type="password" id="password-confirm" class="${properties.kcInputClass!}"
                               name="password-confirm" autocomplete="off"
                               placeholder=${msg("passwordConfirm")}
                               aria-invalid="<#if messagesPerField.existsError('password-confirm')>true</#if>"
                        />
                        <label for="password-confirm"
                                class="login-form-input-label">${msg("passwordConfirm")}</label>

                        <#if messagesPerField.existsError('password-confirm')>
                            <div id="input-error-password-confirm" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
                                ${kcSanitize(messagesPerField.get('password-confirm'))?no_esc}
                            </div>
                        </#if>
                </div>
            </#if>
            </div>

            <#if !realm.registrationEmailAsUsername>
                <div>
                    <div>
                        <label for="username" class="${properties.kcLabelClass!}">${msg("username")}</label>
                    </div>
                    <div>
                        <input type="text" id="username" name="username"
                               value="${(register.formData.username!'')}" autocomplete="off"
                               aria-invalid="<#if messagesPerField.existsError('username')>true</#if>"
                        />

                        <#if messagesPerField.existsError('username')>
                            <div id="input-error-username" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
                                ${kcSanitize(messagesPerField.get('username'))?no_esc}
                            </div>
                        </#if>
                    </div>
                </div>
            </#if>

            <#if recaptchaRequired??>
                <div class="form-group">
                    <div class="${properties.kcInputWrapperClass!}">
                        <div class="g-recaptcha" data-size="compact" data-sitekey="${recaptchaSiteKey}"></div>
                    </div>
                </div>
            </#if>

            <div class="${properties.kcFormGroupClass!}">

                <div id="kc-form-buttons">
                    <input class="${properties.kcButtonClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doRegister")}"/>
                </div>
                
                 <#if realm.internationalizationEnabled  && locale.supported?size gt 1>
                    <#if locale.current="Deutsch">
                        <div class="signup-terms">
                        Mit der Registrierung erklären Sie sich mit den 
                        <a href="https://app.jplus-pilot.com/legal/tos_de.html">Nutzungsbedingungen</a> und der 
                        <a href="https://app.jplus-pilot.com/legal/gdpr_de.html">Datenschutzerklärung</a> von Juice einverstanden.
                        </div>
                    <#else>
                        <div class="signup-terms">
                        By signing up, you agree to Juice's 
                        <a href="https://app.jplus-pilot.com/legal/tos_en.html">ToS</a> and 
                        <a href=" https://app.jplus-pilot.com/legal/gdpr_en.html">Privacy</a>
                        </div>
                    </#if>
                </#if>

            </div>

            
            <div>
                <div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
                
                    <#if realm.password && realm.registrationAllowed && !registrationDisabled??>
                        <div id="kc-registration-container">
                            <div id="kc-registration" class="kc-registration-signup">
                                <span>
                                <span>${msg("haveAccount")}</span>
                                <a tabindex="6" href="${url.loginUrl}">${msg("signInHere")}</a></span>
                            </div>
                        </div>
                    </#if>
                    <div id="kc-form-options" class="signup-password">
                            <#if realm.resetPasswordAllowed>
                                <span><a tabindex="5" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span>
                            </#if>
                    </div>
                </div>
            </div>
        </form>
    </#if>
</@layout.registrationLayout>

<div class="juice-footer"> © 2020-2021, <span>Juice World</span> </div>