├── LICENSE.txt ├── README.adoc ├── login-screen.png ├── login └── ionic │ ├── code.ftl │ ├── error.ftl │ ├── login-config-totp.ftl │ ├── login-oauth-grant.ftl │ ├── login-reset-password.ftl │ ├── login-totp.ftl │ ├── login-update-password.ftl │ ├── login-update-profile.ftl │ ├── login-verify-email.ftl │ ├── login.ftl │ ├── messages │ └── messages.properties │ ├── register.ftl │ ├── resources │ └── css │ │ ├── ionic.css │ │ └── styles.css │ ├── template.ftl │ └── theme.properties └── registration-screen.png /LICENSE.txt: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | END OF TERMS AND CONDITIONS 178 | 179 | APPENDIX: How to apply the Apache License to your work. 180 | 181 | To apply the Apache License to your work, attach the following 182 | boilerplate notice, with the fields enclosed by brackets "[]" 183 | replaced with your own identifying information. (Don't include 184 | the brackets!) The text should be enclosed in the appropriate 185 | comment syntax for the file format. We also recommend that a 186 | file or class name and description of purpose be included on the 187 | same "printed page" as the copyright notice for easier 188 | identification within third-party archives. 189 | 190 | Copyright [yyyy] [name of copyright owner] 191 | 192 | Licensed under the Apache License, Version 2.0 (the "License"); 193 | you may not use this file except in compliance with the License. 194 | You may obtain a copy of the License at 195 | 196 | http://www.apache.org/licenses/LICENSE-2.0 197 | 198 | Unless required by applicable law or agreed to in writing, software 199 | distributed under the License is distributed on an "AS IS" BASIS, 200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 201 | See the License for the specific language governing permissions and 202 | limitations under the License. 203 | -------------------------------------------------------------------------------- /README.adoc: -------------------------------------------------------------------------------- 1 | Keycloak Ionic Theme 2 | ==================== 3 | 4 | The theme is suitable as theme for http://cordova.apache.org/[Cordova] applications based on http://ionicframework.com/[Ionic framework]. 5 | 6 | image:login-screen.png[Login Screen] 7 | image:registration-screen.png[Registration Screen] 8 | 9 | How to use it 10 | ------------- 11 | 12 | . http://keycloak.jboss.org/[Download] and extract Keycloak. 13 | . copy `login/` directory to `{keycloak-appliance-dist-all}/keycloak/standalone/configuration/themes/` 14 | . configure your realm to use `ionic` theme in `Settings > Social > Themes > Login Theme` in Keycloak admin 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /login-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfryc/keycloak-ionic-theme/37a14ca07181a7914cdc63ce0d4c50db22e9f43f/login-screen.png -------------------------------------------------------------------------------- /login/ionic/code.ftl: -------------------------------------------------------------------------------- 1 | <#import "template.ftl" as layout> 2 | <@layout.registrationLayout; section> 3 | <#if section = "title"> 4 | <#if code.success> 5 | Success code=${code.code} 6 | <#else> 7 | Error error=${code.error} 8 | 9 | <#elseif section = "form"> 10 |
11 | <#if code.success> 12 |

Please copy this code and paste it into your application:

13 | 14 | <#else> 15 |

${code.error}

16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /login/ionic/error.ftl: -------------------------------------------------------------------------------- 1 | <#import "template.ftl" as layout> 2 | <@layout.registrationLayout displayMessage=false; section> 3 | <#if section = "title"> 4 | ${rb.errorTitle} 5 | <#elseif section = "header"> 6 | ${rb.errorTitleHtml} 7 | <#elseif section = "form"> 8 |
9 |

${message.summary}

10 |
11 | 12 | -------------------------------------------------------------------------------- /login/ionic/login-config-totp.ftl: -------------------------------------------------------------------------------- 1 | <#import "template.ftl" as layout> 2 | <@layout.registrationLayout displayInfo=true; section> 3 | <#if section = "title"> 4 | ${rb.loginTotpTitle} 5 | <#elseif section = "header"> 6 | ${rb.loginTotpTitle} 7 | <#elseif section = "form"> 8 |
9 |
10 |
11 | 12 |
13 |
14 | 15 |
16 | 17 |
18 | 19 |
20 |
21 |
22 |
23 |
24 | 25 |
26 | 27 |
28 |
29 |
30 | <#elseif section = "info" > 31 |
    32 |
  1. 33 |

    ${rb.loginTotpStep1_1} ${rb.loginTotpStep1_2} ${rb.loginTotpStep1_3}

    34 |
    2. 35 |
  2. 36 |

    ${rb.loginTotpStep2}

    37 | Figure: Barcode
    38 | ${totp.totpSecretEncoded} 39 |
    3. 40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /login/ionic/login-oauth-grant.ftl: -------------------------------------------------------------------------------- 1 | <#-- TODO: Only a placeholder, implementation needed --> 2 | <#import "template.ftl" as layout> 3 | <@layout.registrationLayout bodyClass="oauth"; section> 4 | <#if section = "title"> 5 | ${rb.oauthGrantTitle} 6 | <#elseif section = "header"> 7 | Temporary access for ${(realm.name)!''} requested by ${(client.clientId)!''}. 8 | <#elseif section = "form"> 9 |
10 |

${rb.oauthGrantRequest}

11 | 37 | 38 |
39 | 40 |
41 |
42 |
43 |
44 |
45 | 46 |
47 |
48 | 49 | 50 |
51 |
52 |
53 |
54 |
55 | 56 | -------------------------------------------------------------------------------- /login/ionic/login-reset-password.ftl: -------------------------------------------------------------------------------- 1 | <#import "template.ftl" as layout> 2 | <@layout.registrationLayout displayInfo=true; section> 3 | <#if section = "title"> 4 | ${rb.emailForgotHeader} 5 | <#elseif section = "header"> 6 | ${rb.emailForgotHeader} 7 | <#elseif section = "form"> 8 |
9 |
10 |
11 | 12 |
13 |
14 | 15 |
16 |
17 | 18 |
19 |
20 |
21 | ${rb.backToLogin} 22 |
23 |
24 | 25 |
26 | 27 |
28 |
29 |
30 | <#elseif section = "info" > 31 | ${rb.emailInstruction} 32 | 33 | -------------------------------------------------------------------------------- /login/ionic/login-totp.ftl: -------------------------------------------------------------------------------- 1 | <#import "template.ftl" as layout> 2 | <@layout.registrationLayout; section> 3 | <#if section = "title"> 4 | ${rb.loginTitle} ${realm.name} 5 | <#elseif section = "header"> 6 | ${rb.loginTitle} ${realm.name} 7 | <#elseif section = "form"> 8 |
9 | 10 | 11 | 12 |
13 |
14 | 15 |
16 | 17 |
18 | 19 |
20 |
21 | 22 |
23 |
24 |
25 |
26 |
27 | 28 |
29 |
30 | 31 | 32 |
33 |
34 |
35 |
36 | 37 | -------------------------------------------------------------------------------- /login/ionic/login-update-password.ftl: -------------------------------------------------------------------------------- 1 | <#import "template.ftl" as layout> 2 | <@layout.registrationLayout displayInfo=true; section> 3 | <#if section = "title"> 4 | ${rb.emailUpdateHeader} 5 | <#elseif section = "header"> 6 | ${rb.emailUpdateHeader} 7 | <#elseif section = "form"> 8 |
9 |
10 |
11 | 12 |
13 |
14 | 15 |
16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 | 24 |
25 |
26 | 27 |
28 |
29 |
30 |
31 |
32 | 33 |
34 | 35 |
36 |
37 |
38 | 39 | -------------------------------------------------------------------------------- /login/ionic/login-update-profile.ftl: -------------------------------------------------------------------------------- 1 | <#import "template.ftl" as layout> 2 | <@layout.registrationLayout; section> 3 | <#if section = "title"> 4 | ${rb.loginProfileTitle} 5 | <#elseif section = "header"> 6 | ${rb.loginProfileTitle} 7 | <#elseif section = "form"> 8 |
9 |
10 |
11 | 12 |
13 |
14 | 15 |
16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 | 24 |
25 |
26 | 27 |
28 |
29 | 30 |
31 |
32 | 33 |
34 |
35 | 36 |
37 |
38 |
39 |
40 |
41 | 42 |
43 | 44 |
45 |
46 |
47 | 48 | -------------------------------------------------------------------------------- /login/ionic/login-verify-email.ftl: -------------------------------------------------------------------------------- 1 | <#import "template.ftl" as layout> 2 | <@layout.registrationLayout; section> 3 | <#if section = "title"> 4 | ${rb.emailVerifyTitle} 5 | <#elseif section = "header"> 6 | ${rb.emailVerifyTitle} 7 | <#elseif section = "form"> 8 |

9 | ${rb.emailVerifyInstr} 10 |

11 |

${rb.emailVerifyInstrQ} 12 | ${rb.emailVerifyClick} ${rb.emailVerifyResend} 13 |

14 | 15 | -------------------------------------------------------------------------------- /login/ionic/login.ftl: -------------------------------------------------------------------------------- 1 | <#import "template.ftl" as layout> 2 | <@layout.registrationLayout displayInfo=social.displayInfo; section> 3 | <#if section = "title"> 4 | <#if client.application> 5 | ${rb.loginTitle} ${realm.name} 6 | <#elseif client.oauthClient> 7 | ${realm.name} ${rb.loginOauthTitle} 8 | 9 | <#elseif section = "header"> 10 | <#if client.application> 11 | ${rb.loginTitle} ${(realm.name)!''} 12 | <#elseif client.oauthClient> 13 | Temporary access for ${(realm.name)!''} requested by ${(client.clientId)!''}. 14 | 15 | <#elseif section = "form"> 16 | <#if realm.password> 17 |
18 |
19 | 22 | 23 |
24 | 25 |
26 |
27 | 28 |
29 | 32 | 33 |
34 | 35 |
36 |
37 | 38 |
39 |
40 | <#if realm.rememberMe> 41 |
42 | 45 |
46 | 47 |
48 | <#if realm.resetPasswordAllowed> 49 | ${rb.loginForgot} ${rb.password}? 50 | 51 |
52 |
53 | 54 |
55 |
56 | 57 | 58 |
59 |
60 |
61 |
62 | <#elseif realm.social> 63 |
64 | 69 |
70 | 71 | <#elseif section = "info" > 72 | <#if realm.password && realm.registrationAllowed> 73 |
74 | ${rb.noAccount} ${rb.register} 75 |
76 | 77 | 78 | <#if realm.password && social.providers??> 79 |
80 | 85 |
86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /login/ionic/messages/messages.properties: -------------------------------------------------------------------------------- 1 | logIn=Log in 2 | logInTo=Log in to 3 | logInWith=Log in with 4 | noAccount= 5 | register=Register 6 | registerWith=Register with 7 | allRequired=All fields are required 8 | alreadyHaveAccount=Already have an account? 9 | 10 | poweredByKeycloak=Powered by Keycloak 11 | 12 | username=Username 13 | usernameOrEmail=Username or email 14 | fullName=Full name 15 | firstName=First name 16 | lastName=Last name 17 | email=Email 18 | password=Password 19 | rememberMe=Remember me 20 | passwordConfirm=Confirm password 21 | passwordNew=New Password 22 | passwordNewConfirm=New Password confirmation 23 | cancel=Cancel 24 | accept=Accept 25 | submit=Submit 26 | yes=Yes 27 | no=No 28 | 29 | authenticatorCode=One-time-password 30 | clientCertificate=Client Certificate 31 | 32 | invalidUser=Invalid username or password. 33 | invalidPassword=Invalid username or password. 34 | accountDisabled=Account is disabled, contact admin 35 | accountTemporarilyDisabled=Account is temporarily disabled, contact admin or try again later 36 | 37 | missingFirstName=Please specify first name 38 | missingLastName=Please specify last name 39 | missingEmail=Please specify email 40 | missingUsername=Please specify username 41 | missingPassword=Please specify password. 42 | notMatchPassword=Passwords don't match 43 | missingTotp=Please specify authenticator code 44 | 45 | invalidPasswordExisting=Invalid existing password 46 | invalidPasswordConfirm=Password confirmation doesn't match 47 | invalidTotp=Invalid authenticator code 48 | 49 | successTotp=Google authenticator configured. 50 | successTotpRemoved=Google authenticator removed. 51 | 52 | usernameExists=Username already exists 53 | emailExists=Email already exists 54 | 55 | socialEmailExists=User with email already exists. Please login to account management to link the account. 56 | 57 | loginTitle=Log in to 58 | loginOauthTitle=Temporary access. 59 | loginOauthTitleHtml=Temporary access requested. Login to grant access. 60 | loginForgot=Forgot 61 | 62 | loginTotpTitle=Google Authenticator Setup 63 | loginTotpStep1_1=Download the 64 | loginTotpStep1_2=Google Authenticator app 65 | loginTotpStep1_3=in your device. 66 | loginTotpStep2=Create an account in Google Authenticator and scan the barcode or the provided key below. 67 | loginTotpStep3=Enter the one-time-password provided by Google Authenticator below and click Submit to finish the setup. 68 | loginTotpOneTime=One-time-password 69 | 70 | loginProfileTitle=Update Account Information 71 | loginProfileWarning=Your account is not enabled because you need to update your account information. 72 | loginProfileWarningFollow=Please follow the steps below. 73 | loginProfileError=Some required fields are empty or incorrect. 74 | loginProfileErrorSteps=Please correct the fields in red. 75 | 76 | oauthGrantTitle=OAuth Grant 77 | oauthGrantTitleHtml=Temporary access requested 78 | oauthGrantTerms=Keycloak Central Login and Google will use this information in accordance with their respective terms of service and privacy policies. 79 | oauthGrantRequest=Do you grant these access privileges? 80 | oauthGrantLoginRequest=Do you grant access? 81 | 82 | emailVerifyTitle=Email verification 83 | emailVerifyInstr=An email with instructions to verify your email address has been sent to you. 84 | emailVerifyInstrQ=Haven't received a verification code in your email? 85 | emailVerifyClick=Click here 86 | emailVerifyResend=to re-send the email. 87 | 88 | error=A system error has occured, contact admin 89 | errorTitle=We're sorry... 90 | errorTitleHtml=We're sorry ... 91 | errorGenericMsg=Something happened and we could not process your request. 92 | actionWarningHeader=Your account is not enabled. 93 | actionTotpWarning=You need to set up the Google Authenticator to activate your account. 94 | actionProfileWarning=You need to update your user profile to activate your account. 95 | actionPasswordWarning=You need to change your password to activate your account. 96 | actionEmailWarning=You need to verify your email address to activate your account. 97 | actionFollow=Please fill in the fields below. 98 | 99 | successHeader=Success! 100 | errorHeader=Error! 101 | 102 | # Forgot password part 103 | 104 | emailForgotHeader=Forgot Your Password? 105 | backToLogin=« Back to Login 106 | emailUpdateHeader=Update password 107 | emailSent=You should receive an email shortly with further instructions. 108 | emailSendError=Failed to send email, please try again later 109 | emailError=Invalid email. 110 | emailErrorInfo=Please, fill in the fields again. 111 | emailInstruction=Enter your username or email address and we will send you instructions on how to create a new password. 112 | 113 | accountUpdated=Your account has been updated 114 | accountPasswordUpdated=Your password has been updated -------------------------------------------------------------------------------- /login/ionic/register.ftl: -------------------------------------------------------------------------------- 1 | <#import "template.ftl" as layout> 2 | <@layout.registrationLayout; section> 3 | <#if section = "title"> 4 | ${rb.registerWith} ${realm.name} 5 | <#elseif section = "header"> 6 | ${rb.registerWith} ${realm.name} 7 | <#elseif section = "form"> 8 |
9 |
10 | 13 |
14 | 15 |
16 |
17 | 18 |
19 | 22 |
23 | 24 |
25 |
26 | 27 |
28 | 31 |
32 | 33 |
34 |
35 | 36 |
37 | 40 |
41 | 42 |
43 |
44 | 45 |
46 | 49 |
50 | 51 |
52 |
53 | 54 |
55 | 58 |
59 | 60 |
61 |
62 | 63 |
64 |
65 |
66 | ${rb.backToLogin} 67 |
68 |
69 | 70 |
71 | 72 |
73 |
74 |
75 | 76 | -------------------------------------------------------------------------------- /login/ionic/resources/css/styles.css: -------------------------------------------------------------------------------- 1 | @import "ionic.css"; 2 | 3 | .hidden { 4 | display: none; 5 | } 6 | 7 | .zocial { 8 | width: 125px; 9 | } 10 | 11 | .zocial:hover { 12 | color: #fff !important; 13 | } 14 | 15 | .zocial.facebook, 16 | .zocial.github, 17 | .zocial.google, 18 | .zocial.twitter { 19 | background-image: none; 20 | border-radius: 2px; 21 | 22 | font-family: "Open Sans", sans-serif; 23 | font-weight: normal; 24 | 25 | box-shadow: none; 26 | text-shadow: none; 27 | } 28 | 29 | .zocial.google { 30 | background-color: #dd4b39 !important; 31 | } 32 | .zocial.google .text:after { 33 | content: "+"; 34 | } 35 | 36 | .zocial.facebook:hover, 37 | .zocial.github:hover, 38 | .zocial.google:hover, 39 | .zocial.twitter:hover { 40 | background-image: linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%) !important; 41 | } 42 | 43 | #kc-social-providers, #kc-registration { 44 | text-align: right !important; 45 | margin-bottom: 2em; 46 | } -------------------------------------------------------------------------------- /login/ionic/template.ftl: -------------------------------------------------------------------------------- 1 | <#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true> 2 | 3 | 4 | 5 | 6 | 7 | 8 | <#if properties.meta?has_content> 9 | <#list properties.meta?split(' ') as meta> 10 | 11 | 12 | 13 | <#nested "title"> 14 | 15 | <#if properties.styles?has_content> 16 | <#list properties.styles?split(' ') as style> 17 | 18 | 19 | 20 | <#if properties.scripts?has_content> 21 | <#list properties.scripts?split(' ') as script> 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
32 | 33 |
34 |
<#nested "header">
35 |
36 | 37 | <#if displayMessage && message?has_content> 38 | 43 | 44 | 45 |
46 |
47 |
48 |
49 | <#nested "form"> 50 |
51 |
52 | 53 | <#if displayInfo> 54 |
55 |
56 | <#nested "info"> 57 |
58 |
59 | 60 |
61 |
62 |
63 |
64 | 65 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /login/ionic/theme.properties: -------------------------------------------------------------------------------- 1 | parent=base 2 | styles=../patternfly/lib/zocial/zocial.css css/styles.css -------------------------------------------------------------------------------- /registration-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfryc/keycloak-ionic-theme/37a14ca07181a7914cdc63ce0d4c50db22e9f43f/registration-screen.png --------------------------------------------------------------------------------