From ed0886b040e5cb704788ec82cfd4c66512400a3c Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Fri, 4 May 2018 18:21:58 +0200
Subject: [PATCH] add bg box to user details sidebar

---
 .../src/views/users/views/user/details.html   | 320 +++++++++---------
 1 file changed, 162 insertions(+), 158 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/user/details.html b/src/Umbraco.Web.UI.Client/src/views/users/views/user/details.html
index 67f204aa2f..5aded20cfa 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/views/user/details.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/views/user/details.html
@@ -165,196 +165,200 @@
 
     <div class="umb-package-details__sidebar">
 
-        <div class="umb-package-details__section">
+        <umb-box>
 
-            <!-- 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-box-content>
 
-                    <umb-avatar style="margin-bottom: 15px;"
-                                color="secondary"
-                                size="xxl"
-                                name="{{model.user.name}}"
-                                img-src="{{model.user.avatars[3]}}"
-                                img-srcset="{{model.user.avatars[4]}} 2x, {{model.user.avatars[4]}} 3x">
-                    </umb-avatar>
+                <!-- 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-progress-bar style="max-width: 120px;"
-                                      ng-if="model.avatarFile.uploadStatus === 'uploading'"
-                                      progress="{{ model.avatarFile.uploadProgress }}"
-                                      size="s">
-                    </umb-progress-bar>
+                        <umb-avatar style="margin-bottom: 15px;"
+                                    color="secondary"
+                                    size="xxl"
+                                    name="{{model.user.name}}"
+                                    img-src="{{model.user.avatars[3]}}"
+                                    img-srcset="{{model.user.avatars[4]}} 2x, {{model.user.avatars[4]}} 3x">
+                        </umb-avatar>
 
-                    <div class="flex items-center" ng-if="model.avatarFile.uploadStatus !== 'uploading'">
+                        <umb-progress-bar style="max-width: 120px;"
+                                        ng-if="model.avatarFile.uploadStatus === 'uploading'"
+                                        progress="{{ model.avatarFile.uploadProgress }}"
+                                        size="s">
+                        </umb-progress-bar>
 
-                        <a href=""
-                           class="umb-user-group-preview__action"
-                           ngf-select ng-model="filesHolder"
-                           ngf-change="model.changeAvatar($files, $event)"
-                           ngf-multiple="false"
-                           ngf-pattern="{{model.acceptedFileTypes}}"
-                           ngf-max-size="{{ model.maxFileSize }}">
-                            <localize key="user_changePhoto">Change photo</localize>
-                        </a>
+                        <div class="flex items-center" ng-if="model.avatarFile.uploadStatus !== 'uploading'">
 
-                        <a href=""
-                           ng-if="model.user.avatars"
-                           class="umb-user-group-preview__action umb-user-group-preview__action--red"
-                           ng-click="model.clearAvatar()"
-                           prevent-default>
-                            <localize key="user_removePhoto">Remove photo</localize>
-                        </a>
+                            <a href=""
+                            class="umb-user-group-preview__action"
+                            ngf-select ng-model="filesHolder"
+                            ngf-change="model.changeAvatar($files, $event)"
+                            ngf-multiple="false"
+                            ngf-pattern="{{model.acceptedFileTypes}}"
+                            ngf-max-size="{{ model.maxFileSize }}">
+                                <localize key="user_changePhoto">Change photo</localize>
+                            </a>
 
+                            <a href=""
+                            ng-if="model.user.avatars"
+                            class="umb-user-group-preview__action umb-user-group-preview__action--red"
+                            ng-click="model.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="model.user.userDisplayState.key === 'Disabled' && !model.user.isCurrentUser"
+                                    type="button"
+                                    button-style="[success,block]"
+                                    state="model.enableUserButtonState"
+                                    action="model.enableUser()"
+                                    label="Enable"
+                                    label-key="actions_enable"
+                                    size="s">
+                        </umb-button>
                     </div>
 
