From 1f03a04a23ffe7e163db84c3c178b7e21a8c313a Mon Sep 17 00:00:00 2001
From: Philip Peterson <philip-peterson@users.noreply.github.com>
Date: Sat, 20 Nov 2021 14:43:30 -0500
Subject: [PATCH] Replace `crm` example with `password strength` to show
 controlled components (#1706)

* Remove crm example

* Add password_strength example

* Update README

* Remove .DS_Store

* Update README

* Cargo fmt

* Apply suggestions from code review

* Update list of examples

* update the pr to work with latest master

* fix readme

* add newline

Co-authored-by: Simon <simon@siku2.io>
Co-authored-by: Julius Lungys <32368314+voidpumpkin@users.noreply.github.com>
---
 Cargo.toml                                   |   2 +-
 examples/README.md                           |  50 ++++----
 examples/crm/Cargo.toml                      |  19 ---
 examples/crm/README.md                       |  28 -----
 examples/crm/index.html                      |   9 --
 examples/crm/src/add_client.rs               | 109 -----------------
 examples/crm/src/main.rs                     | 120 -------------------
 examples/password_strength/Cargo.toml        |  14 +++
 examples/password_strength/README.md         |  21 ++++
 examples/password_strength/index.html        |  11 ++
 examples/password_strength/index.scss        |  52 ++++++++
 examples/password_strength/src/app.rs        |  86 +++++++++++++
 examples/password_strength/src/main.rs       |  12 ++
 examples/password_strength/src/password.rs   |  27 +++++
 examples/password_strength/src/text_input.rs |  34 ++++++
 15 files changed, 283 insertions(+), 311 deletions(-)
 delete mode 100644 examples/crm/Cargo.toml
 delete mode 100644 examples/crm/README.md
 delete mode 100644 examples/crm/index.html
 delete mode 100644 examples/crm/src/add_client.rs
 delete mode 100644 examples/crm/src/main.rs
 create mode 100644 examples/password_strength/Cargo.toml
 create mode 100644 examples/password_strength/README.md
 create mode 100644 examples/password_strength/index.html
 create mode 100644 examples/password_strength/index.scss
 create mode 100644 examples/password_strength/src/app.rs
 create mode 100644 examples/password_strength/src/main.rs
 create mode 100644 examples/password_strength/src/password.rs
 create mode 100644 examples/password_strength/src/text_input.rs

diff --git a/Cargo.toml b/Cargo.toml
index 402b7fef213..2bab65a51a8 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -12,7 +12,6 @@ members = [
   # Examples
   "examples/boids",
   "examples/counter",
-  "examples/crm",
   "examples/dyn_create_destroy_apps",
   "examples/file_upload",
   "examples/function_todomvc",
@@ -25,6 +24,7 @@ members = [
   "examples/multi_thread",
   "examples/nested_list",
   "examples/node_refs",
+  "examples/password_strength",
   "examples/portals",
   "examples/pub_sub",
   "examples/router",
diff --git a/examples/README.md b/examples/README.md
index 4789e7da3b9..8f533f61dfa 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -26,34 +26,34 @@ As an example, check out the TodoMVC example here: <https://examples.yew.rs/todo
 
 ## List of examples
 
-| Example                                             | Description                                                                                                                        |
-| --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| [boids](boids)                                      | Yew port of [Boids](https://en.wikipedia.org/wiki/Boids)                                                                           |
-| [counter](counter)                                  | Simple counter which can be incremented and decremented                                                                            |
-| [crm](crm)                                          | Shallow customer relationship management tool                                                                                      |
-| [dyn_create_destroy_apps](dyn_create_destroy_apps)  | Uses the function `start_app_in_element` and the `AppHandle` struct to dynamically create and delete Yew apps                      |
-| [file_upload](file_upload)                          | Uses the `gloo::file` to read the content of user uploaded files                                                               |
-| [function_todomvc](function_todomvc)                | Implementation of [TodoMVC](http://todomvc.com/) using function components and hooks.                                              |
-| [futures](futures)                                  | Demonstrates how you can use futures and async code with Yew. Features a Markdown renderer.                                        |
-| [game_of_life](game_of_life)                        | Implementation of [Conway's Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life)                                   |
-| [inner_html](inner_html)                            | Embeds an external document as raw HTML by manually managing the element                                                           |
-| [js_callback](js_callback)                          | Interacts with JavaScript code                                                                                                     |
-| [keyed_list](keyed_list)                            | Demonstrates how to use keys to improve the performance of lists                                                                   |
-| [mount_point](mount_point)                          | Shows how to mount the root component to a custom element                                                                          |
-| [multi_thread](multi_thread)                        | Demonstrates the use of Web Workers to offload computation to the background                                                       |
-| [nested_list](nested_list)                          | Renders a styled list which tracks hover events                                                                                    |
-| [node_refs](node_refs)                              | Uses a [`NodeRef`](https://yew.rs/concepts/components/refs) to focus the input element under the cursor                       |
-| [pub_sub](pub_sub)                                  | Cross-component communication using [Agents](https://yew.rs/concepts/agents)                                                  |
-| [router](router)                                    | The best yew blog built with `yew-router`                                                                                          |
-| [store](store)                                      | Showcases the `yewtil::store` API                                                                                                  |
-| [timer](timer)                                      | Demonstrates the use of the interval and timeout services                                                                          |
-| [todomvc](todomvc)                                  | Implementation of [TodoMVC](http://todomvc.com/)                                                                                   |
-| [two_apps](two_apps)                                | Runs two separate Yew apps which can communicate with each other                                                                   |
-| [webgl](webgl)                                      | Controls a [WebGL canvas](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL) from Yew |
+| Example                                            | Description                                                                                                                        |
+| -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| [boids](boids)                                     | Yew port of [Boids](https://en.wikipedia.org/wiki/Boids)                                                                           |
+| [counter](counter)                                 | Simple counter which can be incremented and decremented                                                                            |
+| [dyn_create_destroy_apps](dyn_create_destroy_apps) | Uses the function `start_app_in_element` and the `AppHandle` struct to dynamically create and delete Yew apps                      |
+| [file_upload](file_upload)                         | Uses the `gloo::file` to read the content of user uploaded files                                                                   |
+| [function_todomvc](function_todomvc)               | Implementation of [TodoMVC](http://todomvc.com/) using function components and hooks.                                              |
+| [futures](futures)                                 | Demonstrates how you can use futures and async code with Yew. Features a Markdown renderer.                                        |
+| [game_of_life](game_of_life)                       | Implementation of [Conway's Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life)                                   |
+| [inner_html](inner_html)                           | Embeds an external document as raw HTML by manually managing the element                                                           |
+| [js_callback](js_callback)                         | Interacts with JavaScript code                                                                                                     |
+| [keyed_list](keyed_list)                           | Demonstrates how to use keys to improve the performance of lists                                                                   |
+| [mount_point](mount_point)                         | Shows how to mount the root component to a custom element                                                                          |
+| [multi_thread](multi_thread)                       | Demonstrates the use of Web Workers to offload computation to the background                                                       |
+| [nested_list](nested_list)                         | Renders a styled list which tracks hover events                                                                                    |
+| [node_refs](node_refs)                             | Uses a [`NodeRef`](https://yew.rs/concepts/components/refs) to focus the input element under the cursor                            |
+| [password_strength](password_strength)             | A password strength estimator implemented in Yew                                                                                   |
+| [pub_sub](pub_sub)                                 | Cross-component communication using [Agents](https://yew.rs/concepts/agents)                                                       |
+| [router](router)                                   | The best yew blog built with `yew-router`                                                                                          |
+| [store](store)                                     | Showcases the `yewtil::store` API                                                                                                  |
+| [timer](timer)                                     | Demonstrates the use of the interval and timeout services                                                                          |
+| [todomvc](todomvc)                                 | Implementation of [TodoMVC](http://todomvc.com/)                                                                                   |
+| [two_apps](two_apps)                               | Runs two separate Yew apps which can communicate with each other                                                                   |
+| [webgl](webgl)                                     | Controls a [WebGL canvas](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL) from Yew |
 
 ## Next steps
 
-Have a look at Yew's [starter templates](https://yew.rs/getting-started/starter-templates) when starting a project using Yew – they can significantly simplify things.
+Have a look at Yew's [starter templates](https://yew.rs/getting-started/starter-templates) when starting a project using Yew – they can significantly simplify things.
 
 ## Help out
 
diff --git a/examples/crm/Cargo.toml b/examples/crm/Cargo.toml
deleted file mode 100644
index 0d9fe50eb19..00000000000
--- a/examples/crm/Cargo.toml
+++ /dev/null
@@ -1,19 +0,0 @@
-[package]
-name = "crm"
-version = "0.1.0"
-authors = ["Denis Kolodin <deniskolodin@gmail.com>"]
-edition = "2018"
-license = "MIT OR Apache-2.0"
-
-[dependencies]
-serde = "1"
-serde_derive = "1"
-yew = { path = "../../packages/yew" }
-gloo = "0.4"
-
-[dependencies.web-sys]
-version = "0.3"
-features = [
-	"HtmlInputElement",
-	"HtmlTextAreaElement",
-]
diff --git a/examples/crm/README.md b/examples/crm/README.md
deleted file mode 100644
index bb0f9f0ef72..00000000000
--- a/examples/crm/README.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# CRM Example
-
-[![Demo](https://img.shields.io/website?label=demo&url=https%3A%2F%2Fexamples.yew.rs%2Fcrm)](https://examples.yew.rs/crm)
-
-A very shallow customer relationship management tool.
-It consists of a list of clients with an associated name and description.
-It's possible to create new clients and clear the list entirely.
-
-## Concepts
-
-This example features multiple views ("scenes") which the user can switch between.
-
-For a much more sophisticated approach check out [`yew-router`](https://yew.rs/concepts/router/).
-One major flaw with the implementation used by this example is that the scenes aren't tied to the URL.
-Reloading the page always brings the user back to the initial scene.
-
-The example also uses the [`gloo::storage`](https://gloo-rs.web.app/docs/storage)
-to persist the clients across sessions.
-
-## Improvements
-
-- Improve the presentation of the example with CSS.
-
-### Features
-
-- Edit a client
-- Remove individual clients from the list
-- Pagination
diff --git a/examples/crm/index.html b/examples/crm/index.html
deleted file mode 100644
index f61332518e7..00000000000
--- a/examples/crm/index.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>Yew • CRM</title>
-  </head>
-
-  <body></body>
-</html>
diff --git a/examples/crm/src/add_client.rs b/examples/crm/src/add_client.rs
deleted file mode 100644
index 1d6c0e12065..00000000000
--- a/examples/crm/src/add_client.rs
+++ /dev/null
@@ -1,109 +0,0 @@
-use crate::Client;
-use web_sys::{HtmlInputElement, HtmlTextAreaElement};
-use yew::{
-    classes, events::Event, html, Callback, Component, Context, Html, Properties, TargetCast,
-};
-
-#[derive(Debug)]
-pub enum Msg {
-    UpdateFirstName(String),
-    UpdateLastName(String),
-    UpdateDescription(String),
-    Add,
-    Abort,
-}
-
-#[derive(Clone, Debug, PartialEq, Properties)]
-pub struct Props {
-    pub on_add: Callback<Client>,
-    pub on_abort: Callback<()>,
-}
-
-pub struct AddClientForm {
-    client: Client,
-}
-impl Component for AddClientForm {
-    type Message = Msg;
-    type Properties = Props;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self {
-            client: Client::default(),
-        }
-    }
-
-    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
-        let client = &mut self.client;
-        match msg {
-            Msg::UpdateFirstName(value) => {
-                client.first_name = value;
-                true
-            }
-            Msg::UpdateLastName(value) => {
-                client.last_name = value;
-                true
-            }
-            Msg::UpdateDescription(value) => {
-                client.description = value;
-                true
-            }
-            Msg::Add => {
-                ctx.props().on_add.emit(std::mem::take(client));
-                true
-            }
-            Msg::Abort => {
-                ctx.props().on_abort.emit(());
-                false
-            }
-        }
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let link = ctx.link();
-        let Self { client, .. } = self;
-
-        let update_name = |f: fn(String) -> Msg| {
-            link.callback(move |e: Event| {
-                let input: HtmlInputElement = e.target_unchecked_into();
-                f(input.value())
-            })
-        };
-
-        let update_desc = link.callback(|e: Event| {
-            let textarea: HtmlTextAreaElement = e.target_unchecked_into();
-            Msg::UpdateDescription(textarea.value())
-        });
-
-        html! {
-            <>
-                <div class="names">
-                    <input
-                        class={classes!("new-client", "firstname")}
-                        placeholder="First name"
-                        onchange={update_name(Msg::UpdateFirstName)}
-                    />
-                    <input
-                        class={classes!("new-client", "lastname")}
-                        placeholder="Last name"
-                        onchange={update_name(Msg::UpdateLastName)}
-                    />
-                    <textarea
-                        class={classes!("new-client", "description")}
-                        placeholder="Description"
-                        onchange={update_desc}
-                    />
-                </div>
-
-                <button
-                    disabled={client.first_name.is_empty() || client.last_name.is_empty()}
-                    onclick={link.callback(|_| Msg::Add)}
-                >
-                    { "Add New" }
-                </button>
-                <button onclick={link.callback(|_| Msg::Abort)}>
-                    { "Go Back" }
-                </button>
-            </>
-        }
-    }
-}
diff --git a/examples/crm/src/main.rs b/examples/crm/src/main.rs
deleted file mode 100644
index c5bc796bea3..00000000000
--- a/examples/crm/src/main.rs
+++ /dev/null
@@ -1,120 +0,0 @@
-use add_client::AddClientForm;
-use gloo::storage::{LocalStorage, Storage};
-use serde::{Deserialize, Serialize};
-use yew::{html, Component, Context, Html};
-
-mod add_client;
-
-#[derive(Serialize, Deserialize, Clone, Debug, Default)]
-pub struct Client {
-    pub first_name: String,
-    pub last_name: String,
-    pub description: String,
-}
-
-impl Client {
-    pub fn render(&self) -> Html {
-        html! {
-            <div class="client" style="margin-bottom: 50px">
-                <p>{ format!("First Name: {}", self.first_name) }</p>
-                <p>{ format!("Last Name: {}", self.last_name) }</p>
-                <p>{ "Description:" }</p>
-                { &self.description }
-            </div>
-        }
-    }
-}
-
-/// storage key for the clients
-const KEY: &str = "yew.crm.clients";
-
-#[derive(Debug)]
-pub enum Scene {
-    ClientsList,
-    NewClientForm,
-    Settings,
-}
-
-#[derive(Debug)]
-pub enum Msg {
-    SwitchTo(Scene),
-    AddClient(Client),
-    ClearClients,
-}
-
-pub struct Model {
-    clients: Vec<Client>,
-    scene: Scene,
-}
-
-impl Component for Model {
-    type Message = Msg;
-    type Properties = ();
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        let clients = LocalStorage::get(KEY).unwrap_or_else(|_| Vec::new());
-        Self {
-            clients,
-            scene: Scene::ClientsList,
-        }
-    }
-
-    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
-        match msg {
-            Msg::SwitchTo(scene) => {
-                self.scene = scene;
-                true
-            }
-            Msg::AddClient(client) => {
-                self.clients.push(client);
-                LocalStorage::set(KEY, &self.clients).expect("failed to set");
-                // redirect to client_list after save
-                self.scene = Scene::ClientsList;
-                true
-            }
-            Msg::ClearClients => {
-                if gloo::dialogs::confirm("Do you really want to clear the data?") {
-                    self.clients.clear();
-                    LocalStorage::delete(KEY);
-                    // redirect to client_list after clear
-                    self.scene = Scene::ClientsList;
-                    true
-                } else {
-                    false
-                }
-            }
-        }
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        match self.scene {
-            Scene::ClientsList => html! {
-                <div class="crm">
-                    <h1>{"List of clients"}</h1>
-                    <div class="clients">
-                        { for self.clients.iter().map(Client::render) }
-                    </div>
-                    <button onclick={ctx.link().callback(|_| Msg::SwitchTo(Scene::NewClientForm))}>{ "Add New" }</button>
-                    <button onclick={ctx.link().callback(|_| Msg::SwitchTo(Scene::Settings))}>{ "Settings" }</button>
-                </div>
-            },
-            Scene::NewClientForm => html! {
-                <div class="crm">
-                    <h1>{"Add a new client"}</h1>
-                    <AddClientForm on_add={ctx.link().callback(Msg::AddClient)} on_abort={ctx.link().callback(|_| Msg::SwitchTo(Scene::ClientsList))} />
-                </div>
-            },
-            Scene::Settings => html! {
-                <div>
-                    <h1>{"Settings"}</h1>
-                    <button onclick={ctx.link().callback(|_| Msg::ClearClients)}>{ "Remove all clients" }</button>
-                    <button onclick={ctx.link().callback(|_| Msg::SwitchTo(Scene::ClientsList))}>{ "Go Back" }</button>
-                </div>
-            },
-        }
-    }
-}
-
-fn main() {
-    yew::start_app::<Model>();
-}
diff --git a/examples/password_strength/Cargo.toml b/examples/password_strength/Cargo.toml
new file mode 100644
index 00000000000..701c74dba5e
--- /dev/null
+++ b/examples/password_strength/Cargo.toml
@@ -0,0 +1,14 @@
+[package]
+name = "password_strength"
+version = "0.1.0"
+authors = ["Philip Peterson <pc.peterso@gmail.com>"]
+edition = "2018"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+[dependencies]
+yew = { path = "../../packages/yew" }
+zxcvbn = "2.1.2"
+js-sys = "0.3.46"
+web-sys = { version = "0.3", features = ["Event","EventTarget","InputEvent"] }
+wasm-bindgen = "0.2"
+chrono = { version = "0.4", features = ["wasmbind"] }
diff --git a/examples/password_strength/README.md b/examples/password_strength/README.md
new file mode 100644
index 00000000000..c5becc98fc0
--- /dev/null
+++ b/examples/password_strength/README.md
@@ -0,0 +1,21 @@
+# Password Strength Estimator Example
+
+[![Demo](https://img.shields.io/website?label=demo&url=https%3A%2F%2Fexamples.yew.rs%2Fpassword_strength)](https://examples.yew.rs/password_strength)
+
+A password strength estimator implemented in Yew.
+
+## Running
+
+You should run this example with the `--release` flag:
+
+```bash
+trunk serve --release
+```
+
+## Concepts
+
+This example
+
+- makes use of controlled components.
+- extracts new value from `InputEvent`
+- calls out to `js_sys` to invoke a foreign function, `Math.random()`
diff --git a/examples/password_strength/index.html b/examples/password_strength/index.html
new file mode 100644
index 00000000000..0cc24267f07
--- /dev/null
+++ b/examples/password_strength/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Yew • Password Strength Estimator</title>
+
+    <link data-trunk rel="sass" href="index.scss" />
+  </head>
+
+  <body></body>
+</html>
diff --git a/examples/password_strength/index.scss b/examples/password_strength/index.scss
new file mode 100644
index 00000000000..84d9504ea2e
--- /dev/null
+++ b/examples/password_strength/index.scss
@@ -0,0 +1,52 @@
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  color: rgba(0, 0, 0, 0.7);
+
+  background: linear-gradient(to bottom right, #00d034, #c0c0c0);
+  font-size: 1.5rem;
+  font-family: sans-serif;
+}
+
+main {
+  width: 30em;
+}
+
+.entry,
+.readout {
+  margin: 0 auto;
+  padding: 8px;
+  border: 1px solid black;
+  background-color: rgba(0, 0, 0, 0.25);
+}
+
+.entry input {
+  font-size: 1.5rem;
+  background: transparent;
+  border: 1px solid rgba(0, 0, 0, 0.6);
+  width: 100%;
+  display: block;
+  box-sizing: border-box;
+  margin-top: 16px;
+}
+
+.readout {
+  margin-top: 16px;
+}
+
+input:focus {
+  outline: 0;
+  border-color: #550096;
+}
+
+.footnote {
+  font-size: 0.9rem;
+  margin-top: 16px;
+}
diff --git a/examples/password_strength/src/app.rs b/examples/password_strength/src/app.rs
new file mode 100644
index 00000000000..4bf55dcdd4b
--- /dev/null
+++ b/examples/password_strength/src/app.rs
@@ -0,0 +1,86 @@
+extern crate zxcvbn;
+
+use yew::prelude::*;
+use zxcvbn::zxcvbn;
+
+use crate::password::generate_password;
+use crate::text_input::TextInput;
+
+pub enum Msg {
+    SetPassword(String),
+    RegeneratePassword,
+}
+
+#[derive(Debug, Default)]
+pub struct App {
+    password: String,
+}
+
+impl App {
+    fn get_estimate(&self) -> Option<u8> {
+        zxcvbn(&self.password, &[])
+            .ok()
+            .map(|estimate| estimate.score())
+    }
+    fn redout_top_row_text(&self) -> String {
+        if self.password.is_empty() {
+            return "Provide a password".to_string();
+        }
+        let estimate_text = match self.get_estimate().unwrap_or(0) {
+            0 => "That's a password?",
+            1 => "You can do a lot better.",
+            2 => "Meh",
+            3 => "Good",
+            _ => "Great!",
+        };
+        format!("Complexity = {}", estimate_text)
+    }
+}
+
+impl Component for App {
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self::default()
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            Msg::SetPassword(next_password) => self.password = next_password,
+            Msg::RegeneratePassword => self.password = generate_password(),
+        };
+        true
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let on_change = ctx.link().callback(Msg::SetPassword);
+        let onclick = ctx.link().callback(|_| Msg::RegeneratePassword);
+        html! {
+            <main>
+                <div class="entry">
+                    <div>
+                        {"Enter a password below:"}
+                        <div class="footnote">
+                            {"(Will show in clear text)"}
+                        </div>
+                    </div>
+                    <div>
+                        <TextInput {on_change} value={self.password.clone()} />
+                    </div>
+                </div>
+                <div class="readout">
+                    <div>
+                        {self.redout_top_row_text()}
+                    </div>
+                    <button {onclick}>
+                        {"Generate new password *"}
+                    </button>
+                    <div class="footnote">
+                        {"* Note: generated passwords are not actually cryptographically secure"}
+                    </div>
+                </div>
+            </main>
+        }
+    }
+}
diff --git a/examples/password_strength/src/main.rs b/examples/password_strength/src/main.rs
new file mode 100644
index 00000000000..19ed552dc96
--- /dev/null
+++ b/examples/password_strength/src/main.rs
@@ -0,0 +1,12 @@
+#![recursion_limit = "256"]
+
+mod text_input;
+
+mod app;
+mod password;
+
+use app::App;
+
+fn main() {
+    yew::start_app::<App>();
+}
diff --git a/examples/password_strength/src/password.rs b/examples/password_strength/src/password.rs
new file mode 100644
index 00000000000..0f32a5ffacf
--- /dev/null
+++ b/examples/password_strength/src/password.rs
@@ -0,0 +1,27 @@
+const PASSWORD_LEN: i32 = 17;
+
+pub fn generate_password() -> String {
+    let mut space: Vec<char> = vec![];
+    for c in 'a'..'z' {
+        space.push(c);
+    }
+    for c in 'A'..'Z' {
+        space.push(c);
+    }
+    for c in '0'..'9' {
+        space.push(c);
+    }
+    space.extend(
+        [
+            '_', ']', '[', '.', '-', '+', '=', ':', ';', '/', '?', '<', '>', '\\', '*', '&', '^',
+            '%', '$', '#', '@', '!', '`', '~', ',',
+        ]
+        .iter(),
+    );
+    let mut result = "".to_string();
+    for _ in 0..PASSWORD_LEN {
+        let i = (js_sys::Math::random() * space.len() as f64).floor() as usize;
+        result.push(space[i]);
+    }
+    result
+}
diff --git a/examples/password_strength/src/text_input.rs b/examples/password_strength/src/text_input.rs
new file mode 100644
index 00000000000..48b099a7865
--- /dev/null
+++ b/examples/password_strength/src/text_input.rs
@@ -0,0 +1,34 @@
+use wasm_bindgen::JsCast;
+use wasm_bindgen::UnwrapThrowExt;
+use web_sys::Event;
+use web_sys::HtmlInputElement;
+use web_sys::InputEvent;
+use yew::prelude::*;
+
+#[derive(Clone, PartialEq, Properties)]
+pub struct Props {
+    pub value: String,
+    pub on_change: Callback<String>,
+}
+
+fn get_value_from_input_event(e: InputEvent) -> String {
+    let event: Event = e.dyn_into().unwrap_throw();
+    let event_target = event.target().unwrap_throw();
+    let target: HtmlInputElement = event_target.dyn_into().unwrap_throw();
+    web_sys::console::log_1(&target.value().into());
+    target.value()
+}
+
+/// Controlled Text Input Component
+#[function_component(TextInput)]
+pub fn text_input(props: &Props) -> Html {
+    let Props { value, on_change } = props.clone();
+
+    let oninput = Callback::from(move |input_event: InputEvent| {
+        on_change.emit(get_value_from_input_event(input_event));
+    });
+
+    html! {
+        <input type="text" {value} {oninput} />
+    }
+}