add umb-box to user sidebar
This commit is contained in:
Mads Rasmussen
@@ -163,7 +163,7 @@
|
||||
|
||||
<umb-box>
|
||||
<umb-box-header title-key="user_access" description-key="user_accessHelp"></umb-box-header>
|
||||
<umb-box-content class="block-form" style="padding-bottom: 0;">
|
||||
<umb-box-content class="block-form">
|
||||
|
||||
<umb-control-group label="@sections_content">
|
||||
<umb-node-preview
|
||||
@@ -199,204 +199,206 @@
|
||||
|
||||
<div class="umb-package-details__sidebar">
|
||||
|
||||
<div class="umb-package-details__section">
|
||||
<umb-box>
|
||||
<umb-box-content>
|
||||
|
||||
<!-- Avatar -->
|
||||
<div style="margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #d8d7d9;">
|
||||
<ng-form name="avatarForm" class="flex flex-column justify-center items-center">
|
||||
<!-- Avatar -->
|
||||
<div style="margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #d8d7d9;">
|
||||
<ng-form name="avatarForm" class="flex flex-column justify-center items-center">
|
||||
|
||||
<umb-avatar
|
||||
style="margin-bottom: 15px;"
|
||||
color="secondary"
|
||||
size="xxl"
|
||||
name="{{vm.user.name}}"
|
||||
img-src="{{vm.user.avatars[3]}}"
|
||||
img-srcset="{{vm.user.avatars[4]}} 2x, {{vm.user.avatars[4]}} 3x">
|
||||
</umb-avatar>
|
||||
<umb-avatar
|
||||
style="margin-bottom: 15px;"
|
||||
color="secondary"
|
||||
size="xxl"
|
||||
name="{{vm.user.name}}"
|
||||
img-src="{{vm.user.avatars[3]}}"
|
||||
img-srcset="{{vm.user.avatars[4]}} 2x, {{vm.user.avatars[4]}} 3x">
|
||||
</umb-avatar>
|
||||
|
||||
<umb-progress-bar
|
||||
style="max-width: 120px;"
|
||||
ng-if="vm.avatarFile.uploadStatus === 'uploading'"
|
||||
progress="{{ vm.avatarFile.uploadProgress }}"
|
||||
size="s">
|
||||
</umb-progress-bar>
|
||||
<umb-progress-bar
|
||||
style="max-width: 120px;"
|
||||
ng-if="vm.avatarFile.uploadStatus === 'uploading'"
|
||||
progress="{{ vm.avatarFile.uploadProgress }}"
|
||||
size="s">
|
||||
</umb-progress-bar>
|
||||
|
||||
<div class="flex items-center" ng-if="vm.avatarFile.uploadStatus !== 'uploading'">
|
||||
<div class="flex items-center" ng-if="vm.avatarFile.uploadStatus !== 'uploading'">
|
||||
|
||||
<a href=""
|
||||
class="umb-user-group-preview__action"
|
||||
ngf-select ng-model="filesHolder"
|
||||
ngf-change="changeAvatar($files, $event)"
|
||||
ngf-multiple="false"
|
||||
ngf-pattern="{{vm.acceptedFileTypes}}"
|
||||
ngf-max-size="{{ vm.maxFileSize }}">
|
||||
<localize key="user_changePhoto">Change photo</localize>
|
||||
</a>
|
||||
<a href=""
|
||||
class="umb-user-group-preview__action"
|
||||
ngf-select ng-model="filesHolder"
|
||||
ngf-change="changeAvatar($files, $event)"
|
||||
ngf-multiple="false"
|
||||
ngf-pattern="{{vm.acceptedFileTypes}}"
|
||||
ngf-max-size="{{ vm.maxFileSize }}">
|
||||
<localize key="user_changePhoto">Change photo</localize>
|
||||
</a>
|
||||
|
||||
<a href=""
|
||||
ng-if="vm.user.avatars"
|
||||
class="umb-user-group-preview__action umb-user-group-preview__action--red"
|
||||
ng-click="vm.clearAvatar()"
|
||||
prevent-default>
|
||||
<localize key="user_removePhoto">Remove photo</localize>
|
||||
</a>
|
||||
<a href=""
|
||||
ng-if="vm.user.avatars"
|
||||
class="umb-user-group-preview__action umb-user-group-preview__action--red"
|
||||
ng-click="vm.clearAvatar()"
|
||||
prevent-default>
|
||||
<localize key="user_removePhoto">Remove photo</localize>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-form>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div style="margin-bottom: 20px;">
|
||||
|
||||
<div style="margin-bottom: 10px;">
|
||||
<umb-button
|
||||
ng-if="vm.user.userDisplayState.key === 'Disabled' && !vm.user.isCurrentUser"
|
||||
type="button"
|
||||
button-style="[success,block]"
|
||||
state="vm.enableUserButtonState"
|
||||
action="vm.enableUser()"
|
||||
label="Enable"
|
||||
label-key="actions_enable"
|
||||
size="s">
|
||||
</umb-button>
|
||||
</div>
|
||||
|
||||
</ng-form>
|
||||
<div style="margin-bottom: 10px;">
|
||||
<umb-button
|
||||
ng-if="vm.user.userDisplayState.key === 'LockedOut' && !vm.user.isCurrentUser"
|
||||
type="button"
|
||||
button-style="[success,block]"
|
||||
state="vm.unlockUserButtonState"
|
||||
action="vm.unlockUser()"
|
||||
label="Unlock"
|
||||
label-key="actions_unlock"
|
||||
size="s">
|
||||
</umb-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="margin-bottom: 10px;">
|
||||
<umb-button
|
||||
ng-if="vm.user.userDisplayState.key !== 'Disabled' && !vm.user.isCurrentUser"
|
||||
type="button"
|
||||
button-style="[info,block]"
|
||||
action="vm.disableUser()"
|
||||
state="vm.disableUserButtonState"
|
||||
label="Disable"
|
||||
label-key="actions_disable"
|
||||
size="s">
|
||||
</umb-button>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div style="margin-bottom: 20px;">
|
||||
|
||||
<div style="margin-bottom: 10px;">
|
||||
<umb-button
|
||||
ng-if="vm.user.userDisplayState.key === 'Disabled' && !vm.user.isCurrentUser"
|
||||
type="button"
|
||||
button-style="[success,block]"
|
||||
state="vm.enableUserButtonState"
|
||||
action="vm.enableUser()"
|
||||
label="Enable"
|
||||
label-key="actions_enable"
|
||||
size="s">
|
||||
</umb-button>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 10px;">
|
||||
<umb-button
|
||||
ng-if="vm.user.userDisplayState.key === 'LockedOut' && !vm.user.isCurrentUser"
|
||||
type="button"
|
||||
button-style="[success,block]"
|
||||
state="vm.unlockUserButtonState"
|
||||
action="vm.unlockUser()"
|
||||
label="Unlock"
|
||||
label-key="actions_unlock"
|
||||
size="s">
|
||||
</umb-button>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 10px;">
|
||||
<umb-button
|
||||
ng-if="vm.user.userDisplayState.key !== 'Disabled' && !vm.user.isCurrentUser"
|
||||
type="button"
|
||||
button-style="[info,block]"
|
||||
action="vm.disableUser()"
|
||||
state="vm.disableUserButtonState"
|
||||
label="Disable"
|
||||
label-key="actions_disable"
|
||||
action="vm.toggleChangePassword()"
|
||||
label="Change password"
|
||||
label-key="general_changePassword"
|
||||
state="changePasswordButtonState"
|
||||
ng-if="vm.changePasswordModel.isChanging === false"
|
||||
size="s">
|
||||
</umb-button>
|
||||
|
||||
<ng-form ng-if="vm.changePasswordModel.isChanging" name="passwordForm" class="block-form" val-form-manager>
|
||||
|
||||
<change-password
|
||||
password-values="vm.user.changePassword"
|
||||
config="vm.changePasswordModel.config">
|
||||
</change-password>
|
||||
|
||||
<umb-button
|
||||
type="button"
|
||||
action="vm.toggleChangePassword()"
|
||||
label="Cancel"
|
||||
label-key="general_cancel"
|
||||
button-style="cancel">
|
||||
</umb-button>
|
||||
|
||||
</ng-form>
|
||||
|
||||
<div ng-if="vm.user.resetPasswordValue">
|
||||
<p><br />Password reset to value: <strong>{{vm.user.resetPasswordValue}}</strong></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<umb-button
|
||||
type="button"
|
||||
button-style="[info,block]"
|
||||
action="vm.toggleChangePassword()"
|
||||
label="Change password"
|
||||
label-key="general_changePassword"
|
||||
state="changePasswordButtonState"
|
||||
ng-if="vm.changePasswordModel.isChanging === false"
|
||||
size="s">
|
||||
</umb-button>
|
||||
|
||||
<ng-form ng-if="vm.changePasswordModel.isChanging" name="passwordForm" class="block-form" val-form-manager>
|
||||
|
||||
<change-password
|
||||
password-values="vm.user.changePassword"
|
||||
config="vm.changePasswordModel.config">
|
||||
</change-password>
|
||||
|
||||
<umb-button
|
||||
type="button"
|
||||
action="vm.toggleChangePassword()"
|
||||
label="Cancel"
|
||||
label-key="general_cancel"
|
||||
button-style="cancel">
|
||||
</umb-button>
|
||||
|
||||
</ng-form>
|
||||
|
||||
<div ng-if="vm.user.resetPasswordValue">
|
||||
<p><br />Password reset to value: <strong>{{vm.user.resetPasswordValue}}</strong></p>
|
||||
<!-- User stats -->
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">
|
||||
<localize key="general_status">Status</localize>:
|
||||
</div>
|
||||
<div class="umb-package-details__information-item-content">
|
||||
<umb-badge style="margin-top: 4px;" size="s" color="{{vm.user.userDisplayState.color}}">
|
||||
{{vm.user.userDisplayState.name}}
|
||||
</umb-badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">
|
||||
<localize key="user_lastLogin">Last login</localize>:
|
||||
</div>
|
||||
<div class="umb-package-details__information-item-content">
|
||||
<span ng-if="vm.user.lastLoginDate">{{ vm.user.formattedLastLogin }}</span>
|
||||
<span ng-if="!vm.user.lastLoginDate">{{ vm.user.name | umbWordLimit:1 }} <localize key="user_noLogin">has not logged in yet</localize></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User stats -->
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">
|
||||
<localize key="general_status">Status</localize>:
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">
|
||||
<localize key="user_failedPasswordAttempts">Failed login attempts</localize>:
|
||||
</div>
|
||||
<div class="umb-package-details__information-item-content">
|
||||
{{ vm.user.failedPasswordAttempts }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="umb-package-details__information-item-content">
|
||||
<umb-badge style="margin-top: 4px;" size="s" color="{{vm.user.userDisplayState.color}}">
|
||||
{{vm.user.userDisplayState.name}}
|
||||
</umb-badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">
|
||||
<localize key="user_lastLogin">Last login</localize>:
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">
|
||||
<localize key="user_lastLockoutDate">Last lockout date</localize>:
|
||||
</div>
|
||||
<div class="umb-package-details__information-item-content">
|
||||
<span ng-if="vm.user.lastLockoutDate === '0001-01-01T00:00:00'">
|
||||
{{ vm.user.name | umbWordLimit:1 }} <localize key="user_noLockouts">hasn't been locked out</localize>
|
||||
</span>
|
||||
<span ng-if="vm.user.lastLockoutDate !== '0001-01-01T00:00:00'">{{ vm.user.formattedLastLockoutDate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="umb-package-details__information-item-content">
|
||||
<span ng-if="vm.user.lastLoginDate">{{ vm.user.formattedLastLogin }}</span>
|
||||
<span ng-if="!vm.user.lastLoginDate">{{ vm.user.name | umbWordLimit:1 }} <localize key="user_noLogin">has not logged in yet</localize></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">
|
||||
<localize key="user_failedPasswordAttempts">Failed login attempts</localize>:
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">
|
||||
<localize key="user_lastPasswordChangeDate">Password is last changed</localize>:
|
||||
</div>
|
||||
<div class="umb-package-details__information-item-content">
|
||||
<span ng-if="vm.user.lastPasswordChangeDate === '0001-01-01T00:00:00'">
|
||||
<localize key="user_noPasswordChange">The password hasn't been changed</localize>
|
||||
</span>
|
||||
<span ng-if="vm.user.lastPasswordChangeDate !== '0001-01-01T00:00:00'">{{ vm.user.formattedLastPasswordChangeDate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="umb-package-details__information-item-content">
|
||||
{{ vm.user.failedPasswordAttempts }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">
|
||||
<localize key="user_lastLockoutDate">Last lockout date</localize>:
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">
|
||||
<localize key="user_createDate">User is created</localize>:
|
||||
</div>
|
||||
<div class="umb-package-details__information-item-content">
|
||||
{{ vm.user.formattedCreateDate }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="umb-package-details__information-item-content">
|
||||
<span ng-if="vm.user.lastLockoutDate === '0001-01-01T00:00:00'">
|
||||
{{ vm.user.name | umbWordLimit:1 }} <localize key="user_noLockouts">hasn't been locked out</localize>
|
||||
</span>
|
||||
<span ng-if="vm.user.lastLockoutDate !== '0001-01-01T00:00:00'">{{ vm.user.formattedLastLockoutDate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">
|
||||
<localize key="user_lastPasswordChangeDate">Password is last changed</localize>:
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">
|
||||
<localize key="user_updateDate">User is last updated</localize>:
|
||||
</div>
|
||||
<div class="umb-package-details__information-item-content">
|
||||
{{ vm.user.formattedUpdateDate }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="umb-package-details__information-item-content">
|
||||
<span ng-if="vm.user.lastPasswordChangeDate === '0001-01-01T00:00:00'">
|
||||
<localize key="user_noPasswordChange">The password hasn't been changed</localize>
|
||||
</span>
|
||||
<span ng-if="vm.user.lastPasswordChangeDate !== '0001-01-01T00:00:00'">{{ vm.user.formattedLastPasswordChangeDate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">
|
||||
<localize key="user_createDate">User is created</localize>:
|
||||
</div>
|
||||
<div class="umb-package-details__information-item-content">
|
||||
{{ vm.user.formattedCreateDate }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="umb-package-details__information-item">
|
||||
<div class="umb-package-details__information-item-label">
|
||||
<localize key="user_updateDate">User is last updated</localize>:
|
||||
</div>
|
||||
<div class="umb-package-details__information-item-content">
|
||||
{{ vm.user.formattedUpdateDate }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</umb-box-content>
|
||||
</umb-box>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user