From 8059cae8e78fd38bd0e65fe872a19047d6f2b56a Mon Sep 17 00:00:00 2001
From: itsconquest <william.conquest@portainer.io>
Date: Wed, 15 Jun 2022 16:01:19 +1200
Subject: [PATCH] fix(auth): notify user password requirements [EE-3344]
 (#7042)

* fix(auth): notify user password requirements [EE-3344]

* fix angular code
---
 .../components/PasswordCheckHint.tsx          | 20 +++++++++++++++++--
 app/portainer/views/account/account.html      |  2 +-
 .../views/account/accountController.js        |  3 +++
 app/portainer/views/init/admin/initAdmin.html |  3 ++-
 app/portainer/views/users/edit/user.html      |  2 +-
 app/portainer/views/users/users.html          |  4 ++--
 6 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/app/portainer/components/PasswordCheckHint.tsx b/app/portainer/components/PasswordCheckHint.tsx
index 1eb435910..6164d5755 100644
--- a/app/portainer/components/PasswordCheckHint.tsx
+++ b/app/portainer/components/PasswordCheckHint.tsx
@@ -1,7 +1,15 @@
 import { react2angular } from '@/react-tools/react2angular';
 import { usePublicSettings } from '@/portainer/settings/queries';
 
-export function PasswordCheckHint() {
+interface Props {
+  passwordValid: boolean;
+  forceChangePassword?: boolean;
+}
+
+export function PasswordCheckHint({
+  passwordValid,
+  forceChangePassword,
+}: Props) {
   const settingsQuery = usePublicSettings();
   const minPasswordLength = settingsQuery.data?.RequiredPasswordLength;
 
@@ -12,10 +20,18 @@ export function PasswordCheckHint() {
           className="fa fa-exclamation-triangle orange-icon space-right"
           aria-hidden="true"
         />
+        {forceChangePassword &&
+          'An administrator has changed your password requirements, '}
         The password must be at least {minPasswordLength} characters long.
+        {passwordValid && (
+          <i className="fa fa-check green-icon space-left" aria-hidden="true" />
+        )}
       </p>
     </div>
   );
 }
 
-export const PasswordCheckHintAngular = react2angular(PasswordCheckHint, []);
+export const PasswordCheckHintAngular = react2angular(PasswordCheckHint, [
+  'passwordValid',
+  'forceChangePassword',
+]);
diff --git a/app/portainer/views/account/account.html b/app/portainer/views/account/account.html
index 3099395b3..014ba16dc 100644
--- a/app/portainer/views/account/account.html
+++ b/app/portainer/views/account/account.html
@@ -54,7 +54,7 @@
               </div>
             </div>
           </div>
-          <password-check-hint ng-if="!form.new_password.$valid || (forceChangePassword && !formValues.newPassword)"></password-check-hint>
+          <password-check-hint password-valid="form.new_password.$valid && formValues.newPassword" force-change-password="forceChangePassword"></password-check-hint>
           <div ng-if="userRole === 1">
             <p class="text-muted">
               <i class="fa fa-exclamation-circle blue-icon" aria-hidden="true"></i>
diff --git a/app/portainer/views/account/accountController.js b/app/portainer/views/account/accountController.js
index 22b9de34f..5c5c55407 100644
--- a/app/portainer/views/account/accountController.js
+++ b/app/portainer/views/account/accountController.js
@@ -51,6 +51,9 @@ angular.module('portainer.app').controller('AccountController', [
       if ($scope.userRole === 1 && newTransition.to().name === 'portainer.settings.authentication') {
         return true;
       }
+      if (newTransition.to().name === 'portainer.logout') {
+        return true;
+      }
       if ($scope.forceChangePassword) {
         ModalService.confirmForceChangePassword();
       }
diff --git a/app/portainer/views/init/admin/initAdmin.html b/app/portainer/views/init/admin/initAdmin.html
index 044e289af..6f29b58a7 100644
--- a/app/portainer/views/init/admin/initAdmin.html
+++ b/app/portainer/views/init/admin/initAdmin.html
@@ -67,10 +67,11 @@
             <!-- !confirm-password-input -->
             <!-- note -->
             <div class="form-group">
-              <div class="col-sm-12 text-muted" ng-if="!form.password.$valid">
+              <div class="col-sm-12 text-muted">
                 <p>
                   <i class="fa fa-exclamation-triangle orange-icon space-right" aria-hidden="true"></i>
                   <span>The password must be at least {{ requiredPasswordLength }} characters long.</span>
+                  <i class="fa fa-check green-icon space-left" aria-hidden="true" ng-if="form.password.$valid && formValues.Password"></i>
                 </p>
               </div>
             </div>
diff --git a/app/portainer/views/users/edit/user.html b/app/portainer/views/users/edit/user.html
index 22026b512..5aa0a599a 100644
--- a/app/portainer/views/users/edit/user.html
+++ b/app/portainer/views/users/edit/user.html
@@ -83,7 +83,7 @@
             </div>
           </div>
           <!-- !confirm-password-input -->
-          <password-check-hint ng-if="!form.new_password.$valid"></password-check-hint>
+          <password-check-hint password-valid="form.new_password.$valid && formValues.newPassword"></password-check-hint>
           <div class="form-group">
             <div class="col-sm-2">
               <button
diff --git a/app/portainer/views/users/users.html b/app/portainer/views/users/users.html
index 4093e9271..f9fe352be 100644
--- a/app/portainer/views/users/users.html
+++ b/app/portainer/views/users/users.html
@@ -80,10 +80,10 @@
           <!-- !confirm-password-input -->
 
           <!-- password-check-hint -->
-          <div class="form-group" ng-if="AuthenticationMethod === 1 && !form.password.$valid">
+          <div class="form-group" ng-if="AuthenticationMethod === 1">
             <div class="col-sm-3 col-lg-2"></div>
             <div class="col-sm-8">
-              <password-check-hint></password-check-hint>
+              <password-check-hint password-valid="form.password.$valid && formValues.Password"></password-check-hint>
             </div>
           </div>
           <!-- ! password-check-hint  -->