diff --git a/management/univention-management-console-module-udm/umc/js/udm.css b/management/univention-management-console-module-udm/umc/js/udm.css index 474f3a580d..17a8b8540c 100644 --- a/management/univention-management-console-module-udm/umc/js/udm.css +++ b/management/univention-management-console-module-udm/umc/js/udm.css @@ -23,6 +23,42 @@ /* umcSearchFormChangeViewButton END */ +.umc .wizardPasswordBox { + max-height: 80px; +} + +.umc .transitionUp { + position: relative; + top: 80px; +} + +.umc .transitionDown { + position: relative; + top: -80px; +} + +.umc .goAway { + visibility: hidden; + opacity: 0; + height: 0; +} + +.umc .goAway.fadeIn { + visibility: visible; + opacity: 1; + transition-property: opacity; + transition-duration: 1s; + transition-timing-function: cubic-bezier(0,0,0.8,1); + height: 100%; +} + +.umc .transitionUp.transitionDo, .umc .transitionDown.transitionDo { + transition-duration: 0.7s; + transition-property: top; + transition-timing-function: cubic-bezier(0.1,0,0,1); + top: 0; +} + .umc .umcUDMUsersModule .umcImage { background: none; padding: 0; diff --git a/management/univention-management-console-module-udm/umc/js/udm/wizards/users/user.js b/management/univention-management-console-module-udm/umc/js/udm/wizards/users/user.js index 9ea39a7baf..0bd5604632 100644 --- a/management/univention-management-console-module-udm/umc/js/udm/wizards/users/user.js +++ b/management/univention-management-console-module-udm/umc/js/udm/wizards/users/user.js @@ -55,6 +55,19 @@ define([ } ], + startup: function() { + this.inherited(arguments); + var widget = this.getWidget('page1', 'PasswordRecoveryEmail'); + var node = widget.domNode.parentNode.parentNode.parentNode; + node.classList.add('goAway'); + node.classList.add('wizardPasswordBox'); + widget.set('visible', true); + + widget = this.getWidget('page1', 'password'); + node = widget.domNode.parentNode.parentNode.parentNode; + node.classList.add('wizardPasswordBox'); + }, + postMixInProperties: function() { if (array.some(this.properties, function(prop) { return prop.id === 'PasswordRecoveryEmail'; })) { this.widgetPages[1].widgets.splice(1, 0, '_invite'); @@ -78,17 +91,41 @@ define([ sizeClass: 'One', label: _('Invite user via e-mail. Password will be set by the user'), required: false, - onChange: lang.hitch(this, function(value) { - var pwdChange = this.getWidget('page1', 'pwdChangeNextLogin'); - pwdChange.set('value', value); - pwdChange.set('disabled', value); - var pwdCheck = this.getWidget('page1', 'overridePWLength'); - pwdCheck.set('value', value); - pwdCheck.set('disabled', value); - this.getWidget('page1', 'password').set('visible', !value); - this.getWidget('page1', 'password').set('required', !value); - this.getWidget('page1', 'PasswordRecoveryEmail').set('visible', value); - this.getWidget('page1', 'PasswordRecoveryEmail').set('required', value); + onChange: lang.hitch(this, function(value, formWidgets) { + var containerNode = formWidgets._invite.domNode.parentNode.parentNode.parentNode; + if (value) { + formWidgets.password.domNode.parentNode.parentNode.parentNode.classList.remove('fadeIn'); + formWidgets.password.domNode.parentNode.parentNode.parentNode.classList.add('goAway'); + formWidgets.PasswordRecoveryEmail.domNode.parentNode.parentNode.parentNode.classList.add('fadeIn'); + containerNode.classList.remove('transitionDown'); + containerNode.classList.add('transitionUp'); + setTimeout(function() { + containerNode.classList.add('transitionDo'); + setTimeout(function() { + containerNode.classList.remove('transitionUp'); + containerNode.classList.remove('transitionDo'); + }, 700); + }, 100); + } else { + formWidgets.PasswordRecoveryEmail.domNode.parentNode.parentNode.parentNode.classList.remove('fadeIn'); + formWidgets.PasswordRecoveryEmail.domNode.parentNode.parentNode.parentNode.classList.add('goAway'); + formWidgets.password.domNode.parentNode.parentNode.parentNode.classList.add('fadeIn'); + containerNode.classList.remove('transitionUp'); + containerNode.classList.add('transitionDown'); + setTimeout(function() { + containerNode.classList.add('transitionDo'); + setTimeout(function() { + containerNode.classList.remove('transitionDown'); + containerNode.classList.remove('transitionDo'); + }, 700); + }, 100); + } + formWidgets.pwdChangeNextLogin.set('value', value); + formWidgets.pwdChangeNextLogin.set('disabled', value); + formWidgets.overridePWLength.set('value', value); + formWidgets.overridePWLength.set('disabled', value); + formWidgets.password.set('required', !value); + formWidgets.PasswordRecoveryEmail.set('required', value); }), type: 'CheckBox' };