update

package-lock.json

@@ -8,14 +8,14 @@
       "name": "demovote-frontend",
       "version": "0.1.0",
       "dependencies": {
-        "@angular/animations": "^20.3.10",
-        "@angular/common": "^20.3.10",
-        "@angular/compiler": "^20.3.10",
-        "@angular/core": "^20.3.10",
-        "@angular/forms": "^20.3.10",
-        "@angular/platform-browser": "^20.3.10",
-        "@angular/platform-browser-dynamic": "^20.3.10",
-        "@angular/router": "^20.3.10",
+        "@angular/animations": "^21.0.1",
+        "@angular/common": "^21.0.1",
+        "@angular/compiler": "^21.0.1",
+        "@angular/core": "^21.0.1",
+        "@angular/forms": "^21.0.1",
+        "@angular/platform-browser": "^21.0.1",
+        "@angular/platform-browser-dynamic": "^21.0.1",
+        "@angular/router": "^21.0.1",
         "@fortawesome/angular-fontawesome": "^2.0.1",
         "@fortawesome/free-solid-svg-icons": "^6.7.2",
         "@ng-idle/core": "^16.0.0",
@@ -36,8 +36,8 @@
       "devDependencies": {
         "@angular/build": "^20.3.9",
         "@angular/cli": "^20.3.9",
-        "@angular/compiler-cli": "^20.3.10",
-        "@angular/localize": "^20.3.10",
+        "@angular/compiler-cli": "^21.0.1",
+        "@angular/localize": "^21.0.1",
         "@types/file-saver-es": "^2.0.3",
         "@types/jasmine": "~5.1.0",
         "@types/spark-md5": "^3.0.5",
@@ -47,7 +47,7 @@
         "karma-coverage": "~2.2.0",
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.1.0",
-        "typescript": "~5.8.3"
+        "typescript": "~5.9.3"
       }
     },
     "node_modules/@algolia/abtesting": {
@@ -337,9 +337,9 @@
       }
     },
     "node_modules/@angular/animations": {
-      "version": "20.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-20.3.10.tgz",
-      "integrity": "sha512-WSKHyF82URlAQkYGWZjozZgSYj2ClH40GDunayz6kuRewup639iH91HE8sbFfVqKgqELKIAy2E0LhmtDKnMwZA==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-21.0.1.tgz",
+      "integrity": "sha512-P7i/jpNnzXwo0vHEG0cDXYojwTz0WQlXJHrmOJzLVveyfcFwgXYXJxhGGUI2+k21YrlJTKkR/4QZTEJ0GP0f8Q==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -348,7 +348,7 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/core": "20.3.10"
+        "@angular/core": "21.0.1"
       }
     },
     "node_modules/@angular/build": {
@@ -578,9 +578,9 @@
       }
     },
     "node_modules/@angular/common": {
-      "version": "20.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.10.tgz",
-      "integrity": "sha512-12fEzvKbEqjqy1fSk9DMYlJz6dF1MJVXuC5BB+oWWJpd+2lfh4xJ62pkvvLGAICI89hfM5n9Cy5kWnXwnqPZsA==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-21.0.1.tgz",
+      "integrity": "sha512-EqdTGpFp7PVdTVztO7TB6+QxdzUbYXKKT2jwG2Gg+PIQZ2A8XrLPRmGXyH/DLlc5IhnoJlLbngmBRCLCO4xWog==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -589,14 +589,14 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/core": "20.3.10",
+        "@angular/core": "21.0.1",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
     "node_modules/@angular/compiler": {
-      "version": "20.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.3.10.tgz",
-      "integrity": "sha512-cW939Lr8GZjPSYfbQKIDNrUaHWmn2M+zBbERThfq5skLuY+xM60bJFv4NqBekfX6YqKLCY62ilUZlnImYIXaqA==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-21.0.1.tgz",
+      "integrity": "sha512-YRzHpThgCaC9b3xzK1Wx859ePeHEPR7ewQklUB5TYbpzVacvnJo38PcSAx/nzOmgX9y4mgyros6LzECmBb8d8w==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -606,13 +606,13 @@
       }
     },
     "node_modules/@angular/compiler-cli": {
-      "version": "20.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-20.3.10.tgz",
-      "integrity": "sha512-9BemvpFxA26yIVdu8ROffadMkEdlk/AQQ2Jb486w7RPkrvUQ0pbEJukhv9aryJvhbMopT66S5H/j4ipOUMzmzQ==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-21.0.1.tgz",
+      "integrity": "sha512-BxGLtL5bxlaaAs/kSN4oyXhMfvzqsj1Gc4Jauz39R4xtgOF5cIvjBtj6dJ9mD3PK0s6zaFi7WYd0YwWkxhjgMA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/core": "7.28.3",
+        "@babel/core": "7.28.4",
         "@jridgewell/sourcemap-codec": "^1.4.14",
         "chokidar": "^4.0.0",
         "convert-source-map": "^1.5.1",
@@ -629,8 +629,8 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/compiler": "20.3.10",
-        "typescript": ">=5.8 <6.0"
+        "@angular/compiler": "21.0.1",
+        "typescript": ">=5.9 <6.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -638,10 +638,58 @@
         }
       }
     },
