From 6aaf8384512185a3a319ce6b3e2505e910468e64 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Fri, 26 Mar 2021 19:29:25 +0100
Subject: [PATCH] Now using pw strength component

ref #106
---
 src/components/settings/Settings.svelte | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/settings/Settings.svelte b/src/components/settings/Settings.svelte
index e570390a..8d62ce82 100644
--- a/src/components/settings/Settings.svelte
+++ b/src/components/settings/Settings.svelte
@@ -4,6 +4,7 @@
   import { MeService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   import ConfirmProfileDeletion from "./ConfirmProfileDeletion.svelte";
+  import PasswordStrength from "../auth/PasswordStrength.svelte";
   $: data_loaded = false;
   $: delete_triggered = false;
   $: original_data = {};
@@ -45,7 +46,7 @@
   function changePassword() {
     if (data_loaded === true && update_password_enabled) {
       Toastify({
-        text: $_('changing-your-password'),
+        text: $_("changing-your-password"),
         duration: 2500,
       }).showToast();
       let postdata = Object.assign({}, original_data);
@@ -56,7 +57,7 @@
           password_change = "";
           postdata = {};
           Toastify({
-            text: $_('password-changed'),
+            text: $_("password-changed"),
             duration: 2500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
@@ -242,10 +243,7 @@
                     class="border-gray-300 placeholder-gray-500 appearance-none rounded-md relative block w-full px-3 py-2 border focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
                     placeholder={$_('password')} />
                 </div>
-                {#if password_change != password_confirm && password_change.length > 0}
-                  <span
-                    class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">{$_('passwords-dont-match')}</span>
-                {/if}
+                <PasswordStrength bind:password_change bind:password_confirm />
               </div>
               <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
                 <button
@@ -257,9 +255,9 @@
                   {$_('update-password')}
                 </button>
                 {#if update_password_enabled}
-                <p>
-                  {$_('after-the-update-youll-get-logged-out-please-login-with-your-new-password-after-that')}
-                </p>
+                  <p>
+                    {$_('after-the-update-youll-get-logged-out-please-login-with-your-new-password-after-that')}
+                  </p>
                 {/if}
               </div>
             </div>