-                </ng-form>
+                    <div style="margin-bottom: 10px;">
+                        <umb-button ng-if="model.user.userDisplayState.key === 'LockedOut' && !model.user.isCurrentUser"
+                                    type="button"
+                                    button-style="[success,block]"
+                                    state="model.unlockUserButtonState"
+                                    action="model.unlockUser()"
+                                    label="Unlock"
+                                    label-key="actions_unlock"
+                                    size="s">
+                        </umb-button>
+                    </div>
 
-            </div>
-
-            <!-- Actions -->
-            <div style="margin-bottom: 20px;">
-
-                <div style="margin-bottom: 10px;">
-                    <umb-button ng-if="model.user.userDisplayState.key === 'Disabled' && !model.user.isCurrentUser"
-                                type="button"
-                                button-style="[success,block]"
-                                state="model.enableUserButtonState"
-                                action="model.enableUser()"
-                                label="Enable"
-                                label-key="actions_enable"
-                                size="s">
-                    </umb-button>
-                </div>
-
-                <div style="margin-bottom: 10px;">
-                    <umb-button ng-if="model.user.userDisplayState.key === 'LockedOut' && !model.user.isCurrentUser"
-                                type="button"
-                                button-style="[success,block]"
-                                state="model.unlockUserButtonState"
-                                action="model.unlockUser()"
-                                label="Unlock"
-                                label-key="actions_unlock"
-                                size="s">
-                    </umb-button>
-                </div>
-
-                <div style="margin-bottom: 10px;">
-                    <umb-button ng-if="model.user.userDisplayState.key !== 'Disabled' && !model.user.isCurrentUser"
-                                type="button"
-                                button-style="[info,block]"
-                                action="model.disableUser()"
-                                state="model.disableUserButtonState"
-                                label="Disable"
-                                label-key="actions_disable"
-                                size="s">
-                    </umb-button>
-                </div>
-
-                <umb-button type="button"
-                            button-style="[info,block]"
-                            action="model.toggleChangePassword()"
-                            label="Change password"
-                            label-key="general_changePassword"
-                            state="changePasswordButtonState"
-                            ng-if="model.changePasswordModel.isChanging === false"
-                            size="s">
-                </umb-button>
-
-                <ng-form ng-if="model.changePasswordModel.isChanging" name="passwordForm" class="block-form" val-form-manager>
-
-                    <change-password password-values="model.user.changePassword"
-                                     config="model.changePasswordModel.config">
-                    </change-password>
+                    <div style="margin-bottom: 10px;">
+                        <umb-button ng-if="model.user.userDisplayState.key !== 'Disabled' && !model.user.isCurrentUser"
+                                    type="button"
+                                    button-style="[info,block]"
+                                    action="model.disableUser()"
+                                    state="model.disableUserButtonState"
+                                    label="Disable"
+                                    label-key="actions_disable"
+                                    size="s">
+                        </umb-button>
+                    </div>
 
                     <umb-button type="button"
+                                button-style="[info,block]"
                                 action="model.toggleChangePassword()"
-                                label="Cancel"
-                                label-key="general_cancel"
-                                button-style="cancel">
+                                label="Change password"
+                                label-key="general_changePassword"
+                                state="changePasswordButtonState"
+                                ng-if="model.changePasswordModel.isChanging === false"
+                                size="s">
                     </umb-button>
 
-                </ng-form>
+                    <ng-form ng-if="model.changePasswordModel.isChanging" name="passwordForm" class="block-form" val-form-manager>
+
+                        <change-password password-values="model.user.changePassword"
+                                        config="model.changePasswordModel.config">
+                        </change-password>
+
+                        <umb-button type="button"
+                                    action="model.toggleChangePassword()"
+                                    label="Cancel"
+                                    label-key="general_cancel"
+                                    button-style="cancel">
+                        </umb-button>
+
+                    </ng-form>
+
+                    <div ng-if="model.user.resetPasswordValue">
+                        <p><br />Password reset to value: <strong>{{model.user.resetPasswordValue}}</strong></p>
+                    </div>
 