+    "node_modules/@angular/compiler-cli/node_modules/@babel/core": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz",
+      "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.3",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-module-transforms": "^7.28.3",
+        "@babel/helpers": "^7.28.4",
+        "@babel/parser": "^7.28.4",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.4",
+        "@babel/types": "^7.28.4",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@angular/compiler-cli/node_modules/@babel/core/node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@angular/compiler-cli/node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@angular/core": {
-      "version": "20.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.10.tgz",
-      "integrity": "sha512-g99Qe+NOVo72OLxowVF9NjCckswWYHmvO7MgeiZTDJbTjF9tXH96dMx7AWq76/GUinV10sNzDysVW16NoAbCRQ==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-21.0.1.tgz",
+      "integrity": "sha512-z0G9Bwzgqr0fQVbtMgqwl+SbbiqtJD7I2xT6U5p45LetKHojcfigH29dxi/vqALPwEdgb2nSIx7RqVhoyynraQ==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -650,9 +698,9 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/compiler": "20.3.10",
+        "@angular/compiler": "21.0.1",
         "rxjs": "^6.5.3 || ^7.4.0",
-        "zone.js": "~0.15.0"
+        "zone.js": "~0.15.0 || ~0.16.0"
       },
       "peerDependenciesMeta": {
         "@angular/compiler": {
@@ -664,9 +712,9 @@
       }
     },
     "node_modules/@angular/forms": {
-      "version": "20.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-20.3.10.tgz",
-      "integrity": "sha512-9yWr51EUauTEINB745AaHwZNTHLpXIm4uxuykxzOg+g2QskEgVfH26uS8G2ogdNuwYpB8wnsXWr34qhM3qgOWw==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-21.0.1.tgz",
+      "integrity": "sha512-BVFPuKjxkzjzKMmpc6KxUKICpVs6J2/KzA4HjtPp/UKvdZPe8dj8vIXuc9pGf8DA4XdkjCwvv8szCgzTWi02LQ==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -675,20 +723,21 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "20.3.10",
-        "@angular/core": "20.3.10",
-        "@angular/platform-browser": "20.3.10",
+        "@angular/common": "21.0.1",
+        "@angular/core": "21.0.1",
+        "@angular/platform-browser": "21.0.1",
+        "@standard-schema/spec": "^1.0.0",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
     "node_modules/@angular/localize": {
-      "version": "20.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-20.3.10.tgz",
-      "integrity": "sha512-kw9yypjUdZP2uEknpNJq8Dryj4xAjwK0aIun0Wz2ZlnP8J6yH0U56qqKRQaqusKjt7fe1OFmJ2XbFEb0LrNlMw==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-21.0.1.tgz",
+      "integrity": "sha512-ouzParJQEQO9cStBkIioyDkQ839eJaedSwNuNXK/MeTZ1NH+pDcvwgYH0Gcn5BTB7fZEY0oCXyBcVxyz37qTcA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/core": "7.28.3",
+        "@babel/core": "7.28.4",
         "@types/babel__core": "7.20.5",
         "tinyglobby": "^0.2.12",
         "yargs": "^18.0.0"
@@ -702,14 +751,62 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/compiler": "20.3.10",
-        "@angular/compiler-cli": "20.3.10"
+        "@angular/compiler": "21.0.1",
+        "@angular/compiler-cli": "21.0.1"
+      }
+    },
+    "node_modules/@angular/localize/node_modules/@babel/core": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz",
+      "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.3",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-module-transforms": "^7.28.3",
+        "@babel/helpers": "^7.28.4",
+        "@babel/parser": "^7.28.4",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.4",
+        "@babel/types": "^7.28.4",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@angular/localize/node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@angular/localize/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
       }
     },
     "node_modules/@angular/platform-browser": {
-      "version": "20.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.10.tgz",
-      "integrity": "sha512-UV8CGoB5P3FmJciI3/I/n3L7C3NVgGh7bIlZ1BaB/qJDtv0Wq0rRAGwmT/Z3gwmrRtfHZWme7/CeQ2CYJmMyUQ==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.0.1.tgz",
+      "integrity": "sha512-68StH9HILKUqNhQKz6KKNHzpgk1n88CIusWlmJvnb0l6iWGf3ydq5lTMKAKiZQmSDAVP5unTGfNvIkh59GRyVg==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -718,9 +815,9 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/animations": "20.3.10",
-        "@angular/common": "20.3.10",
-        "@angular/core": "20.3.10"
+        "@angular/animations": "21.0.1",
+        "@angular/common": "21.0.1",
+        "@angular/core": "21.0.1"
       },
       "peerDependenciesMeta": {
         "@angular/animations": {
@@ -729,9 +826,9 @@
       }
     },
     "node_modules/@angular/platform-browser-dynamic": {
-      "version": "20.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-20.3.10.tgz",
-      "integrity": "sha512-gtZPCuxfxxkMzHYBdTU9tJeTiHj+Aty3C408DJGtGU+7rZgKt9hDC14vQN9OVzB9Ly9Jwj2yr8u7AH80TxxCJw==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-21.0.1.tgz",
+      "integrity": "sha512-TzCKf3p1NBK1NYoPJXLScSjVeiQ52DaXf9gweNUGtCmX3EkVKf1sx4Ny1x4DxaTwB5XZn+O+L3nVLstPBj7UGA==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -740,16 +837,16 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "20.3.10",
-        "@angular/compiler": "20.3.10",
-        "@angular/core": "20.3.10",
-        "@angular/platform-browser": "20.3.10"
+        "@angular/common": "21.0.1",
+        "@angular/compiler": "21.0.1",
+        "@angular/core": "21.0.1",
+        "@angular/platform-browser": "21.0.1"
       }
     },
     "node_modules/@angular/router": {
-      "version": "20.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-20.3.10.tgz",
-      "integrity": "sha512-Z03cfH1jgQ7XMDJj4R8qAGqivcvhdG3wYBwaiN1K1ODBgPhbFKNeD4stKqYp7xBNtswmM2O2jMxrL/Djwju4Gg==",
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-21.0.1.tgz",
+      "integrity": "sha512-EnNbiScESZ0op9XS9qUNncWc1UcSYy90uCbDMVTTChikZt9b+e19OusFMf50zecb96VMMz+BzNY1see7Rmvx4g==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -758,9 +855,9 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "20.3.10",
-        "@angular/core": "20.3.10",
-        "@angular/platform-browser": "20.3.10",
+        "@angular/common": "21.0.1",
+        "@angular/core": "21.0.1",
+        "@angular/platform-browser": "21.0.1",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
@@ -1997,6 +2094,17 @@
         "@jridgewell/trace-mapping": "^0.3.24"
       }
     },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
