59 changed files with 6400 additions and 1 deletions
Unified View
Diff Options
-
+3 -0Dockerfile
-
+44 -1README.md
-
+63 -0build.sh
-
+277 -0juice/account/resources/css/account.css
-
BINjuice/account/resources/img/icon-sidebar-active.png
-
BINjuice/account/resources/img/keycloak-logo.png
-
BINjuice/account/resources/img/logo.png
-
+14 -0juice/account/theme.properties
-
+480 -0juice/admin/resources/css/styles.css
-
BINjuice/admin/resources/img/keyclok-logo.png
-
+194 -0juice/admin/resources/img/keyclok-logo.svg
-
BINjuice/admin/resources/img/select-arrow.png
-
+5 -0juice/admin/theme.properties
-
+1 -0juice/email/theme.properties
-
+13 -0juice/login/error.ftl
-
+13 -0juice/login/login-page-expired.ftl
-
+61 -0juice/login/login-reset-password.ftl
-
+14 -0juice/login/login-verify-email.ftl
-
+122 -0juice/login/login.ftl
-
+35 -0juice/login/messages/messages_de.properties
-
+33 -0juice/login/messages/messages_en.properties
-
+139 -0juice/login/register.ftl
-
+758 -0juice/login/resources/css/styles.css
-
BINjuice/login/resources/fonts/Roboto-Medium.ttf
-
BINjuice/login/resources/fonts/Swiss721MediumBT.ttf
-
BINjuice/login/resources/fonts/Swiss721ThinBT.ttf
-
+3 -0juice/login/resources/img/apple.svg
-
+3 -0juice/login/resources/img/clock.svg
-
+9 -0juice/login/resources/img/deutsch.svg
-
+7 -0juice/login/resources/img/english.svg
-
+3 -0juice/login/resources/img/error.svg
-
+3 -0juice/login/resources/img/facebook.svg
-
+7 -0juice/login/resources/img/google.svg
-
+35 -0juice/login/resources/img/juice-bc copy.svg
-
+35 -0juice/login/resources/img/juice-bc.svg
-
+9 -0juice/login/resources/img/juice.svg
-
+3 -0juice/login/resources/img/linkedin.svg
-
+3 -0juice/login/resources/img/locale.svg
-
+3 -0juice/login/resources/img/twitter.svg
-
+3 -0juice/login/resources/img/verify-email.svg
-
+5 -0juice/login/resources/js/script.js
-
+134 -0juice/login/template.ftl
-
+8 -0juice/login/theme.properties
-
+68 -0juice/welcome/index.ftl
-
+20 -0juice/welcome/messages/messages_en.properties
-
+20 -0juice/welcome/messages/messages_ru.properties
-
+3 -0juice/welcome/resources/apple.svg
-
+330 -0juice/welcome/resources/css/styles.css
-
+3 -0juice/welcome/resources/facebook.svg
-
+7 -0juice/welcome/resources/google.svg
-
+3219 -0juice/welcome/resources/js/realm.js
-
+35 -0juice/welcome/resources/juice-bc.svg
-
+9 -0juice/welcome/resources/juice.svg
-
+3 -0juice/welcome/resources/linkedin.svg
-
+3 -0juice/welcome/resources/twitter.svg
-
+11 -0juice/welcome/theme.properties
-
+16 -0restart.sh
-
+110 -0test/url.test.js
-
+1 -0version.ini
+ 3
- 0
Dockerfile
View File
| @ -0,0 +1,3 @@ | |||||
| FROM quay.io/keycloak/keycloak:latest | |||||
| COPY ["./juice", "/opt/jboss/keycloak/themes/juice/"] | |||||
+ 44
- 1
README.md
View File
| @ -1,2 +1,45 @@ | |||||
| # keycloak-themed | |||||
| # Keycloak image with juice theme inside | |||||
| A short project that inject juice theme into a docker image. | |||||
| Juice theme should be located in `./juice` folder. | |||||
| !!!IMPORTANT!!!: IF YOU MAKE AN UPDATE, PLEASE UPDATE THE VERSION.INI FILE ACORDING TO STANDARD VERSIONING RULES (NUMBERS ONLY). | |||||
| ## Docker commands | |||||
| ### Build the image | |||||
| Build an image with tag juice-keycloak. | |||||
| ```bash | |||||
| docker build -t juice-keycloak . | |||||
| ``` | |||||
| ### Stop previously running container | |||||
| ```bash | |||||
| docker stop juice-keycloak | |||||
| ``` | |||||
| ### Start a container | |||||
| ```bash | |||||
| docker run --rm -it -d \ | |||||
| -p 8080:8080 \ | |||||
| -e KEYCLOAK_USER=admin \ | |||||
| -e KEYCLOAK_PASSWORD=admin \ | |||||
| -e DB_VENDOR=postgres \ | |||||
| -e DB_ADDR=172.17.0.1 \ | |||||
| -e DB_DATABASE=keycloak \ | |||||
| -e DB_USER=keycloak \ | |||||
| -e DB_PASSWORD=keycloak \ | |||||
| --name juice-keycloak \ | |||||
| juice-keycloak | |||||
| ``` | |||||
| Linux: PGHOST=172.17.0.1 | |||||
| Mac&Win: PGHOST=host.docker.internal | |||||
| ## Testing | |||||
| There is a file `url.test.js` that will generate a login URL. After sucessfull login, provide the redirect url from the browser as an argument for the script to acquire tokens. | |||||
| The script includes installable package listed at the top. | |||||
| Change configuration inside of the script according to your realm settings. | |||||
+ 63
- 0
build.sh
View File
| @ -0,0 +1,63 @@ | |||||
| #!/bin/bash | |||||
| function cleanup { | |||||
| if [ ! -z "${RPM_BUILD_ROOT}" ] && [ -d "${RPM_BUILD_ROOT}" ] && [ "${RPM_BUILD_ROOT}" != "./" ] | |||||
| then | |||||
| rm -rf "${RPM_BUILD_ROOT}" | |||||
| fi | |||||
| } | |||||
| export SOURCE_DIR=`dirname $0` | |||||
| echo "${SOURCE_DIR}" |grep -q "^\." | |||||
| if [ $? -eq 0 ] | |||||
| then | |||||
| echo "sourcdir is ." | |||||
| export SOURCE_DIR="`pwd`/" | |||||
| fi | |||||
| echo "${SOURCE_DIR}" |grep -q "^/" | |||||
| if [ $? -ne 0 ] | |||||
| then | |||||
| export SOURCE_DIR="`pwd`/`dirname $0`" | |||||
| fi | |||||
| echo "SOURCE_DIR: ${SOURCE_DIR}" | |||||
| export RELEASE_VERSION=`cat version.ini` | |||||
| if [ "${docker_registry}" != "" ] || [ "${1}" == "docker-image" ] || [ "${2}" == "docker-image" ] | |||||
| then | |||||
| docker build -t ${docker_registry}${docker_registry_path_suffix}/juice-keycloak:${RELEASE_VERSION} -t ${docker_registry}${docker_registry_path_suffix}/juice-keycloak:latest . && | |||||
| docker login --username ${docker_registry_username} --password ${docker_registry_password} ${docker_registry} && | |||||
| docker push ${docker_registry}${docker_registry_path_suffix}/juice-keycloak:${RELEASE_VERSION} && | |||||
| docker push ${docker_registry}${docker_registry_path_suffix}/juice-keycloak:latest | |||||
| exit $? | |||||
| fi | |||||
| if [ "${BUILD_RPM}" != "" ] || [ "${1}" == "rpm" ] || [ "${2}" == "rpm" ] | |||||
| then | |||||
| export _RPMBUILD_DIR="${RPMBUILD_DIR:-/tmp/rpmbuild-juice-keycloak}" | |||||
| export RPM_BUILD_ROOT="${RPM_BUILD_ROOT:-/tmp/build-juice-keycloak}" | |||||
| if [ ! -d "${_RPMBUILD_DIR}" ] | |||||
| then | |||||
| mkdir -p "${_RPMBUILD_DIR}" | |||||
| mkdir -p "${_RPMBUILD_DIR}"/RPMS/noarch | |||||
| mkdir -p "${_RPMBUILD_DIR}"/SOURCES | |||||
| mkdir -p "${_RPMBUILD_DIR}"/SPECS | |||||
| mkdir -p "${_RPMBUILD_DIR}"/SRPMS | |||||
| fi | |||||
| if [ ! -d "${RPM_BUILD_ROOT}" ] | |||||
| then | |||||
| mkdir -p "${RPM_BUILD_ROOT}" | |||||
| fi | |||||
| rpmbuild --target noarch -bb "${SOURCE_DIR}/juice-keycloak.spec" --buildroot="${RPM_BUILD_ROOT}" --define "_topdir ${_RPMBUILD_DIR}" --define "_release_version ${RELEASE_VERSION}" | |||||
| fi | |||||
| if [ "${RUN_HOOKS}" != "" ] | |||||
| then | |||||
| if [ "${BUILD_RPM}" != "" ] || [ "${1}" == "rpm" ] || [ "${2}" == "rpm" ] | |||||
| then | |||||
| run-parts "${SOURCE_DIR}/build-hooks/rpm" | |||||
| fi | |||||
| if [ "${docker_registry}" != "" ] || [ "${1}" == "docker-image" ] || [ "${2}" == "docker-image" ] | |||||
| then | |||||
| run-parts "${SOURCE_DIR}/build-hooks/docker-image" | |||||
| fi | |||||
| fi | |||||
| cleanup | |||||
+ 277
- 0
juice/account/resources/css/account.css
View File
| @ -0,0 +1,277 @@ | |||||
| html { | |||||
| height: 100%; | |||||
| } | |||||
| body { | |||||
| background-color: #F9F9F9; | |||||
| margin: 0; | |||||
| padding: 0; | |||||
| height: 100%; | |||||
| } | |||||
| header .navbar { | |||||
| margin-bottom: 0; | |||||
| min-height: inherit; | |||||
| } | |||||
| .header .container { | |||||
| position: relative; | |||||
| } | |||||
| .navbar-title { | |||||
| background-image: url('../img/logo.png'); | |||||
| height: 25px; | |||||
| background-repeat: no-repeat; | |||||
| width: 123px; | |||||
| margin: 3px 10px 5px; | |||||
| text-indent: -99999px; | |||||
| } | |||||
| .navbar-pf .navbar-utility { | |||||
| right: 20px; | |||||
| top: -34px; | |||||
| font-size: 12px; | |||||
| } | |||||
| .navbar-pf .navbar-utility > li > a { | |||||
| color: #fff !important; | |||||
| padding-bottom: 12px; | |||||
| padding-top: 11px; | |||||
| border-left: medium none; | |||||
| } | |||||
| .container { | |||||
| height: 100%; | |||||
| } | |||||
| .content-area { | |||||
| background-color: #fff; | |||||
| border-color: #CECECE; | |||||
| border-style: solid; | |||||
| border-width: 0 1px; | |||||
| height: 100%; | |||||
| padding: 0 30px; | |||||
| } | |||||
| .margin-bottom { | |||||
| margin-bottom: 10px; | |||||
| } | |||||
| /* Sidebar */ | |||||
| .bs-sidebar { | |||||
| background-color: #f9f9f9; | |||||
| padding-top: 44px; | |||||
| padding-right: 0; | |||||
| padding-left: 0; | |||||
| z-index: 20; | |||||
| } | |||||
| .bs-sidebar ul { | |||||
| list-style: none; | |||||
| padding-left: 12px; | |||||
| } | |||||
| .bs-sidebar ul li { | |||||
| margin-bottom: 0.5em; | |||||
| margin-left: -1em; | |||||
| } | |||||
| .bs-sidebar ul li a { | |||||
| font-size: 14px; | |||||
| padding-left: 25px; | |||||
| color: #4d5258; | |||||
| line-height: 28px; | |||||
| display: block; | |||||
| border-width: 1px 0 1px 1px; | |||||
| border-style: solid; | |||||
| border-color: #f9f9f9; | |||||
| } | |||||
| .bs-sidebar ul li a:hover, | |||||
| .bs-sidebar ul li a:focus { | |||||
| text-decoration: none; | |||||
| color: #777777; | |||||
| border-right: 2px solid #aaa; | |||||
| } | |||||
| .bs-sidebar ul li.active a { | |||||
| background-color: #c7e5f0; | |||||
| border-color: #56bae0; | |||||
| font-weight: bold; | |||||
| background-image: url(../img/icon-sidebar-active.png); | |||||
| background-repeat: no-repeat; | |||||
| background-position: right center; | |||||
| } | |||||
| .bs-sidebar ul li.active a:hover { | |||||
| border-right: none; | |||||
| } | |||||
| .content-area h2 { | |||||
| font-family: "Open Sans", sans-serif; | |||||
| font-weight: 100; | |||||
| font-size: 24px; | |||||
| margin-bottom: 25px; | |||||
| margin-top: 25px; | |||||
| } | |||||
| .subtitle { | |||||
| text-align: right; | |||||
| margin-top: 30px; | |||||
| color: #909090; | |||||
| } | |||||
| .required { | |||||
| color: #CB2915; | |||||
| } | |||||
| .alert { | |||||
| margin-top: 30px; | |||||
| margin-bottom: 0; | |||||
| } | |||||
| .feedback-aligner .alert { | |||||
| background-position: 1.27273em center; | |||||
| background-repeat: no-repeat; | |||||
| border-radius: 2px; | |||||
| border-width: 1px; | |||||
| color: #4D5258; | |||||
| display: inline-block; | |||||
| font-size: 1.1em; | |||||
| line-height: 1.4em; | |||||
| margin: 0; | |||||
| padding: 0.909091em 3.63636em; | |||||
| position: relative; | |||||
| text-align: left; | |||||
| } | |||||
| .alert.alert-success { | |||||
| background-color: #E4F1E1; | |||||
| border-color: #4B9E39; | |||||
| } | |||||
| .alert.alert-error { | |||||
| background-color: #F8E7E7; | |||||
| border-color: #B91415; | |||||
| } | |||||
| .alert.alert-warning { | |||||
| background-color: #FEF1E9; | |||||
| border-color: #F17528; | |||||
| } | |||||
| .alert.alert-info { | |||||
| background-color: #E4F3FA; | |||||
| border-color: #5994B2; | |||||
| } | |||||
| .form-horizontal { | |||||
| border-top: 1px solid #E9E8E8; | |||||
| padding-top: 23px; | |||||
| } | |||||
| .form-horizontal .control-label { | |||||
| color: #909090; | |||||
| line-height: 1.4em; | |||||
| padding-top: 5px; | |||||
| position: relative; | |||||
| text-align: right; | |||||
| width: 100%; | |||||
| } | |||||
| .form-group { | |||||
| position: relative; | |||||
| } | |||||
| .control-label + .required { | |||||
| position: absolute; | |||||
| right: -2px; | |||||
| top: 0; | |||||
| } | |||||
| #kc-form-buttons { | |||||
| text-align: right; | |||||
| margin-top: 10px; | |||||
| } | |||||
| #kc-form-buttons .btn-primary { | |||||
| float: right; | |||||
| margin-left: 8px; | |||||
| } | |||||
| /* Authenticator page */ | |||||
| ol { | |||||
| padding-left: 40px; | |||||
| } | |||||
| ol li { | |||||
| font-size: 13px; | |||||
| margin-bottom: 10px; | |||||
| position: relative; | |||||
| } | |||||
| ol li img { | |||||
| margin-top: 15px; | |||||
| margin-bottom: 5px; | |||||
| border: 1px solid #eee; | |||||
| } | |||||
| hr + .form-horizontal { | |||||
| border: none; | |||||
| padding-top: 0; | |||||
| } | |||||
| .kc-dropdown{ | |||||
| position: relative; | |||||
| } | |||||
| .kc-dropdown > a{ | |||||
| display:block; | |||||
| padding: 11px 10px 12px; | |||||
| line-height: 12px; | |||||
| font-size: 12px; | |||||
| color: #fff !important; | |||||
| text-decoration: none; | |||||
| } | |||||
| .kc-dropdown > a::after{ | |||||
| content: "\2c5"; | |||||
| margin-left: 4px; | |||||
| } | |||||
| .kc-dropdown:hover > a{ | |||||
| background-color: rgba(0,0,0,0.2); | |||||
| } | |||||
| .kc-dropdown ul li a{ | |||||
| padding: 1px 11px; | |||||
| font-size: 12px; | |||||
| color: #000 !important; | |||||
| border: 1px solid #fff; | |||||
| text-decoration: none; | |||||
| display:block; | |||||
| line-height: 20px; | |||||
| } | |||||
| .kc-dropdown ul li a:hover{ | |||||
| color: #4d5258; | |||||
| background-color: #d4edfa; | |||||
| border-color: #b3d3e7; | |||||
| } | |||||
| .kc-dropdown ul{ | |||||
| position: absolute; | |||||
| z-index: 2000; | |||||
| list-style:none; | |||||
| display:none; | |||||
| padding: 5px 0px; | |||||
| margin: 0px; | |||||
| background-color: #fff !important; | |||||
| border: 1px solid #b6b6b6; | |||||
| border-radius: 1px; | |||||
| -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); | |||||
| box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); | |||||
| background-clip: padding-box; | |||||
| min-width: 100px; | |||||
| } | |||||
| .kc-dropdown:hover ul{ | |||||
| display:block; | |||||
| } | |||||
| #kc-totp-secret-key { | |||||
| border: 1px solid #eee; | |||||
| font-size: 16px; | |||||
| padding: 10px; | |||||
| margin: 50px 0; | |||||
| } | |||||
BIN
juice/account/resources/img/icon-sidebar-active.png
View File
| Before | After |
|---|---|
|
|
| Width: 23 | Height: 14 | Size: 202 B |
BIN
juice/account/resources/img/keycloak-logo.png
View File
| Before | After |
|---|---|
|
|
| Width: 154 | Height: 37 | Size: 5.1 KiB |
BIN
juice/account/resources/img/logo.png
View File
| Before | After |
|---|---|
|
|
| Width: 123 | Height: 25 | Size: 4.1 KiB |
+ 14
- 0
juice/account/theme.properties
View File
| @ -0,0 +1,14 @@ | |||||
| parent=base | |||||
| import=common/keycloak | |||||
| styles=css/account.css | |||||
| stylesCommon=node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css | |||||
| ##### css classes for form buttons | |||||
| # main class used for all buttons | |||||
| kcButtonClass=btn | |||||
| # classes defining priority of the button - primary or default (there is typically only one priority button for the form) | |||||
| kcButtonPrimaryClass=btn-primary | |||||
| kcButtonDefaultClass=btn-default | |||||
| # classes defining size of the button | |||||
| kcButtonLargeClass=btn-lg | |||||
+ 480
- 0
juice/admin/resources/css/styles.css
View File
| @ -0,0 +1,480 @@ | |||||
| html,body { | |||||
| height: 100%; | |||||
| } | |||||
| form { | |||||
| margin-top: 20px; | |||||
| } | |||||
| table { | |||||
| margin-top: 20px; | |||||
| } | |||||
| .required { | |||||
| color: #f00; | |||||
| } | |||||
| .tooltip-inner { | |||||
| min-width: 200px; | |||||
| } | |||||
| .margin-top { | |||||
| margin-top: 20px; | |||||
| } | |||||
| .no-margin-top { | |||||
| margin-top: 0px !important; | |||||
| } | |||||
| table { | |||||
| max-width: 100%; | |||||
| } | |||||
| td.clip { | |||||
| overflow: hidden; | |||||
| text-overflow: ellipsis; | |||||
| white-space: nowrap; | |||||
| max-width: 0; | |||||
| } | |||||
| th.w-10 { | |||||
| width: 10%; | |||||
| } | |||||
| th.w-15 { | |||||
| width: 15%; | |||||
| } | |||||
| th.w-20 { | |||||
| width: 20%; | |||||
| } | |||||
| th.w-25 { | |||||
| width: 25%; | |||||
| } | |||||
| th.w-30 { | |||||
| width: 30%; | |||||
| } | |||||
| th.w-35 { | |||||
| width: 35%; | |||||
| } | |||||
| th.w-40 { | |||||
| width: 40%; | |||||
| } | |||||
| /*********** Loading ***********/ | |||||
| .loading { | |||||
| background-color: #f5f5f5; | |||||
| border: 1px solid #eee; | |||||
| position: absolute; | |||||
| bottom: 0px; | |||||
| left: 0px; | |||||
| padding: 2px 200px 2px 5px; | |||||
| } | |||||
| /*********** Feedback ***********/ | |||||
| .feedback-aligner { | |||||
| position: fixed; | |||||
| top: 15px; | |||||
| text-align: center; | |||||
| width: 100%; | |||||
| height: 0; | |||||
| z-index: 100; | |||||
| } | |||||
| .feedback-aligner .alert { | |||||
| border-radius: 2px; | |||||
| border-width: 1px; | |||||
| display: inline-block; | |||||
| position: relative; | |||||
| } | |||||
| /*********** On-Off Switch ***********/ | |||||
| .onoffswitch { | |||||
| -moz-user-select: none; | |||||
| height: 26px; | |||||
| position: relative; | |||||
| width: 62px; | |||||
| } | |||||
| .onoffswitch .onoffswitch-checkbox { | |||||
| display: none; | |||||
| } | |||||
| .onoffswitch .onoffswitch-label { | |||||
| border: 1px solid #bbb; | |||||
| border-radius: 2px; | |||||
| cursor: pointer; | |||||
| display: block; | |||||
| overflow: hidden; | |||||
| width: 62px; | |||||
| } | |||||
| .onoffswitch .onoffswitch-inner { | |||||
| display: block; | |||||
| margin-left: -100%; | |||||
| transition: margin 0.3s ease-in 0s; | |||||
| width: 200%; | |||||
| } | |||||
| .onoffswitch .onoffswitch-inner > span { | |||||
| -moz-box-sizing: border-box; | |||||
| color: white; | |||||
| float: left; | |||||
| font-size: 11px; | |||||
| font-family: "Open Sans", sans-serif; | |||||
| font-weight: bold; | |||||
| height: 24px; | |||||
| line-height: 24px; | |||||
| padding: 0; | |||||
| width: 50%; | |||||
| } | |||||
| .onoffswitch .onoffswitch-switch { | |||||
| background-image: linear-gradient(top, #fafafa 0%, #ededed 100%); | |||||
| background-image: -o-linear-gradient(top, #fafafa 0%, #ededed 100%); | |||||
| background-image: -moz-linear-gradient(top, #fafafa 0%, #ededed 100%); | |||||
| background-image: -webkit-linear-gradient(top, #fafafa 0%, #ededed 100%); | |||||
| background-image: -ms-linear-gradient(top, #fafafa 0%, #ededed 100%); | |||||
| background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, 0, #ededed)); | |||||
| border: 1px solid #aaa; | |||||
| border-radius: 2px; | |||||
| bottom: 0; | |||||
| margin: 0; | |||||
| position: absolute; | |||||
| right: 39px; | |||||
| top: 0; | |||||
| transition: all 0.3s ease-in 0s; | |||||
| -webkit-transition: all 0.3s ease-in 0s; | |||||
| width: 23px; | |||||
| } | |||||
| .onoffswitch .onoffswitch-inner .onoffswitch-active { | |||||
| background-image: linear-gradient(top, #00a9ec 0%, #009bd3 100%); | |||||
| background-image: -o-linear-gradient(top, #00a9ec 0%, #009bd3 100%); | |||||
| background-image: -moz-linear-gradient(top, #00a9ec 0%, #009bd3 100%); | |||||
| background-image: -webkit-linear-gradient(top, #00a9ec 0%, #009bd3 100%); | |||||
| background-image: -ms-linear-gradient(top, #00a9ec 0%, #009bd3 100%); | |||||
| background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00a9ec), color-stop(1, 0, #009bd3)); | |||||
| color: #FFFFFF; | |||||
| padding-left: 10px; | |||||
| } | |||||
| .onoffswitch-checkbox:disabled + .onoffswitch-label .onoffswitch-inner .onoffswitch-active, | |||||
| .onoffswitch-checkbox:disabled + .onoffswitch-label .onoffswitch-inner .onoffswitch-inactive { | |||||
| background-image: none; | |||||
| background-color: #e5e5e5; | |||||
| color: #9d9fa1; | |||||
| } | |||||
| .onoffswitch .onoffswitch-inner .onoffswitch-inactive { | |||||
| background: linear-gradient(#fefefe, #e8e8e8) repeat scroll 0 0 transparent; | |||||
| color: #4d5258; | |||||
| padding-right: 10px; | |||||
| text-align: right; | |||||
| } | |||||
| .onoffswitch .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { | |||||
| margin-left: 0; | |||||
| } | |||||
| .onoffswitch .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { | |||||
| right: 0; | |||||
| } | |||||
| /*********** Select 2 ***********/ | |||||
| .select2-container { | |||||
| width: 100%; | |||||
| } | |||||
| .select2-container-multi .select2-choices .select2-search-field { | |||||
| height: 26px; | |||||
| } | |||||
| /*********** html select ********/ | |||||
| .overflow-select { | |||||
| overflow: auto; | |||||
| } | |||||
| /*********** New Menu ***********/ | |||||
| .sidebar-pf-left{ | |||||
| background: #292e34; | |||||
| } | |||||
| .sidebar-pf .nav-pills > li a i, .sidebar-pf .nav-pills > li a span{ | |||||
| color: #72767b; | |||||
| display: inline-block; | |||||
| margin-right: 10px; | |||||
| } | |||||
| .sidebar-pf .nav-pills > li > a{ | |||||
| color: #dbdada; | |||||
| padding: 0px 20px 0 30px!important; | |||||
| line-height: 30px; | |||||
| border-left-width: 12px; | |||||
| border-left-style: solid; | |||||
| border-left-color: #292e34; | |||||
| margin-left: -6px; | |||||
| } | |||||
| .sidebar-pf .nav-pills > li > a:hover{ | |||||
| background: #393f44; | |||||
| border-color:#292e34; | |||||
| border-left-color: #393f44; | |||||
| color: #fff; | |||||
| } | |||||
| .sidebar-pf .nav-pills > li > a:after{ | |||||
| display: none!important; | |||||
| } | |||||
| .sidebar-pf .nav-pills > li.active > a { | |||||
| color: #fff; | |||||
| background: #393f44!important; | |||||
| border-bottom: 1px solid #000!important; | |||||
| border-top: 1px solid #000!important; | |||||
| border-left-color: #39a5dc!important; | |||||
| } | |||||
| .sidebar-pf .nav-pills > li.active a i, .sidebar-pf .nav-pills > li.active a span{ | |||||
| color: #39a5dc; | |||||
| } | |||||
| /*********** Realm selector ***********/ | |||||
| .realm-selector{ | |||||
| color: #fff; | |||||
| margin: 0 -20px; | |||||
| position: relative; | |||||
| } | |||||
| .realm-dropmenu{ | |||||
| display: none; | |||||
| cursor: pointer; | |||||
| position: absolute; | |||||
| top: 60px; | |||||
| left: 0; | |||||
| right: 0; | |||||
| z-index: 999; | |||||
| background: #fff; | |||||
| } | |||||
| .realm-selector:hover .realm-dropmenu{ | |||||
| display: block; | |||||
| } | |||||
| .realm-add{ | |||||
| padding: 10px; | |||||
| } | |||||
| .realm-selector h2{ | |||||
| font-size: 16px; | |||||
| line-height: 60px; | |||||
| padding: 0 20px; | |||||
| margin: 0; | |||||
| border-bottom: 1px solid #d5d5d6; | |||||
| } | |||||
| .realm-selector h2 i{ | |||||
| display: inline-block; | |||||
| float: right; | |||||
| line-height: 60px; | |||||
| } | |||||
| .realm-selector ul{ | |||||
| padding-left: 0; | |||||
| margin: 0; | |||||
| list-style: none; | |||||
| max-height: 200px; | |||||
| overflow-y:auto; | |||||
| } | |||||
| .realm-selector ul li a{ | |||||
| line-height: 60px; | |||||
| padding: 0 20px; | |||||
| border-bottom: 1px solid #d5d5d6; | |||||
| line-height: 39px; | |||||
| display: block; | |||||
| font-size: 14px; | |||||
| } | |||||
| /*********** Overwrites header defaults ***********/ | |||||
| .navbar-pf{ | |||||
| border-top: none!important; | |||||
| } | |||||
| .navbar-pf .navbar-brand { | |||||
| padding: 0; | |||||
| height: 56px; | |||||
| line-height: 56px; | |||||
| background-position: center center; | |||||
| background-image: url('../img/keyclok-logo.png'); | |||||
| background-size: 148px 30px; | |||||
| background-repeat: no-repeat; | |||||
| width: 148px; | |||||
| } | |||||
| .navbar-pf .navbar-utility .dropdown-toggle { | |||||
| padding: 23px !important; | |||||
| } | |||||
| .clickable { | |||||
| cursor: pointer; | |||||
| } | |||||
| h1 i { | |||||
| color: #999999; | |||||
| font-size: 18px; | |||||
| margin-left: 10px; | |||||
| } | |||||
| /* Action cell */ | |||||
| .kc-action-cell { | |||||
| background-color: #eeeeee; | |||||
| background-image: linear-gradient(to bottom, #fafafa 0%, #ededed 100%); | |||||
| background-repeat: repeat-x; | |||||
| text-align: center; | |||||
| vertical-align: middle; | |||||
| overflow: hidden; | |||||
| text-overflow: ellipsis; | |||||
| white-space: nowrap; | |||||
| cursor:pointer; | |||||
| } | |||||
| .kc-action-cell:hover { | |||||
| background-color: #eeeeee; | |||||
| background-image: none; | |||||
| } | |||||
| .kc-sorter span { | |||||
| margin-left: 10px; | |||||
| } | |||||
| /* Time selector */ | |||||
| .time-selector input { | |||||
| display: inline-block; | |||||
| width: 120px; | |||||
| padding-right: 0; | |||||
| margin-right: 0; | |||||
| } | |||||
| .time-selector select { | |||||
| display: inline-block; | |||||
| width: 80px; | |||||
| margin-left: 0; | |||||
| padding-left: 0; | |||||
| } | |||||
| .ace_editor { | |||||
| height: 600px; | |||||
| width: 100%; | |||||
| } | |||||
| .kc-button-input-file input { | |||||
| float: left; | |||||
| width: 73%; | |||||
| } | |||||
| .kc-button-input-file label { | |||||
| float: left; | |||||
| margin-left: 2%; | |||||
| width: 25%; | |||||
| } | |||||
| table.kc-authz-table-expanded { | |||||
| margin-top: 0px !important; | |||||
| } | |||||
| .no-gutter > [class*='col-'] { | |||||
| padding-right:0!important; | |||||
| padding-left:0!important; | |||||
| } | |||||
| .password-conceal { | |||||
| font-family: 'text-security-disc'; | |||||
| font-size: 14px; | |||||
| } | |||||
| /* Deactivation styles for user-group membership tree models */ | |||||
| div[tree-model] li .deactivate { | |||||
| color: #4a5053; | |||||
| opacity: 0.4; | |||||
| } | |||||
| div[tree-model] li .deactivate_selected { | |||||
| background-color: #dcdcdc; | |||||
| font-weight: bold; | |||||
| padding: 1px 5px; | |||||
| } | |||||
| /* search highlighting */ | |||||
| div[tree-model] li .highlight { | |||||
| background-color: #aaddff; | |||||
| } | |||||
| /* Manage credentials */ | |||||
| table.credentials-table { | |||||
| margin-top: 0; | |||||
| margin-bottom: 20px; | |||||
| } | |||||
| table.credentials-table td { | |||||
| vertical-align: middle !important; | |||||
| } | |||||
| table.credentials-table input[type='text'] { | |||||
| width: 100%; | |||||
| } | |||||
| td.credential-arrows-cell { | |||||
| width: 75px; | |||||
| } | |||||
| td.credential-label-cell { | |||||
| padding: 5px !important; | |||||
| } | |||||
| td.credential-action-cell { | |||||
| padding: 0px !important; | |||||
| } | |||||
| td.credential-action-cell div.kc-action-cell { | |||||
| width: 100%; | |||||
| height: 36px; | |||||
| line-height: 34px; | |||||
| } | |||||
| td.credential-action-cell.expanded div.kc-action-cell { | |||||
| border-bottom: 1px solid #d1d1d1; | |||||
| } | |||||
| table.credential-data-table td { | |||||
| word-break: break-all; | |||||
| } | |||||
| table.credential-data-table tr:first-child td { | |||||
| border-top: 0; | |||||
| } | |||||
| table.credential-data-table td:first-child { | |||||
| width: 150px; | |||||
| } | |||||
| table.credential-data-table td.key { | |||||
| text-align: right; | |||||
| font-weight: bold; | |||||
| } | |||||
BIN
juice/admin/resources/img/keyclok-logo.png
View File
| Before | After |
|---|---|
|
|
| Width: 148 | Height: 30 | Size: 5.1 KiB |
+ 194
- 0
juice/admin/resources/img/keyclok-logo.svg
View File
| @ -0,0 +1,194 @@ | |||||
| <?xml version="1.0" encoding="utf-8"?> | |||||
| <!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> | |||||
| <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" | |||||
| viewBox="-145.2 359 325.4 77.2" enable-background="new -145.2 359 325.4 77.2" xml:space="preserve"> | |||||
| <g> | |||||
| <g> | |||||
| <path fill="none" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" | |||||
| M-79.1,393.1c-7.2,5-14.7,3.7-23.2-3.4c-4.9-4.1-11.2-2.8-15.4-1.5c-2.6,0.8-6.3,0.7-9.5,0.1c-14-2.9-10.9,6-8.3,14 | |||||
| c4.8,14.6-3.2,18-6,12.8c-1.8,6.6,7.1,8.6,10.9,7.7c6-1.4,14.1-2.2,19-0.6c9.5,2.9,13.1,0.5,11.5-2.6c-0.5-1-0.2-2.4,0.6-3.1 | |||||
| c2.8-2.4,5.3-0.4,8-1.9c2.1-1.2,2.1-3.9-1.2-5.5c-1.7-0.8-1.6-2.9,0.2-3.8c3.7-2,8.8-1,10-5.1C-81.9,398.7-80.7,395-79.1,393.1z" | |||||
| /> | |||||
| <path fill="none" stroke="#FFFFFF" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" | |||||
| M-112.4,367.4c-1.1-0.6-4.3-2.6-5.1-3.1c-0.8-0.5-2.7-1.9-4.8-1.9s-4,1.4-4.8,1.9c-0.8,0.5-4,2.5-5.1,3.1c-0.8,0.5-3.7,2-3.7,6.3 | |||||
| c0,1.3,0,3.6,0,4.5c0,2.8,1.6,5,4.5,6.4c1,0.5,1.8,1.3,1.8,3.5c0,0.9,0.4,1.2,0.9,1.2h0.7c0.6,0,1,0.2,1,1.3c0,0.6,0,2.1,0,2.1 | |||||
| v37.2l2.7,2.8h1.2l5.7-5.8v-34.2c0,0,0-1.5,0-2.1c0-1,0.3-1.3,1-1.3h0.7c0.6,0,0.9-0.2,0.9-1.2c0-2.1,0.8-3,1.8-3.5 | |||||
| c2.9-1.5,4.5-3.6,4.5-6.4c0-1,0-3.2,0-4.5C-108.7,369.5-111.6,367.9-112.4,367.4z"/> | |||||
| </g> | |||||
| <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-227.7191" y1="2220.7964" x2="-165.056" y2="2220.7964" gradientTransform="matrix(1 0 0 1 86 -1815.5)"> | |||||
| <stop offset="0" style="stop-color:#FDFDFD"/> | |||||
| <stop offset="0.1452" style="stop-color:#F4F5F5"/> | |||||
| <stop offset="0.6844" style="stop-color:#D9DBDB"/> | |||||
| <stop offset="1" style="stop-color:#CFD1D1"/> | |||||
| </linearGradient> | |||||
| <path fill="url(#SVGID_1_)" d="M-79.1,393.1c-7.2,5-14.7,3.7-23.2-3.4c-4.9-4.1-11.2-2.8-15.4-1.5c-2.6,0.8-6.3,0.7-9.5,0.1 | |||||
| c-14-2.9-10.9,6-8.3,14c4.8,14.6-3.2,18-6,12.8c-1.8,6.6,7.1,8.6,10.9,7.7c6-1.4,14.1-2.2,19-0.6c9.5,2.9,13.1,0.5,11.5-2.6 | |||||
| c-0.5-1-0.2-2.4,0.6-3.1c2.8-2.4,5.3-0.4,8-1.9c2.1-1.2,2.1-3.9-1.2-5.5c-1.7-0.8-1.6-2.9,0.2-3.8c3.7-2,8.8-1,10-5.1 | |||||
| C-81.9,398.7-80.7,395-79.1,393.1z"/> | |||||
| <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="192.3203" y1="1507.8835" x2="184.0467" y2="1507.8835" gradientTransform="matrix(1 0 0 1 -302 -1102)"> | |||||
| <stop offset="0" style="stop-color:#E6E6E6"/> | |||||
| <stop offset="1" style="stop-color:#B2B3B3"/> | |||||
| </linearGradient> | |||||
| <path fill="url(#SVGID_2_)" d="M-115,391.3c0,5,0.7,22.8,4.5,30.4l-8.7-0.2v-31.5L-115,391.3z"/> | |||||
| <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-200.8627" y1="2227.3811" x2="-193.8624" y2="2207.8804" gradientTransform="matrix(1 0 0 1 86 -1815.5)"> | |||||
| <stop offset="0" style="stop-color:#F6F6F6"/> | |||||
| <stop offset="1" style="stop-color:#B2B3B3"/> | |||||
| </linearGradient> | |||||
| <path fill="url(#SVGID_3_)" d="M-134.6,403.1c-2.8-7.5-6.5-16.6,7.5-13.7c3.2,0.7,6.9,0.7,9.5-0.1c4.3-1.3,10-2.4,14.5,1.5 | |||||
| c8.9,7.7,16.9,8.3,24.1,3.3c-1.6,1.9-3.1,5.6-3.3,7.1c-0.2,1.3-1.1,1.9-2.4,2.4c-18.5,7.5-15.4-5.3-21.4-9.5 | |||||
| c-3.2-2.2-7.7-2.1-11.2-0.8c-3.2,1.2-6.4,0.9-9.8-0.4C-132.9,390.8-136.7,391.9-134.6,403.1z"/> | |||||
| <line fill="none" stroke="#FFFFFF" stroke-width="3.5" stroke-miterlimit="10" x1="-117.4" y1="421.8" x2="-117.4" y2="390.6"/> | |||||
| <g opacity="0.75"> | |||||
| <path fill="#FFFFFF" d="M-110.3,389c2.7,0,4.9,0.7,6.8,2.3c5.5,4.6,10.6,6.8,15.6,6.8c1.5,0,2.9-0.2,4.4-0.6 | |||||
| c-0.3,0.9-0.6,1.6-0.7,2.1c-0.4,1.4-1.6,1.8-4.4,2.4c-1.5,0.3-3.1,0.7-4.7,1.5c-1.6,0.8-2.5,2.3-2.5,3.9c0,1.5,0.9,2.8,2.4,3.5 | |||||
| c1.2,0.5,1.5,1.1,1.5,1.4c0,0.3-0.3,0.5-0.5,0.6c-0.6,0.3-1.2,0.4-2.1,0.4c-0.2,0-0.3,0-0.5,0c-0.2,0-0.4,0-0.5,0 | |||||
| c-1.6,0-3.4,0.2-5.2,1.7c-1.5,1.3-2,3.7-1.1,5.6c0.1,0.3,0.1,0.4,0.1,0.4c-0.1,0.1-0.8,0.6-2.6,0.6c-1.8,0-4.1-0.4-6.7-1.2 | |||||
| c-2-0.6-4.5-0.9-7.5-0.9c-3.8,0-8.4,0.6-12.6,1.5c-0.4,0.1-0.9,0.1-1.5,0.1c-1.9,0-4.2-0.5-5.7-1.6c1.7,0,3.3-0.9,4.4-2.4 | |||||
| c1.3-1.8,3.2-6.3,0.2-15.3l-0.1-0.2c-1.3-3.9-2.9-8.8-1.5-10.7c0.5-0.7,1.6-1.1,3.4-1.1c1.2,0,2.6,0.2,4.3,0.5 | |||||
| c1.8,0.4,3.6,0.6,5.4,0.6c1.9,0,3.7-0.2,5.1-0.7C-115.4,389.7-112.9,389-110.3,389 M-110.3,387c-2.7,0-5.2,0.6-7.3,1.3 | |||||
| c-1.3,0.4-2.9,0.6-4.6,0.6c-1.6,0-3.4-0.2-5-0.5c-1.9-0.4-3.4-0.6-4.7-0.6c-8.5,0-5.9,7.7-3.6,14.6c3.4,10.4,0.3,15.1-2.7,15.1 | |||||
| c-1.2,0-2.5-0.8-3.3-2.3c-1.5,5.6,4.8,7.9,9,7.9c0.7,0,1.4-0.1,2-0.2c3.7-0.8,8.1-1.5,12.2-1.5c2.5,0,4.9,0.2,6.9,0.8 | |||||
| c3,0.9,5.5,1.3,7.3,1.3c4,0,5.3-1.8,4.2-3.9c-0.5-1-0.2-2.4,0.6-3.1c1.4-1.2,2.7-1.3,3.9-1.3c0.3,0,0.7,0,1,0c1,0,2-0.1,3.1-0.7 | |||||
| c2.1-1.2,2.1-3.9-1.2-5.5c-1.7-0.8-1.6-2.9,0.2-3.8c3.7-2,8.8-1,10-5.1c0.4-1.5,1.7-5.2,3.3-7.1c-2.9,2-5.9,3-8.9,3 | |||||
| c-4.5,0-9.2-2.2-14.3-6.4C-104.7,387.7-107.6,387-110.3,387L-110.3,387z M-79.1,393.1L-79.1,393.1L-79.1,393.1z"/> | |||||
| </g> | |||||
| <path fill="none" stroke="#034672" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" | |||||
| M-79.1,393.1c-7.2,5-14.7,3.7-23.2-3.4c-4.9-4.1-11.2-2.8-15.4-1.5c-2.6,0.8-6.3,0.7-9.5,0.1c-14-2.9-10.9,6-8.3,14 | |||||
| c4.8,14.6-3.2,18-6,12.8c-1.8,6.6,7.1,8.6,10.9,7.7c6-1.4,14.1-2.2,19-0.6c9.5,2.9,13.1,0.5,11.5-2.6c-0.5-1-0.2-2.4,0.6-3.1 | |||||
| c2.8-2.4,5.3-0.4,8-1.9c2.1-1.2,2.1-3.9-1.2-5.5c-1.7-0.8-1.6-2.9,0.2-3.8c3.7-2,8.8-1,10-5.1C-81.9,398.7-80.7,395-79.1,393.1z"/> | |||||
| <path fill="#034672" d="M-134.6,402.1c-2.8-7.5-6.5-16.6,7.5-13.7c3.2,0.7,6.9,0.7,9.5-0.1c4.3-1.3,10-2.4,14.5,1.5 | |||||
| c8.9,7.7,16.9,8.3,24.1,3.3c-1.6,1.9-3.1,5.6-3.3,7.1c-0.2,1.3-1.1,1.9-2.4,2.4c-13.1,4.8-14.1-5.5-20.1-9.7 | |||||
| c-3.2-2.2-9-1.9-12.5-0.6c-3.2,1.2-6.4,0.9-9.8-0.4C-132.9,389.8-136.7,390.9-134.6,402.1z"/> | |||||
| <path fill="#FFFFFF" d="M-112.4,367.4c-1.1-0.6-4.3-2.6-5.1-3.1c-0.8-0.5-2.7-1.9-4.8-1.9s-4,1.4-4.8,1.9c-0.8,0.5-4,2.5-5.1,3.1 | |||||
| c-0.8,0.5-3.7,2-3.7,6.3c0,1.3,0,3.6,0,4.5c0,2.8,1.6,5,4.5,6.4c1,0.5,1.8,1.3,1.8,3.5c0,0.9,0.4,1.2,0.9,1.2h0.7 | |||||
| c0.6,0,1,0.2,1,1.3c0,0.6,0,2.1,0,2.1v37.2l2.7,2.8h1.2l5.7-5.8v-34.2c0,0,0-1.5,0-2.1c0-1,0.3-1.3,1-1.3h0.7 | |||||
| c0.6,0,0.9-0.2,0.9-1.2c0-2.1,0.8-3,1.8-3.5c2.9-1.5,4.5-3.6,4.5-6.4c0-1,0-3.2,0-4.5C-108.7,369.5-111.6,367.9-112.4,367.4z"/> | |||||
| <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="-217.9037" y1="2215.0122" x2="-187.068" y2="2207.345" gradientTransform="matrix(1 0 0 1 86 -1815.5)"> | |||||
| <stop offset="0" style="stop-color:#B8D7E9"/> | |||||
| <stop offset="0.3324" style="stop-color:#CCE3F1"/> | |||||
| <stop offset="0.6937" style="stop-color:#DAEBF7"/> | |||||
| <stop offset="1" style="stop-color:#DFEEF9"/> | |||||
| </linearGradient> | |||||
| <path fill="url(#SVGID_4_)" d="M-112.4,367.4c-1.1-0.6-4.3-2.6-5.1-3.1c-0.8-0.5-2.7-1.9-4.8-1.9v69.3l4.8-4.9v-34.2 | |||||
| c0,0,0-1.5,0-2.1c0-1,0.3-1.3,1-1.3h0.7c0.6,0,0.9-0.2,0.9-1.2c0-2.1,0.8-3,1.8-3.5c2.9-1.5,4.5-3.6,4.5-6.4c0-1,0-3.2,0-4.5 | |||||
| C-108.7,369.5-111.6,367.9-112.4,367.4z"/> | |||||
| <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-214.9444" y1="2190.8406" x2="-206.3191" y2="2233.0925" gradientTransform="matrix(1 0 0 1 86 -1815.5)"> | |||||
| <stop offset="0" style="stop-color:#F1F9FE"/> | |||||
| <stop offset="0.4254" style="stop-color:#E9F5FD"/> | |||||
| <stop offset="1" style="stop-color:#E4F3FD"/> | |||||
| </linearGradient> | |||||
| <path fill="url(#SVGID_5_)" d="M-122.3,362.5c-2.1,0-4,1.4-4.8,1.9c-0.8,0.5-4,2.5-5.1,3.1c-0.8,0.5-3.7,2-3.7,6.3 | |||||
| c0,1.3,0,3.6,0,4.5c0,2.8,1.6,5,4.5,6.4c1,0.5,1.8,1.3,1.8,3.5c0,0.9,0.4,1.2,0.9,1.2h0.7c0.6,0,1,0.2,1,1.3c0,0.6,0,2.1,0,2.1 | |||||
| v37.2l2.7,2.8h1.2l0.9-0.9L-122.3,362.5L-122.3,362.5z"/> | |||||
| <path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M-122.6,362.5c1.9,0.9,3.4,2,4.2,2.4 | |||||
| c0.8,0.5,4,2.5,5.1,3.1c0.8,0.5,3.7,2,3.7,6.3c0,1.3,0,2.8,0,3.8c0,2.8-1.6,5-4.5,6.4c-1,0.5-1.8,1.4-1.8,3.6v1.2"/> | |||||
| <path fill="none" stroke="#034672" stroke-width="2" stroke-miterlimit="10" d="M-112.4,367.4c-1.1-0.6-4.3-2.6-5.1-3.1 | |||||
| c-0.8-0.5-2.7-1.9-4.8-1.9s-4,1.4-4.8,1.9c-0.8,0.5-4,2.5-5.1,3.1c-0.8,0.5-3.7,2-3.7,6.3c0,1.3,0,3.6,0,4.5c0,2.8,1.6,5,4.5,6.4 | |||||
| c1,0.5,1.8,1.3,1.8,3.5c0,0.9,0.4,1.2,0.9,1.2h0.7c0.6,0,1,0.2,1,1.3c0,0.6,0,2.1,0,2.1v37.2l2.7,2.8h1.2l5.7-5.8v-34.2 | |||||
| c0,0,0-1.5,0-2.1c0-1,0.3-1.3,1-1.3h0.7c0.6,0,0.9-0.2,0.9-1.2c0-2.1,0.8-3,1.8-3.5c2.9-1.5,4.5-3.6,4.5-6.4c0-1,0-3.2,0-4.5 | |||||
| C-108.7,369.5-111.6,367.9-112.4,367.4z"/> | |||||
| <path fill="#E9F6FE" stroke="#034672" stroke-width="2" stroke-miterlimit="10" d="M-107.5,392.7"/> | |||||
| <g> | |||||
| <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-106.4885" y1="2203.667" x2="-106.4885" y2="2254.552" gradientTransform="matrix(1 0 0 1 86 -1815.5)"> | |||||
| <stop offset="0" style="stop-color:#FFFFFE"/> | |||||
| <stop offset="0.4815" style="stop-color:#F2F1F1"/> | |||||
| <stop offset="1" style="stop-color:#E9E7E8"/> | |||||
| </linearGradient> | |||||
| <path fill="url(#SVGID_6_)" d="M-14.5,407.6h-11.6c0.3,2.3,1,3.9,2.1,4.7s2.9,1.2,5.5,1.2c3.4,0,7.4-0.2,12-0.7l0.9,6 | |||||
| c-3.3,1.6-8,2.4-14,2.4c-6,0-10.3-1.3-12.9-3.9c-2.6-2.6-3.8-6.9-3.8-12.9c0-6.3,1.2-10.7,3.7-13.2c2.5-2.5,6.7-3.8,12.6-3.8 | |||||
| c5.3,0,9.2,0.9,11.6,2.8c2.4,1.8,3.6,4.7,3.6,8.4c0,3-0.8,5.2-2.3,6.7C-8.5,406.8-11,407.6-14.5,407.6z M-26.3,401.8h9.1 | |||||
| c1.2,0,2-0.3,2.4-0.8c0.4-0.6,0.6-1.4,0.6-2.5c0-1.5-0.4-2.6-1.2-3.2c-0.8-0.6-2.2-0.9-4.3-0.9c-2.5,0-4.2,0.5-5.1,1.5 | |||||
| C-25.6,396.9-26.1,398.8-26.3,401.8z"/> | |||||
| <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="-72.864" y1="2203.667" x2="-72.864" y2="2254.5503" gradientTransform="matrix(1 0 0 1 86 -1815.5)"> | |||||
| <stop offset="0" style="stop-color:#FFFFFE"/> | |||||
| <stop offset="0.4815" style="stop-color:#F2F1F1"/> | |||||
| <stop offset="1" style="stop-color:#E9E7E8"/> | |||||
| </linearGradient> | |||||
| <path fill="url(#SVGID_7_)" d="M31,388.3l-11.4,32.6c-0.6,1.7-1.4,3.3-2.2,4.8c-0.9,1.5-2,2.9-3.4,4.3c-1.4,1.4-3.1,2.4-5.2,3 | |||||
| c-2.1,0.7-4.4,0.8-6.9,0.5L1,427.8c2.6-0.7,4.6-1.6,6.1-2.7c1.5-1.1,2.6-2.6,3.5-4.5l0.1-0.3H8.9c-1.6,0-2.6-0.8-3.1-2.3 | |||||
| l-10.5-29.8H5.6l6,20.8c0.4,1.5,0.7,3.1,1,4.8h0.8c0.1-0.5,0.3-1.3,0.7-2.4s0.5-1.9,0.7-2.4l5.9-20.8L31,388.3L31,388.3z"/> | |||||
| <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="-41.775" y1="2203.667" x2="-41.775" y2="2254.552" gradientTransform="matrix(1 0 0 1 86 -1815.5)"> | |||||
| <stop offset="0" style="stop-color:#FFFFFE"/> | |||||
| <stop offset="0.4815" style="stop-color:#F2F1F1"/> | |||||
| <stop offset="1" style="stop-color:#E9E7E8"/> | |||||
| </linearGradient> | |||||
| <path fill="url(#SVGID_8_)" d="M57.6,412.8l0.9,6.3c-3.3,1.4-7.5,2.1-12.4,2.1c-5.9,0-10.1-1.3-12.5-3.8 | |||||
| c-2.4-2.5-3.6-6.9-3.6-13.1c0-6.2,1.2-10.6,3.6-13.1c2.4-2.5,6.6-3.8,12.6-3.8c4.9,0,8.8,0.7,11.9,2l-1,6 | |||||
| c-4.7-0.1-7.8-0.1-9.2-0.1c-3,0-5,0.6-6.1,1.9c-1.1,1.3-1.7,3.6-1.7,7.2c0,3.5,0.6,5.9,1.7,7.2c1.1,1.3,3.1,1.9,6.1,1.9 | |||||
| C51.6,413.4,54.9,413.2,57.6,412.8z"/> | |||||
| <linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="8.9715" y1="2203.667" x2="8.9715" y2="2254.553" gradientTransform="matrix(1 0 0 1 86 -1815.5)"> | |||||
| <stop offset="0" style="stop-color:#FFFFFE"/> | |||||
| <stop offset="0.4815" style="stop-color:#F2F1F1"/> | |||||
| <stop offset="1" style="stop-color:#E9E7E8"/> | |||||
| </linearGradient> | |||||
| <path fill="url(#SVGID_9_)" d="M95,387.4c6,0,10.2,1.3,12.7,3.9c2.5,2.6,3.7,7,3.7,13.1c0,6.2-1.2,10.5-3.7,13.1 | |||||
| c-2.5,2.5-6.7,3.8-12.7,3.8c-6,0-10.3-1.3-12.8-3.8c-2.5-2.5-3.7-6.9-3.7-13.1c0-6.2,1.2-10.6,3.7-13.2 | |||||
| C84.7,388.7,89,387.4,95,387.4z M95,394.6c-2.6,0-4.3,0.6-5.1,2c-0.9,1.3-1.3,3.9-1.3,7.8c0,3.8,0.4,6.4,1.3,7.7 | |||||
| c0.9,1.3,2.6,2,5.1,2c2.5,0,4.2-0.7,5.1-2c0.9-1.3,1.3-3.9,1.3-7.7c0-3.9-0.4-6.5-1.3-7.8C99.2,395.3,97.5,394.6,95,394.6z"/> | |||||
| <linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="42.879" y1="2203.667" x2="42.879" y2="2254.552" gradientTransform="matrix(1 0 0 1 86 -1815.5)"> | |||||
| <stop offset="0" style="stop-color:#FFFFFE"/> | |||||
| <stop offset="0.4815" style="stop-color:#F2F1F1"/> | |||||
| <stop offset="1" style="stop-color:#E9E7E8"/> | |||||
| </linearGradient> | |||||
| <path fill="url(#SVGID_10_)" d="M115.9,395.5l-0.9-6.5c5.8-1,11.4-1.6,16.7-1.6c4.3,0,7.5,0.9,9.6,2.6c2,1.8,3.1,4.8,3.1,9.2v21.2 | |||||
| h-7.6l-1-4.9c-3.2,3.8-7.2,5.7-11.9,5.7c-3.1,0-5.6-0.8-7.6-2.4s-2.9-3.9-2.9-6.8v-3.3c0-2.6,0.9-4.6,2.6-6 | |||||
| c1.7-1.4,4.1-2.1,7.2-2.1h11.5v-1.4c0-1.6-0.4-2.8-1.1-3.3c-0.7-0.6-2.1-0.8-4.1-0.8C125.9,394.9,121.4,395.1,115.9,395.5z | |||||
| M122.9,409.4v1.2c0,2.2,1.3,3.3,3.8,3.3c2.6,0,5.3-1,8-3.1v-4.5H126C124,406.4,122.9,407.4,122.9,409.4z"/> | |||||
| <linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="-136.063" y1="2203.667" x2="-136.063" y2="2254.5491" gradientTransform="matrix(1 0 0 1 86 -1815.5)"> | |||||
| <stop offset="0" style="stop-color:#FFFFFE"/> | |||||
| <stop offset="0.4815" style="stop-color:#F2F1F1"/> | |||||
| <stop offset="1" style="stop-color:#E9E7E8"/> | |||||
| </linearGradient> | |||||
| <path fill="url(#SVGID_11_)" d="M-43.5,406.1c-0.9-1.6-1.9-2.7-3-3.5v-0.1c1.3-0.9,2.3-1.9,3-3.1l8.3-11.1H-46l-7.9,11.2h-3 | |||||
| c0.3-1.8,0.5-3.7,0.5-5.9v-18.8h-3l-6.7,9.5v36.1h9.6v-10.1c0-1.3-0.2-2.9-0.5-4.8h3.1l9,14.9H-34L-43.5,406.1z"/> | |||||
| <linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="-16.68" y1="2203.667" x2="-16.68" y2="2254.551" gradientTransform="matrix(1 0 0 1 86 -1815.5)"> | |||||
| <stop offset="0" style="stop-color:#FFFFFE"/> | |||||
| <stop offset="0.4815" style="stop-color:#F2F1F1"/> | |||||
| <stop offset="1" style="stop-color:#E9E7E8"/> | |||||
| </linearGradient> | |||||
| <path fill="url(#SVGID_12_)" d="M76.7,413.2h-2.6c-2.4,0-3.6-1.1-3.6-3.3v-35.1h-3l-6.6,9.4v28.2c0,2.8,0.8,5,2.5,6.5 | |||||
| c1.6,1.5,3.9,2.3,6.8,2.3c3.5,0,6-0.4,7.7-1.3L76.7,413.2z"/> | |||||
| <linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="78.107" y1="2203.667" x2="78.107" y2="2254.5491" gradientTransform="matrix(1 0 0 1 86 -1815.5)"> | |||||
| <stop offset="0" style="stop-color:#FFFFFE"/> | |||||
| <stop offset="0.4815" style="stop-color:#F2F1F1"/> | |||||
| <stop offset="1" style="stop-color:#E9E7E8"/> | |||||
| </linearGradient> | |||||
| <path fill="url(#SVGID_13_)" d="M170.7,406.1c-0.9-1.6-1.9-2.7-3-3.5v-0.1c1.3-0.9,2.3-1.9,3-3.1l8.3-11.1h-10.8l-7.9,11.2h-3 | |||||
| c0.3-1.8,0.5-3.7,0.5-5.9v-18.8h-3l-6.7,9.5v36.1h9.6v-10.1c0-1.3-0.2-2.9-0.5-4.8h3.1l9,14.9h10.8L170.7,406.1z"/> | |||||
| </g> | |||||
| <linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="-208.281" y1="2186.001" x2="-208.281" y2="2196.1689" gradientTransform="matrix(1 0 0 1 86 -1815.5)"> | |||||
| <stop offset="0" style="stop-color:#00639A"/> | |||||
| <stop offset="0.2355" style="stop-color:#00578A"/> | |||||
| <stop offset="0.507" style="stop-color:#004D7B"/> | |||||
| <stop offset="0.7167" style="stop-color:#004773"/> | |||||
| <stop offset="1" style="stop-color:#00446E"/> | |||||
| </linearGradient> | |||||
| <polygon fill="url(#SVGID_14_)" points="-122.3,372.4 -131.3,370.4 -132.3,374.1 -122.3,379.2 -112.2,374.1 -113.2,370.4 "/> | |||||
| <polyline opacity="0.2" enable-background="new " points="-122.3,379.2 -112.2,374.1 -113.2,370.4 -122.3,372.4 "/> | |||||
| <path fill="#034672" d="M-127.2,391.9c3.4,1.3,6.7,1.5,9.8,0.4l-0.3-2.2c-2.6,0.8-6.3,0.7-9.5,0.1L-127.2,391.9z"/> | |||||
| <path fill="#034672" d="M-122.6,391.5c-0.4,2.8,1.9,4.7,1.9,7.6C-116.8,394.8-121.7,393.3-122.6,391.5z"/> | |||||
| <path fill="#034672" d="M-122.6,391.7c-0.1,3.2-0.4,5.6-1.7,7.2C-126.8,394.2-123.7,392.6-122.6,391.7z"/> | |||||
| <circle fill="#034672" cx="-122.6" cy="391.7" r="1.6"/> | |||||
| <linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="-197.511" y1="2237.772" x2="-197.511" y2="2237.772" gradientTransform="matrix(1 0 0 1 86 -1815.5)"> | |||||
| <stop offset="0" style="stop-color:#F6F6F6"/> | |||||
| <stop offset="0.5386" style="stop-color:#E4E4E4"/> | |||||
| <stop offset="1" style="stop-color:#DADADA"/> | |||||
| </linearGradient> | |||||
| <path fill="url(#SVGID_15_)" d="M-111.5,422.3"/> | |||||
| </g> | |||||
| </svg> | |||||
BIN
juice/admin/resources/img/select-arrow.png
View File
| Before | After |
|---|---|
|
|
| Width: 24 | Height: 24 | Size: 1.1 KiB |
+ 5
- 0
juice/admin/theme.properties
View File
| @ -0,0 +1,5 @@ | |||||
| parent=base | |||||
| import=common/keycloak | |||||
| styles=css/styles.css css/mytheme.css | |||||
| stylesCommon=node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css node_modules/select2/select2.css lib/angular/treeview/css/angular.treeview.css node_modules/text-security/text-security.css css/mytheme.css | |||||
+ 1
- 0
juice/email/theme.properties
View File
| @ -0,0 +1 @@ | |||||
| parent=base | |||||
+ 13
- 0
juice/login/error.ftl
View File
| @ -0,0 +1,13 @@ | |||||
| <#import "template.ftl" as layout> | |||||
| <@layout.registrationLayout displayMessage=false; section> | |||||
| <#if section = "header"> | |||||
| <div class="header-login-welcome">${msg("error")}</div> | |||||
| <div class="header-login-title error-welcome">${msg("errorTitle")}</div> | |||||
| <div class="error-image"></div> | |||||
| <#elseif section = "form"> | |||||
| <div id="kc-error-message"> | |||||
| <p class="instruction">${message.summary?no_esc}</p> | |||||
| </div> | |||||
| </#if> | |||||
| </@layout.registrationLayout> | |||||
| <div class="juice-footer"> © 2020-2021, <span>Juice World</span> </div> | |||||
+ 13
- 0
juice/login/login-page-expired.ftl
View File
| @ -0,0 +1,13 @@ | |||||
| <#import "template.ftl" as layout> | |||||
| <@layout.registrationLayout; section> | |||||
| <#if section = "header"> | |||||
| <div class="header-login-welcome">${msg("error")}</div> | |||||
| <div class="header-login-title error-welcome expired-title">${msg("pageExpiredTitle")}</div> | |||||
| <div class="expired-image"></div> | |||||
| <#elseif section = "form"> | |||||
| <p id="instruction1" class="instruction"> | |||||
| ${msg("pageExpiredMsg1")} | |||||
| </p> | |||||
| <a id="loginRestartLink" class="${properties.kcButtonClass!} ${properties.kcButtonBlockClass!} expired-button" href="${url.loginRestartFlowUrl}">${msg("pageExpiredButton")}</a> | |||||
| </#if> | |||||
| </@layout.registrationLayout> | |||||
+ 61
- 0
juice/login/login-reset-password.ftl
View File
| @ -0,0 +1,61 @@ | |||||
| <#import "template.ftl" as layout> | |||||
| <@layout.registrationLayout displayInfo=true displayMessage=!messagesPerField.existsError('username'); section> | |||||
| <#if section = "header"> | |||||
| <div class="header-login-welcome">${msg("passwordRecovery")}</div> | |||||
| <div class="header-login-title"> | |||||
| ${msg("emailForgotTitle")} | |||||
| <br /> | |||||
| ${msg("emailForgotTitle1")} | |||||
| </div> | |||||
| <#elseif section = "form"> | |||||
| <form id="kc-reset-password-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post"> | |||||
| <div class="${properties.kcFormGroupClass!}"> | |||||
| <div class="email-instruction"> | |||||
| ${msg("emailInstruction")} | |||||
| <br /> | |||||
| ${msg("emailInstruction1")} | |||||
| </div> | |||||
| <div class="${properties.kcFormGroupClass!}"> | |||||
| <#if auth?has_content && auth.showUsername()> | |||||
| <input type="text" id="username" name="username" class="${properties.kcInputClass!}" autocomplete="off" autofocus value="${auth.attemptedUsername}"aria-invalid="<#if messagesPerField.existsError('username')>true</#if>"/> | |||||
| <label class="login-form-input-label">${msg("email")}</label> | |||||
| <#else> | |||||
| <input type="text" id="username" name="username" class="${properties.kcInputClass!}" autocomplete="off" autofocus placeholder=${msg("email")} aria-invalid="<#if messagesPerField.existsError('username')>true</#if>"/> | |||||
| <label class="login-form-input-label">${msg("email")}</label> | |||||
| </#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 id="kc-form-buttons" > | |||||
| <input class="${properties.kcButtonClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}"/> | |||||
| </div> | |||||
| <div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}"> | |||||
| <div id="kc-form-options"> | |||||
| <#if client?? && client.baseUrl?has_content> | |||||
| <span><a href="${client.baseUrl}">${kcSanitize(msg("backToLogin"))?no_esc}</a></span> | |||||
| </#if> | |||||
| </div> | |||||
| <div class="${properties.kcFormOptionsWrapperClass!}"> | |||||
| <div id="kc-registration"> | |||||
| <span>${msg("haveAccount")} <a tabindex="6" | |||||
| href="${url.loginUrl}">${msg("signInHere")}</a></span> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </form> | |||||
| <#elseif section = "info" > | |||||
| </#if> | |||||
| </@layout.registrationLayout> | |||||
| <div class="juice-footer"> © 2020-2021, <span>Juice World</span> </div> | |||||
+ 14
- 0
juice/login/login-verify-email.ftl
View File
| @ -0,0 +1,14 @@ | |||||
| <#import "template.ftl" as layout> | |||||
| <@layout.registrationLayout displayInfo=true; section> | |||||
| <#if section = "header"> | |||||
| <div class="header-login-welcome">${msg("emailVerifyTitle")}</div> | |||||
| <div class="header-login-title">${msg("emailVerifyTitle")}</div> | |||||
| <div class="verify-image"></div> | |||||
| <#elseif section = "form"> | |||||
| <p class="instruction">${msg("emailVerifyInstruction1")}</p> | |||||
| <#elseif section = "info"> | |||||
| <div class="verify-email-question">${msg("emailVerifyInstruction2")}</div> | |||||
| <a class="verify-email-link" href="${url.loginAction}"> ${msg("emailVerifyInstruction3")}</a> | |||||
| </#if> | |||||
| </@layout.registrationLayout> | |||||
| <div class="juice-footer"> © 2020-2021, <span>Juice World</span> </div> | |||||
+ 122
- 0
juice/login/login.ftl
View File
| @ -0,0 +1,122 @@ | |||||
| <#import "template.ftl" as layout> | |||||
| <@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','password') displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; 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("loginAccountTitle")}</div> | |||||
| <#elseif section = "form"> | |||||
| <div id="kc-form"> | |||||
| <div id="kc-form-wrapper"> | |||||
| <#if realm.password> | |||||
| <form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post"> | |||||
| <div class="${properties.kcFormGroupClass!}"> | |||||
| <#if usernameEditDisabled??> | |||||
| <input tabindex="1" id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')}" placeholder=${msg("usernameOrEmail")} type="text" disabled /> | |||||
| <#else> | |||||
| <input tabindex="1" id="username" class="${properties.kcInputClass!}" name="username" value="${(login.username!'')}" placeholder=${msg("usernameOrEmail")} type="text" autofocus autocomplete="off" | |||||
| aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>" | |||||
| /> | |||||
| <#if messagesPerField.existsError('username','password')> | |||||
| <div id="input-error" class="${properties.kcInputErrorMessageClass!}" aria-live="polite"> | |||||
| ${kcSanitize(messagesPerField.getFirstError('username','password'))?no_esc} | |||||
| </div> | |||||
| </#if> | |||||
| <label class="login-form-input-label">${msg("usernameOrEmail")}</label> | |||||
| </#if> | |||||
| </div> | |||||
| <div class="${properties.kcFormGroupClass!}"> | |||||
| <input tabindex="2" id="password" class="${properties.kcInputClass!}" name="password" type="password" placeholder=${msg("password")} autocomplete="off" | |||||
| aria-invalid="<#if messagesPerField.existsError('username','password')>true</#if>" | |||||
| /> | |||||
| <label class="login-form-input-label">${msg("password")}</label> | |||||
| </div> | |||||
| <div id="kc-form-buttons" class="${properties.kcFormGroupClass!}"> | |||||
| <input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/> | |||||
| <input tabindex="4" class="${properties.kcButtonClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/> | |||||
| </div> | |||||
| <#if realm.password && social.providers??> | |||||
| <div id="kc-social-providers" class="${properties.kcFormSocialAccountSectionClass!}"> | |||||
| <div class="separate-container"> | |||||
| <div class="separator"></div> | |||||
| <div class="separate-text">${msg("identity-provider-login-label")} </div> | |||||
| <div class="separator"></div> | |||||
| </div> | |||||
| <ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountListGridClass!}</#if>"> | |||||
| <#list social.providers as p> | |||||
| <a id="social-${p.alias}" class="${properties.kcButtonClass!} <#if social.providers?size gt 3>${properties.kcFormSocialAccountGridItem!}</#if> social-button" | |||||
| type="button" href="${p.loginUrl}"> | |||||
| <#if p.displayName=="Facebook" > | |||||
| <div class="login-sign-image facebook"></div> | |||||
| <#elseif p.displayName=="Twitter" > | |||||
| <div class="login-sign-image twitter"></div> | |||||
| <#elseif p.displayName=="Google" > | |||||
| <div class="login-sign-image google"></div> | |||||
| <#elseif p.displayName=="LinkedIn" > | |||||
| <div class="login-sign-image linkedin"></div> | |||||
| <#elseif p.displayName=="Apple" > | |||||
| <div class="login-sign-image apple"></div> | |||||
| <#elseif p.iconClasses?has_content> | |||||
| <i class="${properties.kcCommonLogoIdP!} ${p.iconClasses!}" aria-hidden="true"></i> | |||||
| <#else> | |||||
| <span class="${properties.kcFormSocialAccountNameClass!}">${p.displayName!}</span> | |||||
| </#if> | |||||
| </a> | |||||
| </#list> | |||||
| </ul> | |||||
| </div> | |||||
| </#if> | |||||
| <div class="signup-terms login-signup-terms">${msg("signinTerms")}</div> | |||||
| <div> | |||||
| <div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}"> | |||||
| <div id="kc-form-options"> | |||||
| <#if realm.resetPasswordAllowed> | |||||
| <span><a tabindex="5" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span> | |||||
| </#if> | |||||
| </div> | |||||
| <#if realm.password && realm.registrationAllowed && !registrationDisabled??> | |||||
| <div id="kc-registration-container"> | |||||
| <div id="kc-registration"> | |||||
| <span>${msg("noAccount")} <a tabindex="6" | |||||
| href="${url.registrationUrl}">${msg("signUpHere")}</a></span> | |||||
| </div> | |||||
| </div> | |||||
| </#if> | |||||
| </div> | |||||
| </form> | |||||
| </#if> | |||||
| </div> | |||||
| </div> | |||||
| </#if> | |||||
| </@layout.registrationLayout> | |||||
| <div class="juice-footer"> © 2020-2021, <span>Juice World</span> </div> | |||||
+ 35
- 0
juice/login/messages/messages_de.properties
View File
| @ -0,0 +1,35 @@ | |||||
| welcome=Willkommen! | |||||
| error=Fehler | |||||
| signinTerms=Mit der Registrierung erkl\u00E4ren Sie sich mit den Nutzungsbedingungen und der Datenschutzerkl\u00E4rung von Juice einverstanden. | |||||
| signupTerms=Mit der Registrierung erkl\u00E4ren Sie sich mit den Nutzungsbedingungen und der Datenschutzerkl\u00E4rung von Juice einverstanden. | |||||
| signInHere=Hier anmelden | |||||
| signUpHere=Mit Email registrieren | |||||
| passwordRecovery=Passwort wiederherstellen | |||||
| loginAccountTitle=Anmelden | |||||
| doRegister=Registrieren | |||||
| doForgotPassword=Passwort vergessen? | |||||
| noAccount=Haben Sie ein Konto? | |||||
| emailForgotTitle=Ihr Passwort | |||||
| emailForgotTitle1=zur\u00FCcksetzen | |||||
| emailInstruction=Bitte geben Sie Ihre E-Mail Adresse ein | |||||
| emailInstruction1=Wir senden Ihnen dann eine E-Mail, um Ihr Passwort zur\u00FCckzusetzen. | |||||
| doSubmit=E-Mail senden | |||||
| backToLogin=Zur\u00FCck | |||||
| haveAccount=Haben Sie ein Konto? | |||||
| registerTitle=Welcome to the | |||||
| registerTitle1=JUICE WORLD | |||||
| emailVerifyTitle=Verifizieren Sie Ihre E-Mail | |||||
| emailVerifyInstruction1=Sie m\u00FCssen Ihre E-Mail-Adresse verifizieren, um Ihr Konto zu aktivieren. Eine E-Mail mit Anweisungen zur Verifizierung Ihrer E-Mail-Adresse wurde an Sie gesendet | |||||
| emailVerifyInstruction3=Senden Sie die E-Mail erneut | |||||
| identity-provider-login-label=Oder registrieren/anmelden mit | |||||
| pageExpiredTitle=Ihre Sitzung ist abgelaufen | |||||
| pageExpiredMsg1=Keine Sorge, melden Sie sich einfach erneut an | |||||
| pageExpiredButton=Gehen Sie zu Anmelden | |||||
+ 33
- 0
juice/login/messages/messages_en.properties
View File
| @ -0,0 +1,33 @@ | |||||
| welcome=Welcome! | |||||
| error=Error | |||||
| signinTerms=By signing up, you agree to Juice''s ToS and Privacy | |||||
| signupTerms=By signing up, you agree to Juice''s Terms of Use | |||||
| signInHere=Sign in here | |||||
| signUpHere=Sign up with the email | |||||
| passwordRecovery=Password recovery | |||||
| loginAccountTitle=Sign in | |||||
| doRegister=Sign up | |||||
| doForgotPassword=Forgot password? | |||||
| noAccount=Not a member? | |||||
| emailForgotTitle=Reset | |||||
| emailForgotTitle1=your password | |||||
| emailInstruction=Please enter your email address. | |||||
| emailInstruction1=We will send you an email to reset your password. | |||||
| doSubmit=Send email | |||||
| backToLogin=Go back | |||||
| haveAccount=Have an account? | |||||
| registerTitle=Welcome to the | |||||
| registerTitle1=JUICE WORLD | |||||
| emailVerifyTitle=Verify your email | |||||
| emailVerifyInstruction1=You need to verify your email address to activate your account. An email with instructions to verify your email address has been sent to you | |||||
| emailVerifyInstruction3=Re-send the email | |||||
| pageExpiredTitle=Your session has expired | |||||
| pageExpiredMsg1=No worry, simply sign in again | |||||
| pageExpiredButton=Go to Sign In | |||||
+ 139
- 0
juice/login/register.ftl
View File
| @ -0,0 +1,139 @@ | |||||
| <#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> | |||||
| <div class="signup-terms">${msg("signupTerms")}</div> | |||||
| </div> | |||||
| <div> | |||||
| <div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}"> | |||||
| <div id="kc-form-options" class="signup-password"> | |||||
| <#if realm.resetPasswordAllowed> | |||||
| <span><a tabindex="5" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span> | |||||
| </#if> | |||||
| </div> | |||||
| <#if realm.password && realm.registrationAllowed && !registrationDisabled??> | |||||
| <div id="kc-registration-container"> | |||||
| <div id="kc-registration"> | |||||
| <span>${msg("haveAccount")} <a tabindex="6" | |||||
| href="${url.loginUrl}">${msg("signInHere")}</a></span> | |||||
| </div> | |||||
| </div> | |||||
| </#if> | |||||
| </div> | |||||
| </div> | |||||
| </form> | |||||
| </#if> | |||||
| </@layout.registrationLayout> | |||||
| <div class="juice-footer"> © 2020-2021, <span>Juice World</span> </div> | |||||
+ 758
- 0
juice/login/resources/css/styles.css
View File
| @ -0,0 +1,758 @@ | |||||
| @font-face { | |||||
| font-family: "Swis721 Th Bt"; | |||||
| src: local("Swiss721ThinBT.ttf"), url("../fonts/Swiss721ThinBT.ttf") format("truetype"); | |||||
| font-weight: 300; | |||||
| } | |||||
| @font-face { | |||||
| font-family: "Swis721 Md BT"; | |||||
| src: local("Swiss721MediumBT.ttf"), url("../fonts/Swiss721MediumBT.ttf") format("truetype"); | |||||
| font-weight: 500; | |||||
| } | |||||
| @font-face { | |||||
| font-family: "Roboto"; | |||||
| src: local("Roboto-Medium.ttf"), url("../fonts/Roboto-Medium.ttf") format("truetype"); | |||||
| font-weight: 300; | |||||
| } | |||||
| .login-pf { | |||||
| height: 100%; | |||||
| background: none; | |||||
| } | |||||
| .login-pf body { | |||||
| background: url(../img/juice-bc.svg); | |||||
| background-repeat: no-repeat; | |||||
| background-color: #202020; | |||||
| height: 100%; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| } | |||||
| .login-pf body::before { | |||||
| position: absolute; | |||||
| width: 56px; | |||||
| height: 56px; | |||||
| content: ""; | |||||
| top: 56px; | |||||
| left: 63px; | |||||
| background: url(../img/juice.svg); | |||||
| background-repeat: no-repeat; | |||||
| } | |||||
| .login-pf-page { | |||||
| padding-top: 0px; | |||||
| } | |||||
| .h1, .h2, .h3, h1, h2, h3 { | |||||
| margin-top: 0px; | |||||
| margin-bottom: 0px; | |||||
| } | |||||
| #kc-header-wrapper { | |||||
| padding: 0px 10px; | |||||
| } | |||||
| .card-login { | |||||
| margin: 0 auto; | |||||
| box-shadow: -8px -8px 32px rgba(101, 101, 101, 0.12), -2px -2px 16px rgba(101, 101, 101, 0.24), 4px 4px 16px rgba(0, 0, 0, 0.3), 8px 8px 32px rgba(0, 0, 0, 0.1); | |||||
| padding: 56px; | |||||
| min-width: 440px; | |||||
| max-width: 440px; | |||||
| border-radius: 16px; | |||||
| background-color: #212121; | |||||
| } | |||||
| .login-pf-page-header { | |||||
| background: url(../img/juice.svg); | |||||
| background-position-x: 63px; | |||||
| background-position-y: 56px; | |||||
| background-repeat: no-repeat; | |||||
| } | |||||
| .header-login-welcome { | |||||
| font-family: "Swis721 Th Bt"; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 14px; | |||||
| line-height: 20px; | |||||
| color: #98989E; | |||||
| } | |||||
| .header-login-title { | |||||
| padding-top: 4px; | |||||
| font-family: "Swis721 Th Bt"; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 38px; | |||||
| line-height: 48px; | |||||
| letter-spacing: -0.75px; | |||||
| background: linear-gradient(180deg, #FF9900 0%, #FF7100 100%); | |||||
| -webkit-background-clip: text; | |||||
| -webkit-text-fill-color: transparent; | |||||
| } | |||||
| .error-welcome { | |||||
| background: #F52E2E; | |||||
| -webkit-background-clip: text; | |||||
| -webkit-text-fill-color: transparent; | |||||
| } | |||||
| .error-image { | |||||
| width: 96px; | |||||
| height: 96px; | |||||
| background: url(../img/error.svg); | |||||
| margin: 32px 0px 12px; | |||||
| } | |||||
| .verify-image { | |||||
| width: 96px; | |||||
| height: 96px; | |||||
| background: url(../img/verify-email.svg); | |||||
| margin: 32px 0px 12px; | |||||
| } | |||||
| .instruction { | |||||
| margin: 0px; | |||||
| font-family: "Swis721 Th BT"; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 19px; | |||||
| line-height: 28px; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| letter-spacing: -0.1px; | |||||
| color: #BDBFBF; | |||||
| } | |||||
| #kc-error-message .instruction { | |||||
| margin: 0px; | |||||
| font-family: "Swis721 Th BT"; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 19px; | |||||
| line-height: 28px; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| letter-spacing: -0.1px; | |||||
| color: #BDBFBF; | |||||
| } | |||||
| #kc-info { | |||||
| margin: 0px; | |||||
| } | |||||
| .verify-email-question { | |||||
| margin-top: 32px; | |||||
| margin-bottom: 8px; | |||||
| font-family: "Swis721 Md BT"; | |||||
| font-style: normal; | |||||
| font-weight: 500; | |||||
| font-size: 12px; | |||||
| line-height: 16px; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| color: #BDBFBF; | |||||
| } | |||||
| .login-pf-page .login-pf-signup a { | |||||
| margin-left: 0px; | |||||
| } | |||||
| .login-pf-page .login-pf-settings { | |||||
| flex-wrap: nowrap; | |||||
| } | |||||
| .verify-email-link { | |||||
| margin-left: 0px; | |||||
| font-family: "Swis721 Md BT"; | |||||
| font-style: normal; | |||||
| font-weight: 500; | |||||
| font-size: 12px; | |||||
| line-height: 16px; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| text-align: right; | |||||
| color: #FF7100; | |||||
| } | |||||
| a.verify-email-link:hover { | |||||
| color: #FF7100; | |||||
| } | |||||
| #kc-page-title{ | |||||
| text-align: left; | |||||
| } | |||||
| #kc-form-buttons { | |||||
| margin-top: 32px; | |||||
| margin-bottom: 32px; | |||||
| } | |||||
| .pf-c-button { | |||||
| height: 56px; | |||||
| background: #181818; | |||||
| box-shadow: -4px -4px 8px rgba(101, 101, 101, 0.08), -1px -1px 3px rgba(101, 101, 101, 0.12), 1px 1px 4px rgba(0, 0, 0, 0.3), 4px 4px 8px rgba(0, 0, 0, 0.4); | |||||
| border-radius: 4px; | |||||
| font-family: "Swis721 Md BT"; | |||||
| font-style: normal; | |||||
| font-weight: 500; | |||||
| font-size: 16px; | |||||
| line-height: 24px; | |||||
| text-align: center; | |||||
| color: #BDBFBF; | |||||
| text-transform: capitalize; | |||||
| } | |||||
| .pf-c-button:hover, | |||||
| .pf-c-button:focus { | |||||
| background: #292929; | |||||
| } | |||||
| .pf-c-button:disabled { | |||||
| background: #292929; | |||||
| opacity: 0.3; | |||||
| } | |||||
| .pf-c-form-control{ | |||||
| position: relative; | |||||
| min-height: 56px; | |||||
| border: 1px solid #333333; | |||||
| box-sizing: border-box; | |||||
| border-radius: 4px; | |||||
| background: #212121; | |||||
| font-family: "Swis721 Th BT"; | |||||
| padding-left: 16px; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 16px; | |||||
| line-height: 24px; | |||||
| color: #BDBFBF; | |||||
| } | |||||
| .form-group { | |||||
| position: relative; | |||||
| margin-bottom: 24px; | |||||
| } | |||||
| #input-error, | |||||
| #input-error-username, | |||||
| #input-error-email, | |||||
| #input-error-password, | |||||
| #input-error-password-confirm { | |||||
| margin-top: 8px; | |||||
| font-family: "Swis721 Th BT"; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 14px; | |||||
| line-height: 20px; | |||||
| color: #BDBFBF; | |||||
| } | |||||
| .pf-c-form-control:focus, .pf-c-form-control:hover{ | |||||
| outline: none; | |||||
| border: 1px solid rgba(255, 113, 0, 1); | |||||
| caret-color: rgba(255, 113, 0, 1); | |||||
| font-family: Swis721 Th BT; | |||||
| } | |||||
| .pf-c-form-control[aria-invalid="true"] { | |||||
| border: 1px solid rgba(245, 46, 46, 1); | |||||
| background: #212121; | |||||
| } | |||||
| .login-form-input-label { | |||||
| position: absolute; | |||||
| display: none; | |||||
| padding: 0px 4px; | |||||
| top: -10px; | |||||
| left: 12px; | |||||
| color:rgba(255, 113, 0, 1); | |||||
| z-index: 100; | |||||
| background-color: #212121; | |||||
| } | |||||
| .pf-c-form-control:focus ~ .login-form-input-label, | |||||
| .pf-c-form-control:hover ~ .login-form-input-label, | |||||
| .pf-c-form-control[aria-invalid="true"] ~ .login-form-input-label { | |||||
| display: block; | |||||
| } | |||||
| .pf-c-form-control[aria-invalid="true"] ~ .login-form-input-label { | |||||
| color: rgba(245, 46, 46, 1); | |||||
| } | |||||
| #kc-form-wrapper a { | |||||
| font-family: "Swis721 Md BT"; | |||||
| font-style: normal; | |||||
| font-weight: 500; | |||||
| font-size: 12px; | |||||
| line-height: 16px; | |||||
| color: rgba(189, 191, 191, 1); | |||||
| } | |||||
| #kc-registration { | |||||
| width: 200px; | |||||
| } | |||||
| #kc-registration span { | |||||
| font-family: "Swis721 Md BT"; | |||||
| font-style: normal; | |||||
| font-weight: 500; | |||||
| font-size: 12px; | |||||
| line-height: 16px; | |||||
| color: #414142; | |||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| justify-content: flex-end; | |||||
| } | |||||
| #kc-registration a { | |||||
| padding-left: 8px; | |||||
| font-family: "Swis721 Md BT"; | |||||
| font-style: normal; | |||||
| font-weight: 500; | |||||
| font-size: 12px; | |||||
| line-height: 16px; | |||||
| color: #FFFFFF; | |||||
| } | |||||
| #kc-registration a::after { | |||||
| content: " →"; | |||||
| } | |||||
| #kc-info-wrapper { | |||||
| padding: 0px; | |||||
| background-color: #212121; | |||||
| } | |||||
| .register-form { | |||||
| margin-bottom: 32px; | |||||
| } | |||||
| .juice-footer { | |||||
| position: absolute; | |||||
| right: 56px; | |||||
| bottom: 56px; | |||||
| font-family: "Swis721 Th BT"; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 12px; | |||||
| line-height: 16px; | |||||
| color: #BDBFBF; | |||||
| } | |||||
| .juice-footer span { | |||||
| font-family: "Swis721 Md BT"; | |||||
| font-style: normal; | |||||
| font-weight: 500; | |||||
| font-size: 14px; | |||||
| line-height: 20px; | |||||
| color: #BDBFBF; | |||||
| } | |||||
| /* password */ | |||||
| #kc-form-options { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| width: 145px; | |||||
| } | |||||
| #kc-form-options.signup-password { | |||||
| width: 140px; | |||||
| } | |||||
| #kc-form-options a { | |||||
| font-family: "Swis721 Md BT"; | |||||
| font-style: normal; | |||||
| font-weight: 500; | |||||
| font-size: 12px; | |||||
| line-height: 16px; | |||||
| color: #FFFFFF; | |||||
| } | |||||
| .email-instruction { | |||||
| padding-top: 12px; | |||||
| padding-bottom: 32px; | |||||
| font-family: "Swis721 Th BT"; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 19px; | |||||
| line-height: 28px; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| letter-spacing: -0.1px; | |||||
| color: #98989E; | |||||
| } | |||||
| /* sign-up */ | |||||
| .signup-terms { | |||||
| margin: 0 auto; | |||||
| width: 272px; | |||||
| font-family: "Swis721 Th BT"; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 12px; | |||||
| line-height: 16px; | |||||
| text-align: center; | |||||
| color: #98989E; | |||||
| } | |||||
| .login-signup-terms { | |||||
| margin: 32px auto; | |||||
| } | |||||
| .form-horizontal .form-group { | |||||
| margin-right: 0px; | |||||
| margin-left: 0px; | |||||
| } | |||||
| /* alert */ | |||||
| .pf-c-alert { | |||||
| position: absolute; | |||||
| bottom: 2.34%; | |||||
| width: 328px; | |||||
| min-height: 68px; | |||||
| background: rgba(0, 0, 0, 0.87); | |||||
| box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.2); | |||||
| border-radius: 4px; | |||||
| z-index: 100; | |||||
| } | |||||
| .pf-c-alert.pf-m-inline { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| border: none; | |||||
| margin-bottom: 0px; | |||||
| padding: 0px; | |||||
| } | |||||
| .pf-c-alert__title { | |||||
| width: 321px; | |||||
| min-height: 68px; | |||||
| padding-right: 8px; | |||||
| padding-left: 15px; | |||||
| font-family: "Swis721 Th BT"; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 14px; | |||||
| line-height: 20px; | |||||
| color: #FFFFFF; | |||||
| } | |||||
| .pf-c-alert.pf-m-inline::before { | |||||
| content: none; | |||||
| } | |||||
| .alert-button { | |||||
| width: 65,79px; | |||||
| height: 36px; | |||||
| margin-right: 9px; | |||||
| padding: 10px 9px 10px 30px; | |||||
| font-family: "Roboto"; | |||||
| font-style: normal; | |||||
| font-weight: 500; | |||||
| font-size: 14px; | |||||
| line-height: 16px; | |||||
| text-align: right; | |||||
| letter-spacing: 1.25px; | |||||
| text-transform: uppercase; | |||||
| border: none; | |||||
| outline: none; | |||||
| background: linear-gradient(180deg, #FF9900 0%, #FF7100 100%); | |||||
| -webkit-background-clip: text; | |||||
| -webkit-text-fill-color: transparent; | |||||
| } | |||||
| .welcome-container { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| position: relative; | |||||
| } | |||||
| #kc-current-locale-link { | |||||
| position: relative; | |||||
| font-family: "Swis721 Th BT"; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 14px; | |||||
| line-height: 20px; | |||||
| color: #BDBFBF; | |||||
| } | |||||
| #kc-locale-dropdown a { | |||||
| color: #BDBFBF; | |||||
| } | |||||
| #kc-current-locale-link::before { | |||||
| content: ''; | |||||
| position: absolute; | |||||
| background: url(../img/locale.svg); | |||||
| width: 16px; | |||||
| height: 16px; | |||||
| top: 2px; | |||||
| left: -17px; | |||||
| } | |||||
| #kc-current-locale-link::after { | |||||
| display: none; | |||||
| } | |||||
| #kc-locale ul { | |||||
| list-style: none; | |||||
| top: 20px; | |||||
| padding: 2px 0; | |||||
| width: 136px; | |||||
| background: rgba(23, 23, 23, 0.92); | |||||
| box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.32); | |||||
| border-radius: 8px; | |||||
| border: none; | |||||
| } | |||||
| .kc-dropdown-item { | |||||
| position: relative; | |||||
| height: 40px; | |||||
| padding-left: 30px; | |||||
| display: flex; | |||||
| justify-content: flex-start; | |||||
| align-items: center; | |||||
| } | |||||
| .kc-dropdown-item::before { | |||||
| position: absolute; | |||||
| width: 16px; | |||||
| height: 12px; | |||||
| content: ''; | |||||
| left: 16px; | |||||
| } | |||||
| .kc-dropdown-item.English::before { | |||||
| background: url(../img/english.svg); | |||||
| } | |||||
| .kc-dropdown-item.Deutsch::before { | |||||
| background: url(../img/deutsch.svg); | |||||
| } | |||||
| #kc-locale ul li a { | |||||
| font-family: "Swis721 Th BT"; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 14px; | |||||
| line-height: 20px; | |||||
| color: #BDBFBF !important; | |||||
| } | |||||
| #kc-locale .kc-dropdown-item.selected a { | |||||
| font-family: "Swis721 Md BT"; | |||||
| } | |||||
| #kc-locale ul li a:hover { | |||||
| background: rgba(23, 23, 23, 0.92); | |||||
| color: #FF7100 !important; | |||||
| } | |||||
| .kc-social-grid { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| flex-wrap: nowrap; | |||||
| grid-column-gap: 0px; | |||||
| } | |||||
| .social-button { | |||||
| margin: 0 11px; | |||||
| width: 48px !important; | |||||
| height: 48px; | |||||
| padding: 16px; | |||||
| background: #212121; | |||||
| border: none; | |||||
| border-radius: 8px; | |||||
| } | |||||
| .social-button:last-child { | |||||
| margin-right: 0; | |||||
| } | |||||
| .social-button:first-child { | |||||
| margin-left: 0; | |||||
| } | |||||
| .separate-container { | |||||
| margin: 32px 0px 32px; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| } | |||||
| .separate-text { | |||||
| margin: 0px 8px; | |||||
| font-family: Swis721 Th BT; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 16px; | |||||
| line-height: 24px; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| text-align: center; | |||||
| color: #98989E; | |||||
| } | |||||
| .separator { | |||||
| flex: auto; | |||||
| max-width: 109px; | |||||
| min-width: 10px; | |||||
| height: 1px; | |||||
| background-color: #333333; | |||||
| } | |||||
| .login-sign-image { | |||||
| background: url(../img/apple.svg); | |||||
| width: 16px; | |||||
| height: 16px; | |||||
| margin-right: 16px; | |||||
| } | |||||
| .login-sign-image.apple { | |||||
| background: url(../img/apple.svg); | |||||
| background-size: contain; | |||||
| background-repeat: no-repeat; | |||||
| } | |||||
| .login-sign-image.google { | |||||
| background: url(../img/google.svg); | |||||
| background-size: contain; | |||||
| background-repeat: no-repeat; | |||||
| } | |||||
| .login-sign-image.facebook { | |||||
| background: url(../img/facebook.svg); | |||||
| background-size: contain; | |||||
| background-repeat: no-repeat; | |||||
| } | |||||
| .login-sign-image.linkedin { | |||||
| background: url(../img/linkedin.svg); | |||||
| background-size: contain; | |||||
| background-repeat: no-repeat; | |||||
| } | |||||
| .login-sign-image.twitter { | |||||
| background: url(../img/twitter.svg); | |||||
| background-size: contain; | |||||
| background-repeat: no-repeat; | |||||
| } | |||||
| .kc-social-provider-logo { | |||||
| font-size: 17px; | |||||
| width: 13px; | |||||
| height: 13px; | |||||
| float: left; | |||||
| } | |||||
| .expired-image { | |||||
| width: 96px; | |||||
| height: 96px; | |||||
| background: url(../img/clock.svg); | |||||
| margin: 32px 0px 2px; | |||||
| } | |||||
| .expired-button { | |||||
| margin-top: 32px; | |||||
| text-align: center; | |||||
| padding-top: 16px; | |||||
| text-transform: none; | |||||
| } | |||||
| .expired-title { | |||||
| width: 215px; | |||||
| } | |||||
| .login-pf a:hover { | |||||
| text-decoration: none; | |||||
| color: #BDBFBF; | |||||
| } | |||||
| @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { | |||||
| .header-login-title { | |||||
| background: #202020; | |||||
| color: #FF7100; | |||||
| } | |||||
| .error-welcome { | |||||
| background: #202020; | |||||
| color: #F52E2E; | |||||
| } | |||||
| .alert-button { | |||||
| background: #202020; | |||||
| color: #FF7100; | |||||
| } | |||||
| } | |||||
| @media (max-height: 900px) and (max-width: 880px) { | |||||
| .login-pf body::before { | |||||
| display: none; | |||||
| } | |||||
| .juice-footer { | |||||
| display: none; | |||||
| } | |||||
| } | |||||
| @media (max-height: 680px) { | |||||
| .login-pf body { | |||||
| align-items: unset; | |||||
| } | |||||
| } | |||||
| @media (max-width: 767px) { | |||||
| #kc-locale { | |||||
| position: relative !important; | |||||
| width: inherit; | |||||
| top: 0px; | |||||
| right: 0px; | |||||
| text-align: none; | |||||
| } | |||||
| #kc-info-wrapper { | |||||
| border-top: none; | |||||
| } | |||||
| } | |||||
| @media (min-width: 768px) { | |||||
| .login-pf-page .login-pf-page-header { | |||||
| margin-bottom: 0px; | |||||
| } | |||||
| } | |||||
| @media (max-width: 440px) { | |||||
| .login-pf body::before { | |||||
| display: none; | |||||
| } | |||||
| .login-pf body { | |||||
| align-items: unset; | |||||
| } | |||||
| .login-pf-page .login-pf-header { | |||||
| margin-bottom: 32px; | |||||
| } | |||||
| #kc-header { | |||||
| display: none; | |||||
| } | |||||
| .card-login { | |||||
| min-width: 328px; | |||||
| max-width: 448px; | |||||
| padding: 16px 10px; | |||||
| box-shadow: none; | |||||
| } | |||||
| .juice-footer { | |||||
| display: none; | |||||
| } | |||||
| } | |||||
| @media (max-height: 440px) { | |||||
| .login-pf body::before { | |||||
| display: none; | |||||
| } | |||||
| .juice-footer { | |||||
| display: none; | |||||
| } | |||||
| } | |||||
| @media (max-width: 360px) { | |||||
| .card-login { | |||||
| width: 360px; | |||||
| padding: 16px 10px; | |||||
| box-shadow: none; | |||||
| } | |||||
| } | |||||
| @media (max-width: 359px) { | |||||
| .card-login { | |||||
| min-width: 248px; | |||||
| max-width: 304px; | |||||
| padding: 16px 10px; | |||||
| box-shadow: none; | |||||
| } | |||||
| #kc-registration { | |||||
| width: 155px; | |||||
| } | |||||
| .social-button { | |||||
| padding: 16px 12px; | |||||
| } | |||||
| } | |||||
| @media (max-width: 300px) { | |||||
| .card-login { | |||||
| min-width: 238px; | |||||
| max-width: 278px; | |||||
| padding: 16px 10px; | |||||
| box-shadow: none; | |||||
| } | |||||
| .social-button { | |||||
| padding: 16px 10px; | |||||
| } | |||||
| } | |||||
| @media (max-width: 279px) { | |||||
| .login-pf-page { | |||||
| overflow-y: auto; | |||||
| overflow-x: auto; | |||||
| } | |||||
| } | |||||
BIN
juice/login/resources/fonts/Roboto-Medium.ttf
View File
BIN
juice/login/resources/fonts/Swiss721MediumBT.ttf
View File
BIN
juice/login/resources/fonts/Swiss721ThinBT.ttf
View File
+ 3
- 0
juice/login/resources/img/apple.svg
View File
| @ -0,0 +1,3 @@ | |||||
| <svg width="16" height="16" viewBox="0 0 21 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <path d="M5.57834 23.5507C5.10516 23.2359 4.68579 22.8469 4.33634 22.3987C3.95196 21.9361 3.59581 21.4507 3.26984 20.9452C2.5049 19.8246 1.90502 18.5998 1.48859 17.3085C0.988344 15.8085 0.746094 14.3707 0.746094 12.9645C0.746094 11.394 1.08584 10.023 1.75034 8.87099C2.24293 7.97057 2.96715 7.21812 3.84809 6.69149C4.70182 6.16122 5.68277 5.87102 6.68759 5.85149C7.03934 5.85149 7.41809 5.90249 7.82009 5.99999C8.10884 6.08174 8.46059 6.21074 8.89034 6.37124C9.43709 6.58199 9.73784 6.71099 9.83984 6.74249C10.1601 6.85949 10.4293 6.91049 10.6408 6.91049C10.8013 6.91049 11.0278 6.85949 11.2851 6.78149C11.4298 6.73049 11.7028 6.64049 12.0936 6.47324C12.4806 6.33224 12.7851 6.21149 13.0273 6.12149C13.3986 6.01199 13.7578 5.91074 14.0781 5.85974C14.4578 5.79988 14.843 5.78403 15.2263 5.81249C15.8906 5.8559 16.5448 5.99665 17.1681 6.23024C18.1873 6.64049 19.0116 7.28099 19.6251 8.19149C19.3658 8.35131 19.1224 8.53565 18.8983 8.74199C18.4106 9.17442 17.9951 9.68208 17.6676 10.2457C17.2396 11.016 17.0177 11.8838 17.0233 12.765C17.0391 13.8472 17.3166 14.8005 17.8633 15.6247C18.2653 16.2356 18.7877 16.758 19.3986 17.16C19.7113 17.3707 19.9806 17.5155 20.2386 17.613C20.1178 17.988 19.9888 18.351 19.8366 18.711C19.4913 19.5183 19.0728 20.2923 18.5863 21.0232C18.1528 21.6525 17.8131 22.1212 17.5551 22.4332C17.1531 22.9095 16.7661 23.2732 16.3753 23.5267C15.9456 23.8117 15.4378 23.964 14.9218 23.964C14.5724 23.9774 14.223 23.9351 13.8868 23.8387C13.5981 23.7412 13.3123 23.6355 13.0311 23.5147C12.7387 23.3804 12.4372 23.2669 12.1288 23.175C11.3666 22.9792 10.5674 22.9779 9.80459 23.1712C9.49184 23.2612 9.19109 23.3662 8.89409 23.4952C8.47634 23.6707 8.19884 23.7885 8.03834 23.8387C7.71809 23.9325 7.38584 23.991 7.04984 24.0105C6.53009 24.0105 6.04559 23.862 5.56559 23.5612L5.57834 23.5507ZM12.4333 5.08949C11.7538 5.42924 11.1051 5.57399 10.4608 5.52674C10.3596 4.87799 10.4608 4.21424 10.7301 3.48749C10.9593 2.87179 11.298 2.30263 11.7298 1.80749C12.1858 1.28625 12.7392 0.859019 13.3588 0.549737C14.0188 0.209987 14.6481 0.0262371 15.2496 -0.000762939C15.3276 0.678737 15.2496 1.34699 14.9998 2.06924C14.7687 2.7077 14.4306 3.30218 14.0001 3.82724C13.5606 4.34918 13.0213 4.77808 12.4138 5.08874L12.4333 5.08949Z" fill="white"/> | |||||
| </svg> | |||||
+ 3
- 0
juice/login/resources/img/clock.svg
View File
| @ -0,0 +1,3 @@ | |||||
| <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <path d="M48 10.5C40.5832 10.5 33.333 12.6993 27.1661 16.8199C20.9993 20.9404 16.1928 26.7971 13.3545 33.6494C10.5162 40.5016 9.77362 48.0416 11.2206 55.3159C12.6675 62.5902 16.239 69.272 21.4835 74.5165C26.728 79.761 33.4098 83.3325 40.6841 84.7794C47.9584 86.2264 55.4984 85.4838 62.3506 82.6455C69.2029 79.8072 75.0596 75.0007 79.1801 68.8339C83.3007 62.667 85.5 55.4168 85.5 48C85.4888 38.0578 81.5343 28.5261 74.5041 21.4959C67.4739 14.4657 57.9422 10.5112 48 10.5V10.5ZM48 82.5C41.1766 82.5 34.5063 80.4766 28.8328 76.6857C23.1593 72.8948 18.7374 67.5066 16.1262 61.2026C13.5149 54.8985 12.8317 47.9617 14.1629 41.2694C15.4941 34.577 18.7799 28.4297 23.6048 23.6048C28.4297 18.7799 34.5771 15.4941 41.2694 14.1629C47.9617 12.8317 54.8985 13.5149 61.2026 16.1262C67.5066 18.7374 72.8948 23.1593 76.6857 28.8328C80.4766 34.5063 82.5 41.1765 82.5 48C82.4897 57.1468 78.8516 65.916 72.3838 72.3838C65.916 78.8516 57.1468 82.4897 48 82.5V82.5ZM70.5 48C70.5 48.3978 70.342 48.7794 70.0607 49.0607C69.7794 49.342 69.3978 49.5 69 49.5H48C47.6022 49.5 47.2207 49.342 46.9394 49.0607C46.6581 48.7794 46.5 48.3978 46.5 48V27C46.5 26.6022 46.6581 26.2206 46.9394 25.9393C47.2207 25.658 47.6022 25.5 48 25.5C48.3978 25.5 48.7794 25.658 49.0607 25.9393C49.342 26.2206 49.5 26.6022 49.5 27V46.5H69C69.3978 46.5 69.7794 46.658 70.0607 46.9393C70.342 47.2206 70.5 47.6022 70.5 48Z" fill="#333333"/> | |||||
| </svg> | |||||
+ 9
- 0
juice/login/resources/img/deutsch.svg
View File
| @ -0,0 +1,9 @@ | |||||
| <?xml version="1.0" encoding="UTF-8" standalone="no"?> | |||||
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" | |||||
| "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | |||||
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" viewBox="0 0 5 3"> | |||||
| <desc>Flag of Germany</desc> | |||||
| <rect id="black_stripe" width="5" height="3" y="0" x="0" fill="#000"/> | |||||
| <rect id="red_stripe" width="5" height="2" y="1" x="0" fill="#D00"/> | |||||
| <rect id="gold_stripe" width="5" height="1" y="2" x="0" fill="#FFCE00"/> | |||||
| </svg> | |||||
+ 7
- 0
juice/login/resources/img/english.svg
View File
| @ -0,0 +1,7 @@ | |||||
| <svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <path d="M0 0.5H16V12.5H0V0.5Z" fill="#41479B"/> | |||||
| <path d="M16 10.9375L10.0833 6.50001L16 2.0625V0.5H13.9167L8 4.93751L2.08333 0.5H0V2.0625L5.91667 6.50001L0 10.9375V12.5H2.08336L8 8.06251L13.9166 12.5H16V10.9375Z" fill="white"/> | |||||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M2.47361e-06 0.5L0 0.500003V1.12501L7.16667 6.50002L0 11.875V12.5H0.833366L8 7.12502L15.1666 12.5H16V11.875L8.83333 6.50002L16 1.12501V0.5H15.1667L8 5.87502L0.833323 0.5H2.47361e-06Z" fill="#DC251C"/> | |||||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M6 4.5V0.5H10V4.5H16V8.5H10V12.5H6V8.5H0V4.5H6Z" fill="white"/> | |||||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M7 5.5V0.5H9V5.5H16V7.5H9V12.5H7V7.5H0V5.5H7Z" fill="#DC251C"/> | |||||
| </svg> | |||||
+ 3
- 0
juice/login/resources/img/error.svg
View File
| @ -0,0 +1,3 @@ | |||||
| <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <path d="M48 10.5C40.5832 10.5 33.333 12.6993 27.1661 16.8199C20.9993 20.9404 16.1928 26.7971 13.3545 33.6494C10.5162 40.5016 9.77362 48.0416 11.2206 55.3159C12.6675 62.5902 16.239 69.272 21.4835 74.5165C26.728 79.761 33.4098 83.3325 40.6841 84.7794C47.9584 86.2264 55.4984 85.4838 62.3506 82.6455C69.2029 79.8072 75.0596 75.0007 79.1801 68.8339C83.3007 62.667 85.5 55.4168 85.5 48C85.4888 38.0578 81.5343 28.5261 74.5041 21.4959C67.4739 14.4657 57.9422 10.5112 48 10.5V10.5ZM48 82.5C41.1766 82.5 34.5063 80.4766 28.8328 76.6857C23.1593 72.8948 18.7374 67.5066 16.1262 61.2026C13.5149 54.8985 12.8317 47.9617 14.1629 41.2694C15.4941 34.577 18.7799 28.4297 23.6048 23.6048C28.4297 18.7799 34.5771 15.4941 41.2694 14.1629C47.9617 12.8317 54.8985 13.5149 61.2026 16.1262C67.5066 18.7374 72.8948 23.1593 76.6857 28.8328C80.4766 34.5063 82.5 41.1765 82.5 48C82.4897 57.1468 78.8516 65.916 72.3838 72.3838C65.916 78.8516 57.1468 82.4897 48 82.5V82.5ZM61.0605 37.0613L50.1214 48L61.0605 58.9395C61.2024 59.0782 61.3153 59.2437 61.3928 59.4263C61.4703 59.6089 61.5107 59.8051 61.5119 60.0035C61.513 60.2019 61.4748 60.3986 61.3994 60.5821C61.324 60.7656 61.2129 60.9323 61.0726 61.0726C60.9324 61.2129 60.7657 61.324 60.5822 61.3994C60.3987 61.4748 60.202 61.5131 60.0036 61.512C59.8052 61.5109 59.609 61.4705 59.4264 61.3931C59.2437 61.3156 59.0782 61.2027 58.9395 61.0609L48 50.1214L37.0605 61.0609C36.7781 61.337 36.3983 61.4905 36.0034 61.4883C35.6085 61.486 35.2304 61.3282 34.9511 61.0489C34.6719 60.7696 34.5141 60.3915 34.5119 59.9966C34.5097 59.6017 34.6634 59.2218 34.9395 58.9395L45.8786 48L34.9395 37.0613C34.6634 36.7789 34.5097 36.3991 34.5119 36.0042C34.5141 35.6093 34.6719 35.2311 34.9511 34.9519C35.2304 34.6726 35.6085 34.5147 36.0034 34.5125C36.3983 34.5102 36.7781 34.6638 37.0605 34.9399L48 45.8786L58.9395 34.9395C59.0782 34.7977 59.2437 34.6848 59.4264 34.6073C59.609 34.5299 59.8052 34.4894 60.0036 34.4883C60.202 34.4872 60.3987 34.5255 60.5822 34.6009C60.7657 34.6764 60.9324 34.7875 61.0726 34.9278C61.2129 35.0681 61.324 35.2348 61.3994 35.4183C61.4748 35.6018 61.513 35.7985 61.5119 35.9968C61.5107 36.1952 61.4703 36.3914 61.3928 36.5741C61.3153 36.7567 61.2024 36.9222 61.0605 37.0609V37.0613Z" fill="#333333"/> | |||||
| </svg> | |||||
+ 3
- 0
juice/login/resources/img/facebook.svg
View File
| @ -0,0 +1,3 @@ | |||||
| <svg width="16" height="16" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <path d="M19.9002 0.199997H3.1002C1.7802 0.199997 0.700195 1.28 0.700195 2.6V19.4C0.700195 20.7212 1.7802 21.8 3.1002 21.8H11.5002V13.4H9.10019V10.43H11.5002V7.97C11.5002 5.3732 12.9546 3.5492 16.0194 3.5492L18.183 3.5516V6.6776H16.7466C15.5538 6.6776 15.1002 7.5728 15.1002 8.4032V10.4312H18.1818L17.5002 13.4H15.1002V21.8H19.9002C21.2202 21.8 22.3002 20.7212 22.3002 19.4V2.6C22.3002 1.28 21.2202 0.199997 19.9002 0.199997Z" fill="#3B5998"/> | |||||
| </svg> | |||||
+ 7
- 0
juice/login/resources/img/google.svg
View File
| @ -0,0 +1,7 @@ | |||||
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M0 12C0 5.37258 5.37258 0 12 0V0C18.6274 0 24 5.37258 24 12V12C24 18.6274 18.6274 24 12 24V24C5.37258 24 0 18.6274 0 12V12Z" fill="white"/> | |||||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M19.1102 12.1704C19.1102 11.6386 19.0624 11.1272 18.9738 10.6363H11.9102V13.5375H15.9465C15.7727 14.475 15.2443 15.2693 14.4499 15.8011V17.6829H16.8738C18.292 16.3772 19.1102 14.4545 19.1102 12.1704Z" fill="#4285F4"/> | |||||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9103 19.5C13.9353 19.5 15.633 18.8284 16.8739 17.683L14.4501 15.8012C13.7785 16.2512 12.9194 16.5171 11.9103 16.5171C9.95688 16.5171 8.30346 15.1977 7.71369 13.425H5.20801V15.3682C6.4421 17.8193 8.97847 19.5 11.9103 19.5Z" fill="#34A853"/> | |||||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M7.71357 13.425C7.56357 12.975 7.47834 12.4943 7.47834 12C7.47834 11.5056 7.56357 11.025 7.71357 10.575V8.63177H5.20788C4.69993 9.64428 4.41016 10.7897 4.41016 12C4.41016 13.2102 4.69993 14.3556 5.20788 15.3681L7.71357 13.425Z" fill="#FBBC05"/> | |||||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9103 7.48296C13.0114 7.48296 14.0001 7.86137 14.7773 8.60455L16.9285 6.45341C15.6296 5.24318 13.9319 4.5 11.9103 4.5C8.97847 4.5 6.4421 6.18068 5.20801 8.63182L7.71369 10.575C8.30346 8.80228 9.95687 7.48296 11.9103 7.48296Z" fill="#EA4335"/> | |||||
| </svg> | |||||
+ 35
- 0
juice/login/resources/img/juice-bc copy.svg
View File
| @ -0,0 +1,35 @@ | |||||
| <svg width="558" height="400" viewBox="0 0 558 400" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <g style="mix-blend-mode:luminosity" opacity="0.2" filter="url(#filter0_iiii)"> | |||||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M25.3301 154.883C92.8424 152.702 180.089 149.884 259.375 277.59C231.433 89.5036 140.084 -1.18084 53.0326 -13.496C-34.0183 -24.6916 -102.799 27.9278 -82.3799 100.699C-66.1116 157.836 -26.1219 156.544 25.3301 154.883ZM282.211 65.0662C301.974 85.0493 327.497 110.857 314.229 171.601C358.729 109.35 358.729 54.8803 336.479 25.978C315.288 -4.03588 280.324 -9.59401 266.551 17.085C255.596 38.1555 267.254 49.9428 282.211 65.0662ZM61.4795 368.669C85.9438 338.609 117.688 299.603 199.185 312.959C112.85 254.713 41.6231 260.314 4.93047 292.797C-32.8413 327.52 -37.1581 376.805 -0.465492 394.726C28.4533 409.25 42.8573 391.551 61.4795 368.669ZM345.361 270.126C403.038 209.71 450.376 221.452 486.985 230.533C514.872 237.451 536.533 242.824 551.794 213.581C571.047 176.992 538.959 140.404 489.758 135.969C441.625 132.643 381.728 171.449 345.361 270.126Z" fill="#292929"/> | |||||
| </g> | |||||
| <defs> | |||||
| <filter id="filter0_iiii" x="-90" y="-19" width="651.459" height="423" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> | |||||
| <feFlood flood-opacity="0" result="BackgroundImageFix"/> | |||||
| <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/> | |||||
| <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> | |||||
| <feOffset dx="4" dy="4"/> | |||||
| <feGaussianBlur stdDeviation="4"/> | |||||
| <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/> | |||||
| <feColorMatrix type="matrix" values="0 0 0 0 0.396078 0 0 0 0 0.396078 0 0 0 0 0.396078 0 0 0 0.12 0"/> | |||||
| <feBlend mode="normal" in2="shape" result="effect1_innerShadow"/> | |||||
| <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> | |||||
| <feOffset/> | |||||
| <feGaussianBlur stdDeviation="1"/> | |||||
| <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/> | |||||
| <feColorMatrix type="matrix" values="0 0 0 0 0.396078 0 0 0 0 0.396078 0 0 0 0 0.396078 0 0 0 0.12 0"/> | |||||
| <feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow"/> | |||||
| <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> | |||||
| <feOffset dx="-1" dy="-1"/> | |||||
| <feGaussianBlur stdDeviation="1"/> | |||||
| <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/> | |||||
| <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0"/> | |||||
| <feBlend mode="normal" in2="effect2_innerShadow" result="effect3_innerShadow"/> | |||||
| <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> | |||||
| <feOffset dx="-4" dy="-4"/> | |||||
| <feGaussianBlur stdDeviation="4"/> | |||||
| <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/> | |||||
| <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/> | |||||
| <feBlend mode="normal" in2="effect3_innerShadow" result="effect4_innerShadow"/> | |||||
| </filter> | |||||
| </defs> | |||||
| </svg> | |||||
+ 35
- 0
juice/login/resources/img/juice-bc.svg
View File
| @ -0,0 +1,35 @@ | |||||
| <svg width="558" height="400" viewBox="0 0 558 400" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <g style="mix-blend-mode:luminosity" opacity="0.2" filter="url(#filter0_iiii)"> | |||||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M25.3301 154.883C92.8424 152.702 180.089 149.884 259.375 277.59C231.433 89.5036 140.084 -1.18084 53.0326 -13.496C-34.0183 -24.6916 -102.799 27.9278 -82.3799 100.699C-66.1116 157.836 -26.1219 156.544 25.3301 154.883ZM282.211 65.0662C301.974 85.0493 327.497 110.857 314.229 171.601C358.729 109.35 358.729 54.8803 336.479 25.978C315.288 -4.03588 280.324 -9.59401 266.551 17.085C255.596 38.1555 267.254 49.9428 282.211 65.0662ZM61.4795 368.669C85.9438 338.609 117.688 299.603 199.185 312.959C112.85 254.713 41.6231 260.314 4.93047 292.797C-32.8413 327.52 -37.1581 376.805 -0.465492 394.726C28.4533 409.25 42.8573 391.551 61.4795 368.669ZM345.361 270.126C403.038 209.71 450.376 221.452 486.985 230.533C514.872 237.451 536.533 242.824 551.794 213.581C571.047 176.992 538.959 140.404 489.758 135.969C441.625 132.643 381.728 171.449 345.361 270.126Z" fill="#292929"/> | |||||
| </g> | |||||
| <defs> | |||||
| <filter id="filter0_iiii" x="-90" y="-19" width="651.459" height="423" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> | |||||
| <feFlood flood-opacity="0" result="BackgroundImageFix"/> | |||||
| <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/> | |||||
| <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> | |||||
| <feOffset dx="4" dy="4"/> | |||||
| <feGaussianBlur stdDeviation="4"/> | |||||
| <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/> | |||||
| <feColorMatrix type="matrix" values="0 0 0 0 0.396078 0 0 0 0 0.396078 0 0 0 0 0.396078 0 0 0 0.12 0"/> | |||||
| <feBlend mode="normal" in2="shape" result="effect1_innerShadow"/> | |||||
| <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> | |||||
| <feOffset/> | |||||
| <feGaussianBlur stdDeviation="1"/> | |||||
| <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/> | |||||
| <feColorMatrix type="matrix" values="0 0 0 0 0.396078 0 0 0 0 0.396078 0 0 0 0 0.396078 0 0 0 0.12 0"/> | |||||
| <feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow"/> | |||||
| <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> | |||||
| <feOffset dx="-1" dy="-1"/> | |||||
| <feGaussianBlur stdDeviation="1"/> | |||||
| <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/> | |||||
| <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0"/> | |||||
| <feBlend mode="normal" in2="effect2_innerShadow" result="effect3_innerShadow"/> | |||||
| <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> | |||||
| <feOffset dx="-4" dy="-4"/> | |||||
| <feGaussianBlur stdDeviation="4"/> | |||||
| <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/> | |||||
| <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/> | |||||
| <feBlend mode="normal" in2="effect3_innerShadow" result="effect4_innerShadow"/> | |||||
| </filter> | |||||
| </defs> | |||||
| </svg> | |||||
+ 9
- 0
juice/login/resources/img/juice.svg
View File
| @ -0,0 +1,9 @@ | |||||
| <svg width="56" height="34" viewBox="0 0 56 34" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5969 10.1631C10.5974 10.0391 15.7672 9.87879 20.4653 17.1428C18.8096 6.44428 13.3966 1.28605 8.23842 0.585549C3.08019 -0.0512696 -0.995445 2.94178 0.21451 7.0811C1.17849 10.3311 3.5481 10.2576 6.5969 10.1631ZM21.8524 5.11735C23.0402 6.26212 24.5743 7.74056 23.7768 11.2204C26.4515 7.65424 26.4515 4.53383 25.1142 2.8781C23.8405 1.15869 21.739 0.840279 20.9112 2.36864C20.2528 3.57571 20.9534 4.25097 21.8524 5.11735ZM16.8356 19.2443C12.0266 18.485 10.1534 20.7026 8.70978 22.4116C7.61091 23.7126 6.76095 24.7188 5.05449 23.8931C2.88931 22.8742 3.14404 20.0722 5.3729 18.0981C7.53808 16.2513 11.7411 15.9329 16.8356 19.2443ZM21.5481 19.7538H23.9681V21.9826H21.5481V19.7538ZM21.0387 33.9548C20.6566 33.9548 20.2745 33.8911 19.8924 33.7638C19.5103 33.6364 19.1919 33.4454 18.8735 33.1906L19.8924 31.5349C20.0198 31.6623 20.1471 31.726 20.2745 31.7896C20.4019 31.8533 20.5929 31.8533 20.7203 31.8533C20.975 31.8533 21.1661 31.7896 21.2934 31.5986C21.4208 31.4712 21.5481 31.2802 21.5481 30.9618V22.8105H23.9681V30.7707C23.9681 31.2165 23.9044 31.6623 23.777 32.0444C23.6496 32.4265 23.3949 32.7449 23.1402 33.0633C22.8855 33.318 22.5671 33.5727 22.185 33.7001C21.8666 33.8275 21.4845 33.9548 21.0387 33.9548ZM28.0436 31.0255C27.2157 31.0255 26.6426 30.7708 26.1968 30.2613C25.7511 29.7518 25.56 28.9877 25.56 28.0324V22.9379H27.9799V27.523C27.9799 28.0324 28.0436 28.3508 28.2983 28.6056C28.4894 28.8603 28.7441 28.9877 29.1262 28.9877C29.4446 28.9877 29.763 28.924 30.0814 28.7329C30.3998 28.5419 30.6546 28.2872 30.9093 27.8414V22.9379H33.3292V28.1598C33.3292 28.4145 33.3929 28.5419 33.4566 28.6693C33.5202 28.7966 33.7113 28.8603 33.966 28.8603V30.8981C33.8492 30.9273 33.7458 30.9431 33.6496 30.9578C33.5361 30.9752 33.4326 30.991 33.3292 31.0255H32.8197C31.9919 31.0255 31.4824 30.7071 31.3551 30.0066L31.2277 29.4971C30.8456 30.0066 30.3998 30.3887 29.8904 30.6434C29.3172 30.8981 28.7441 31.0255 28.0436 31.0255ZM37.6596 19.7538H35.2397V21.9826H37.6596V19.7538ZM37.6596 22.8742H35.2397V30.8344H37.6596V22.8742ZM38.8695 26.8225C38.8695 26.2493 38.9332 25.7399 39.1879 25.2304C39.3789 24.721 39.6337 24.2752 40.0158 23.8931C40.3978 23.511 40.8436 23.1926 41.3531 23.0016C41.8625 22.7468 42.4993 22.6831 43.1362 22.6831C44.0914 22.6831 44.8556 22.8742 45.4924 23.2563C46.1292 23.6384 46.575 24.1478 46.8934 24.7846L44.5372 25.4852C44.2188 24.9757 43.773 24.721 43.1362 24.721C42.6267 24.721 42.1809 24.912 41.8625 25.2941C41.5441 25.6762 41.3531 26.1857 41.3531 26.8225C41.3531 27.1409 41.4168 27.3956 41.4804 27.6503C41.5441 27.9051 41.6715 28.1598 41.8625 28.3508C42.0536 28.5419 42.1809 28.6692 42.4357 28.7966C42.6267 28.924 42.8814 28.924 43.1362 28.924C43.4546 28.924 43.7093 28.8603 43.964 28.6692C44.2187 28.5419 44.4098 28.3508 44.5372 28.0961L46.8934 28.7966C46.575 29.4334 46.1292 29.9429 45.4924 30.325C44.8556 30.7071 44.0914 30.8981 43.1362 30.8981C42.4357 30.8981 41.8625 30.7707 41.3531 30.5797C40.8436 30.325 40.3342 30.0702 40.0158 29.6882C39.6337 29.3061 39.3789 28.8603 39.1879 28.3508C38.9968 27.9051 38.8695 27.3956 38.8695 26.8225ZM52.9433 24.912C53.2617 25.2304 53.4527 25.6125 53.5164 26.122H50.0776C50.1413 25.6125 50.3323 25.2304 50.6507 24.912C50.9054 24.5936 51.3512 24.4662 51.797 24.4662C52.2428 24.4662 52.6248 24.5936 52.9433 24.912ZM50.0776 30.7071C50.587 30.8981 51.1602 31.0255 51.8607 31.0255C52.7522 31.0255 53.5801 30.8344 54.0258 30.4523C54.6627 30.0702 55.1721 29.5608 55.4905 28.924L53.4527 28.3508C53.389 28.6692 53.1343 28.8603 52.8159 29.0513C52.4975 29.2424 52.1791 29.306 51.797 29.306C51.3512 29.306 50.9054 29.1787 50.587 28.8603C50.2686 28.6055 50.0776 28.1598 50.0139 27.6503H55.9363C56 27.523 56 27.3956 56 27.2682V26.8861C56 26.313 55.9363 25.8036 55.7453 25.2941C55.5542 24.7846 55.2995 24.3389 54.9174 23.9568C54.5353 23.5747 54.0895 23.32 53.5801 23.0652C53.0706 22.8742 52.4975 22.7468 51.797 22.7468C51.1602 22.7468 50.5233 22.8105 50.0139 23.0652C49.5044 23.2563 49.0587 23.5747 48.6766 23.9568C48.2945 24.3389 48.0397 24.7846 47.8487 25.2941C47.594 25.8036 47.5303 26.3767 47.5303 26.9498C47.5303 27.4593 47.6577 27.9687 47.8487 28.4782C48.0397 28.9876 48.2945 29.4334 48.6766 29.8155C49.0587 30.1976 49.5044 30.4523 50.0776 30.7071ZM25.56 16.8244C28.994 13.3543 31.8124 14.0288 33.992 14.5504C35.6523 14.9477 36.942 15.2563 37.8506 13.5766C38.9969 11.4751 37.0864 9.37365 34.1571 9.11892C31.2914 8.92787 27.7252 11.1567 25.56 16.8244Z" fill="url(#paint0_linear)"/> | |||||
| <defs> | |||||
| <linearGradient id="paint0_linear" x1="28" y1="0.5" x2="28" y2="33.9548" gradientUnits="userSpaceOnUse"> | |||||
| <stop stop-color="#FF9900"/> | |||||
| <stop offset="1" stop-color="#FF7100"/> | |||||
| </linearGradient> | |||||
| </defs> | |||||
| </svg> | |||||
+ 3
- 0
juice/login/resources/img/linkedin.svg
View File
| @ -0,0 +1,3 @@ | |||||
| <svg width="16" height="16" viewBox="0 0 25 22" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <path d="M22.7857 0.5H2.20893C1.26607 0.5 0.5 1.17969 0.5 2.01406V19.9859C0.5 20.8203 1.26607 21.5 2.20893 21.5H22.7857C23.7286 21.5 24.5 20.8203 24.5 19.9859V2.01406C24.5 1.17969 23.7286 0.5 22.7857 0.5ZM7.75357 18.5H4.19643V8.47812H7.75893V18.5H7.75357ZM5.975 7.10938C4.83393 7.10938 3.9125 6.29844 3.9125 5.30469C3.9125 4.31094 4.83393 3.5 5.975 3.5C7.11071 3.5 8.0375 4.31094 8.0375 5.30469C8.0375 6.30312 7.11607 7.10938 5.975 7.10938V7.10938ZM21.0875 18.5H17.5304V13.625C17.5304 12.4625 17.5036 10.9672 15.6821 10.9672C13.8286 10.9672 13.5446 12.2328 13.5446 13.5406V18.5H9.9875V8.47812H13.4V9.84687H13.4482C13.925 9.05937 15.0875 8.22969 16.8179 8.22969C20.4179 8.22969 21.0875 10.3062 21.0875 13.0062V18.5V18.5Z" fill="#2867B2"/> | |||||
| </svg> | |||||
+ 3
- 0
juice/login/resources/img/locale.svg
View File
| @ -0,0 +1,3 @@ | |||||
| <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <path d="M13.8973 10.0698C14.368 8.72865 14.3675 7.2671 13.8959 5.92629C13.8931 5.91646 13.8897 5.90682 13.8857 5.89741C13.4521 4.68361 12.6538 3.63355 11.6002 2.89108C10.5466 2.14861 9.28918 1.75005 8.00024 1.75C6.71131 1.74995 5.45388 2.1484 4.40021 2.89078C3.34654 3.63315 2.54816 4.68314 2.11444 5.89691C2.11004 5.90716 2.10632 5.91768 2.10332 5.92841C1.63154 7.27121 1.63225 8.73482 2.10532 10.0772C2.10782 10.0855 2.11074 10.0938 2.11407 10.1019C2.54755 11.3157 3.34574 12.3659 4.39929 13.1085C5.45283 13.851 6.7102 14.2497 7.99915 14.2499C9.2881 14.2501 10.5456 13.8518 11.5993 13.1095C12.6531 12.3672 13.4516 11.3172 13.8854 10.1035C13.8901 10.0925 13.8941 10.0812 13.8973 10.0697L13.8973 10.0698ZM8.00001 13.5019C7.09794 12.6556 6.43094 11.5183 6.06626 10.25H9.93376C9.56907 11.5183 8.90207 12.6556 8.00001 13.5019ZM5.93938 9.74998C5.68692 8.59697 5.68692 7.40299 5.93938 6.24998H10.0606C10.3131 7.40299 10.3131 8.59697 10.0606 9.74998H5.93938ZM2.25001 7.99998C2.24961 7.40604 2.34159 6.81565 2.52263 6.24998H5.42263C5.19251 7.4053 5.19251 8.59466 5.42263 9.74998H2.52263C2.34159 9.1843 2.24961 8.59392 2.25001 7.99998ZM8.00001 2.4981C8.90219 3.34423 9.56919 4.48154 9.93376 5.74998H6.06626C6.43082 4.48154 7.09782 3.34423 8.00001 2.4981ZM10.5774 6.24998H13.4774C13.8409 7.38833 13.8409 8.61162 13.4774 9.74998H10.5774C10.8076 8.59466 10.8076 7.4053 10.5774 6.24998ZM13.2913 5.74998H10.4603C10.1036 4.4056 9.42707 3.20341 8.48438 2.27054C9.52584 2.36003 10.5233 2.73109 11.3701 3.344C12.2168 3.95692 12.8809 4.78859 13.2913 5.74998H13.2913ZM7.51563 2.2706C6.57301 3.20354 5.89638 4.40566 5.53976 5.74998H2.70869C3.11904 4.7886 3.78313 3.95694 4.62988 3.34404C5.47662 2.73114 6.47412 2.36008 7.51557 2.2706H7.51563ZM2.70876 10.25H5.53976C5.89644 11.5944 6.57294 12.7965 7.51563 13.7294C6.47418 13.6399 5.47668 13.2688 4.62994 12.6559C3.7832 12.043 3.1191 11.2114 2.70876 10.25ZM8.48438 13.7294C9.42701 12.7965 10.1036 11.5944 10.4603 10.25H13.2913C12.881 11.2114 12.2169 12.043 11.3701 12.6559C10.5234 13.2688 9.52589 13.6399 8.48444 13.7294H8.48438Z" fill="#BDBFBF"/> | |||||
| </svg> | |||||
+ 3
- 0
juice/login/resources/img/twitter.svg
View File
| @ -0,0 +1,3 @@ | |||||
| <svg width="16" height="16" viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <path d="M22.033 5.11167C22.0482 5.32485 22.0482 5.53809 22.0482 5.75128C22.0482 12.2538 17.099 19.7462 8.0533 19.7462C5.26648 19.7462 2.67767 18.939 0.5 17.5381C0.895953 17.5837 1.27662 17.599 1.68781 17.599C3.98727 17.599 6.10405 16.8224 7.79441 15.4975C5.63197 15.4518 3.81978 14.0355 3.19541 12.0863C3.5 12.1319 3.80455 12.1624 4.12437 12.1624C4.56598 12.1624 5.00764 12.1015 5.41878 11.9949C3.16498 11.538 1.47458 9.55837 1.47458 7.16751V7.10662C2.12937 7.4721 2.89086 7.70053 3.69791 7.73095C2.37303 6.84768 1.50505 5.34009 1.50505 3.63449C1.50505 2.72081 1.74866 1.88324 2.17508 1.15228C4.59641 4.13704 8.23602 6.08624 12.3172 6.29948C12.2411 5.93399 12.1954 5.55332 12.1954 5.1726C12.1954 2.46192 14.3883 0.253822 17.1141 0.253822C18.5304 0.253822 19.8095 0.847729 20.708 1.80712C21.8197 1.59393 22.8857 1.18274 23.8299 0.619307C23.4643 1.76146 22.6877 2.72085 21.6674 3.32995C22.6573 3.2234 23.6167 2.94923 24.4999 2.56856C23.83 3.54313 22.9924 4.41112 22.033 5.11167V5.11167Z" fill="#00ACED"/> | |||||
| </svg> | |||||
+ 3
- 0
juice/login/resources/img/verify-email.svg
View File
| @ -0,0 +1,3 @@ | |||||
| <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <path d="M85.4899 20.9003C85.4874 20.8459 85.482 20.7917 85.4737 20.7379C85.4651 20.6902 85.4516 20.6452 85.4389 20.5991C85.4267 20.5513 85.412 20.5041 85.395 20.4578C85.3757 20.4109 85.3541 20.3651 85.3301 20.3205C85.3091 20.2792 85.2889 20.238 85.2641 20.1982C85.2333 20.1518 85.1999 20.1071 85.164 20.0644C85.1434 20.0389 85.128 20.0108 85.1055 19.9864C85.0984 19.9789 85.0897 19.9733 85.0826 19.9658C85.0425 19.9258 85.0002 19.8881 84.9559 19.8529C84.9229 19.8255 84.8921 19.7959 84.8576 19.7719C84.8146 19.7437 84.7702 19.7178 84.7245 19.6943C84.6844 19.6718 84.6458 19.647 84.6038 19.6286C84.5595 19.6091 84.5126 19.5967 84.4665 19.5814C84.42 19.5664 84.3746 19.5488 84.327 19.5383C84.2839 19.5285 84.2389 19.5255 84.1946 19.5195C84.1407 19.5112 84.0864 19.5058 84.0319 19.5034C84.021 19.503 84.0109 19.5 84 19.5H12C11.9895 19.5 11.9797 19.503 11.9692 19.503C11.912 19.5055 11.8549 19.5113 11.7982 19.5203C11.757 19.5259 11.715 19.5289 11.6745 19.5375C11.6233 19.5506 11.5729 19.5664 11.5234 19.5848C11.481 19.599 11.4379 19.6102 11.3977 19.6279C11.3527 19.6477 11.3107 19.6744 11.2672 19.6987C11.2256 19.7224 11.1825 19.7437 11.1435 19.7711C11.1075 19.7959 11.0753 19.8266 11.0411 19.8551C10.9979 19.8897 10.9566 19.9267 10.9174 19.9658C10.9103 19.9733 10.9016 19.9785 10.8945 19.9864C10.872 20.0108 10.857 20.0389 10.8364 20.0644C10.8004 20.1071 10.7668 20.1518 10.7359 20.1982C10.7107 20.238 10.6909 20.2796 10.6695 20.3209C10.6457 20.3654 10.6241 20.411 10.605 20.4578C10.588 20.5042 10.5733 20.5515 10.5611 20.5995C10.548 20.6452 10.5349 20.6902 10.5262 20.7379C10.518 20.7917 10.5126 20.8459 10.5101 20.9003C10.5079 20.934 10.5 20.9659 10.5 21V72C10.5013 73.1931 10.9758 74.3369 11.8194 75.1806C12.6631 76.0242 13.8069 76.4987 15 76.5H81C82.1931 76.4987 83.3369 76.0242 84.1806 75.1806C85.0242 74.3369 85.4987 73.1931 85.5 72V21C85.5 20.9659 85.4921 20.9336 85.4899 20.9003ZM82.5 71.5898L56.7652 48L82.5 24.4099V71.5898ZM13.5 24.4099L39.2347 48L13.5 71.5901V24.4099ZM48 51.9649L15.8561 22.5H80.1439L48 51.9649ZM41.4547 50.0351L46.986 55.1055C47.2627 55.3592 47.6244 55.5 47.9998 55.5C48.3752 55.5 48.737 55.3592 49.0136 55.1055L54.5452 50.0347L80.1439 73.5H15.8565L41.4547 50.0351Z" fill="#333333"/> | |||||
| </svg> | |||||
+ 5
- 0
juice/login/resources/js/script.js
View File
| @ -0,0 +1,5 @@ | |||||
| function hideSnackbar() { | |||||
| var x = document.getElementById("snackbar"); | |||||
| document.getElementById('snackbar').style.display = 'none'; | |||||
| } | |||||
+ 134
- 0
juice/login/template.ftl
View File
| @ -0,0 +1,134 @@ | |||||
| <#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false showAnotherWayIfPresent=true> | |||||
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |||||
| <html xmlns="http://www.w3.org/1999/xhtml" class="${properties.kcHtmlClass!}"> | |||||
| <head> | |||||
| <meta charset="utf-8"> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |||||
| <meta name="robots" content="noindex, nofollow"> | |||||
| <#if properties.meta?has_content> | |||||
| <#list properties.meta?split(' ') as meta> | |||||
| <meta name="${meta?split('==')[0]}" content="${meta?split('==')[1]}"/> | |||||
| </#list> | |||||
| </#if> | |||||
| <title>${msg("loginTitle",(realm.displayName!''))}</title> | |||||
| <link rel="icon" href="${url.resourcesPath}/img/favicon.ico" /> | |||||
| <#if properties.stylesCommon?has_content> | |||||
| <#list properties.stylesCommon?split(' ') as style> | |||||
| <link href="${url.resourcesCommonPath}/${style}" rel="stylesheet" /> | |||||
| </#list> | |||||
| </#if> | |||||
| <#if properties.styles?has_content> | |||||
| <#list properties.styles?split(' ') as style> | |||||
| <link href="${url.resourcesPath}/${style}" rel="stylesheet" /> | |||||
| </#list> | |||||
| </#if> | |||||
| <#if properties.scripts?has_content> | |||||
| <#list properties.scripts?split(' ') as script> | |||||
| <script src="${url.resourcesPath}/${script}" type="text/javascript"></script> | |||||
| </#list> | |||||
| </#if> | |||||
| <#if scripts??> | |||||
| <#list scripts as script> | |||||
| <script src="${script}" type="text/javascript"></script> | |||||
| </#list> | |||||
| </#if> | |||||
| </head> | |||||
| <body class="${properties.kcBodyClass!}"> | |||||
| <div class="${properties.kcLoginClass!}"> | |||||
| <div id="kc-header" class="${properties.kcHeaderClass!}"> | |||||
| <div id="kc-header-wrapper" | |||||
| class="${properties.kcHeaderWrapperClass!}"></div> | |||||
| </div> | |||||
| <div class="${properties.kcFormCardClass!}"> | |||||
| <header class="${properties.kcFormHeaderClass!}"> | |||||
| <#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())> | |||||
| <#if displayRequiredFields> | |||||
| <div class="${properties.kcContentWrapperClass!}"> | |||||
| <div class="${properties.kcLabelWrapperClass!} subtitle"> | |||||
| <span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span> | |||||
| </div> | |||||
| <div class="col-md-10"> | |||||
| <h1 id="kc-page-title"><#nested "header"></h1> | |||||
| </div> | |||||
| </div> | |||||
| <#else> | |||||
| <h1 id="kc-page-title"><#nested "header"></h1> | |||||
| </#if> | |||||
| <#else> | |||||
| <#if displayRequiredFields> | |||||
| <div class="${properties.kcContentWrapperClass!}"> | |||||
| <div class="${properties.kcLabelWrapperClass!} subtitle"> | |||||
| <span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span> | |||||
| </div> | |||||
| <div class="col-md-10"> | |||||
| <#nested "show-username"> | |||||
| <div id="kc-username" class="${properties.kcFormGroupClass!}"> | |||||
| <label id="kc-attempted-username">${auth.attemptedUsername}</label> | |||||
| <a id="reset-login" href="${url.loginRestartFlowUrl}"> | |||||
| <div class="kc-login-tooltip"> | |||||
| <i class="${properties.kcResetFlowIcon!}"></i> | |||||
| <span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span> | |||||
| </div> | |||||
| </a> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <#else> | |||||
| <#nested "show-username"> | |||||
| <div id="kc-username" class="${properties.kcFormGroupClass!}"> | |||||
| <label id="kc-attempted-username">${auth.attemptedUsername}</label> | |||||
| <a id="reset-login" href="${url.loginRestartFlowUrl}"> | |||||
| <div class="kc-login-tooltip"> | |||||
| <i class="${properties.kcResetFlowIcon!}"></i> | |||||
| <span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span> | |||||
| </div> | |||||
| </a> | |||||
| </div> | |||||
| </#if> | |||||
| </#if> | |||||
| </header> | |||||
| <div id="kc-content"> | |||||
| <div id="kc-content-wrapper"> | |||||
| <#-- App-initiated actions should not see warning messages about the need to complete the action --> | |||||
| <#-- during login. --> | |||||
| <#nested "form"> | |||||
| <#if auth?has_content && auth.showTryAnotherWayLink() && showAnotherWayIfPresent> | |||||
| <form id="kc-select-try-another-way-form" action="${url.loginAction}" method="post"> | |||||
| <div class="${properties.kcFormGroupClass!}"> | |||||
| <input type="hidden" name="tryAnotherWay" value="on"/> | |||||
| <a href="#" id="try-another-way" | |||||
| onclick="document.forms['kc-select-try-another-way-form'].submit();return false;">${msg("doTryAnotherWay")}</a> | |||||
| </div> | |||||
| </form> | |||||
| </#if> | |||||
| <#if displayInfo> | |||||
| <div id="kc-info" class="${properties.kcSignUpClass!}"> | |||||
| <div id="kc-info-wrapper" class="${properties.kcInfoAreaWrapperClass!}"> | |||||
| <#nested "info"> | |||||
| </div> | |||||
| </div> | |||||
| </#if> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <#if displayMessage && message?has_content && (message.type != 'warning' || !isAppInitiatedAction??)> | |||||
| <div class=" ${properties.kcAlertClass!}" id="snackbar"> | |||||
| <div class="${properties.kcAlertTitleClass!}">${kcSanitize(message.summary)?no_esc}</div> | |||||
| <button class="alert-button" onclick="hideSnackbar()">OK</button> | |||||
| </div> | |||||
| </#if> | |||||
| </body> | |||||
| </html> | |||||
| </#macro> | |||||
+ 8
- 0
juice/login/theme.properties
View File
| @ -0,0 +1,8 @@ | |||||
| parent=keycloak | |||||
| import=common/keycloak | |||||
| styles=css/login.css css/styles.css | |||||
| scripts=js/script.js | |||||
| kcFormCardClass=card-login | |||||
+ 68
- 0
juice/welcome/index.ftl
View File
| @ -0,0 +1,68 @@ | |||||
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | |||||
| <html> | |||||
| <head> | |||||
| <title>Welcome to ${productNameFull}</title> | |||||
| <meta charset="utf-8"> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |||||
| <meta name="robots" content="noindex, nofollow"> | |||||
| <link rel="shortcut icon" href="${resourcesPath}/img/favicon.ico" /> | |||||
| <#if properties.stylesCommon?has_content> | |||||
| <#list properties.stylesCommon?split(' ') as style> | |||||
| <link href="${resourcesCommonPath}/${style}" rel="stylesheet" /> | |||||
| </#list> | |||||
| </#if> | |||||
| <#if properties.styles?has_content> | |||||
| <#list properties.styles?split(' ') as style> | |||||
| <link href="${resourcesPath}/${style}" rel="stylesheet" /> | |||||
| </#list> | |||||
| </#if> | |||||
| </head> | |||||
| <body> | |||||
| <div class="container-fluid"> | |||||
| <div class="row"> | |||||
| <div class="card-login"> | |||||
| <div id="kc-locale"> | |||||
| <div id="kc-locale-wrapper" > | |||||
| <div class="kc-dropdown" id="kc-locale-dropdown"> | |||||
| <div class="header-login-welcome">Welcome!</div> | |||||
| <ul> | |||||
| </ul> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="header-login-title">${properties.welcomeTitle}</div> | |||||
| <div class="group-form"> | |||||
| <div class="login-sign-button"><span class="login-sign-image apple"></span>Connect with <span class="login-sign-link"> Apple</span></div> | |||||
| <div class="login-sign-button"><span class="login-sign-image google"></span>Connect with <span class="login-sign-link"> Google</span></div> | |||||
| <div class="login-sign-button"><span class="login-sign-image facebook"></span>Connect with <span class="login-sign-link"> Facebook</span></div> | |||||
| <div class="login-social-sign-container"> | |||||
| <div class="login-social-sign-button"><span class="login-sign-image twitter"></span>Twitter</div> | |||||
| <div class="login-social-sign-button"><span class="login-sign-image linkedin"></span>Linkedin</div> | |||||
| </div> | |||||
| </div> | |||||
| <div> | |||||
| <div class="separate-text">Or</div> | |||||
| </div> | |||||
| <div class="group-form"> | |||||
| <a class="login-social-sign-button large-social-sign-button" href="/auth/realms/demo/account">Connect with E-mail</a> | |||||
| </div> | |||||
| <div class="signup-terms-container"> | |||||
| <div class="signup-terms">By signing up you agree to the Terms of Service and Privacy Policy</div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <div class="juice-footer"> © 2020-2021, <span>Juice World</span> </div> | |||||
| </body> | |||||
| </html> | |||||
+ 20
- 0
juice/welcome/messages/messages_en.properties
View File
| @ -0,0 +1,20 @@ | |||||
| loginAccountTitle=Sign in | |||||
| doRegister=Sign up | |||||
| doForgotPassword=Forgot password? | |||||
| noAccount=Not a member? | |||||
| emailForgotTitle=Reset | |||||
| emailForgotTitle1=your password | |||||
| emailInstruction=Please enter your email address. | |||||
| emailInstruction1=We will send you an email to reset your password. | |||||
| doSubmit=Send email | |||||
| backToLogin=Go back | |||||
| haveAccount=Have an account? | |||||
| registerTitle=Join | |||||
| registerTitle1=The Community | |||||
| emailVerifyTitle=Verify your email | |||||
| emailVerifyInstruction1=You need to verify your email address to activate your account. An email with instructions to verify your email address has been sent to you | |||||
| emailVerifyInstruction3=Re-send the email | |||||
+ 20
- 0
juice/welcome/messages/messages_ru.properties
View File
| @ -0,0 +1,20 @@ | |||||
| loginAccountTitle=Sign in | |||||
| doRegister=Sign up | |||||
| doForgotPassword=Forgot password? | |||||
| noAccount=Not a member? | |||||
| emailForgotTitle=Reset | |||||
| emailForgotTitle1=your password | |||||
| emailInstruction=Please enter your email address. | |||||
| emailInstruction1=We will send you an email to reset your password. | |||||
| doSubmit=Send email | |||||
| backToLogin=Go back | |||||
| haveAccount=Have an account? | |||||
| registerTitle=Join | |||||
| registerTitle1=The Community | |||||
| emailVerifyTitle=Verify your email | |||||
| emailVerifyInstruction1=You need to verify your email address to activate your account. An email with instructions to verify your email address has been sent to you | |||||
| emailVerifyInstruction3=Re-send the email | |||||
+ 3
- 0
juice/welcome/resources/apple.svg
View File
| @ -0,0 +1,3 @@ | |||||
| <svg width="21" height="24" viewBox="0 0 21 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <path d="M5.57834 23.5507C5.10516 23.2359 4.68579 22.8469 4.33634 22.3987C3.95196 21.9361 3.59581 21.4507 3.26984 20.9452C2.5049 19.8246 1.90502 18.5998 1.48859 17.3085C0.988344 15.8085 0.746094 14.3707 0.746094 12.9645C0.746094 11.394 1.08584 10.023 1.75034 8.87099C2.24293 7.97057 2.96715 7.21812 3.84809 6.69149C4.70182 6.16122 5.68277 5.87102 6.68759 5.85149C7.03934 5.85149 7.41809 5.90249 7.82009 5.99999C8.10884 6.08174 8.46059 6.21074 8.89034 6.37124C9.43709 6.58199 9.73784 6.71099 9.83984 6.74249C10.1601 6.85949 10.4293 6.91049 10.6408 6.91049C10.8013 6.91049 11.0278 6.85949 11.2851 6.78149C11.4298 6.73049 11.7028 6.64049 12.0936 6.47324C12.4806 6.33224 12.7851 6.21149 13.0273 6.12149C13.3986 6.01199 13.7578 5.91074 14.0781 5.85974C14.4578 5.79988 14.843 5.78403 15.2263 5.81249C15.8906 5.8559 16.5448 5.99665 17.1681 6.23024C18.1873 6.64049 19.0116 7.28099 19.6251 8.19149C19.3658 8.35131 19.1224 8.53565 18.8983 8.74199C18.4106 9.17442 17.9951 9.68208 17.6676 10.2457C17.2396 11.016 17.0177 11.8838 17.0233 12.765C17.0391 13.8472 17.3166 14.8005 17.8633 15.6247C18.2653 16.2356 18.7877 16.758 19.3986 17.16C19.7113 17.3707 19.9806 17.5155 20.2386 17.613C20.1178 17.988 19.9888 18.351 19.8366 18.711C19.4913 19.5183 19.0728 20.2923 18.5863 21.0232C18.1528 21.6525 17.8131 22.1212 17.5551 22.4332C17.1531 22.9095 16.7661 23.2732 16.3753 23.5267C15.9456 23.8117 15.4378 23.964 14.9218 23.964C14.5724 23.9774 14.223 23.9351 13.8868 23.8387C13.5981 23.7412 13.3123 23.6355 13.0311 23.5147C12.7387 23.3804 12.4372 23.2669 12.1288 23.175C11.3666 22.9792 10.5674 22.9779 9.80459 23.1712C9.49184 23.2612 9.19109 23.3662 8.89409 23.4952C8.47634 23.6707 8.19884 23.7885 8.03834 23.8387C7.71809 23.9325 7.38584 23.991 7.04984 24.0105C6.53009 24.0105 6.04559 23.862 5.56559 23.5612L5.57834 23.5507ZM12.4333 5.08949C11.7538 5.42924 11.1051 5.57399 10.4608 5.52674C10.3596 4.87799 10.4608 4.21424 10.7301 3.48749C10.9593 2.87179 11.298 2.30263 11.7298 1.80749C12.1858 1.28625 12.7392 0.859019 13.3588 0.549737C14.0188 0.209987 14.6481 0.0262371 15.2496 -0.000762939C15.3276 0.678737 15.2496 1.34699 14.9998 2.06924C14.7687 2.7077 14.4306 3.30218 14.0001 3.82724C13.5606 4.34918 13.0213 4.77808 12.4138 5.08874L12.4333 5.08949Z" fill="white"/> | |||||
| </svg> | |||||
+ 330
- 0
juice/welcome/resources/css/styles.css
View File
| @ -0,0 +1,330 @@ | |||||
| .login-pf { | |||||
| height: 100%; | |||||
| background: none; | |||||
| } | |||||
| body { | |||||
| background: url(../juice-bc.svg); | |||||
| background-repeat: no-repeat; | |||||
| background-color: #202020; | |||||
| height: 100%; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| } | |||||
| body::before { | |||||
| position: absolute; | |||||
| width: 56px; | |||||
| height: 56px; | |||||
| content: ""; | |||||
| top: 56px; | |||||
| left: 63px; | |||||
| background: url(../juice.svg); | |||||
| background-repeat: no-repeat; | |||||
| } | |||||
| .login-pf-page { | |||||
| padding-top: 0px; | |||||
| } | |||||
| .h1, .h2, .h3, h1, h2, h3 { | |||||
| margin-top: 0px; | |||||
| margin-bottom: 0px; | |||||
| } | |||||
| #kc-header-wrapper { | |||||
| padding: 0px 10px; | |||||
| } | |||||
| .card-login { | |||||
| margin: 0 auto; | |||||
| box-shadow: -8px -8px 32px rgba(101, 101, 101, 0.12), -2px -2px 16px rgba(101, 101, 101, 0.24), 4px 4px 16px rgba(0, 0, 0, 0.3), 8px 8px 32px rgba(0, 0, 0, 0.1); | |||||
| padding: 56px; | |||||
| min-width: 440px; | |||||
| max-width: 440px; | |||||
| border-radius: 16px; | |||||
| background-color: #212121; | |||||
| } | |||||
| .group-form { | |||||
| padding: 32px 0px; | |||||
| } | |||||
| .login-sign-button { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| height: 56px; | |||||
| margin-bottom: 24px; | |||||
| background: #212121; | |||||
| box-shadow: -2px -2px 4px rgba(101, 101, 101, 0.12), -1px -1px 3px rgba(101, 101, 101, 0.24), 1px 1px 2px rgba(0, 0, 0, 0.3), 2px 2px 4px rgba(0, 0, 0, 0.2); | |||||
| border-radius: 4px; | |||||
| font-family: Swis721 Th BT; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 16px; | |||||
| line-height: 24px; | |||||
| text-align: center; | |||||
| color: #BDBFBF; | |||||
| cursor: pointer; | |||||
| } | |||||
| .login-sign-button:hover, | |||||
| .login-sign-button:focus { | |||||
| background: #292929; | |||||
| } | |||||
| .login-sign-image { | |||||
| background: url(../apple.svg); | |||||
| width: 24px; | |||||
| height: 24px; | |||||
| margin-right: 16px; | |||||
| } | |||||
| .login-sign-image.apple { | |||||
| background: url(../apple.svg); | |||||
| background-size: contain; | |||||
| background-repeat: no-repeat; | |||||
| } | |||||
| .login-sign-image.google { | |||||
| background: url(../google.svg); | |||||
| background-size: contain; | |||||
| background-repeat: no-repeat; | |||||
| } | |||||
| .login-sign-image.facebook { | |||||
| background: url(../facebook.svg); | |||||
| background-size: contain; | |||||
| background-repeat: no-repeat; | |||||
| } | |||||
| .login-sign-image.linkedin { | |||||
| background: url(../linkedin.svg); | |||||
| background-size: contain; | |||||
| background-repeat: no-repeat; | |||||
| } | |||||
| .login-sign-image.twitter { | |||||
| background: url(../twitter.svg); | |||||
| background-size: contain; | |||||
| background-repeat: no-repeat; | |||||
| } | |||||
| .login-social-sign-container { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| } | |||||
| .login-social-sign-button { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| width: 156px; | |||||
| height: 56px; | |||||
| background: #212121; | |||||
| border: 1px solid #292929; | |||||
| box-sizing: border-box; | |||||
| border-radius: 4px; | |||||
| font-family: Swis721 Th BT; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 16px; | |||||
| line-height: 24px; | |||||
| text-align: center; | |||||
| color: #BDBFBF; | |||||
| cursor: pointer; | |||||
| } | |||||
| .login-social-sign-button:hover, | |||||
| .login-social-sign-button:focus { | |||||
| background: #292929; | |||||
| } | |||||
| .large-social-sign-button:hover { | |||||
| color: #BDBFBF; | |||||
| text-decoration: none; | |||||
| } | |||||
| .login-sign-link { | |||||
| padding-left: 3px; | |||||
| font-weight: 500; | |||||
| } | |||||
| .separate-text { | |||||
| font-family: Swis721 Th BT; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 16px; | |||||
| line-height: 24px; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| text-align: center; | |||||
| color: #98989E; | |||||
| } | |||||
| .separate-text::before { | |||||
| width: 147px; | |||||
| height: 1px; | |||||
| margin-right: 8px; | |||||
| content: ""; | |||||
| background-color: #333333; | |||||
| } | |||||
| .separate-text::after { | |||||
| width: 147px; | |||||
| height: 1px; | |||||
| margin-left: 8px; | |||||
| content: ""; | |||||
| background-color: #333333; | |||||
| } | |||||
| .large-social-sign-button { | |||||
| width: 328px; | |||||
| } | |||||
| .signup-terms-container { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| } | |||||
| .login-pf-page-header { | |||||
| background: url(../img/juice.svg); | |||||
| background-position-x: 63px; | |||||
| background-position-y: 56px; | |||||
| background-repeat: no-repeat; | |||||
| } | |||||
| .header-login-welcome { | |||||
| font-family: Swis721 Th BT; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 14px; | |||||
| line-height: 20px; | |||||
| color: #98989E; | |||||
| } | |||||
| .header-login-title { | |||||
| padding-top: 4px; | |||||
| font-family: Swis721 Th BT; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 38px; | |||||
| line-height: 48px; | |||||
| letter-spacing: -0.75px; | |||||
| background: linear-gradient(180deg, #FF9900 0%, #FF7100 100%); | |||||
| -webkit-background-clip: text; | |||||
| -webkit-text-fill-color: transparent; | |||||
| } | |||||
| #kc-page-title{ | |||||
| text-align: left; | |||||
| } | |||||
| #kc-form-buttons { | |||||
| margin-top: 32px; | |||||
| margin-bottom: 32px; | |||||
| } | |||||
| .pf-c-button { | |||||
| height: 56px; | |||||
| background: #181818; | |||||
| box-shadow: -4px -4px 8px rgba(101, 101, 101, 0.08), -1px -1px 3px rgba(101, 101, 101, 0.12), 1px 1px 4px rgba(0, 0, 0, 0.3), 4px 4px 8px rgba(0, 0, 0, 0.4); | |||||
| border-radius: 4px; | |||||
| font-family: Swis721 Md BT; | |||||
| font-style: normal; | |||||
| font-weight: 500; | |||||
| font-size: 16px; | |||||
| line-height: 24px; | |||||
| text-align: center; | |||||
| color: #BDBFBF; | |||||
| } | |||||
| .pf-c-form-control{ | |||||
| position: relative; | |||||
| min-height: 56px; | |||||
| border: 1px solid #333333; | |||||
| box-sizing: border-box; | |||||
| border-radius: 4px; | |||||
| background: #212121; | |||||
| font-family: Swis721 Th BT; | |||||
| padding-left: 16px; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 16px; | |||||
| line-height: 24px; | |||||
| color: #757575; | |||||
| } | |||||
| .form-group { | |||||
| position: relative; | |||||
| margin-bottom: 24px; | |||||
| } | |||||
| #input-error { | |||||
| margin-top: 8px; | |||||
| font-family: Swis721 Th BT; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 14px; | |||||
| line-height: 20px; | |||||
| color: #BDBFBF; | |||||
| } | |||||
| .pf-c-form-control:focus, .pf-c-form-control:hover{ | |||||
| outline: none; | |||||
| border: 1px solid rgba(255, 113, 0, 1); | |||||
| caret-color: rgba(255, 113, 0, 1); | |||||
| /* font-family: Swis721 Th BT; */ | |||||
| } | |||||
| .pf-c-form-control[aria-invalid="true"] { | |||||
| border: 1px solid rgba(245, 46, 46, 1); | |||||
| background: #212121; | |||||
| } | |||||
| .login-form-input-label { | |||||
| position: absolute; | |||||
| display: none; | |||||
| padding: 0px 4px; | |||||
| top: -10px; | |||||
| left: 12px; | |||||
| color:rgba(255, 113, 0, 1); | |||||
| z-index: 100; | |||||
| background-color: #212121; | |||||
| } | |||||
| .pf-c-form-control:focus ~ .login-form-input-label, | |||||
| .pf-c-form-control:hover ~ .login-form-input-label, | |||||
| .pf-c-form-control[aria-invalid="true"] ~ .login-form-input-label { | |||||
| display: block; | |||||
| } | |||||
| .pf-c-form-control[aria-invalid="true"] ~ .login-form-input-label { | |||||
| color: rgba(245, 46, 46, 1); | |||||
| } | |||||
| .juice-footer { | |||||
| position: absolute; | |||||
| right: 56px; | |||||
| bottom: 56px; | |||||
| font-family: Swis721 Th BT; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 12px; | |||||
| line-height: 16px; | |||||
| color: #BDBFBF; | |||||
| } | |||||
| .juice-footer span { | |||||
| font-family: Swis721 Md BT; | |||||
| font-style: normal; | |||||
| font-weight: 500; | |||||
| font-size: 14px; | |||||
| line-height: 20px; | |||||
| color: #BDBFBF; | |||||
| } | |||||
| .signup-terms { | |||||
| width: 290px; | |||||
| font-family: Swis721 Th BT; | |||||
| font-style: normal; | |||||
| font-weight: 300; | |||||
| font-size: 12px; | |||||
| line-height: 16px; | |||||
| text-align: center; | |||||
| color: #BDBFBF; | |||||
| } | |||||
+ 3
- 0
juice/welcome/resources/facebook.svg
View File
| @ -0,0 +1,3 @@ | |||||
| <svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <path d="M19.9002 0.199997H3.1002C1.7802 0.199997 0.700195 1.28 0.700195 2.6V19.4C0.700195 20.7212 1.7802 21.8 3.1002 21.8H11.5002V13.4H9.10019V10.43H11.5002V7.97C11.5002 5.3732 12.9546 3.5492 16.0194 3.5492L18.183 3.5516V6.6776H16.7466C15.5538 6.6776 15.1002 7.5728 15.1002 8.4032V10.4312H18.1818L17.5002 13.4H15.1002V21.8H19.9002C21.2202 21.8 22.3002 20.7212 22.3002 19.4V2.6C22.3002 1.28 21.2202 0.199997 19.9002 0.199997Z" fill="#3B5998"/> | |||||
| </svg> | |||||
+ 7
- 0
juice/welcome/resources/google.svg
View File
| @ -0,0 +1,7 @@ | |||||
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M0 12C0 5.37258 5.37258 0 12 0V0C18.6274 0 24 5.37258 24 12V12C24 18.6274 18.6274 24 12 24V24C5.37258 24 0 18.6274 0 12V12Z" fill="white"/> | |||||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M19.1102 12.1704C19.1102 11.6386 19.0624 11.1272 18.9738 10.6363H11.9102V13.5375H15.9465C15.7727 14.475 15.2443 15.2693 14.4499 15.8011V17.6829H16.8738C18.292 16.3772 19.1102 14.4545 19.1102 12.1704Z" fill="#4285F4"/> | |||||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9103 19.5C13.9353 19.5 15.633 18.8284 16.8739 17.683L14.4501 15.8012C13.7785 16.2512 12.9194 16.5171 11.9103 16.5171C9.95688 16.5171 8.30346 15.1977 7.71369 13.425H5.20801V15.3682C6.4421 17.8193 8.97847 19.5 11.9103 19.5Z" fill="#34A853"/> | |||||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M7.71357 13.425C7.56357 12.975 7.47834 12.4943 7.47834 12C7.47834 11.5056 7.56357 11.025 7.71357 10.575V8.63177H5.20788C4.69993 9.64428 4.41016 10.7897 4.41016 12C4.41016 13.2102 4.69993 14.3556 5.20788 15.3681L7.71357 13.425Z" fill="#FBBC05"/> | |||||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9103 7.48296C13.0114 7.48296 14.0001 7.86137 14.7773 8.60455L16.9285 6.45341C15.6296 5.24318 13.9319 4.5 11.9103 4.5C8.97847 4.5 6.4421 6.18068 5.20801 8.63182L7.71369 10.575C8.30346 8.80228 9.95687 7.48296 11.9103 7.48296Z" fill="#EA4335"/> | |||||
| </svg> | |||||
+ 3219
- 0
juice/welcome/resources/js/realm.js
File diff suppressed because it is too large
View File
+ 35
- 0
juice/welcome/resources/juice-bc.svg
View File
| @ -0,0 +1,35 @@ | |||||
| <svg width="558" height="400" viewBox="0 0 558 400" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <g style="mix-blend-mode:luminosity" opacity="0.2" filter="url(#filter0_iiii)"> | |||||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M25.3301 154.883C92.8424 152.702 180.089 149.884 259.375 277.59C231.433 89.5036 140.084 -1.18084 53.0326 -13.496C-34.0183 -24.6916 -102.799 27.9278 -82.3799 100.699C-66.1116 157.836 -26.1219 156.544 25.3301 154.883ZM282.211 65.0662C301.974 85.0493 327.497 110.857 314.229 171.601C358.729 109.35 358.729 54.8803 336.479 25.978C315.288 -4.03588 280.324 -9.59401 266.551 17.085C255.596 38.1555 267.254 49.9428 282.211 65.0662ZM61.4795 368.669C85.9438 338.609 117.688 299.603 199.185 312.959C112.85 254.713 41.6231 260.314 4.93047 292.797C-32.8413 327.52 -37.1581 376.805 -0.465492 394.726C28.4533 409.25 42.8573 391.551 61.4795 368.669ZM345.361 270.126C403.038 209.71 450.376 221.452 486.985 230.533C514.872 237.451 536.533 242.824 551.794 213.581C571.047 176.992 538.959 140.404 489.758 135.969C441.625 132.643 381.728 171.449 345.361 270.126Z" fill="#292929"/> | |||||
| </g> | |||||
| <defs> | |||||
| <filter id="filter0_iiii" x="-90" y="-19" width="651.459" height="423" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> | |||||
| <feFlood flood-opacity="0" result="BackgroundImageFix"/> | |||||
| <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/> | |||||
| <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> | |||||
| <feOffset dx="4" dy="4"/> | |||||
| <feGaussianBlur stdDeviation="4"/> | |||||
| <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/> | |||||
| <feColorMatrix type="matrix" values="0 0 0 0 0.396078 0 0 0 0 0.396078 0 0 0 0 0.396078 0 0 0 0.12 0"/> | |||||
| <feBlend mode="normal" in2="shape" result="effect1_innerShadow"/> | |||||
| <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> | |||||
| <feOffset/> | |||||
| <feGaussianBlur stdDeviation="1"/> | |||||
| <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/> | |||||
| <feColorMatrix type="matrix" values="0 0 0 0 0.396078 0 0 0 0 0.396078 0 0 0 0 0.396078 0 0 0 0.12 0"/> | |||||
| <feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow"/> | |||||
| <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> | |||||
| <feOffset dx="-1" dy="-1"/> | |||||
| <feGaussianBlur stdDeviation="1"/> | |||||
| <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/> | |||||
| <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0"/> | |||||
| <feBlend mode="normal" in2="effect2_innerShadow" result="effect3_innerShadow"/> | |||||
| <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> | |||||
| <feOffset dx="-4" dy="-4"/> | |||||
| <feGaussianBlur stdDeviation="4"/> | |||||
| <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/> | |||||
| <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/> | |||||
| <feBlend mode="normal" in2="effect3_innerShadow" result="effect4_innerShadow"/> | |||||
| </filter> | |||||
| </defs> | |||||
| </svg> | |||||
+ 9
- 0
juice/welcome/resources/juice.svg
View File
| @ -0,0 +1,9 @@ | |||||
| <svg width="56" height="34" viewBox="0 0 56 34" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M6.5969 10.1631C10.5974 10.0391 15.7672 9.87879 20.4653 17.1428C18.8096 6.44428 13.3966 1.28605 8.23842 0.585549C3.08019 -0.0512696 -0.995445 2.94178 0.21451 7.0811C1.17849 10.3311 3.5481 10.2576 6.5969 10.1631ZM21.8524 5.11735C23.0402 6.26212 24.5743 7.74056 23.7768 11.2204C26.4515 7.65424 26.4515 4.53383 25.1142 2.8781C23.8405 1.15869 21.739 0.840279 20.9112 2.36864C20.2528 3.57571 20.9534 4.25097 21.8524 5.11735ZM16.8356 19.2443C12.0266 18.485 10.1534 20.7026 8.70978 22.4116C7.61091 23.7126 6.76095 24.7188 5.05449 23.8931C2.88931 22.8742 3.14404 20.0722 5.3729 18.0981C7.53808 16.2513 11.7411 15.9329 16.8356 19.2443ZM21.5481 19.7538H23.9681V21.9826H21.5481V19.7538ZM21.0387 33.9548C20.6566 33.9548 20.2745 33.8911 19.8924 33.7638C19.5103 33.6364 19.1919 33.4454 18.8735 33.1906L19.8924 31.5349C20.0198 31.6623 20.1471 31.726 20.2745 31.7896C20.4019 31.8533 20.5929 31.8533 20.7203 31.8533C20.975 31.8533 21.1661 31.7896 21.2934 31.5986C21.4208 31.4712 21.5481 31.2802 21.5481 30.9618V22.8105H23.9681V30.7707C23.9681 31.2165 23.9044 31.6623 23.777 32.0444C23.6496 32.4265 23.3949 32.7449 23.1402 33.0633C22.8855 33.318 22.5671 33.5727 22.185 33.7001C21.8666 33.8275 21.4845 33.9548 21.0387 33.9548ZM28.0436 31.0255C27.2157 31.0255 26.6426 30.7708 26.1968 30.2613C25.7511 29.7518 25.56 28.9877 25.56 28.0324V22.9379H27.9799V27.523C27.9799 28.0324 28.0436 28.3508 28.2983 28.6056C28.4894 28.8603 28.7441 28.9877 29.1262 28.9877C29.4446 28.9877 29.763 28.924 30.0814 28.7329C30.3998 28.5419 30.6546 28.2872 30.9093 27.8414V22.9379H33.3292V28.1598C33.3292 28.4145 33.3929 28.5419 33.4566 28.6693C33.5202 28.7966 33.7113 28.8603 33.966 28.8603V30.8981C33.8492 30.9273 33.7458 30.9431 33.6496 30.9578C33.5361 30.9752 33.4326 30.991 33.3292 31.0255H32.8197C31.9919 31.0255 31.4824 30.7071 31.3551 30.0066L31.2277 29.4971C30.8456 30.0066 30.3998 30.3887 29.8904 30.6434C29.3172 30.8981 28.7441 31.0255 28.0436 31.0255ZM37.6596 19.7538H35.2397V21.9826H37.6596V19.7538ZM37.6596 22.8742H35.2397V30.8344H37.6596V22.8742ZM38.8695 26.8225C38.8695 26.2493 38.9332 25.7399 39.1879 25.2304C39.3789 24.721 39.6337 24.2752 40.0158 23.8931C40.3978 23.511 40.8436 23.1926 41.3531 23.0016C41.8625 22.7468 42.4993 22.6831 43.1362 22.6831C44.0914 22.6831 44.8556 22.8742 45.4924 23.2563C46.1292 23.6384 46.575 24.1478 46.8934 24.7846L44.5372 25.4852C44.2188 24.9757 43.773 24.721 43.1362 24.721C42.6267 24.721 42.1809 24.912 41.8625 25.2941C41.5441 25.6762 41.3531 26.1857 41.3531 26.8225C41.3531 27.1409 41.4168 27.3956 41.4804 27.6503C41.5441 27.9051 41.6715 28.1598 41.8625 28.3508C42.0536 28.5419 42.1809 28.6692 42.4357 28.7966C42.6267 28.924 42.8814 28.924 43.1362 28.924C43.4546 28.924 43.7093 28.8603 43.964 28.6692C44.2187 28.5419 44.4098 28.3508 44.5372 28.0961L46.8934 28.7966C46.575 29.4334 46.1292 29.9429 45.4924 30.325C44.8556 30.7071 44.0914 30.8981 43.1362 30.8981C42.4357 30.8981 41.8625 30.7707 41.3531 30.5797C40.8436 30.325 40.3342 30.0702 40.0158 29.6882C39.6337 29.3061 39.3789 28.8603 39.1879 28.3508C38.9968 27.9051 38.8695 27.3956 38.8695 26.8225ZM52.9433 24.912C53.2617 25.2304 53.4527 25.6125 53.5164 26.122H50.0776C50.1413 25.6125 50.3323 25.2304 50.6507 24.912C50.9054 24.5936 51.3512 24.4662 51.797 24.4662C52.2428 24.4662 52.6248 24.5936 52.9433 24.912ZM50.0776 30.7071C50.587 30.8981 51.1602 31.0255 51.8607 31.0255C52.7522 31.0255 53.5801 30.8344 54.0258 30.4523C54.6627 30.0702 55.1721 29.5608 55.4905 28.924L53.4527 28.3508C53.389 28.6692 53.1343 28.8603 52.8159 29.0513C52.4975 29.2424 52.1791 29.306 51.797 29.306C51.3512 29.306 50.9054 29.1787 50.587 28.8603C50.2686 28.6055 50.0776 28.1598 50.0139 27.6503H55.9363C56 27.523 56 27.3956 56 27.2682V26.8861C56 26.313 55.9363 25.8036 55.7453 25.2941C55.5542 24.7846 55.2995 24.3389 54.9174 23.9568C54.5353 23.5747 54.0895 23.32 53.5801 23.0652C53.0706 22.8742 52.4975 22.7468 51.797 22.7468C51.1602 22.7468 50.5233 22.8105 50.0139 23.0652C49.5044 23.2563 49.0587 23.5747 48.6766 23.9568C48.2945 24.3389 48.0397 24.7846 47.8487 25.2941C47.594 25.8036 47.5303 26.3767 47.5303 26.9498C47.5303 27.4593 47.6577 27.9687 47.8487 28.4782C48.0397 28.9876 48.2945 29.4334 48.6766 29.8155C49.0587 30.1976 49.5044 30.4523 50.0776 30.7071ZM25.56 16.8244C28.994 13.3543 31.8124 14.0288 33.992 14.5504C35.6523 14.9477 36.942 15.2563 37.8506 13.5766C38.9969 11.4751 37.0864 9.37365 34.1571 9.11892C31.2914 8.92787 27.7252 11.1567 25.56 16.8244Z" fill="url(#paint0_linear)"/> | |||||
| <defs> | |||||
| <linearGradient id="paint0_linear" x1="28" y1="0.5" x2="28" y2="33.9548" gradientUnits="userSpaceOnUse"> | |||||
| <stop stop-color="#FF9900"/> | |||||
| <stop offset="1" stop-color="#FF7100"/> | |||||
| </linearGradient> | |||||
| </defs> | |||||
| </svg> | |||||
+ 3
- 0
juice/welcome/resources/linkedin.svg
View File
| @ -0,0 +1,3 @@ | |||||
| <svg width="25" height="22" viewBox="0 0 25 22" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <path d="M22.7857 0.5H2.20893C1.26607 0.5 0.5 1.17969 0.5 2.01406V19.9859C0.5 20.8203 1.26607 21.5 2.20893 21.5H22.7857C23.7286 21.5 24.5 20.8203 24.5 19.9859V2.01406C24.5 1.17969 23.7286 0.5 22.7857 0.5ZM7.75357 18.5H4.19643V8.47812H7.75893V18.5H7.75357ZM5.975 7.10938C4.83393 7.10938 3.9125 6.29844 3.9125 5.30469C3.9125 4.31094 4.83393 3.5 5.975 3.5C7.11071 3.5 8.0375 4.31094 8.0375 5.30469C8.0375 6.30312 7.11607 7.10938 5.975 7.10938V7.10938ZM21.0875 18.5H17.5304V13.625C17.5304 12.4625 17.5036 10.9672 15.6821 10.9672C13.8286 10.9672 13.5446 12.2328 13.5446 13.5406V18.5H9.9875V8.47812H13.4V9.84687H13.4482C13.925 9.05937 15.0875 8.22969 16.8179 8.22969C20.4179 8.22969 21.0875 10.3062 21.0875 13.0062V18.5V18.5Z" fill="#2867B2"/> | |||||
| </svg> | |||||
+ 3
- 0
juice/welcome/resources/twitter.svg
View File
| @ -0,0 +1,3 @@ | |||||
| <svg width="25" height="20" viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||||
| <path d="M22.033 5.11167C22.0482 5.32485 22.0482 5.53809 22.0482 5.75128C22.0482 12.2538 17.099 19.7462 8.0533 19.7462C5.26648 19.7462 2.67767 18.939 0.5 17.5381C0.895953 17.5837 1.27662 17.599 1.68781 17.599C3.98727 17.599 6.10405 16.8224 7.79441 15.4975C5.63197 15.4518 3.81978 14.0355 3.19541 12.0863C3.5 12.1319 3.80455 12.1624 4.12437 12.1624C4.56598 12.1624 5.00764 12.1015 5.41878 11.9949C3.16498 11.538 1.47458 9.55837 1.47458 7.16751V7.10662C2.12937 7.4721 2.89086 7.70053 3.69791 7.73095C2.37303 6.84768 1.50505 5.34009 1.50505 3.63449C1.50505 2.72081 1.74866 1.88324 2.17508 1.15228C4.59641 4.13704 8.23602 6.08624 12.3172 6.29948C12.2411 5.93399 12.1954 5.55332 12.1954 5.1726C12.1954 2.46192 14.3883 0.253822 17.1141 0.253822C18.5304 0.253822 19.8095 0.847729 20.708 1.80712C21.8197 1.59393 22.8857 1.18274 23.8299 0.619307C23.4643 1.76146 22.6877 2.72085 21.6674 3.32995C22.6573 3.2234 23.6167 2.94923 24.4999 2.56856C23.83 3.54313 22.9924 4.41112 22.033 5.11167V5.11167Z" fill="#00ACED"/> | |||||
| </svg> | |||||
+ 11
- 0
juice/welcome/theme.properties
View File
| @ -0,0 +1,11 @@ | |||||
| styles=css/welcome.css css/styles.css | |||||
| import=common/keycloak | |||||
| stylesCommon=node_modules/patternfly/dist/css/patternfly.css node_modules/patternfly/dist/css/patternfly-additions.css | |||||
| scripts=realm.js | |||||
| signInUrl=/auth/realms/demo/account | |||||
| displayCommunityLinks=true | |||||
| welcomeTitle=Welcome | |||||
| locales=ca,cs,da,de,en,es,fr,hu,it,ja,lt,nl,no,pl,pt-BR,ru,sk,sv,tr,zh-CN | |||||
+ 16
- 0
restart.sh
View File
| @ -0,0 +1,16 @@ | |||||
| #!/usr/bin/env bash | |||||
| docker build -t juice-keycloak . | |||||
| docker stop juice-keycloak || true | |||||
| docker run --rm -it -d \ | |||||
| -p 8080:8080 \ | |||||
| -e KEYCLOAK_USER=admin \ | |||||
| -e KEYCLOAK_PASSWORD=admin \ | |||||
| -e DB_VENDOR=postgres \ | |||||
| -e DB_ADDR=host.docker.internal \ | |||||
| -e DB_DATABASE=keycloak \ | |||||
| -e DB_USER=keycloak \ | |||||
| -e DB_PASSWORD=keycloak \ | |||||
| --name juice-keycloak \ | |||||
| juice-keycloak | |||||
+ 110
- 0
test/url.test.js
View File
| @ -0,0 +1,110 @@ | |||||
| // installable packages | |||||
| const base64url = require("base64url"); | |||||
| const { v4: uuidv4 } = require("uuid"); | |||||
| const fetch = require("node-fetch").default; | |||||
| // native packages | |||||
| const crypto = require("crypto"); | |||||
| const { URL, URLSearchParams } = require("url"); | |||||
| // config | |||||
| const BASE_URL = "http://localhost:8080"; | |||||
| const REALM = "demorealm"; | |||||
| const REDIRECT_URI = "com.juice.booster3://auth"; | |||||
| const CLIENT_ID = "native-webview"; | |||||
| const sha256encrypt = (code) => { | |||||
| const base64Digest = crypto | |||||
| .createHash("sha256") | |||||
| .update(code) | |||||
| .digest("base64"); | |||||
| return base64url.fromBase64(base64Digest); | |||||
| }; | |||||
| const nonceFactory = () => { | |||||
| const timestamp = Date.now(); | |||||
| return sha256encrypt(timestamp.toString()); | |||||
| }; | |||||
| function generateAuthUrl() { | |||||
| const nonce = uuidv4(); | |||||
| const state = uuidv4(); | |||||
| const url = new URL( | |||||
| `${BASE_URL}/auth/realms/${REALM}/protocol/openid-connect/auth`, | |||||
| ); | |||||
| url.searchParams.append("client_id", CLIENT_ID); | |||||
| url.searchParams.append("redirect_uri", REDIRECT_URI); | |||||
| url.searchParams.append("state", state); | |||||
| url.searchParams.append("response_mode", "fragment"); | |||||
| url.searchParams.append("response_type", "code"); | |||||
| url.searchParams.append("scope", "openid"); | |||||
| url.searchParams.append("nonce", nonce); | |||||
| console.log(url.href); | |||||
| } | |||||
| async function getTokenByUrl(urlString) { | |||||
| let url = new URL(urlString); | |||||
| let code = new URLSearchParams(url.hash).get("code"); | |||||
| console.log(`Auth with code is: ${code}`); | |||||
| url = new URL( | |||||
| `${BASE_URL}/auth/realms/${REALM}/protocol/openid-connect/token`, | |||||
| ); | |||||
| const payload = { | |||||
| client_id: CLIENT_ID, | |||||
| code, | |||||
| grant_type: "authorization_code", | |||||
| redirect_uri: REDIRECT_URI, | |||||
| }; | |||||
| let response = await fetch(url, { | |||||
| method: "POST", | |||||
| headers: { | |||||
| "Content-Type": "application/x-www-form-urlencoded", | |||||
| Accept: "*/*", | |||||
| }, | |||||
| redirect: "manual", | |||||
| body: new URLSearchParams(payload).toString(), | |||||
| }); | |||||
| const token = await response.json(); | |||||
| console.log(token); | |||||
| } | |||||
| async function refresh(refresh_token) { | |||||
| const url = new URL( | |||||
| `${BASE_URL}/auth/realms/${REALM}/protocol/openid-connect/token`, | |||||
| ); | |||||
| const payload = { | |||||
| client_id: CLIENT_ID, | |||||
| refresh_token, | |||||
| grant_type: "refresh_token", | |||||
| redirect_uri: REDIRECT_URI, | |||||
| }; | |||||
| let response = await fetch(url, { | |||||
| method: "POST", | |||||
| headers: { | |||||
| "Content-Type": "application/x-www-form-urlencoded", | |||||
| Accept: "*/*", | |||||
| }, | |||||
| redirect: "manual", | |||||
| body: new URLSearchParams(payload).toString(), | |||||
| }); | |||||
| const token = await response.json(); | |||||
| console.log(token); | |||||
| } | |||||
| if (require.main === module) { | |||||
| const redirectUri = process.argv[2]; | |||||
| if (redirectUri == null) { | |||||
| generateAuthUrl(); | |||||
| } else { | |||||
| getTokenByUrl(redirectUri); | |||||
| } | |||||
| } | |||||
+ 1
- 0
version.ini
View File
| @ -0,0 +1 @@ | |||||
| 0.1.0 | |||||