KEYCLOAK-1463

Need better UI for Terms and Conditions

examples/themes/src/main/resources/theme/sunrise/login/resources/css/styles.css

@@ -193,4 +193,4 @@ a.zocial {
     border-radius: 0;
     padding-top: 0.2em;
     padding-bottom: 0.2em;
-}
+}

forms/common-themes/src/main/resources/theme/base/login/messages/messages_en.properties

@@ -33,8 +33,11 @@ emailForgotTitle=Forgot Your Password?
 updatePasswordTitle=Update password
 codeSuccessTitle=Success code
 codeErrorTitle=Error code\: {0}
+
 termsTitle=Terms and Conditions
 termsTitleHtml=Terms and Conditions
+termsText=<p>Terms and conditions to be defined</p>
+
 recaptchaFailed=Invalid Recaptcha
 recaptchaNotConfigured=Recaptcha is required, but not configured
 consentDenied=Consent denied.

forms/common-themes/src/main/resources/theme/base/login/terms.ftl

@@ -5,25 +5,12 @@
     <#elseif section = "header">
     ${msg("termsTitleHtml")}
     <#elseif section = "form">
-    <div id="kc-info-message">
-        <textarea class="${properties.kcTextareaClass!}" rows="20" cols="120">
-        Apache License
-        Version 2.0, January 2004
-        http://www.apache.org/licenses/
-
-        TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-        </textarea>
-        <form class="form-actions" action="${requiredActionUrl("terms_and_conditions", "")}" method="POST">
-            <div class="${properties.kcFormGroupClass!}">
-                 <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
-                    <div class="${properties.kcFormButtonsWrapperClass!}">
-                        <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="accept" id="kc-login" type="submit" value="${msg("doAccept")}"/>
-                        <input class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" name="cancel" id="kc-cancel" type="submit" value="${msg("doDecline")}"/>
-                    </div>
-                </div>
-            </div>
-        </form>
+    <div id="kc-terms-text">
+        ${msg("termsText")}
     </div>
+    <form class="form-actions" action="${requiredActionUrl("terms_and_conditions", "")}" method="POST">
+        <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="accept" id="kc-login" type="submit" value="${msg("doAccept")}"/>
+        <input class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" name="cancel" id="kc-cancel" type="submit" value="${msg("doDecline")}"/>
+    </form>sdf
     </#if>
 </@layout.registrationLayout>

forms/common-themes/src/main/resources/theme/keycloak/login/resources/css/login.css

@@ -143,6 +143,10 @@
     margin-bottom: 0;
 }
 
+#kc-terms-text {
+    margin-bottom: 20px;
+}
+
 .feedback-error #kc-feedback-wrapper {
     background-image: url(../img/feedback-error-arrow-down.png);
 }