From 243cf92600cf5f177a03a224a6785facb4eba245 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 9 Feb 2024 10:04:11 -0500
Subject: [PATCH] add poc

---
 core/src/components.d.ts                      | 15 ++++++
 .../password-strength/password-strength.tsx   | 34 ++++++++++++++
 .../password-strength/test/basic/index.html   | 46 +++++++++++++++++++
 3 files changed, 95 insertions(+)
 create mode 100644 core/src/components/password-strength/password-strength.tsx
 create mode 100644 core/src/components/password-strength/test/basic/index.html

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index a706eb8971..0c6cff3fcc 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1948,6 +1948,9 @@ export namespace Components {
          */
         "mode"?: "ios" | "md";
     }
+    interface IonPasswordStrength {
+        "strength"?: 'weak' | 'medium' | 'strong';
+    }
     interface IonPicker {
         /**
           * If `true`, the picker will animate.
@@ -4035,6 +4038,12 @@ declare global {
         prototype: HTMLIonNoteElement;
         new (): HTMLIonNoteElement;
     };
+    interface HTMLIonPasswordStrengthElement extends Components.IonPasswordStrength, HTMLStencilElement {
+    }
+    var HTMLIonPasswordStrengthElement: {
+        prototype: HTMLIonPasswordStrengthElement;
+        new (): HTMLIonPasswordStrengthElement;
+    };
     interface HTMLIonPickerElementEventMap {
         "ionPickerDidPresent": void;
         "ionPickerWillPresent": void;
@@ -4672,6 +4681,7 @@ declare global {
         "ion-nav": HTMLIonNavElement;
         "ion-nav-link": HTMLIonNavLinkElement;
         "ion-note": HTMLIonNoteElement;
+        "ion-password-strength": HTMLIonPasswordStrengthElement;
         "ion-picker": HTMLIonPickerElement;
         "ion-picker-column": HTMLIonPickerColumnElement;
         "ion-picker-column-internal": HTMLIonPickerColumnInternalElement;
@@ -6606,6 +6616,9 @@ declare namespace LocalJSX {
          */
         "mode"?: "ios" | "md";
     }
+    interface IonPasswordStrength {
+        "strength"?: 'weak' | 'medium' | 'strong';
+    }
     interface IonPicker {
         /**
           * If `true`, the picker will animate.
@@ -8127,6 +8140,7 @@ declare namespace LocalJSX {
         "ion-nav": IonNav;
         "ion-nav-link": IonNavLink;
         "ion-note": IonNote;
+        "ion-password-strength": IonPasswordStrength;
         "ion-picker": IonPicker;
         "ion-picker-column": IonPickerColumn;
         "ion-picker-column-internal": IonPickerColumnInternal;
@@ -8224,6 +8238,7 @@ declare module "@stencil/core" {
             "ion-nav": LocalJSX.IonNav & JSXBase.HTMLAttributes<HTMLIonNavElement>;
             "ion-nav-link": LocalJSX.IonNavLink & JSXBase.HTMLAttributes<HTMLIonNavLinkElement>;
             "ion-note": LocalJSX.IonNote & JSXBase.HTMLAttributes<HTMLIonNoteElement>;
+            "ion-password-strength": LocalJSX.IonPasswordStrength & JSXBase.HTMLAttributes<HTMLIonPasswordStrengthElement>;
             "ion-picker": LocalJSX.IonPicker & JSXBase.HTMLAttributes<HTMLIonPickerElement>;
             "ion-picker-column": LocalJSX.IonPickerColumn & JSXBase.HTMLAttributes<HTMLIonPickerColumnElement>;
             "ion-picker-column-internal": LocalJSX.IonPickerColumnInternal & JSXBase.HTMLAttributes<HTMLIonPickerColumnInternalElement>;
diff --git a/core/src/components/password-strength/password-strength.tsx b/core/src/components/password-strength/password-strength.tsx
new file mode 100644
index 0000000000..fd9c0edccc
--- /dev/null
+++ b/core/src/components/password-strength/password-strength.tsx
@@ -0,0 +1,34 @@
+import type { ComponentInterface } from '@stencil/core';
+import { Component, Host, Prop, h } from '@stencil/core';
+
+const progressBarValue: any = {
+  'weak': {
+    value: 0.2,
+  },
+  'medium': {
+    value: 0.6,
+  },
+  'strong': {
+    value: 1,
+  }
+}
+
+@Component({
+  tag: 'ion-password-strength',
+  shadow: true
+})
+export class PasswordStrength implements ComponentInterface {
+  @Prop() strength?: 'weak' | 'medium' | 'strong';
+
+  render() {
+    // TODO need a mode virtual prop
+    // TODO need to add colors
+    const data = this.strength !== undefined ? progressBarValue[this.strength] : undefined;
+    return (
+      <Host>
+        <ion-progress-bar value={data?.value || 0}></ion-progress-bar>
+        { this.strength !== undefined && <slot name={this.strength}></slot> }
+      </Host>
+    );
+  }
+}
diff --git a/core/src/components/password-strength/test/basic/index.html b/core/src/components/password-strength/test/basic/index.html
new file mode 100644
index 0000000000..dc25e747a4
--- /dev/null
+++ b/core/src/components/password-strength/test/basic/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Password Strength - Basic</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body class="ion-padding">
+    <ion-input label="Password" type="password" fill="outline"></ion-input>
+
+    <br />
+
+    <ion-password-strength>
+      <div slot="weak">Your password is weak</div>
+      <div slot="medium">Your password is medium</div>
+      <div slot="strong">Your password is strong</div>
+    </ion-password-strength>
+
+    <script>
+      const input = document.querySelector('ion-input');
+      const ps = document.querySelector('ion-password-strength');
+      input.addEventListener('ionInput', () => {
+        const val = input.value;
+
+        if (val.length === 0) {
+          ps.strength = undefined;
+        } else if (val.length < 4) {
+          ps.strength = 'weak';
+        } else if (val.length < 8) {
+          ps.strength = 'medium';
+        } else {
+          ps.strength = 'strong';
+        }
+      });
+    </script>
+  </body>
+</html>