@@ -3664,6 +3772,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
+      "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/@tufjs/canonical-json": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tufjs/canonical-json/-/canonical-json-2.0.0.tgz",
@@ -9378,9 +9493,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.8.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
-      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {

package.json

@@ -10,14 +10,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^20.3.10",
-    "@angular/common": "^20.3.10",
-    "@angular/compiler": "^20.3.10",
-    "@angular/core": "^20.3.10",
-    "@angular/forms": "^20.3.10",
-    "@angular/platform-browser": "^20.3.10",
-    "@angular/platform-browser-dynamic": "^20.3.10",
-    "@angular/router": "^20.3.10",
+    "@angular/animations": "^21.0.1",
+    "@angular/common": "^21.0.1",
+    "@angular/compiler": "^21.0.1",
+    "@angular/core": "^21.0.1",
+    "@angular/forms": "^21.0.1",
+    "@angular/platform-browser": "^21.0.1",
+    "@angular/platform-browser-dynamic": "^21.0.1",
+    "@angular/router": "^21.0.1",
     "@fortawesome/angular-fontawesome": "^2.0.1",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@ng-idle/core": "^16.0.0",
@@ -38,8 +38,8 @@
   "devDependencies": {
     "@angular/build": "^20.3.9",
     "@angular/cli": "^20.3.9",
-    "@angular/compiler-cli": "^20.3.10",
-    "@angular/localize": "^20.3.10",
+    "@angular/compiler-cli": "^21.0.1",
+    "@angular/localize": "^21.0.1",
     "@types/file-saver-es": "^2.0.3",
     "@types/jasmine": "~5.1.0",
     "@types/spark-md5": "^3.0.5",
@@ -49,6 +49,6 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.8.3"
+    "typescript": "~5.9.3"
   }
 }

