From 8cae995e9b613dd6491debf02147add061c26941 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Thu, 23 Sep 2021 10:58:14 +0200
Subject: [PATCH] password change for user

---
 zero.Core/Api/UserApi.cs                      | 76 +++++++++++++++-
 zero.Web.UI/App/components/forms/error.vue    |  9 +-
 .../App/components/forms/form-header.vue      |  2 +-
 zero.Web.UI/App/components/forms/property.vue |  7 +-
 .../App/components/messages/message.vue       |  2 +-
 zero.Web.UI/App/editor/editor.scss            |  2 +-
 zero.Web.UI/App/pages/password-change.vue     | 90 -------------------
 zero.Web.UI/App/pages/settings/user.vue       |  6 +-
 zero.Web.UI/App/renderers/editors/user.js     |  6 +-
 zero.Web.UI/Sass/Modules/_button.scss         |  4 +-
 zero.Web.UI/app/api/users.js                  |  2 +
 .../components/overlays/password-change.vue   | 82 +++++++++++++++++
 zero.Web.UI/app/core/editor-field.ts          | 11 +++
 .../app/editor/fields/password-hash.vue       | 54 +++++++++++
 zero.Web.UI/app/renderers/editors/password.js | 10 +++
 zero.Web/Controllers/UsersController.cs       |  8 ++
 zero.Web/Models/UserPasswordEditModel.cs      |  2 +
 .../Resources/Localization/zero.en-us.json    |  5 +-
 18 files changed, 275 insertions(+), 103 deletions(-)
 delete mode 100644 zero.Web.UI/App/pages/password-change.vue
 create mode 100644 zero.Web.UI/app/components/overlays/password-change.vue
 create mode 100644 zero.Web.UI/app/editor/fields/password-hash.vue
 create mode 100644 zero.Web.UI/app/renderers/editors/password.js

diff --git a/zero.Core/Api/UserApi.cs b/zero.Core/Api/UserApi.cs
index e50592e1..918c5991 100644
--- a/zero.Core/Api/UserApi.cs
+++ b/zero.Core/Api/UserApi.cs
@@ -72,7 +72,22 @@ namespace zero.Core.Api
     /// <inheritdoc />
     public async Task<EntityResult<BackofficeUser>> Save(BackofficeUser model)
     {
-      return await SaveModel(model); //, new UserValidator<User>());
+      bool updateSecurityStamp = false;
+
+      if (!model.Id.IsNullOrEmpty())
+      {
+        BackofficeUser origin = await GetUserById(model.Id);
+        updateSecurityStamp = origin != null && model.PasswordHash != origin.PasswordHash;
+      }
+
+      EntityResult<BackofficeUser> result = await SaveModel(model); //, new UserValidator<User>());
+
+      if (updateSecurityStamp)
+      {
+        await UserManager.UpdateSecurityStampAsync(model);
+      }
+
+      return result;
     }
 
 
@@ -83,6 +98,60 @@ namespace zero.Core.Api
     }
 
 
+    /// <inheritdoc />
+    public async Task<EntityResult<string>> HashPassword(BackofficeUser user, string currentPassword, string newPassword, string confirmNewPassword)
+    {
+      if (newPassword != confirmNewPassword)
+      {
+        return EntityResult<string>.Fail(nameof(newPassword), "@errors.changepassword.newpasswordsnotmatching");
+      }
+
+      if (currentPassword.IsNullOrWhiteSpace() || newPassword.IsNullOrWhiteSpace())
+      {
+        return EntityResult<string>.Fail(nameof(currentPassword), "@errors.changepassword.emptyfields");
+      }
+
+      if (user == null)
+      {
+        return EntityResult<string>.Fail("@errors.changepassword.nouser");
+      }
+
+      if (UserManager.PasswordHasher.VerifyHashedPassword(user, user.PasswordHash, currentPassword) != PasswordVerificationResult.Success)
+      {
+        return EntityResult<string>.Fail("@errors.changepassword.passwordincorrect");
+      }
+
+      // validate new password
+      List<IdentityError> errors = new();
+      bool isValid = true;
+      foreach (var v in UserManager.PasswordValidators)
+      {
+        var result = await v.ValidateAsync(UserManager, user, newPassword);
+        if (!result.Succeeded)
+        {
+          if (result.Errors.Any())
+          {
+            errors.AddRange(result.Errors);
+          }
+
+          isValid = false;
+        }
+      }
+
+      if (!isValid)
+      {
+        EntityResult<string> result = EntityResult<string>.Fail();
+        foreach (IdentityError error in errors)
+        {
+          result.AddError(error.Description);
+        }
+        return result;
+      }
+
+      return EntityResult<string>.Success(UserManager.PasswordHasher.HashPassword(user, newPassword));
+    }
+
+
     /// <inheritdoc />
     public async Task<EntityResult<BackofficeUser>> UpdatePassword(BackofficeUser user, string currentPassword, string newPassword)
     {
@@ -200,6 +269,11 @@ namespace zero.Core.Api
     /// </summary>
     Task<EntityResult<BackofficeUser>> UpdatePassword(BackofficeUser user, string currentPassword, string newPassword);
 
+    /// <summary>
+    /// Tries to hash a new password
+    /// </summary>
+    Task<EntityResult<string>> HashPassword(BackofficeUser user, string currentPassword, string newPassword, string confirmNewPassword);
+
     /// <summary>
     /// Enables a user
     /// </summary>
diff --git a/zero.Web.UI/App/components/forms/error.vue b/zero.Web.UI/App/components/forms/error.vue
index b21c6f63..fc9aa137 100644
--- a/zero.Web.UI/App/components/forms/error.vue
+++ b/zero.Web.UI/App/components/forms/error.vue
@@ -84,4 +84,11 @@
       }
     }
   }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss">
