From 0fed2ee61ea5257985587411942abf5a59d2e64c Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Thu, 9 Nov 2017 12:38:00 +0100 Subject: [PATCH] Fixed css (added grey buttons) + Created js PopUp lib + use in admin list to remove one admin --- public_html/css/constants.scss | 1 + public_html/css/container.scss | 309 +------------------------ public_html/css/global.scss | 324 ++++++++++++++++++++++++++ public_html/css/layout.scss | 104 +++++++++ public_html/css/menu-side.scss | 1 + public_html/css/min/container.css | 308 +------------------------ public_html/css/min/global.css | 331 ++++++++++++++++++++++++++- public_html/css/min/layout.css | 81 +++++++ public_html/css/min/menu-side.css | 1 + public_html/css/min/submenu-side.css | 1 + public_html/css/submenu-side.scss | 1 + public_html/js/lib/min/popup.js | 1 + public_html/js/lib/popup.js | 89 +++++++ public_html/js/lib/sha256-min.js | 6 - public_html/view/js/profile.js | 2 +- public_html/view/js/settings.js | 95 +++++++- public_html/view/view.php | 22 +- 17 files changed, 1045 insertions(+), 632 deletions(-) create mode 100644 public_html/js/lib/min/popup.js create mode 100644 public_html/js/lib/popup.js delete mode 100755 public_html/js/lib/sha256-min.js diff --git a/public_html/css/constants.scss b/public_html/css/constants.scss index f20e774..3ec5603 100755 --- a/public_html/css/constants.scss +++ b/public_html/css/constants.scss @@ -12,6 +12,7 @@ $form-valid-color: #27a560; $form-neutral-color: #2193e6; $form-search-color: #5630ed; $form-invalid-color: #d52918; +$form-grey-color: #8d8d8d; /* GESTION DES LONGUEURS */ diff --git a/public_html/css/container.scss b/public_html/css/container.scss index 90ad969..a81a148 100755 --- a/public_html/css/container.scss +++ b/public_html/css/container.scss @@ -369,6 +369,7 @@ &.list{ float: none; margin-left: 50%; + -webkit-transform: translateX(-50%); transform: translateX(-50%); } @@ -456,314 +457,6 @@ - /* [3] Formulaires - =========================================================*/ - & > section > form, .form{ - display: inline-block; - position: relative; - left: 50%; - margin: .3em 0; - padding: 1em; - - border-radius: 3px; - border-color: $form-invalid-color; - box-shadow: 0 0 1px #b7b7b7; - - background-color: #fff; - - transform: translateX(-50%); - - &#choose-cluster{ - left: 0; - transform: none; - } - - &.valid{ - border-color: $form-valid-color; - } - - &.neutral{ - border-color: $form-neutral-color; - } - - &.search{ - border-color: $form-neutral-color; - } - - // Textes centres - .edit_search_view, - .remove_search_view{ - display: inline-block; - width: 100%; - - text-align: center; - color: #aaaaaa; - - span{ - color: #888888; - } - } - - span.error-msg{ - display: inline-block; - color: #F03C3C; - font-size: 0.7em; - } - - } - - - /* (1) Champs de texte */ - input[type=text], - input[type=mail], - input[type=password], - select, - &.invalid > input[type=text], - &.invalid > input[type=mail], - &.invalid > input[type=password], - &.invalid > select, - input.invalid[type=text], - input.invalid[type=mail], - input.invalid[type=password], - select.invalid{ - display: inline-block; - margin: 1em 0; - padding: .7em 1em; - - border-radius: 3px; - border: 1px solid #d7dde8; - - color: #2f3033; - - transition: border .4s ease-in-out; - - &:focus, - &:hover{ - border-color: $form-invalid-color; - } - } - - - select{ - width: 100%; - display: block; - background: #fff; - - option{ - padding: .5em; - } - } - - - // Champs valides - .valid > input[type=text], - .valid > input[type=mail], - .valid > input[type=password], - .valid > select, - input.valid[type=text], - input.valid[type=mail], - input.valid[type=password], - select.valid{ - &:focus, - &:hover{ - border-color: $form-valid-color; - } - } - - // Champs neutres - .neutral > input[type=text], - .neutral > input[type=mail], - .neutral > input[type=password], - .neutral > select, - input.neutral[type=text], - input.neutral[type=mail], - input.neutral[type=password], - select.neutral{ - &:focus, - &:hover{ - border-color: $form-neutral-color; - } - } - - // Champs neutres - .search > input[type=text], - .search > input[type=mail], - .search > input[type=password], - .search > select, - input.search[type=text], - input.search[type=mail], - input.search[type=password]{ - &:focus, - &:hover{ - border-color: $form-search-color; - } - } - - - - /* (2) Boutons */ - button, - button.invalid, - .invalid > button{ - display: inline-block; - position: relative; - left: 50%; - - padding: .7em 1em; - - border-radius: 3px; - border: 1px solid $form-invalid-color; - - background: $form-invalid-color center center no-repeat; - - color: #fff; - - transition: background .4s ease-in-out; - - transform: translateX(-50%); - - &:hover, - &:focus, - &:disabled{ - background-color: #fff; - color: $form-invalid-color; - } - } - - - // Boutons valides - button.valid, - .valid > button{ - border-color: $form-valid-color; - - background-color: $form-valid-color; - - &:hover, - &:focus, - &:disabled{ - background-color: #fff; - color: $form-valid-color; - } - } - - // Boutons neutres - button.neutral, - .neutral > button{ - border-color: $form-neutral-color; - - background-color: $form-neutral-color; - - &:hover, - &:focus, - &:disabled{ - background-color: #fff; - color: $form-neutral-color; - } - } - - // Boutons recherche - button.search, - .search > button{ - border-color: $form-search-color; - - background-color: $form-search-color; - - &:hover, - &:focus, - &:disabled{ - background-color: #fff; - color: $form-search-color; - } - } - - - // Boutons quand action validee - .invalid > button.active, - button.invalid.active, - button.active{ - background-color: #fff; - background-image: url('/src/static/container/active@#{$rd-form-invalid-color}.svg') !important; - background-size: 1em auto; - - color: transparent !important; - } - - - button.valid.active, - .valid > button.active{ - background-image: url('/src/static/container/active@#{$rd-form-valid-color}.svg') !important; - } - button.neutral.active, - .neutral > button.active{ - background-image: url('/src/static/container/active@#{$rd-form-neutral-color}.svg') !important; - } - button.search.active, - .search > button.active{ - background-image: url('/src/static/container/active@#{$rd-form-search-color}.svg') !important; - } - - - - // "OU" separant les boutons - hr.OR[data-label]{ - display: block; - position: relative; - width: 100%; - height: 0; - - border: 0; - border-bottom: 1px dashed $form-invalid-color; - - &:before{ - content: attr(data-label); - display: inline-block; - position: relative; - top: 50%; - left: 50%; - padding: 0 1em; - - background-color: #fff; - - color: $form-invalid-color; - - transform: translateX(-50%) translatey(-50%); - } - - } - - // "OU" valide - .valid > hr.OR, - hr.OR.valid{ - border-bottom: 1px dashed $form-valid-color; - &:before{ - color: $form-valid-color; - } - - } - - // "OU" neutre - .neutral > hr.OR, - hr.OR.neutral{ - border-bottom: 1px dashed $form-neutral-color; - &:before{ - color: $form-neutral-color; - } - - } - - // "OU" recherche - .search > hr.OR, - hr.OR.search{ - border-bottom: 1px dashed $form-search-color; - &:before{ - color: $form-search-color; - } - - } - - - - } diff --git a/public_html/css/global.scss b/public_html/css/global.scss index e69de29..fdd2df4 100755 --- a/public_html/css/global.scss +++ b/public_html/css/global.scss @@ -0,0 +1,324 @@ +@import 'constants'; + +/* [3] Formulaires +=========================================================*/ +section > form, .form{ + display: inline-block; + position: relative; + left: 50%; + margin: .3em 0; + padding: 1em; + + border-radius: 3px; + border-color: $form-invalid-color; + box-shadow: 0 0 1px #b7b7b7; + + background-color: #fff; + + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + + &#choose-cluster{ + left: 0; + -webkit-transform: none; + transform: none; + } + + &.valid{ + border-color: $form-valid-color; + } + + &.neutral{ + border-color: $form-neutral-color; + } + + &.search{ + border-color: $form-neutral-color; + } + + // Textes centres + .edit_search_view, + .remove_search_view{ + display: inline-block; + width: 100%; + + text-align: center; + color: #aaaaaa; + + span{ + color: #888888; + } + } + + span.error-msg{ + display: inline-block; + color: #F03C3C; + font-size: 0.7em; + } + +} + + +/* (1) Champs de texte */ +input[type=text], +input[type=mail], +input[type=password], +select, +.invalid > input[type=text], +.invalid > input[type=mail], +.invalid > input[type=password], +.invalid > select, +input.invalid[type=text], +input.invalid[type=mail], +input.invalid[type=password], +select.invalid{ + display: inline-block; + margin: 1em 0; + padding: .7em 1em; + + border-radius: 3px; + border: 1px solid #d7dde8; + + color: #2f3033; + + transition: border .4s ease-in-out; + + &:focus, + &:hover{ + border-color: $form-invalid-color; + } +} + + +select{ + width: 100%; + display: block; + background: #fff; + + option{ + padding: .5em; + } +} + + +// Champs valides +.valid > input[type=text], +.valid > input[type=mail], +.valid > input[type=password], +.valid > select, +input.valid[type=text], +input.valid[type=mail], +input.valid[type=password], +select.valid{ + &:focus, + &:hover{ + border-color: $form-valid-color; + } +} + +// Champs neutres +.neutral > input[type=text], +.neutral > input[type=mail], +.neutral > input[type=password], +.neutral > select, +input.neutral[type=text], +input.neutral[type=mail], +input.neutral[type=password], +select.neutral{ + &:focus, + &:hover{ + border-color: $form-neutral-color; + } +} + +// Champs neutres +.search > input[type=text], +.search > input[type=mail], +.search > input[type=password], +.search > select, +input.search[type=text], +input.search[type=mail], +input.search[type=password]{ + &:focus, + &:hover{ + border-color: $form-search-color; + } +} + + + +/* (2) Boutons */ +button, +button.invalid, +.invalid > button{ + display: inline-block; + position: relative; + left: 50%; + + padding: .7em 1em; + + border-radius: 3px; + border: 1px solid $form-invalid-color; + + background: $form-invalid-color center center no-repeat; + + color: #fff; + + transition: background .4s ease-in-out; + + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + + &:hover, + &:focus, + &:disabled{ + background-color: #fff; + color: $form-invalid-color; + } +} + +// Boutons grisés +button.grey, +.grey > button{ + border-color: $form-grey-color; + + background-color: $form-grey-color; + + &:hover, + &:focus, + &:disabled{ + background-color: #fff; + color: $form-grey-color; + } +} + +// Boutons valides +button.valid, +.valid > button{ + border-color: $form-valid-color; + + background-color: $form-valid-color; + + &:hover, + &:focus, + &:disabled{ + background-color: #fff; + color: $form-valid-color; + } +} + +// Boutons neutres +button.neutral, +.neutral > button{ + border-color: $form-neutral-color; + + background-color: $form-neutral-color; + + &:hover, + &:focus, + &:disabled{ + background-color: #fff; + color: $form-neutral-color; + } +} + +// Boutons recherche +button.search, +.search > button{ + border-color: $form-search-color; + + background-color: $form-search-color; + + &:hover, + &:focus, + &:disabled{ + background-color: #fff; + color: $form-search-color; + } +} + + +// Boutons quand action validee +.invalid > button.active, +button.invalid.active, +button.active{ + background-color: #fff; + background-image: url('/src/static/container/active@#{$rd-form-invalid-color}.svg') !important; + background-size: 1em auto; + + color: transparent !important; +} + + +button.valid.active, +.valid > button.active{ + background-image: url('/src/static/container/active@#{$rd-form-valid-color}.svg') !important; +} +button.neutral.active, +.neutral > button.active{ + background-image: url('/src/static/container/active@#{$rd-form-neutral-color}.svg') !important; +} +button.search.active, +.search > button.active{ + background-image: url('/src/static/container/active@#{$rd-form-search-color}.svg') !important; +} + + + +// "OU" separant les boutons +hr.OR[data-label]{ + display: block; + position: relative; + width: 100%; + height: 0; + + border: 0; + border-bottom: 1px dashed $form-invalid-color; + + &:before{ + content: attr(data-label); + display: inline-block; + position: relative; + top: 50%; + left: 50%; + padding: 0 1em; + + background-color: #fff; + + color: $form-invalid-color; + + -webkit-transform: translateX(-50%) translatey(-50%); + transform: translateX(-50%) translatey(-50%); + } + +} + +// "OU" valide +.valid > hr.OR, +hr.OR.valid{ + border-bottom: 1px dashed $form-valid-color; + &:before{ + color: $form-valid-color; + } + +} + +// "OU" neutre +.neutral > hr.OR, +hr.OR.neutral{ + border-bottom: 1px dashed $form-neutral-color; + &:before{ + color: $form-neutral-color; + } + +} + +// "OU" recherche +.search > hr.OR, +hr.OR.search{ + border-bottom: 1px dashed $form-search-color; + &:before{ + color: $form-search-color; + } + +} \ No newline at end of file diff --git a/public_html/css/layout.scss b/public_html/css/layout.scss index 8aa7888..964683f 100755 --- a/public_html/css/layout.scss +++ b/public_html/css/layout.scss @@ -71,4 +71,108 @@ overflow-x: none; overflow-y: auto; } + + + + + + /* [4] Popup background - window + ==========================================*/ + & > #POPUP{ + display: none; + position: fixed; + top: 50%; + left: 50%; + min-width: 50%; + max-width: 50%; + min-height: 30%; + max-height: 50%; + + border-radius: 5px; + + background: #fff; + color: #34495e; + + box-shadow: -10px 10px 0 rgba(26, 33, 40, .8); + + -webkit-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + + z-index: 101; + + &.active{ + display: block; + } + + + & > .header{ + display: block; + position: relative; + width: calc( 100% - 2*1em ); + + padding: 1em; + + border-radius: 5px 5px 0 0; + border-bottom: 2px solid #ecf0f1; + + font-size: 1.1em; + font-weight: bold; + } + + & > .body{ + display: block; + position: relative; + width: calc( 100% - 2*1em ); + + padding: 1em; + + b, strong{ + color: #5630ed; + } + } + + & > .footer{ + display: flex; + position: relative; + width: calc( 100% - 2*1em ); + + padding: 1em; + + background-color: #ecf0f1; + + border-radius: 0 0 5px 5px; + + // flex props. + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-end; + + & button{ + left: auto; + margin: 0 1em; + -webkit-transform: none; + transform: none; + } + + } + } + + + & > #POPUP-BG{ + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + + background: #29333f; + background: rgba(41, 51, 63, .8); + + z-index: 100; + } + + & #POPUP.active ~ #POPUP-BG{ + display: block; + } } diff --git a/public_html/css/menu-side.scss b/public_html/css/menu-side.scss index 90df718..aa90efe 100755 --- a/public_html/css/menu-side.scss +++ b/public_html/css/menu-side.scss @@ -87,6 +87,7 @@ box-shadow: inset 0 0 .5em #eee; &:hover:after{ + -webkit-transform: scaleX(1); transform: scaleX(1); color: #fff; } diff --git a/public_html/css/min/container.css b/public_html/css/min/container.css index a89c6cb..35f5a2f 100644 --- a/public_html/css/min/container.css +++ b/public_html/css/min/container.css @@ -11,10 +11,6 @@ =========================================================*/ /* [2-2] INLINE-ROW pour afficher des lignes =========================================================*/ - /* [3] Formulaires - =========================================================*/ - /* (1) Champs de texte */ - /* (2) Boutons */ } #WRAPPER > #CONTAINER > section { @@ -576,6 +572,7 @@ #WRAPPER > #CONTAINER > section > .inline-row .link_remove.list { float: none; margin-left: 50%; + -webkit-transform: translateX(-50%); transform: translateX(-50%); } @@ -642,309 +639,6 @@ width: 5em; } -#WRAPPER > #CONTAINER > section > form, #WRAPPER > #CONTAINER .form { - display: inline-block; - position: relative; - left: 50%; - margin: .3em 0; - padding: 1em; - border-radius: 3px; - border-color: #d52918; - box-shadow: 0 0 1px #b7b7b7; - background-color: #fff; - transform: translateX(-50%); -} - -#WRAPPER > #CONTAINER > section > form#choose-cluster, #WRAPPER > #CONTAINER .form#choose-cluster { - left: 0; - transform: none; -} - -#WRAPPER > #CONTAINER > section > form.valid, #WRAPPER > #CONTAINER .form.valid { - border-color: #27a560; -} - -#WRAPPER > #CONTAINER > section > form.neutral, #WRAPPER > #CONTAINER .form.neutral { - border-color: #2193e6; -} - -#WRAPPER > #CONTAINER > section > form.search, #WRAPPER > #CONTAINER .form.search { - border-color: #2193e6; -} - -#WRAPPER > #CONTAINER > section > form .edit_search_view, -#WRAPPER > #CONTAINER > section > form .remove_search_view, #WRAPPER > #CONTAINER .form .edit_search_view, -#WRAPPER > #CONTAINER .form .remove_search_view { - display: inline-block; - width: 100%; - text-align: center; - color: #aaaaaa; -} - -#WRAPPER > #CONTAINER > section > form .edit_search_view span, -#WRAPPER > #CONTAINER > section > form .remove_search_view span, #WRAPPER > #CONTAINER .form .edit_search_view span, -#WRAPPER > #CONTAINER .form .remove_search_view span { - color: #888888; -} - -#WRAPPER > #CONTAINER > section > form span.error-msg, #WRAPPER > #CONTAINER .form span.error-msg { - display: inline-block; - color: #F03C3C; - font-size: 0.7em; -} - -#WRAPPER > #CONTAINER input[type=text], -#WRAPPER > #CONTAINER input[type=mail], -#WRAPPER > #CONTAINER input[type=password], -#WRAPPER > #CONTAINER select, -#WRAPPER > #CONTAINER.invalid > input[type=text], -#WRAPPER > #CONTAINER.invalid > input[type=mail], -#WRAPPER > #CONTAINER.invalid > input[type=password], -#WRAPPER > #CONTAINER.invalid > select, -#WRAPPER > #CONTAINER input.invalid[type=text], -#WRAPPER > #CONTAINER input.invalid[type=mail], -#WRAPPER > #CONTAINER input.invalid[type=password], -#WRAPPER > #CONTAINER select.invalid { - display: inline-block; - margin: 1em 0; - padding: .7em 1em; - border-radius: 3px; - border: 1px solid #d7dde8; - color: #2f3033; - transition: border .4s ease-in-out; -} - -#WRAPPER > #CONTAINER input[type=text]:focus, #WRAPPER > #CONTAINER input[type=text]:hover, -#WRAPPER > #CONTAINER input[type=mail]:focus, -#WRAPPER > #CONTAINER input[type=mail]:hover, -#WRAPPER > #CONTAINER input[type=password]:focus, -#WRAPPER > #CONTAINER input[type=password]:hover, -#WRAPPER > #CONTAINER select:focus, -#WRAPPER > #CONTAINER select:hover, -#WRAPPER > #CONTAINER.invalid > input[type=text]:focus, -#WRAPPER > #CONTAINER.invalid > input[type=text]:hover, -#WRAPPER > #CONTAINER.invalid > input[type=mail]:focus, -#WRAPPER > #CONTAINER.invalid > input[type=mail]:hover, -#WRAPPER > #CONTAINER.invalid > input[type=password]:focus, -#WRAPPER > #CONTAINER.invalid > input[type=password]:hover, -#WRAPPER > #CONTAINER.invalid > select:focus, -#WRAPPER > #CONTAINER.invalid > select:hover, -#WRAPPER > #CONTAINER input.invalid[type=text]:focus, -#WRAPPER > #CONTAINER input.invalid[type=text]:hover, -#WRAPPER > #CONTAINER input.invalid[type=mail]:focus, -#WRAPPER > #CONTAINER input.invalid[type=mail]:hover, -#WRAPPER > #CONTAINER input.invalid[type=password]:focus, -#WRAPPER > #CONTAINER input.invalid[type=password]:hover, -#WRAPPER > #CONTAINER select.invalid:focus, -#WRAPPER > #CONTAINER select.invalid:hover { - border-color: #d52918; -} - -#WRAPPER > #CONTAINER select { - width: 100%; - display: block; - background: #fff; -} - -#WRAPPER > #CONTAINER select option { - padding: .5em; -} - -#WRAPPER > #CONTAINER .valid > input[type=text]:focus, #WRAPPER > #CONTAINER .valid > input[type=text]:hover, -#WRAPPER > #CONTAINER .valid > input[type=mail]:focus, -#WRAPPER > #CONTAINER .valid > input[type=mail]:hover, -#WRAPPER > #CONTAINER .valid > input[type=password]:focus, -#WRAPPER > #CONTAINER .valid > input[type=password]:hover, -#WRAPPER > #CONTAINER .valid > select:focus, -#WRAPPER > #CONTAINER .valid > select:hover, -#WRAPPER > #CONTAINER input.valid[type=text]:focus, -#WRAPPER > #CONTAINER input.valid[type=text]:hover, -#WRAPPER > #CONTAINER input.valid[type=mail]:focus, -#WRAPPER > #CONTAINER input.valid[type=mail]:hover, -#WRAPPER > #CONTAINER input.valid[type=password]:focus, -#WRAPPER > #CONTAINER input.valid[type=password]:hover, -#WRAPPER > #CONTAINER select.valid:focus, -#WRAPPER > #CONTAINER select.valid:hover { - border-color: #27a560; -} - -#WRAPPER > #CONTAINER .neutral > input[type=text]:focus, #WRAPPER > #CONTAINER .neutral > input[type=text]:hover, -#WRAPPER > #CONTAINER .neutral > input[type=mail]:focus, -#WRAPPER > #CONTAINER .neutral > input[type=mail]:hover, -#WRAPPER > #CONTAINER .neutral > input[type=password]:focus, -#WRAPPER > #CONTAINER .neutral > input[type=password]:hover, -#WRAPPER > #CONTAINER .neutral > select:focus, -#WRAPPER > #CONTAINER .neutral > select:hover, -#WRAPPER > #CONTAINER input.neutral[type=text]:focus, -#WRAPPER > #CONTAINER input.neutral[type=text]:hover, -#WRAPPER > #CONTAINER input.neutral[type=mail]:focus, -#WRAPPER > #CONTAINER input.neutral[type=mail]:hover, -#WRAPPER > #CONTAINER input.neutral[type=password]:focus, -#WRAPPER > #CONTAINER input.neutral[type=password]:hover, -#WRAPPER > #CONTAINER select.neutral:focus, -#WRAPPER > #CONTAINER select.neutral:hover { - border-color: #2193e6; -} - -#WRAPPER > #CONTAINER .search > input[type=text]:focus, #WRAPPER > #CONTAINER .search > input[type=text]:hover, -#WRAPPER > #CONTAINER .search > input[type=mail]:focus, -#WRAPPER > #CONTAINER .search > input[type=mail]:hover, -#WRAPPER > #CONTAINER .search > input[type=password]:focus, -#WRAPPER > #CONTAINER .search > input[type=password]:hover, -#WRAPPER > #CONTAINER .search > select:focus, -#WRAPPER > #CONTAINER .search > select:hover, -#WRAPPER > #CONTAINER input.search[type=text]:focus, -#WRAPPER > #CONTAINER input.search[type=text]:hover, -#WRAPPER > #CONTAINER input.search[type=mail]:focus, -#WRAPPER > #CONTAINER input.search[type=mail]:hover, -#WRAPPER > #CONTAINER input.search[type=password]:focus, -#WRAPPER > #CONTAINER input.search[type=password]:hover { - border-color: #5630ed; -} - -#WRAPPER > #CONTAINER button, -#WRAPPER > #CONTAINER button.invalid, -#WRAPPER > #CONTAINER .invalid > button { - display: inline-block; - position: relative; - left: 50%; - padding: .7em 1em; - border-radius: 3px; - border: 1px solid #d52918; - background: #d52918 center center no-repeat; - color: #fff; - transition: background .4s ease-in-out; - transform: translateX(-50%); -} - -#WRAPPER > #CONTAINER button:hover, #WRAPPER > #CONTAINER button:focus, #WRAPPER > #CONTAINER button:disabled, -#WRAPPER > #CONTAINER button.invalid:hover, -#WRAPPER > #CONTAINER button.invalid:focus, -#WRAPPER > #CONTAINER button.invalid:disabled, -#WRAPPER > #CONTAINER .invalid > button:hover, -#WRAPPER > #CONTAINER .invalid > button:focus, -#WRAPPER > #CONTAINER .invalid > button:disabled { - background-color: #fff; - color: #d52918; -} - -#WRAPPER > #CONTAINER button.valid, -#WRAPPER > #CONTAINER .valid > button { - border-color: #27a560; - background-color: #27a560; -} - -#WRAPPER > #CONTAINER button.valid:hover, #WRAPPER > #CONTAINER button.valid:focus, #WRAPPER > #CONTAINER button.valid:disabled, -#WRAPPER > #CONTAINER .valid > button:hover, -#WRAPPER > #CONTAINER .valid > button:focus, -#WRAPPER > #CONTAINER .valid > button:disabled { - background-color: #fff; - color: #27a560; -} - -#WRAPPER > #CONTAINER button.neutral, -#WRAPPER > #CONTAINER .neutral > button { - border-color: #2193e6; - background-color: #2193e6; -} - -#WRAPPER > #CONTAINER button.neutral:hover, #WRAPPER > #CONTAINER button.neutral:focus, #WRAPPER > #CONTAINER button.neutral:disabled, -#WRAPPER > #CONTAINER .neutral > button:hover, -#WRAPPER > #CONTAINER .neutral > button:focus, -#WRAPPER > #CONTAINER .neutral > button:disabled { - background-color: #fff; - color: #2193e6; -} - -#WRAPPER > #CONTAINER button.search, -#WRAPPER > #CONTAINER .search > button { - border-color: #5630ed; - background-color: #5630ed; -} - -#WRAPPER > #CONTAINER button.search:hover, #WRAPPER > #CONTAINER button.search:focus, #WRAPPER > #CONTAINER button.search:disabled, -#WRAPPER > #CONTAINER .search > button:hover, -#WRAPPER > #CONTAINER .search > button:focus, -#WRAPPER > #CONTAINER .search > button:disabled { - background-color: #fff; - color: #5630ed; -} - -#WRAPPER > #CONTAINER .invalid > button.active, -#WRAPPER > #CONTAINER button.invalid.active, -#WRAPPER > #CONTAINER button.active { - background-color: #fff; - background-image: url("/src/static/container/active@d52918.svg") !important; - background-size: 1em auto; - color: transparent !important; -} - -#WRAPPER > #CONTAINER button.valid.active, -#WRAPPER > #CONTAINER .valid > button.active { - background-image: url("/src/static/container/active@27a560.svg") !important; -} - -#WRAPPER > #CONTAINER button.neutral.active, -#WRAPPER > #CONTAINER .neutral > button.active { - background-image: url("/src/static/container/active@2193e6.svg") !important; -} - -#WRAPPER > #CONTAINER button.search.active, -#WRAPPER > #CONTAINER .search > button.active { - background-image: url("/src/static/container/active@5630ed.svg") !important; -} - -#WRAPPER > #CONTAINER hr.OR[data-label] { - display: block; - position: relative; - width: 100%; - height: 0; - border: 0; - border-bottom: 1px dashed #d52918; -} - -#WRAPPER > #CONTAINER hr.OR[data-label]:before { - content: attr(data-label); - display: inline-block; - position: relative; - top: 50%; - left: 50%; - padding: 0 1em; - background-color: #fff; - color: #d52918; - transform: translateX(-50%) translatey(-50%); -} - -#WRAPPER > #CONTAINER .valid > hr.OR, -#WRAPPER > #CONTAINER hr.OR.valid { - border-bottom: 1px dashed #27a560; -} - -#WRAPPER > #CONTAINER .valid > hr.OR:before, -#WRAPPER > #CONTAINER hr.OR.valid:before { - color: #27a560; -} - -#WRAPPER > #CONTAINER .neutral > hr.OR, -#WRAPPER > #CONTAINER hr.OR.neutral { - border-bottom: 1px dashed #2193e6; -} - -#WRAPPER > #CONTAINER .neutral > hr.OR:before, -#WRAPPER > #CONTAINER hr.OR.neutral:before { - color: #2193e6; -} - -#WRAPPER > #CONTAINER .search > hr.OR, -#WRAPPER > #CONTAINER hr.OR.search { - border-bottom: 1px dashed #5630ed; -} - -#WRAPPER > #CONTAINER .search > hr.OR:before, -#WRAPPER > #CONTAINER hr.OR.search:before { - color: #5630ed; -} - /* [4] Tableau à cocher =========================================================*/ article.check-table { diff --git a/public_html/css/min/global.css b/public_html/css/min/global.css index 2f9fa79..0cbf149 100755 --- a/public_html/css/min/global.css +++ b/public_html/css/min/global.css @@ -1,3 +1,332 @@ -/* No CSS */ +/* COULEUR DU THEME */ +/* COULEUR DU SOUS-MENU */ +/* COULEUR DES ERREURS */ +/* FORMULAIRES */ +/* GESTION DES LONGUEURS */ +/* [3] Formulaires +=========================================================*/ +section > form, .form { + display: inline-block; + position: relative; + left: 50%; + margin: .3em 0; + padding: 1em; + border-radius: 3px; + border-color: #d52918; + box-shadow: 0 0 1px #b7b7b7; + background-color: #fff; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); +} + +section > form#choose-cluster, .form#choose-cluster { + left: 0; + -webkit-transform: none; + transform: none; +} + +section > form.valid, .form.valid { + border-color: #27a560; +} + +section > form.neutral, .form.neutral { + border-color: #2193e6; +} + +section > form.search, .form.search { + border-color: #2193e6; +} + +section > form .edit_search_view, +section > form .remove_search_view, .form .edit_search_view, +.form .remove_search_view { + display: inline-block; + width: 100%; + text-align: center; + color: #aaaaaa; +} + +section > form .edit_search_view span, +section > form .remove_search_view span, .form .edit_search_view span, +.form .remove_search_view span { + color: #888888; +} + +section > form span.error-msg, .form span.error-msg { + display: inline-block; + color: #F03C3C; + font-size: 0.7em; +} + +/* (1) Champs de texte */ +input[type=text], +input[type=mail], +input[type=password], +select, +.invalid > input[type=text], +.invalid > input[type=mail], +.invalid > input[type=password], +.invalid > select, +input.invalid[type=text], +input.invalid[type=mail], +input.invalid[type=password], +select.invalid { + display: inline-block; + margin: 1em 0; + padding: .7em 1em; + border-radius: 3px; + border: 1px solid #d7dde8; + color: #2f3033; + transition: border .4s ease-in-out; +} + +input[type=text]:focus, input[type=text]:hover, +input[type=mail]:focus, +input[type=mail]:hover, +input[type=password]:focus, +input[type=password]:hover, +select:focus, +select:hover, +.invalid > input[type=text]:focus, +.invalid > input[type=text]:hover, +.invalid > input[type=mail]:focus, +.invalid > input[type=mail]:hover, +.invalid > input[type=password]:focus, +.invalid > input[type=password]:hover, +.invalid > select:focus, +.invalid > select:hover, +input.invalid[type=text]:focus, +input.invalid[type=text]:hover, +input.invalid[type=mail]:focus, +input.invalid[type=mail]:hover, +input.invalid[type=password]:focus, +input.invalid[type=password]:hover, +select.invalid:focus, +select.invalid:hover { + border-color: #d52918; +} + +select { + width: 100%; + display: block; + background: #fff; +} + +select option { + padding: .5em; +} + +.valid > input[type=text]:focus, .valid > input[type=text]:hover, +.valid > input[type=mail]:focus, +.valid > input[type=mail]:hover, +.valid > input[type=password]:focus, +.valid > input[type=password]:hover, +.valid > select:focus, +.valid > select:hover, +input.valid[type=text]:focus, +input.valid[type=text]:hover, +input.valid[type=mail]:focus, +input.valid[type=mail]:hover, +input.valid[type=password]:focus, +input.valid[type=password]:hover, +select.valid:focus, +select.valid:hover { + border-color: #27a560; +} + +.neutral > input[type=text]:focus, .neutral > input[type=text]:hover, +.neutral > input[type=mail]:focus, +.neutral > input[type=mail]:hover, +.neutral > input[type=password]:focus, +.neutral > input[type=password]:hover, +.neutral > select:focus, +.neutral > select:hover, +input.neutral[type=text]:focus, +input.neutral[type=text]:hover, +input.neutral[type=mail]:focus, +input.neutral[type=mail]:hover, +input.neutral[type=password]:focus, +input.neutral[type=password]:hover, +select.neutral:focus, +select.neutral:hover { + border-color: #2193e6; +} + +.search > input[type=text]:focus, .search > input[type=text]:hover, +.search > input[type=mail]:focus, +.search > input[type=mail]:hover, +.search > input[type=password]:focus, +.search > input[type=password]:hover, +.search > select:focus, +.search > select:hover, +input.search[type=text]:focus, +input.search[type=text]:hover, +input.search[type=mail]:focus, +input.search[type=mail]:hover, +input.search[type=password]:focus, +input.search[type=password]:hover { + border-color: #5630ed; +} + +/* (2) Boutons */ +button, +button.invalid, +.invalid > button { + display: inline-block; + position: relative; + left: 50%; + padding: .7em 1em; + border-radius: 3px; + border: 1px solid #d52918; + background: #d52918 center center no-repeat; + color: #fff; + transition: background .4s ease-in-out; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); +} + +button:hover, button:focus, button:disabled, +button.invalid:hover, +button.invalid:focus, +button.invalid:disabled, +.invalid > button:hover, +.invalid > button:focus, +.invalid > button:disabled { + background-color: #fff; + color: #d52918; +} + +button.grey, +.grey > button { + border-color: #8d8d8d; + background-color: #8d8d8d; +} + +button.grey:hover, button.grey:focus, button.grey:disabled, +.grey > button:hover, +.grey > button:focus, +.grey > button:disabled { + background-color: #fff; + color: #8d8d8d; +} + +button.valid, +.valid > button { + border-color: #27a560; + background-color: #27a560; +} + +button.valid:hover, button.valid:focus, button.valid:disabled, +.valid > button:hover, +.valid > button:focus, +.valid > button:disabled { + background-color: #fff; + color: #27a560; +} + +button.neutral, +.neutral > button { + border-color: #2193e6; + background-color: #2193e6; +} + +button.neutral:hover, button.neutral:focus, button.neutral:disabled, +.neutral > button:hover, +.neutral > button:focus, +.neutral > button:disabled { + background-color: #fff; + color: #2193e6; +} + +button.search, +.search > button { + border-color: #5630ed; + background-color: #5630ed; +} + +button.search:hover, button.search:focus, button.search:disabled, +.search > button:hover, +.search > button:focus, +.search > button:disabled { + background-color: #fff; + color: #5630ed; +} + +.invalid > button.active, +button.invalid.active, +button.active { + background-color: #fff; + background-image: url("/src/static/container/active@d52918.svg") !important; + background-size: 1em auto; + color: transparent !important; +} + +button.valid.active, +.valid > button.active { + background-image: url("/src/static/container/active@27a560.svg") !important; +} + +button.neutral.active, +.neutral > button.active { + background-image: url("/src/static/container/active@2193e6.svg") !important; +} + +button.search.active, +.search > button.active { + background-image: url("/src/static/container/active@5630ed.svg") !important; +} + +hr.OR[data-label] { + display: block; + position: relative; + width: 100%; + height: 0; + border: 0; + border-bottom: 1px dashed #d52918; +} + +hr.OR[data-label]:before { + content: attr(data-label); + display: inline-block; + position: relative; + top: 50%; + left: 50%; + padding: 0 1em; + background-color: #fff; + color: #d52918; + -webkit-transform: translateX(-50%) translatey(-50%); + transform: translateX(-50%) translatey(-50%); +} + +.valid > hr.OR, +hr.OR.valid { + border-bottom: 1px dashed #27a560; +} + +.valid > hr.OR:before, +hr.OR.valid:before { + color: #27a560; +} + +.neutral > hr.OR, +hr.OR.neutral { + border-bottom: 1px dashed #2193e6; +} + +.neutral > hr.OR:before, +hr.OR.neutral:before { + color: #2193e6; +} + +.search > hr.OR, +hr.OR.search { + border-bottom: 1px dashed #5630ed; +} + +.search > hr.OR:before, +hr.OR.search:before { + color: #5630ed; +} + /*# sourceMappingURL= global.css.map */ \ No newline at end of file diff --git a/public_html/css/min/layout.css b/public_html/css/min/layout.css index d737097..58b342d 100755 --- a/public_html/css/min/layout.css +++ b/public_html/css/min/layout.css @@ -18,6 +18,8 @@ ==========================================*/ /* [3] Container de la page ==========================================*/ + /* [4] Popup background - window + ==========================================*/ } #WRAPPER > #HEADER { @@ -58,6 +60,85 @@ overflow-x: none; overflow-y: auto; } + +#WRAPPER > #POPUP { + display: none; + position: fixed; + top: 50%; + left: 50%; + min-width: 50%; + max-width: 50%; + min-height: 30%; + max-height: 50%; + border-radius: 5px; + background: #fff; + color: #34495e; + box-shadow: -10px 10px 0 rgba(26, 33, 40, 0.8); + -webkit-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + z-index: 101; +} + +#WRAPPER > #POPUP.active { + display: block; +} + +#WRAPPER > #POPUP > .header { + display: block; + position: relative; + width: calc( 100% - 2*1em); + padding: 1em; + border-radius: 5px 5px 0 0; + border-bottom: 2px solid #ecf0f1; + font-size: 1.1em; + font-weight: bold; +} + +#WRAPPER > #POPUP > .body { + display: block; + position: relative; + width: calc( 100% - 2*1em); + padding: 1em; +} + +#WRAPPER > #POPUP > .body b, #WRAPPER > #POPUP > .body strong { + color: #5630ed; +} + +#WRAPPER > #POPUP > .footer { + display: flex; + position: relative; + width: calc( 100% - 2*1em); + padding: 1em; + background-color: #ecf0f1; + border-radius: 0 0 5px 5px; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-end; +} + +#WRAPPER > #POPUP > .footer button { + left: auto; + margin: 0 1em; + -webkit-transform: none; + transform: none; +} + +#WRAPPER > #POPUP-BG { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #29333f; + background: rgba(41, 51, 63, 0.8); + z-index: 100; +} + +#WRAPPER #POPUP.active ~ #POPUP-BG { + display: block; +} /*# sourceMappingURL= layout.css.map */ \ No newline at end of file diff --git a/public_html/css/min/menu-side.css b/public_html/css/min/menu-side.css index 48af9ad..3362ead 100755 --- a/public_html/css/min/menu-side.css +++ b/public_html/css/min/menu-side.css @@ -66,6 +66,7 @@ } #WRAPPER > #MENU-SIDE > span[data-link]:hover:hover:after, #WRAPPER > #MENU-SIDE > span[data-link].active:hover:after { + -webkit-transform: scaleX(1); transform: scaleX(1); color: #fff; } diff --git a/public_html/css/min/submenu-side.css b/public_html/css/min/submenu-side.css index 7e333c1..ddcef49 100755 --- a/public_html/css/min/submenu-side.css +++ b/public_html/css/min/submenu-side.css @@ -30,6 +30,7 @@ top: 50%; width: 1em; height: 1em; + -webkit-transform: translateY(-50%); transform: translateY(-50%); } diff --git a/public_html/css/submenu-side.scss b/public_html/css/submenu-side.scss index 4b95ad9..d06a790 100755 --- a/public_html/css/submenu-side.scss +++ b/public_html/css/submenu-side.scss @@ -36,6 +36,7 @@ width: 1em; height: 1em; + -webkit-transform: translateY(-50%); transform: translateY(-50%); // Coloration pour tous les elements du svg diff --git a/public_html/js/lib/min/popup.js b/public_html/js/lib/min/popup.js new file mode 100644 index 0000000..0bf8a55 --- /dev/null +++ b/public_html/js/lib/min/popup.js @@ -0,0 +1 @@ +function Popup(){this.element={frame:document.querySelector("#POPUP"),header:document.querySelector("#POPUP .header"),body:document.querySelector("#POPUP .body"),footer:document.querySelector("#POPUP .footer")}}Popup.prototype={element:{frame:null,header:null,body:null,footer:null},show:function(){return this.element.frame.addClass("active"),this},hide:function(){return this.element.frame.remClass("active"),this},ask:function(e,t){function n(e){this.hide(),t("grey"!=e.target.className)}if(!(e instanceof Object))return null;if(null==e.title)return null;if(null==e.content)return null;if(null==e.type)return null;if(null==e.action)return null;if(!(t instanceof Function))return null;this.element.header.innerHTML=e.title,this.element.body.innerHTML=e.content;var r=document.createElement("button");r.className=e.type,r.innerHTML=e.action;var l=document.createElement("button");return l.className="grey",l.innerHTML="Annuler",r.addEventListener("click",n.bind(this),!1),l.addEventListener("click",n.bind(this),!1),this.element.footer.innerHTML="",this.element.footer.appendChild(r),this.element.footer.appendChild(l),this.show()}}; \ No newline at end of file diff --git a/public_html/js/lib/popup.js b/public_html/js/lib/popup.js new file mode 100644 index 0000000..ccc4f71 --- /dev/null +++ b/public_html/js/lib/popup.js @@ -0,0 +1,89 @@ +function Popup(){ + + this.element = { + frame: document.querySelector('#POPUP'), + header: document.querySelector('#POPUP .header'), + body: document.querySelector('#POPUP .body'), + footer: document.querySelector('#POPUP .footer') + }; + +} + +Popup.prototype = { + + element: { frame: null, header: null, body: null, footer: null }, + + show: function(){ + this.element.frame.addClass('active'); + return this; + }, + + hide: function(){ + this.element.frame.remClass('active'); + return this; + }, + + ask: function(pObject, pHandler){ + /* (1) Check argument + ---------------------------------------------------------*/ + /* (1) Check type */ + if( !(pObject instanceof Object) ) + return null; + + /* (2) Check Title */ + if( pObject.title == null ) + return null; + + /* (3) Check Content */ + if( pObject.content == null ) + return null; + + /* (4) Check Type */ + if( pObject.type == null ) + return null; + + /* (5) Check Action */ + if( pObject.action == null ) + return null; + + /* (6) Check handler */ + if( !(pHandler instanceof Function) ) + return null; + + + /* (2) Set the content + ---------------------------------------------------------*/ + /* (1) Title */ + this.element.header.innerHTML = pObject.title; + + /* (2) Content */ + this.element.body.innerHTML = pObject.content; + + + /* (3) Set the buttons (action) + ---------------------------------------------------------*/ + /* (1) Define action button */ + var action_btn = document.createElement('button'); + action_btn.className = pObject.type; + action_btn.innerHTML = pObject.action; + + /* (2) Define cancel button */ + var cancel_btn = document.createElement('button'); + cancel_btn.className = 'grey'; + cancel_btn.innerHTML = 'Annuler'; + + /* (3) Bind events */ + function handler(e){ this.hide(); pHandler( e.target.className != 'grey' ); } + + action_btn.addEventListener('click', handler.bind(this), false); + cancel_btn.addEventListener('click', handler.bind(this), false); + + /* (4) Add elements to the object */ + this.element.footer.innerHTML = ''; + this.element.footer.appendChild(action_btn); + this.element.footer.appendChild(cancel_btn); + + return this.show(); + } + +}; \ No newline at end of file diff --git a/public_html/js/lib/sha256-min.js b/public_html/js/lib/sha256-min.js deleted file mode 100755 index 9bd92d3..0000000 --- a/public_html/js/lib/sha256-min.js +++ /dev/null @@ -1,6 +0,0 @@ -var sha256={hash:function(a){a=a.utf8Encode();var d=[1116352408,1899447441,3049323471,3921009573,961987163,1508970993,2453635748,2870763221,3624381080,310598401,607225278,1426881987,1925078388,2162078206,2614888103,3248222580,3835390401,4022224774,264347078,604807628,770255983,1249150122,1555081692,1996064986,2554220882,2821834349,2952996808,3210313671,3336571891,3584528711,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,2177026350,2456956037,2730485921,2820302411, -3259730800,3345764771,3516065817,3600352804,4094571909,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,2227730452,2361852424,2428436474,2756734187,3204031479,3329325298],b=[1779033703,3144134277,1013904242,2773480762,1359893119,2600822924,528734635,1541459225];a+=String.fromCharCode(128);for(var g=Math.ceil((a.length/4+2)/16),h=Array(g),f=0;fe;e++)h[f][e]=a.charCodeAt(64*f+4*e)<<24|a.charCodeAt(64* -f+4*e+1)<<16|a.charCodeAt(64*f+4*e+2)<<8|a.charCodeAt(64*f+4*e+3)}h[g-1][14]=8*(a.length-1)/Math.pow(2,32);h[g-1][14]=Math.floor(h[g-1][14]);h[g-1][15]=8*(a.length-1)&4294967295;a=Array(64);for(var l,m,q,k,n,p,r,f=0;fc;c++)a[c]=h[f][c];for(c=16;64>c;c++)a[c]=sha256.\u03c31(a[c-2])+a[c-7]+sha256.\u03c30(a[c-15])+a[c-16]&4294967295;e=b[0];l=b[1];m=b[2];q=b[3];k=b[4];n=b[5];p=b[6];r=b[7];for(c=0;64>c;c++){var t=r+sha256.\u03a31(k)+sha256.Ch(k,n,p)+d[c]+a[c],u=sha256.\u03a30(e)+ -sha256.Maj(e,l,m);r=p;p=n;n=k;k=q+t&4294967295;q=m;m=l;l=e;e=t+u&4294967295}b[0]=b[0]+e&4294967295;b[1]=b[1]+l&4294967295;b[2]=b[2]+m&4294967295;b[3]=b[3]+q&4294967295;b[4]=b[4]+k&4294967295;b[5]=b[5]+n&4294967295;b[6]=b[6]+p&4294967295;b[7]=b[7]+r&4294967295}return sha256.toHexStr(b[0])+sha256.toHexStr(b[1])+sha256.toHexStr(b[2])+sha256.toHexStr(b[3])+sha256.toHexStr(b[4])+sha256.toHexStr(b[5])+sha256.toHexStr(b[6])+sha256.toHexStr(b[7])},ROTR:function(a,d){return d>>>a|d<<32-a},"\u03a30":function(a){return sha256.ROTR(2, -a)^sha256.ROTR(13,a)^sha256.ROTR(22,a)},"\u03a31":function(a){return sha256.ROTR(6,a)^sha256.ROTR(11,a)^sha256.ROTR(25,a)},"\u03c30":function(a){return sha256.ROTR(7,a)^sha256.ROTR(18,a)^a>>>3},"\u03c31":function(a){return sha256.ROTR(17,a)^sha256.ROTR(19,a)^a>>>10},Ch:function(a,d,b){return a&d^~a&b},Maj:function(a,d,b){return a&d^a&b^d&b},toHexStr:function(a){for(var d="",b,g=7;0<=g;g--)b=a>>>4*g&15,d+=b.toString(16);return d}}; -"undefined"==typeof String.prototype.utf8Encode&&(String.prototype.utf8Encode=function(){return unescape(encodeURIComponent(this))});"undefined"==typeof String.prototype.utf8Decode&&(String.prototype.utf8Decode=function(){try{return decodeURIComponent(escape(this))}catch(a){return this}});"undefined"!=typeof module&&module.exports&&(module.exports=sha256);"function"==typeof define&&define.amd&&define([],function(){return sha256}); diff --git a/public_html/view/js/profile.js b/public_html/view/js/profile.js index cdd16dc..5ad4dd0 100755 --- a/public_html/view/js/profile.js +++ b/public_html/view/js/profile.js @@ -56,7 +56,7 @@ if( section.password.element != null ){ section.password.errmsg.confirm.innerHTML = ''; var request = { - path: 'authenticationDefault/update_admin', // On veut modifier le mot de passe admin + path: 'adminDefault/update', // On veut modifier le mot de passe admin old: section.password.input.old.value, new: section.password.input.new.value, confirm: section.password.input.confirm.value diff --git a/public_html/view/js/settings.js b/public_html/view/js/settings.js index 3aa8dd4..4ac2cdf 100755 --- a/public_html/view/js/settings.js +++ b/public_html/view/js/settings.js @@ -10,6 +10,11 @@ var section = { element: document.querySelector('#CONTAINER > section[data-sublink="password"]') }, + admins: { + text: '#CONTAINER > section[data-sublink="admins"] ', + element: document.querySelector('#CONTAINER > section[data-sublink="admins"]') + }, + admin: { text: '#CONTAINER > section[data-sublink="admin"] ', element: document.querySelector('#CONTAINER > section[data-sublink="admin"]') @@ -99,8 +104,94 @@ if( section.password.element != null ){ +/* [3] admins -> Liste des administrateurs +=========================================================*/ +if( section.admins.element != null ){ -/* [3] admin -> Création d'administrateur + /* (1) Fetch the remove links + ---------------------------------------------------------*/ + section.admins.link = {}; + section.admins.link.remove = document.querySelectorAll(section.admins.text + '.link_remove[data-admin]'); + + /* (2) Define admin-remove function + ---------------------------------------------------------*/ + var remove_admin = function(entry_element){ + /* (1) Get admin.id + admin.name */ + var admin = { + id: parseInt(entry_element.id), + name: entry_element.children[0].children[0].innerHTML + }; + + /* (2) Create popup */ + var PopupManager = new Popup(); + + var confirm_content = { + title: "Suppression d'un administrteur", + content: "L'administrateur "+admin.name+" sera définitivement supprimé de la plateforme, cette opération ne peut pas être annulée.", + type: "invalid", + action: "Supprimer" + }; + + /* (3) Ask for confirmation */ + PopupManager.ask(confirm_content, function(is_confirmed){ + + /* (3.1) If not cancelled -> abort */ + if( !is_confirmed ) + return; + + /* (2.1) Manage deletion + ---------------------------------------------------------*/ + /* (1) Create request */ + var request = { + path: 'adminDefault/delete', // On veut créer un nouvel admin + id_admin: admin.id + }; + + /* (2) Send request + handle response */ + api.send(request, function(answer){ + + if( answer.error == 0 ){ // Tout s'est bien deroule + + console.log('Admin supprimé!'); + + // on supprime de la liste + entry_element.parentNode.removeChild(entry_element); + + }else{ // Erreur + + console.error('ModuleError::'+answer.error); + + } + + }); + + + }); + + }; + + + /* (3) Bind event for each remove link + ---------------------------------------------------------*/ + for( var i = 0 ; i < section.admins.link.remove.length ; i++ ){ + + section.admins.link.remove[i].addEventListener('click', function(e){ + + remove_admin(e.target.parentNode.parentNode); + + }, false); + + } + + +} + + + + + + +/* [4] admin -> Création d'administrateur =========================================================*/ if( section.admin.element != null ){ @@ -129,7 +220,7 @@ if( section.admin.element != null ){ section.admin.errmsg.mail.innerHTML = ''; var request = { - path: 'authenticationDefault/create_admin', // On veut créer un nouvel admin + path: 'adminDefault/create', // On veut créer un nouvel admin username: section.admin.input.username.value, mail: section.admin.input.mail.value }; diff --git a/public_html/view/view.php b/public_html/view/view.php index fa3d3e2..766cf8a 100755 --- a/public_html/view/view.php +++ b/public_html/view/view.php @@ -28,6 +28,7 @@ + @@ -50,17 +51,24 @@ + + +