src/app/composants/account-password/account-password.component.html

@@ -1,105 +1,117 @@
 <app-menu></app-menu>
 <div id="main">
-<form [formGroup]="form">
+  <form [formGroup]="form">
 
-	<div class="card shadow center">
-    <div class="card-header"><span i18n>Changement de votre mot de passe</span></div>
-		<div class="card-header shadow-sm">
-			<button (click)="goToAccountDetails()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
-		</div>
-		<div class="card-body">
+    <div class="card shadow center">
+      <div class="card-header"><span i18n>Changement de votre mot de passe</span></div>
+      <div class="card-header shadow-sm">
+        <button (click)="goToAccountDetails()" class="btn bg-gradient btn-primary btn-sm"><fa-icon [icon]="faXmark"></fa-icon>&nbsp;<span i18n>Retour</span></button>
+      </div>
+      <div class="card-body">
 
-  		<div class="form-group row">
-  			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Nom</span></label>
-  			<div class="col-sm-8">
-          <input type="text" class="form-control form-control-sm field-separate" formControlName="nom">
-  			</div>
-  		</div>
+        <div class="form-group row">
+          <label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Nom</span></label>
+          <div class="col-sm-8">
+            <input type="text" class="form-control form-control-sm field-separate" formControlName="nom">
+          </div>
+        </div>
 
-  		<div class="form-group row">
-  			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Prénom</span></label>
-  			<div class="col-sm-8">
-  				<input type="text" class="form-control form-control-sm field-separate" formControlName="prenom">
-  			</div>
-  		</div>
+        <div class="form-group row">
+          <label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Prénom</span></label>
+          <div class="col-sm-8">
+            <input type="text" class="form-control form-control-sm field-separate" formControlName="prenom">
+          </div>
+        </div>
 
-  		<div class="form-group row">
-  			<label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Pseudonyme</span></label>
-  			<div class="col-sm-8">
-  				<input type="text" class="form-control form-control-sm field-separate"  formControlName="pseudonyme">
-  			</div>
-  		</div>
+        <div class="form-group row">
+          <label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Pseudonyme</span></label>
+          <div class="col-sm-8">
+            <input type="text" class="form-control form-control-sm field-separate"  formControlName="pseudonyme">
+          </div>
+        </div>
 
-@if (this.newpassword.erreur !== "") {
-			<div class="form-group row">
-        <label class="col-sm-4 col-form-label col-form-label-sm label-nobr"></label>
-        <div class="col-sm-8 col-form-label col-form-label-sm">
-					<div class="alert alert-warning" role="alert">{{ this.newpassword.erreur }}</div>
-				</div>
-			</div>
-}
+        @if (this.newpassword.erreur !== "") {
+          <div class="form-group row">
+            <label class="col-sm-4 col-form-label col-form-label-sm label-nobr"></label>
+            <div class="col-sm-8 col-form-label col-form-label-sm">
+              <div class="alert alert-warning" role="alert">{{ this.newpassword.erreur }}</div>
+            </div>
+          </div>
+        }
 
-      <div class="form-group row">
-        <label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Ancien mot de passe</span>&nbsp;<sup><span class="text-danger">*</span></sup></label>
-  			<div class="col-sm-8">
-          <input type="password" class="form-control form-control-sm field-separate" formControlName="oldPassword">
-          <div class="form-text field-separate" *ngIf="form.controls['oldPassword'].hasError('required')"><span i18n>Par sécurité, l'ancien mot de passe est nécessaire.</span></div>
-  			</div>
-  		</div>
+        <div class="form-group row">
+          <label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Ancien mot de passe</span>&nbsp;<sup><span class="text-danger">*</span></sup></label>
+          <div class="col-sm-8">
+            <input type="password" class="form-control form-control-sm field-separate" formControlName="oldPassword">
+            @if (form.controls['oldPassword'].hasError('required')) {
+              <div class="form-text field-separate"><span i18n>Par sécurité, l'ancien mot de passe est nécessaire.</span></div>
+            }
+          </div>
+        </div>
 