+  .ui-error + .editor
+  {
+    margin-top: var(--padding-m);
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/forms/form-header.vue b/zero.Web.UI/App/components/forms/form-header.vue
index a0fc805e..9a45505e 100644
--- a/zero.Web.UI/App/components/forms/form-header.vue
+++ b/zero.Web.UI/App/components/forms/form-header.vue
@@ -24,7 +24,7 @@
         <slot name="actions"></slot>
         <ui-dropdown-button v-if="canDelete" label="@ui.delete" icon="fth-trash" @click="onDelete" :disabled="disabled" />
       </ui-dropdown>
-      <ui-button :submit="true" type="primary" label="@ui.save" :state="state" v-if="!disabled" class="ui-form-header-primary-button" />
+      <ui-button :submit="true" type="accent" label="@ui.save" :state="state" v-if="!disabled" class="ui-form-header-primary-button" />
     </div>
   </ui-header-bar>
 </template>
diff --git a/zero.Web.UI/App/components/forms/property.vue b/zero.Web.UI/App/components/forms/property.vue
index bad217e9..6a2712b7 100644
--- a/zero.Web.UI/App/components/forms/property.vue
+++ b/zero.Web.UI/App/components/forms/property.vue
@@ -63,6 +63,11 @@
     {
 
     }
+
+    .ui-error
+    {
+      margin-top: 5px;
+    }
   }
 
   .ui-property + .ui-split,