-                <div ng-if="model.user.resetPasswordValue">
-                    <p><br />Password reset to value: <strong>{{model.user.resetPasswordValue}}</strong></p>
                 </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>
+                    <div class="umb-package-details__information-item-content">
+                        <umb-badge style="margin-top: 4px;" size="s" color="{{model.user.userDisplayState.color}}">
+                            {{model.user.userDisplayState.name}}
+                        </umb-badge>
+                    </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_lastLogin">Last login</localize>:
+                    </div>
+                    <div class="umb-package-details__information-item-content">
+                        <span ng-if="model.user.lastLoginDate">{{ model.user.formattedLastLogin }}</span>
+                        <span ng-if="!model.user.lastLoginDate">{{ model.user.name | umbWordLimit:1 }} <localize key="user_noLogin">has not logged in yet</localize></span>
+                    </div>
                 </div>
-                <div class="umb-package-details__information-item-content">
-                    <umb-badge style="margin-top: 4px;" size="s" color="{{model.user.userDisplayState.color}}">
-                        {{model.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_failedPasswordAttempts">Failed login attempts</localize>:
+                    </div>
+                    <div class="umb-package-details__information-item-content">
+                        {{ model.user.failedPasswordAttempts }}
+                    </div>
                 </div>
-                <div class="umb-package-details__information-item-content">
-                    <span ng-if="model.user.lastLoginDate">{{ model.user.formattedLastLogin }}</span>
-                    <span ng-if="!model.user.lastLoginDate">{{ model.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_lastLockoutDate">Last lockout date</localize>:
+                    </div>
+                    <div class="umb-package-details__information-item-content">
+                        <span ng-if="model.user.lastLockoutDate === '0001-01-01T00:00:00'">
+                            {{ model.user.name | umbWordLimit:1 }} <localize key="user_noLockouts">hasn't been locked out</localize>
+                        </span>
+                        <span ng-if="model.user.lastLockoutDate !== '0001-01-01T00:00:00'">{{ model.user.formattedLastLockoutDate }}</span>
+                    </div>
                 </div>
-                <div class="umb-package-details__information-item-content">
-                    {{ model.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_lastPasswordChangeDate">Password is last changed</localize>:
+                    </div>
+                    <div class="umb-package-details__information-item-content">
+                        <span ng-if="model.user.lastPasswordChangeDate === '0001-01-01T00:00:00'">
+                            <localize key="user_noPasswordChange">The password hasn't been changed</localize>
+                        </span>
+                        <span ng-if="model.user.lastPasswordChangeDate !== '0001-01-01T00:00:00'">{{ model.user.formattedLastPasswordChangeDate }}</span>
+                    </div>
                 </div>
-                <div class="umb-package-details__information-item-content">
-                    <span ng-if="model.user.lastLockoutDate === '0001-01-01T00:00:00'">
-                        {{ model.user.name | umbWordLimit:1 }} <localize key="user_noLockouts">hasn't been locked out</localize>
-                    </span>
-                    <span ng-if="model.user.lastLockoutDate !== '0001-01-01T00:00:00'">{{ model.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_createDate">User is created</localize>:
+                    </div>
+                    <div class="umb-package-details__information-item-content">
+                        {{ model.user.formattedCreateDate }}
+                    </div>
                 </div>
-                <div class="umb-package-details__information-item-content">
-                    <span ng-if="model.user.lastPasswordChangeDate === '0001-01-01T00:00:00'">
-                        <localize key="user_noPasswordChange">The password hasn't been changed</localize>
-                    </span>
-                    <span ng-if="model.user.lastPasswordChangeDate !== '0001-01-01T00:00:00'">{{ model.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 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">
+                        {{ model.user.formattedUpdateDate }}
+                    </div>
                 </div>
-                <div class="umb-package-details__information-item-content">
-                    {{ model.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">
-                    {{ model.user.formattedUpdateDate }}
-                </div>
-            </div>
+            </umb-box-content>
 
-        </div>
+        </umb-box>
 
     </div>