-      <div class="form-group row">
-        <label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Nouveau mot de passe</span>&nbsp;<sup><span class="text-danger">*</span></sup></label>
-        <div class="col-sm-8">
-          <input type="password" class="form-control form-control-sm field-separate" formControlName="newPassword">
-          <div class="form-text field-separate" *ngIf="form.controls['newPassword'].hasError('required')"><span i18n>Le nouveau mot de passe est requis.</span></div>
-          <div class="form-text field-separate" *ngIf="form.controls['newPassword'].hasError('pattern')">
-            <span i18n>Le mot de passe doit remplir ces conditions&nbsp;:</span>
-            <ul>
-              <li [ngClass]="{'d-none':checkValidations('newPassword', 'uppercase')}"><span i18n>Au moins une majuscule.</span></li>
-              <li [ngClass]="{'d-none':checkValidations('newPassword', 'lowercase')}"><span i18n>Au moins une minuscule.</span></li>
-              <li [ngClass]="{'d-none':checkValidations('newPassword', 'special-character')}"><span i18n>Au moins un caractère spécial parmi #$&#64;!%&amp;*?</span></li>
-              <li [ngClass]="{'d-none':checkValidations('newPassword', 'number')}"><span i18n>Au moins un numérique.</span></li>
-              <li [ngClass]="{'d-none':checkValidations('newPassword', 'length')}"><span i18n>Entre 8 et 16 caractères.</span></li>
-            </ul>
+        <div class="form-group row">
+          <label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Nouveau mot de passe</span>&nbsp;<sup><span class="text-danger">*</span></sup></label>
+          <div class="col-sm-8">
+            <input type="password" class="form-control form-control-sm field-separate" formControlName="newPassword">
+            @if (form.controls['newPassword'].hasError('required')) {
+              <div class="form-text field-separate"><span i18n>Le nouveau mot de passe est requis.</span></div>
+            }
+            @if (form.controls['newPassword'].hasError('pattern')) {
+              <div class="form-text field-separate">
+                <span i18n>Le mot de passe doit remplir ces conditions&nbsp;:</span>
+                <ul>
+                  <li [ngClass]="{'d-none':checkValidations('newPassword', 'uppercase')}"><span i18n>Au moins une majuscule.</span></li>
+                  <li [ngClass]="{'d-none':checkValidations('newPassword', 'lowercase')}"><span i18n>Au moins une minuscule.</span></li>
+                  <li [ngClass]="{'d-none':checkValidations('newPassword', 'special-character')}"><span i18n>Au moins un caractère spécial parmi #$&#64;!%&amp;*?</span></li>
+                  <li [ngClass]="{'d-none':checkValidations('newPassword', 'number')}"><span i18n>Au moins un numérique.</span></li>
+                  <li [ngClass]="{'d-none':checkValidations('newPassword', 'length')}"><span i18n>Entre 8 et 16 caractères.</span></li>
+                </ul>
+              </div>
+            }
           </div>
         </div>
-      </div>
 