@@ -220,7 +225,7 @@
   {
     display: grid;
     grid-template-columns: repeat(12, minmax(0, 1fr));
-    grid-gap: var(--padding) var(--padding-s);
+    grid-gap: var(--padding) var(--padding-m);
 
     > .ui-property
     {
diff --git a/zero.Web.UI/App/components/messages/message.vue b/zero.Web.UI/App/components/messages/message.vue
index 5e147fdc..82258fc0 100644
--- a/zero.Web.UI/App/components/messages/message.vue
+++ b/zero.Web.UI/App/components/messages/message.vue
@@ -73,7 +73,7 @@
     padding: 8px 12px 7px 12px;
     grid-template-columns: auto 1fr;
     gap: 12px;
-    border-radius: var(--radius);
+    border-radius: var(--radius-inner);
     position: relative;
     line-height: 20px;
     text-align: left;
diff --git a/zero.Web.UI/App/editor/editor.scss b/zero.Web.UI/App/editor/editor.scss
index ba10660d..4c944ff9 100644
--- a/zero.Web.UI/App/editor/editor.scss
+++ b/zero.Web.UI/App/editor/editor.scss
@@ -78,7 +78,7 @@
 .editor-infos
 {
   display: block;
-  border-top: 1px solid var(--color-line-onbg);
+  //border-top: 1px solid var(--color-line-onbg);
 }
 
 .theme-dark .editor-infos
diff --git a/zero.Web.UI/App/pages/password-change.vue b/zero.Web.UI/App/pages/password-change.vue
deleted file mode 100644
index c1da0b0c..00000000
--- a/zero.Web.UI/App/pages/password-change.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <ui-form v-if="!loading" ref="form" class="app-password-change" v-slot="form" @submit="onSubmit">
-    <h2 class="ui-headline" v-localize="config.title"></h2>
-
-    <div class="app-password-change-fields">
-      <ui-property label="@changepasswordoverlay.fields.currentPassword" :required="true" :vertical="true">
-        <input v-model="model.currentPassword" type="password" class="ui-input" maxlength="160" />
-      </ui-property>
-      <ui-property label="@changepasswordoverlay.fields.newPassword" :required="true" :vertical="true">
-        <input v-model="model.newPassword" type="password" class="ui-input" maxlength="160" />
-      </ui-property>
-      <ui-property label="@changepasswordoverlay.fields.confirmNewPassword" :required="true" :vertical="true">
-        <input v-model="model.confirmNewPassword" type="password" class="ui-input" maxlength="160" />
-        <ui-error :catch-remaining="true" />
-      </ui-property>
-    </div>
-
-    <div class="app-confirm-buttons">
-      <ui-button type="primary" :submit="true" :state="form.state" :label="config.confirmLabel"></ui-button>
-      <ui-button type="light" :label="config.closeLabel" :disabled="loading" @click="config.close"></ui-button>
-    </div>
-  </ui-form>
-</template>
-
-
-<script>
-  import AuthApi from 'zero/helpers/auth.js'
-  import UsersApi from 'zero/api/users.js'
-
-  export default {
-
-    props: {
-      config: Object
-    },
-
-    data: () => ({
-      loading: false,
-      model: {
-        currentPassword: null,
-        newPassword: null,
-        confirmNewPassword: null
-      }
-    }),
-
-    methods: {
-
-      onSubmit(form)
-      {
-        form.handle(UsersApi.updatePassword(this.model)).then(res =>
-        {
-          setTimeout(() =>
-          {
-            AuthApi.rejectUser("@login.rejectReasons.passwordchanged");
-          }, 500);
-        }, errors =>
-        {
-          console.info('login: error', errors);
-        });
-      }
-    }
-  }
-</script>
-
-<style lang="scss">
-  .app-password-change
-  {
-    text-align: left;
-  }
-
-  .app-password-change-fields
-  {
-    margin-top: var(--padding);
-
-    .ui-property + .ui-property, .ui-split + .ui-property
-    {
-      margin-top: var(--padding);
-    }
-  }
-
-  /*.translation-items
-  {
-    margin-top: var(--padding);
-
-    .ui-property + .ui-property,
-    .ui-split + .ui-property
-    {
-      margin-top: 0;
-    }
-  }*/
-</style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/pages/settings/user.vue b/zero.Web.UI/App/pages/settings/user.vue
index ceca6a1a..e33fb951 100644
--- a/zero.Web.UI/App/pages/settings/user.vue
+++ b/zero.Web.UI/App/pages/settings/user.vue
@@ -4,7 +4,6 @@
       <template v-slot:actions>
         <ui-dropdown-button v-if="model.isActive" label="@ui.disable" icon="fth-minus-circle" @click="onActiveChange" :disabled="disabled" />
         <ui-dropdown-button v-if="!model.isActive" label="@ui.enable" icon="fth-plus-circle" @click="onActiveChange" :disabled="disabled" />
-        <ui-dropdown-button label="@user.changePassword" icon="fth-lock" :disabled="disabled" />
       </template>
     </ui-form-header>
     <ui-editor config="user" v-model="model" :meta="meta" :disabled="disabled">
@@ -29,6 +28,7 @@
 </template>
 
 <script>
+  import AuthApi from 'zero/helpers/auth.js';
   import UsersApi from 'zero/api/users.js';
 
   export default {
@@ -70,9 +70,9 @@
       {
         form.handle(UsersApi.save(this.model)).then(res =>
         {
-          if (res.entity.id === AuthApi.user.id)
+          if (res.model.id === AuthApi.user.id)
           { 
-            AuthApi.setUser(res.entity);
+            AuthApi.setUser(res.model);
           }
         });
       },
diff --git a/zero.Web.UI/App/renderers/editors/user.js b/zero.Web.UI/App/renderers/editors/user.js
index cadba146..a44c53c0 100644
--- a/zero.Web.UI/App/renderers/editors/user.js
+++ b/zero.Web.UI/App/renderers/editors/user.js
@@ -15,7 +15,11 @@ const general = editor.tab('general', '@ui.tab_general');
 const permissions = editor.tab('permissions', '@user.tab_permissions', permissionsCount);
 
 general.field('name', { label: '@ui.name' }).text(80).required();
-general.field('email').text(120).required();
+general.fieldset(set =>
+{
+  set.field('email').text(120).required();
+  set.field('passwordHash').passwordHash().required();
+});
 general.field('languageId').culturePicker().required();
 general.field('avatarId').image();
 permissions.field('claims', { hideLabel: true }).custom(Permissions);
diff --git a/zero.Web.UI/Sass/Modules/_button.scss b/zero.Web.UI/Sass/Modules/_button.scss
index b291670f..8c5e7cdb 100644
--- a/zero.Web.UI/Sass/Modules/_button.scss
+++ b/zero.Web.UI/Sass/Modules/_button.scss
@@ -87,8 +87,8 @@ button::-moz-focus-inner
 
   &.type-primary
   {
-    background: var(--color-accent);
-    color: var(--color-accent-fg);
+    background: var(--color-primary);
+    color: var(--color-primary-text);
     min-width: 90px;
     justify-content: center;
   }
diff --git a/zero.Web.UI/app/api/users.js b/zero.Web.UI/app/api/users.js
index 2ce092b7..1a756354 100644
--- a/zero.Web.UI/app/api/users.js
+++ b/zero.Web.UI/app/api/users.js
@@ -7,6 +7,8 @@ export default {
 
   updatePassword: async model => await post(base + 'updatePassword', model),
 
+  hashPassword: async model => await post(base + 'hashPassword', model),
+
   disable: async model => await post(base + 'disable', model),
 
   enable: async model => await post(base + 'enable', model)
diff --git a/zero.Web.UI/app/components/overlays/password-change.vue b/zero.Web.UI/app/components/overlays/password-change.vue
new file mode 100644
index 00000000..a87e0922
--- /dev/null
+++ b/zero.Web.UI/app/components/overlays/password-change.vue
@@ -0,0 +1,82 @@
+<template>
+  <ui-form v-if="!loading" ref="form" class="app-password-change" v-slot="form" @submit="onSubmit">
+    <h2 class="ui-headline" v-localize="'@changepasswordoverlay.title'"></h2>
+
+    <div class="app-password-change-fields">
+      <ui-error :catch-remaining="true" />
+      <ui-editor :config="editorConfig" v-model="model" />
+    </div>
+
+    <div class="app-confirm-buttons">
+      <ui-button type="accent" :submit="true" :state="form.state" label="@ui.confirm"></ui-button>
+      <ui-button type="light" label="@ui.close" :disabled="loading" @click="config.close"></ui-button>
+    </div>
+  </ui-form>
+</template>
+
+
+<script>
+  import UsersApi from 'zero/api/users.js'
+  import passwordRenderer from 'zero/renderers/editors/password.js';
+
+  export default {
+
+    props: {
+      config: Object
+    },
+
+    data: () => ({
+      loading: false,
+      model: {
+        currentPassword: null,
+        newPassword: null,
+        confirmNewPassword: null
+      },
+      editorConfig: passwordRenderer
+    }),
+
+    methods: {
+
+      onSubmit(form)
+      {
+        form.handle(UsersApi.hashPassword({ ...this.model, userId: this.$route.params.id })).then(res =>
+        {
+          this.config.confirm(res.model);
+        }, errors => {});
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .app-password-change
+  {
+    text-align: left;
+
+    .editor, .ui-tab, .ui-box
+    {
+      padding: 0;
+    }
+  }
+
+  .app-password-change-fields
+  {
+    margin-top: var(--padding);
+
+    .ui-property + .ui-property, .ui-split + .ui-property
+    {
+      margin-top: var(--padding);
+    }
+  }
+
+  /*.translation-items
+  {
+    margin-top: var(--padding);
+
+    .ui-property + .ui-property,
+    .ui-split + .ui-property
+    {
+      margin-top: 0;
+    }
+  }*/
+</style>
\ No newline at end of file
diff --git a/zero.Web.UI/app/core/editor-field.ts b/zero.Web.UI/app/core/editor-field.ts
index f881cd69..a27990f4 100644
--- a/zero.Web.UI/app/core/editor-field.ts
+++ b/zero.Web.UI/app/core/editor-field.ts
@@ -201,6 +201,17 @@ class EditorField
   }
 
 
+  /**
+   * Render a password hash field
+   * @param {number} [maxLength] - Maximum length of the password
+   * @returns {EditorField}
+   */
+  passwordHash(maxLength)
+  {
+    return this._setComponent(() => import('../editor/fields/password-hash.vue'), { maxLength });
+  }
+
+
   /**
    * Render a currency input field
    * @param {string|function} [placeholder] - Placeholder text (can be a translation) or function
diff --git a/zero.Web.UI/app/editor/fields/password-hash.vue b/zero.Web.UI/app/editor/fields/password-hash.vue
new file mode 100644
index 00000000..ef7f9c00
--- /dev/null
+++ b/zero.Web.UI/app/editor/fields/password-hash.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="ui-password-hash">
+    <input value="******************" type="text" class="ui-input" readonly="readonly" disabled="disabled" />
+    <ui-button v-if="!disabled" label="change" type="light" @click="open" />
+  </div>
+</template>
+
+
+<script>
+  import Overlay from 'zero/helpers/overlay.js';
+  import PasswordChangeOverlay from 'zero/components/overlays/password-change.vue';
+
+  export default {
+    props: {
+      value: {
+        type: String,
+        default: null
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      placeholder: {
+        type: [String, Function],
+        default: null
+      },
+      entity: Object
+    },
+
+
+    methods: {
+
+      open()
+      {
+        return Overlay.open({
+          component: PasswordChangeOverlay
+        }).then(hash =>
+        {
+          this.$emit('input', hash);
+        });
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss">
+  .ui-password-hash
+  {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-gap: var(--padding-xxs);
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Web.UI/app/renderers/editors/password.js b/zero.Web.UI/app/renderers/editors/password.js
new file mode 100644
index 00000000..6b7a4196
--- /dev/null
+++ b/zero.Web.UI/app/renderers/editors/password.js
@@ -0,0 +1,10 @@
+
+import Editor from 'zero/core/editor.ts';
+
+const editor = new Editor('media', '@changepasswordoverlay.fields.');
+
+editor.field('currentPassword').password().required();
+editor.field('newPassword').password().required();
+editor.field('confirmNewPassword').password().required();
+
+export default editor;
\ No newline at end of file
diff --git a/zero.Web/Controllers/UsersController.cs b/zero.Web/Controllers/UsersController.cs
index 0a29435d..622e9922 100644
--- a/zero.Web/Controllers/UsersController.cs
+++ b/zero.Web/Controllers/UsersController.cs
@@ -77,6 +77,14 @@ namespace zero.Web.Controllers
     }
 
 
+    [ZeroAuthorize]
+    public async Task<EntityResult<string>> HashPassword([FromBody] UserPasswordEditModel model)
+    {
+      BackofficeUser user = await Api.GetUserById(model.UserId);
+      return await Api.HashPassword(user, model.CurrentPassword, model.NewPassword, model.ConfirmNewPassword);
+    }
+
+
     [ZeroAuthorize(Permissions.Settings.Users, PermissionsValue.Update)]
     public async Task<EntityResult<BackofficeUser>> Disable([FromBody] BackofficeUser model)
     {
diff --git a/zero.Web/Models/UserPasswordEditModel.cs b/zero.Web/Models/UserPasswordEditModel.cs
index 665c02f6..296bbc66 100644
--- a/zero.Web/Models/UserPasswordEditModel.cs
+++ b/zero.Web/Models/UserPasswordEditModel.cs
@@ -2,6 +2,8 @@
 {
   public class UserPasswordEditModel
   {
+    public string UserId { get; set; }
+
     public string CurrentPassword { get; set; }
 
     public string NewPassword { get; set; }
diff --git a/zero.Web/Resources/Localization/zero.en-us.json b/zero.Web/Resources/Localization/zero.en-us.json
index a7fefddf..678a7877 100644
--- a/zero.Web/Resources/Localization/zero.en-us.json
+++ b/zero.Web/Resources/Localization/zero.en-us.json
@@ -195,7 +195,8 @@
     "changepassword": {
       "emptyfields": "Please fill out all fields",
       "nouser": "User is invalid",
-      "newpasswordsnotmatching": "The new password does not match the confirmation"
+      "newpasswordsnotmatching": "The new password does not match the confirmation",
+      "passwordincorrect": "The current password for this user is wrong"
     },
     "preview": {
       "notfound": "Not found",
@@ -328,6 +329,8 @@
       "email": "Email",
       "email_text": "Also used as login username",
       "email_placeholder": "Enter your email address",
+      "passwordHash": "Password",
+      "passwordHash_text": "Password used for login",
       "avatarId": "Avatar",
       "avatarId_text": "Upload a user image",
       "languageId": "Language",