added simple client extender sample - password strength checker

src/DotVVM.Samples.BasicSamples/DotVVM.Samples.BasicSamples.csproj

@@ -180,6 +180,7 @@
     <Compile Include="ViewModels\FeatureSamples\ChildViewModelInvokeMethods\ChildViewModel.cs" />
     <Compile Include="ViewModels\FeatureSamples\ChildViewModelInvokeMethods\ChildViewModelInvokeMethodsViewModel.cs" />
     <Compile Include="ViewModels\FeatureSamples\ChildViewModelInvokeMethods\NastyChildViewModel.cs" />
+    <Compile Include="ViewModels\FeatureSamples\ClientExtenders\PasswordStrengthViewModel.cs" />
     <Compile Include="ViewModels\FeatureSamples\Directives\ViewModelMissingAssemblyViewModel.cs" />
     <Compile Include="ViewModels\FeatureSamples\MarkupControl\ControlPropertyUpdatingViewModel.cs" />
     <Compile Include="ViewModels\FeatureSamples\MarkupControl\ControlPropertyUpdatedByServerViewModel.cs" />
@@ -248,6 +249,7 @@
     <Compile Include="Views\FeatureSamples\MarkupControl\TextEditorControl.cs" />
   </ItemGroup>
   <ItemGroup>
+    <Content Include="Scripts\ClientExtenders.js" />
     <Content Include="Scripts\colResizable-1.5.min.js" />
     <Content Include="Scripts\GridViewSizable.js" />
     <Content Include="Web.config" />
@@ -383,6 +385,7 @@
     <Content Include="Views\ComplexSamples\SPARedirect\home.dothtml" />
     <Content Include="Views\ComplexSamples\SPARedirect\login.dothtml" />
     <Content Include="Views\ComplexSamples\SPARedirect\site.dotmaster" />
+    <Content Include="Views\FeatureSamples\ClientExtenders\PasswordStrength.dothtml" />
     <None Include="Views\FeatureSamples\MarkupControl\ControlPropertyUpdating.dothtml" />
     <None Include="Views\FeatureSamples\MarkupControl\ControlPropertyUpdating.dotcontrol" />
     <Content Include="Views\ControlSamples\GridView\GridViewRowDecorators.dothtml" />

src/DotVVM.Samples.BasicSamples/DotvvmStartup.cs

@@ -49,6 +49,7 @@ public void Configure(DotvvmConfiguration config, string applicationPath)
                 Src = "Views/ComplexSamples/ServerRendering/ArticleDetail.dotcontrol"
             });
             config.Markup.AddMarkupControl("sample", "TextEditorControl", "Views/FeatureSamples/MarkupControl/TextEditorControl.dotcontrol");
+            config.Markup.AddMarkupControl("sample", "PasswordStrengthControl", "Views/FeatureSamples/ClientExtenders/PasswordStrengthControl.dotcontrol");
 
             config.RouteTable.Add("Default", "", "Views/Default.dothtml");
             config.RouteTable.Add("ComplexSamples_SPARedirect_home", "ComplexSamples/SPARedirect", "Views/ComplexSamples/SPARedirect/home.dothtml");

src/DotVVM.Samples.BasicSamples/Scripts/ClientExtenders.js

@@ -0,0 +1,42 @@
+ko.extenders.passwordStrength = function (target, overrideMessage) 
+{
+    //add some sub-observables to our observable
+    target.passwordStrengthMessage = ko.observable();
+
+    //define a function to do password strength test
+    function testPassword(newValue) {
+
+        // very simple password test - checks the string length only
+
+        var val = newValue || "";
+        if (val.length === 0) 
+        {
+            target.passwordStrengthMessage("Enter password");
+        }
+        else
+        {
+            target.passwordStrengthMessage("Poor");
+        }
+
+        if (val.length > 5) {
+            target.passwordStrengthMessage("Good");
+        }
+
+        if (val.length > 8) {
+            target.passwordStrengthMessage("Super");
+        }
+
+        if (val.length > 12) {
+            target.passwordStrengthMessage("Excelent");
+        }
+    }
+
+    //initial validation
+    testPassword(target());
+
+    //validate whenever the value changes
+    target.subscribe(testPassword);
+
+    //return the original observable
+    return target;
+};

src/DotVVM.Samples.BasicSamples/ViewModels/FeatureSamples/ClientExtenders/PasswordStrengthViewModel.cs

@@ -0,0 +1,26 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using DotVVM.Framework.Binding;
+using DotVVM.Framework.ViewModel;
+
+namespace DotVVM.Samples.BasicSamples.ViewModels.FeatureSamples.ClientExtenders
+{
+    public class PasswordStrengthViewModel : DotvvmViewModelBase
+	{
+        [ClientExtender("passwordStrength", false)]
+        public string Password { get; set; }
+
+
+        public override Task Init()
+        {
+            this.Context.ResourceManager.AddRequiredScriptFile("extenders", "~/Scripts/ClientExtenders.js", DotVVM.Framework.ResourceManagement.ResourceConstants.KnockoutJSResourceName);
+            return base.Init();
+        }
+	}
+
+
+}
+

src/DotVVM.Samples.BasicSamples/Views/FeatureSamples/ClientExtenders/PasswordStrength.dothtml

@@ -0,0 +1,17 @@
+@viewModel DotVVM.Samples.BasicSamples.ViewModels.FeatureSamples.ClientExtenders.PasswordStrengthViewModel, DotVVM.Samples.BasicSamples
+
+<!DOCTYPE html>
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+</head>
+<body>
+    <h1>Password strength indicator - simple Knockout extender sample</h1>
+    <dot:TextBox ID="passwordTextBox" Text="{value: Password}" UpdateTextAfterKeydown="true" Type="Password"></dot:TextBox>
+    <span data-bind="text: $data.Password.passwordStrengthMessage"></span>
+</body>
+</html>
+
+