diff --git a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/accessibility.scss b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/accessibility.scss index 8ce6a9a26d1..d61bb2f499b 100644 --- a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/accessibility.scss +++ b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/accessibility.scss @@ -39,7 +39,7 @@ outline: 1px var(--app-accessibility-outline) solid; } -#change_contrast { +#change_theme .btn-accessibility { top: 0; } @@ -48,7 +48,7 @@ } @include phone { - #change_contrast { + #change_theme .btn-accessibility { bottom: 52px; top: auto; } @@ -58,3 +58,19 @@ top: auto; } } + +.login-logo { + position: relative; +} + +.login-logo-dark { + display: none; +} + +html[data-bs-theme="dark"] .login-logo-light { + display: none; +} + +html[data-bs-theme="dark"] .login-logo-dark { + display: inline; +} diff --git a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/accessibility/accessibilityHC.scss b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/accessibility/accessibilityHC.scss deleted file mode 100644 index 423d9ce8815..00000000000 --- a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/accessibility/accessibilityHC.scss +++ /dev/null @@ -1,304 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one - * or more contributor license agreements. See the NOTICE file - * distributed with this work for additional information - * regarding copyright ownership. The ASF licenses this file - * to you under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance - * with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -@import 'utils'; - -$accessibility_color_white: #f7f7f7; -$accessibility_color_black: #000000; - - -/* General -============================================================================= */ -.content-wrapper, -.content-wrapper .box, -.modal-content, -.modal-header, -.background-footer, -input:not(:disabled):not([type="file"]), -select, -select option, -button:not(.close), -.table .sorting, -.dataTables_paginate a, -.modal-footer, -.box-header, -.dropdown-menu, -.main-footer, -.circular-actions a, -.k-select, -.file-caption.kv-fileinput-caption { - color: $accessibility_color_white !important; - background-color: #0f1417 !important; -} - - -.dataTable thead th:after, -.close { - color: $accessibility_color_white !important; - opacity: 0.8 !important; -} - - -.input-group-addon a, -.input-group-addon i, -.dropdown-menu > li:not(.disabled) > a:hover, -.dropdown-menu > li:not(.disabled) > a:hover span, -.dropdown-menu > li:not(.disabled) > a:focus, -.dropdown-menu > li:not(.disabled) > a:focus span, -#startAtContainer .input-group-addon span, -#startAtContainer .k-widget span, -#startAtContainer .k-widget i, -#startAtContainer .k-widget input, -.modal-footer i, -.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default, -.content-wrapper .nav-tabs a, -.wrapper .content-wrapper .nav.nav-tabs li.active a span, -.wrapper .content-wrapper .nav.nav-tabs li.active a, -.wrapper .content-wrapper .nav.nav-tabs li a:hover span, -.wrapper .content-wrapper .nav.nav-tabs li a:hover, -.wrapper .content-wrapper .nav.nav-tabs li a:active span, -.wrapper .content-wrapper .nav.nav-tabs li a:active, -.wrapper .content-wrapper .nav.nav-tabs li a:focus span, -.wrapper .content-wrapper .nav.nav-tabs li a:focus, -.wrapper .content-wrapper .tab-content .btn-primary .fa-download { - color: $accessibility_color_black !important; -} - - -.content-wrapper a:not(.btn-primary), -.content-wrapper span:not(.label-info):not([role="presentation"]):not([class^='cm-']), -.content-wrapper p, -.content-wrapper .box-title a, -.realm-choice .dropdown-menu > li:not(.disabled) > a:hover, -.realm-choice .dropdown-menu > li:not(.disabled) > a:hover span, -.realm-choice .dropdown-menu > li:not(.disabled) > a:focus, -.realm-choice .dropdown-menu > li:not(.disabled) > a:focus span, -.box-header, -.breadcrumb .active, -table tbody tr:hover button span, -.dropdown-menu > li > a, -.modal-header button, -.circular-actions a i, -.wizard-form .input-group-addon i, -#startAtContainer .input-group-addon i, -.attribute .input-group-addon i { - color: $accessibility_color_white !important; -} - - -.box.box-primary { - border-top-color: $accessibility_color_white; -} - - -img, -.content-wrapper div.btn.btn-file span.hidden-xs { - background-color: $accessibility_color_white; - color: $accessibility_color_black !important; -} -.enduser_navbar .navbar-brand img { - background-color: transparent; -} -.btn-primary, -.callout.callout-info, -.alert-info, -.label-info, -.modal-info .modal-body { - background-color: $accessibility_color_white !important; - color: $accessibility_color_black !important; -} - - -.logo img, -.modal-content .input-group .input-group-addon, -.wizard-view .input-group .input-group-addon { - background-color: transparent; -} - - -.modal-dialog { - border: 2px solid white; -} - - -#veil:not(:required):after { - @include shadow($accessibility_color_white 1.5em 0 0 0, - $accessibility_color_white 1.1em 1.1em 0 0, - $accessibility_color_white 0 1.5em 0 0, - $accessibility_color_white -1.1em 1.1em 0 0, - $accessibility_color_white -1.5em 0 0 0, - $accessibility_color_white -1.1em -1.1em 0 0, - $accessibility_color_white 0 -1.5em 0 0, - $accessibility_color_white 1.1em -1.1em 0 0); -} - - -.input-group input:disabled, -.input-group input[disabled], -.control-sidebar-dark .control-sidebar-menu > li > a:hover, -.table-hover > tbody > tr:hover, -.main-header .navbar .sidebar-toggle:hover, -.main-header .logo:hover, -div.toggle-menu ul li:hover, -.dropdown-menu > li > a:hover, -.dropdown-menu > li > a:focus, -.dropdown-menu > li > a:hover, -.k-block, -.k-draghandle, -.k-grid-header, -.k-grouping-header, -.k-header, -.k-pager-wrap, -.k-toolbar, -.k-treemap-tile, -.k-picker-wrap, -.k-state-disabled, -.km-pane-wrapper .k-header { - background-color: rgba(108, 115, 117, 0.55); -} - - -.sidebar-mini .main-header .navbar { - background-color: #222d32; - border-bottom: 1px white solid; - box-sizing: border-box; -} -.sidebar-mini .main-header .logo, -div.toggle-menu { - background-color: #222d32; -} - - -div.toggle-menu { - border: 1px solid $accessibility_color_white; -} - - -a, -.pagination > .active > a, -.pagination > .active > a:focus, -.pagination > .active > a:hover, -.pagination > .active > span, -.pagination > .active > span:focus, -.pagination > .active > span:hover { - border-color: #76abd9; -} -a { - color: #76abd9; -} - - -.logs button.btn-primary { - border-color: $accessibility_color_white; -} -.logs button.btn-primary:hover { - border-color: #adadad; -} -div.infolabel, -.input-group input:disabled, -.input-group input[disabled] { - color: #d2d2d2; -} - - -.text-bg-danger, -.callout.callout-danger, -.alert-danger, -.bg-danger, -.alert-error, -.label-danger, -.modal-danger .modal-body, -.btn-danger.active, -.btn-danger:active, -.open>.dropdown-toggle.btn-danger { - background-color: #942819 !important; -} -.text-bg-warning { - background-color: #6F4706 !important; -} -.text-bg-success, -.copy-clipboard-feedback, -.btn-success, -.callout.callout-success, -.alert-success, -.label-success, -.modal-success .modal-body { - background-color: #005C32 !important; -} -.bg-info { - background-color: #004E61 !important; -} -.text-bg-warning, -.callout.callout-warning, -.alert-warning, -.label-warning, -.modal-warning .modal-body { - background-color: #6F4706 !important; -} -.callout.callout-warning { - border-color: #6F4706; -} - - -.bootstrap-select .btn.btn-default { - background-color: rgba(101, 101, 101, 0.7) !important; -} - - -/* Login page -============================================================================= */ -.login-body { - background-image: linear-gradient(rgb(31, 109, 142), #004626); -} - -.login-logo { - background: transparent; -} - -.btn-accessibility { - color: $accessibility_color_white !important; -} - -.form-signin { - .btn-primary, - .btn-primary { - border: 2px solid white; - } - .btn-primary.focus, - .btn-primary:focus { - border-color: #8c8c8c; - } -} - -.login-card { - background-color: #0f1417; -} - - - - -/* From Console Admin LTE -============================================================================= */ -.dark-theme .callout.callout-danger, .dark-theme .callout.callout-warning, -.dark-theme .callout.callout-info, .dark-theme .callout.callout-success, -.dark-theme .alert-success, .dark-theme .alert-danger, .bg-danger, .dark-theme .label-success, -.dark-theme .alert-error, .dark-theme .alert-warning, .dark-theme .alert-info, .dark-theme .label-danger, -.dark-theme .label-info, .dark-theme .label-warning, .dark-theme .label-primary { - color: #fff !important; -} diff --git a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/syncopeUI.scss b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/syncopeUI.scss index 6ccb80110f1..fdf5ddaac4d 100644 --- a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/syncopeUI.scss +++ b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/syncopeUI.scss @@ -449,7 +449,7 @@ td.checkGroupColumn { .pwstrengthProgress { position: absolute; - margin-top: 35px; + margin-top: 40px; width: 100%; } diff --git a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/js/accessibility.js b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/js/accessibility.js index 8a2d99ddda5..c59535b5578 100644 --- a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/js/accessibility.js +++ b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/js/accessibility.js @@ -1,4 +1,3 @@ - /* * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -17,205 +16,42 @@ * specific language governing permissions and limitations * under the License. */ - -$(document).ready(function () { - - var locationDomain = window.location.origin + '/' + window.location.pathname.split('/')[1]; - - var initAssetsManager = function () { - var AssetsManager = {}; - - var createLink = function (id, url) { - if (!$('link#' + id).length && !$('link[href="' + url + '"').length) { - var link = document.createElement('link'); - link.rel = 'stylesheet'; - link.href = url; - link.type = "text/css"; - $('head').append(link); - } - }; - - var createScript = function (id, url) { - if (!$('script#' + id).length && !$('script[src="' + url + '"').length) { - var script = document.createElement('script'); - script.src = url; - $('body').append(script); - } - }; - - AssetsManager.checkAlreadyLoaded = function (url, type) { - var elems = (type === 'css') ? document.styleSheets : ((type === 'js') ? document.scripts : ''); - var attr = (type === 'js') ? 'src' : ((type === 'css') ? 'href' : 'none'); - for (var i in elems) { - var attrUrl = elems[i][attr] || ""; - var assetName = attrUrl.split("/").slice(-1).join(); - if (attrUrl !== "" - && (assetName === url.split("/").slice(-1).join() || assetName === url)) { - return true; +$(function () { + const locationDomain = window.location.origin + '/' + window.location.pathname.split('/')[1]; + const fontSizeCss = locationDomain + '/ui-commons/css/accessibility/accessibilityFont.css'; + const fontSizePreference = 'font_size_pref'; + + let increasedFont = localStorage.getItem(fontSizePreference) === 'true'; + + const switchFontSize = () => { + const $stylesheet = $('link#font_size_css'); + + if (increasedFont) { + if (!$stylesheet.length) { + $('', { + id: 'font_size_css', + rel: 'stylesheet', + href: fontSizeCss + }).appendTo('head'); + } + } else { + $stylesheet.remove(); } - } - return false; - }; - var removeLoaded = function (url, type) { - var tag = (type === 'js') ? 'script' : ((type === 'css') ? 'link' : ''); - if (AssetsManager.checkAlreadyLoaded(url, type)) { - $(tag + '[href~="' + url + '"]').remove(); - } + localStorage.setItem(fontSizePreference, increasedFont); }; - AssetsManager.inject = function (id, url, type) { - switch (type) { - case 'js': - createScript(id, url); - break; - - case 'css': - createLink(id, url); - break; - - default: - break; - } + const toggleFontSize = () => { + increasedFont = !increasedFont; + switchFontSize(); }; - AssetsManager.remove = function (url, type) { - removeLoaded(url, type); - }; - - return AssetsManager; - }; - - var initAccessibilityController = function () { - AccessibilityController = {}; - - var AssetsManager = initAssetsManager(); - - var fontSizeFiles = [ - locationDomain + '/ui-commons/css/accessibility/accessibilityFont.css' - ]; - - var darkThemeFiles = [ - locationDomain + '/ui-commons/css/accessibility/accessibilityHC.css' - ]; - - var darkThemeMainClass = 'dark-theme'; - - var doSwitch = function (check, files) { - if (!check) { - for (var i = 0; i < files.length; i++) { - AssetsManager.remove(files[i], 'css'); - } - } else { - for (var i = 0; i < files.length; i++) { - AssetsManager.inject('theme_css_' + i, files[i], 'css'); - } - } - }; - - var doSwitchTheme = function (check, files) { - doSwitch(check, files); - }; - - var savePreference = function (key, value) { - window.localStorage.setItem(key, value); - }; - - var getPreference = function (key) { - var storageValue = window.localStorage.getItem(key); - if (storageValue === null) { - savePreference(key, 'false'); - } - return storageValue === 'true'; - }; - - AccessibilityController.FONT_SIZE_PREF = 'font_size_pref'; - AccessibilityController.HC_THEME_PREF = 'hc_theme_pref'; - - var isIncreasedFont = getPreference(AccessibilityController.FONT_SIZE_PREF); - var isHighContrast = getPreference(AccessibilityController.HC_THEME_PREF); - - AccessibilityController.checkPref = function (pref) { - switch (pref) { - case AccessibilityController.FONT_SIZE_PREF: - doSwitch(isIncreasedFont, fontSizeFiles); - break; - - case AccessibilityController.HC_THEME_PREF: - doSwitchTheme(isHighContrast, darkThemeFiles); - break; - - default: - break; - } - }; - - AccessibilityController.switchIncreasedFont = function () { - isIncreasedFont = !isIncreasedFont; - doSwitch(isIncreasedFont, fontSizeFiles); - savePreference(AccessibilityController.FONT_SIZE_PREF, isIncreasedFont); - }; - - AccessibilityController.switchTheme = function () { - isHighContrast = !isHighContrast; - doSwitchTheme(isHighContrast, darkThemeFiles); - savePreference(AccessibilityController.HC_THEME_PREF, isHighContrast); - }; - - return AccessibilityController; - }; - - var AccessibilityController = initAccessibilityController(); - - AccessibilityController.checkPref(AccessibilityController.FONT_SIZE_PREF); - AccessibilityController.checkPref(AccessibilityController.HC_THEME_PREF); - - $('#change_contrast').off('click.acc_hc'); - $('#change_contrast').on('click.acc_hc', function () { - AccessibilityController.switchTheme(); - return false; - }); - - $('#change_contrast').off('keydown.key_acc_hc keypress.key_acc_hc'); - $('#change_contrast').on('keydown.key_acc_hc keypress.key_acc_hc', function (event) { - // check "enter" key pressed - if (event.which === 13) { - AccessibilityController.switchTheme(); - - event.preventDefault(); - return false; - } - }); - - $('#change_fontSize').off('click.acc_f'); - $('#change_fontSize').on('click.acc_f', function () { - AccessibilityController.switchIncreasedFont(); - return false; - }); - - $('#change_fontSize').off('keydown.key_acc_f keypress.key_acc_f'); - $('#change_fontSize').on('keydown.key_acc_f keypress.key_acc_f', function (event) { - // check "enter" key pressed - if (event.which === 13) { - AccessibilityController.switchIncreasedFont(); - - event.preventDefault(); - return false; - } - }); - - $('body').off('keydown.acc_binding keypress.acc_binding'); - $('body').on('keydown.acc_binding keypress.acc_binding', function (event) { - // alt - shift - F - // alt - shift - H - if (event.altKey && event.shiftKey) { - if (event.keyCode === 72) { - AccessibilityController.switchTheme(); - } else if (event.keyCode === 70) { - AccessibilityController.switchIncreasedFont(); - } - event.preventDefault(); - } - }); + switchFontSize(); + $('#change_fontSize') + .off('.acc_font') + .on('click.acc_font', function () { + toggleFontSize(); + return false; + }); }); diff --git a/client/idrepo/console/src/main/resources/org/apache/syncope/client/console/pages/Login.html b/client/idrepo/console/src/main/resources/org/apache/syncope/client/console/pages/Login.html index 68e6a91e4fb..6516c5fc344 100644 --- a/client/idrepo/console/src/main/resources/org/apache/syncope/client/console/pages/Login.html +++ b/client/idrepo/console/src/main/resources/org/apache/syncope/client/console/pages/Login.html @@ -42,21 +42,79 @@
-
- - +
+
+ + +
+ +
+ + +
+ +
+ + +
+
-
+ +