-      <div class="form-group row">
-        <label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Confirmation</span>&nbsp;<sup><span class="text-danger">*</span></sup></label>
-        <div class="col-sm-8">
-          <input type="password" class="form-control form-control-sm field-separate" formControlName="confirmNewPassword">
-          <div class="form-text field-separate" *ngIf="form.controls['confirmNewPassword'].hasError('required')"><span i18n>La confirmation du nouveau mot de passe (double saisie) est requise.</span></div>
-          <div class="form-text field-separate" *ngIf="form.controls['confirmNewPassword'].hasError('pattern')">
-            <span i18n>Le mot de passe doit remplir ces conditions&nbsp;:</span>
-            <ul>
-              <li [ngClass]="{'d-none':checkValidations('confirmNewPassword', 'uppercase')}"><span i18n>Au moins une majuscule.</span></li>
-              <li [ngClass]="{'d-none':checkValidations('confirmNewPassword', 'lowercase')}"><span i18n>Au moins une minuscule.</span></li>
-              <li [ngClass]="{'d-none':checkValidations('confirmNewPassword', 'special-character')}"><span i18n>Au moins un caractère spécial parmi #$&#64;!%&amp;*?</span></li>
-              <li [ngClass]="{'d-none':checkValidations('confirmNewPassword', 'number')}"><span i18n>Au moins un numérique.</span></li>
-              <li [ngClass]="{'d-none':checkValidations('confirmNewPassword', 'length')}"><span i18n>Entre 8 et 16 caractères.</span></li>
-            </ul>
+        <div class="form-group row">
+          <label class="col-sm-4 col-form-label col-form-label-sm label-nobr"><span i18n>Confirmation</span>&nbsp;<sup><span class="text-danger">*</span></sup></label>
+          <div class="col-sm-8">
+            <input type="password" class="form-control form-control-sm field-separate" formControlName="confirmNewPassword">
+            @if (form.controls['confirmNewPassword'].hasError('required')) {
+              <div class="form-text field-separate"><span i18n>La confirmation du nouveau mot de passe (double saisie) est requise.</span></div>
+            }
+            @if (form.controls['confirmNewPassword'].hasError('pattern')) {
+              <div class="form-text field-separate">
+                <span i18n>Le mot de passe doit remplir ces conditions&nbsp;:</span>
+                <ul>
+                  <li [ngClass]="{'d-none':checkValidations('confirmNewPassword', 'uppercase')}"><span i18n>Au moins une majuscule.</span></li>
+                  <li [ngClass]="{'d-none':checkValidations('confirmNewPassword', 'lowercase')}"><span i18n>Au moins une minuscule.</span></li>
+                  <li [ngClass]="{'d-none':checkValidations('confirmNewPassword', 'special-character')}"><span i18n>Au moins un caractère spécial parmi #$&#64;!%&amp;*?</span></li>
+                  <li [ngClass]="{'d-none':checkValidations('confirmNewPassword', 'number')}"><span i18n>Au moins un numérique.</span></li>
+                  <li [ngClass]="{'d-none':checkValidations('confirmNewPassword', 'length')}"><span i18n>Entre 8 et 16 caractères.</span></li>
+                </ul>
+              </div>
+            }
+            @if (form.hasError('notMatched')) {
+              <div class="form-text field-separate"><span i18n class="text-danger">La confirmation n'est pas identique au nouveau mot de passe.</span></div>
+            }
           </div>
-          <div class="form-text field-separate" *ngIf="form.hasError('notMatched')"><span i18n class="text-danger">La confirmation n'est pas identique au nouveau mot de passe.</span></div>
         </div>
-      </div>
 
-		</div>
-		<div class="card-footer">
-      <button type="button" class="btn bg-gradient btn-danger btn-sm text-left" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="!form.valid"><fa-icon [icon]="faPen"></fa-icon>&nbsp;<span i18n>Modifier</span></button>
-		</div>
-	</div>
-</form>
+      </div>
+      <div class="card-footer">
+        <button type="button" class="btn bg-gradient btn-danger btn-sm text-left" data-bs-toggle="modal" data-bs-target="#modalModifier" [disabled]="!form.valid"><fa-icon [icon]="faPen"></fa-icon>&nbsp;<span i18n>Modifier</span></button>
+      </div>
+    </div>
+  </form>
 
-<div class="modal fade" id="modalModifier" tabindex="-1" aria-labelledby="modalModifierTitre" aria-hidden="true">
-	<div class="modal-dialog modal-dialog-centered" role="document">
-		<div class="modal-content">
-			<div class="modal-body"><span i18n>Changement du mot de passe ?</span></div>
-			<div class="modal-footer">
-				<button type="button" class="btn bg-gradient btn-secondary btn-sm" data-bs-dismiss="modal"><span i18n>Annuler</span></button>
-        <button type="button" class="btn bg-gradient btn-danger btn-sm" (click)="updatePasswordConfirmed()" data-bs-dismiss="modal"><span i18n>Confirmer</span></button>
-			</div>
-		</div>
-	</div>
-</div>
+  <div class="modal fade" id="modalModifier" tabindex="-1" aria-labelledby="modalModifierTitre" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+      <div class="modal-content">
+        <div class="modal-body"><span i18n>Changement du mot de passe ?</span></div>
+        <div class="modal-footer">
+          <button type="button" class="btn bg-gradient btn-secondary btn-sm" data-bs-dismiss="modal"><span i18n>Annuler</span></button>
+          <button type="button" class="btn bg-gradient btn-danger btn-sm" (click)="updatePasswordConfirmed()" data-bs-dismiss="modal"><span i18n>Confirmer</span></button>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>