Add username and password

FingerAuth/Client.fs

@@ -10,55 +10,38 @@ open WebSharper.Capacitor
 open WebSharper.TouchEvents
 open WebSharper.Sitelets
 open WebSharper.UI.Notation
+open System
 
 type IndexTemplate = Template<"wwwroot/index.html", ClientLoad.FromDocument>
 
 type EndPoint = 
     | [<EndPoint "/">] Home
     | [<EndPoint "/picdraw">] PicDraw
 
+type Users = {
+    Username: string
+    Password: string
+    PenColor: string
+}    
 
-[<JavaScript; AutoOpen>]
+
+[<JavaScript;AutoOpen>]
 module Logic =
     let canvas() = As<HTMLCanvasElement>(JS.Document.GetElementById("annotationCanvas"))
     let getContext (e: Dom.EventTarget) = As<HTMLCanvasElement>(e).GetContext("2d")
-    let isAuthenticated = Var.Create false
     let toPicDrawPage = Var.Create ""
 
-    let authenticateToast() = 
+    let showToast(text) = 
         Capacitor.Toast.Show(Toast.ShowOptions(
-            text = "Authenticate Successfully",
+            text = text,
             Duration = "short"
-        ))
-
-    let authenticateUser() = promise {
-        try
-            let! checkBioResult = Capacitor.BiometricAuth.CheckBiometry();
-            if(checkBioResult.IsAvailable = false) then
-                printfn("Biometric authentication not available on this device.");
+        ))    
 
-            else      
-                let! _ = Capacitor.BiometricAuth.Authenticate(BiometricAuth.AuthenticateOptions(
-                    Reason = "Please authenticate to use PicDrawApp",
-                    AndroidTitle = "Biometric Authentication",
-                    AndroidSubtitle = "Use your fingerprint to access the app",
-                    AllowDeviceCredential = true
-                ))
-
-                toPicDrawPage := "/#/picdraw"
-                JS.Window.Location.Replace(toPicDrawPage.Value) |> ignore   
-
-                isAuthenticated := true
-                authenticateToast() |> ignore
-
-        with ex ->
-            let error = ex |> As<BiometricAuth.BiometryErrorType> 
-            printfn($"Authentication failed: {error}")
-            Capacitor.Dialog.Alert(Dialog.AlertOptions(
-                Title = "Alert",
-                Message = $"{error}"
-            ))|> ignore            
-    }
+    let showAlert(title, message) =
+        Capacitor.Dialog.Alert(Dialog.AlertOptions(
+            Title = title,
+            Message = message
+        ))
 
     let loadImageOnCanvas (imagePath: string) =
         let img = 
@@ -128,14 +111,84 @@ module Logic =
 
         offsetY
 
-[<JavaScript; AutoOpen>]
+    let USERNAME_KEY = "stored_username"
+    let PASSWORD_KEY = "stored_password"
+
+    let username = Var.Create ""
+    let password = Var.Create ""
+
+    let saveCredentials (username: string, password: string) = promise {
+        Capacitor.Preferences.Set(Preferences.SetOptions(
+            key = USERNAME_KEY,
+            value = username
+        )) |> ignore
+
+        Capacitor.Preferences.Set(Preferences.SetOptions(
+            key = PASSWORD_KEY,
+            value = password
+        )) |> ignore
+    }
+
+    let loadCredentials() = promise {
+        let! savedUsername = Capacitor.Preferences.Get(Preferences.GetOptions(key = USERNAME_KEY))
+        let! savedPassword = Capacitor.Preferences.Get(Preferences.GetOptions(key = PASSWORD_KEY))
+
+        if not (String.IsNullOrEmpty(username.Value)) && not (String.IsNullOrEmpty(password.Value)) then
+            username := savedUsername.Value.Value1
+            password := savedPassword.Value.Value1
+            showToast("Credentials loaded") |> ignore
+    }
+
+    let login() = promise {
+        printfn("Logging in with username and password")
+
+        if not (String.IsNullOrWhiteSpace(username.Value)) && not (String.IsNullOrWhiteSpace(password.Value)) then
+            saveCredentials(username.Value, password.Value) |> ignore
+            toPicDrawPage := "/#/picdraw"
+            JS.Window.Location.Replace(toPicDrawPage.Value) |> ignore 
+        else
+            showAlert("Alert", "Username and Password can not be left empty.") |> ignore
+
+
+        printfn("User logged in successfully!")
+    }
+
+    let authenticateUser() = promise {
+        try
+            let! checkBioResult = Capacitor.BiometricAuth.CheckBiometry();
+            if (checkBioResult.IsAvailable = false) then
+                printfn("Biometric authentication not available on this device.");
+
+            (*else*)      //
+                Capacitor.BiometricAuth.Authenticate(BiometricAuth.AuthenticateOptions(
+                    Reason = "Please authenticate to use PicDrawApp",
+                    AndroidTitle = "Biometric Authentication",
+                    AndroidSubtitle = "Use your fingerprint to access the app",
+                    AllowDeviceCredential = true
+                )) |> ignore
+
+                loadCredentials()|>ignore
+
+                toPicDrawPage := "/#/picdraw"
+                JS.Window.Location.Replace(toPicDrawPage.Value) |> ignore                   
+
+
+        with ex ->
+            (*let error = ex |> As<BiometricAuth.BiometryError>*) 
+            printfn($"Authentication failed: {ex}")
+            showAlert("Alert", $"{ex}") |> ignore            
+    }
+
+
+[<JavaScript;AutoOpen>]
 module Pages = 
     let isDrawing = Var.Create false
     let lastX, lastY = Var.Create 0.0, Var.Create 0.0   
+    let colorStroke = Var.Create ""
 
     let draw (e: Dom.EventTarget, offsetX, offsetY) =
             let ctx = getContext e
-            ctx.StrokeStyle <- "#FF0000" 
+            ctx.StrokeStyle <- colorStroke.Value 
             ctx.LineWidth <- 2.0 
             ctx.BeginPath()
             ctx.MoveTo(lastX.Value, lastY.Value)
@@ -144,8 +197,39 @@ module Pages =
             lastX := offsetX
             lastY := offsetY
 
+    let HomePage() = 
+        IndexTemplate.Home()
+            .Username(username.V)
+            .Password(password.V)
+            .LogIn(fun _ -> 
+                async {
+                    return! login().AsAsync()
+                }
+                |> Async.StartImmediate
+            )
+            .BiometricAuthenticate(fun e -> 
+                e.Event.PreventDefault()
+                username := e.Vars.Username.Value
+                password := e.Vars.Password.Value
+                async {
+                    return! authenticateUser().AsAsync()
+                }
+                |> Async.StartImmediate
+            )      
+            .ToPicDrawPage(toPicDrawPage.V)
+            .Doc()
+
     let PicDrawPage() = 
+        if username.Value = "Got" then
+            colorStroke := "#FF0000" // red
+        else
+            colorStroke :=  "#0000FF" // blue
+
+        showToast("Log in Successfully") |> ignore
+
         IndexTemplate.PicDraw()
+            .UsernamePicDraw(username.V)
+            .PasswordPicDraw(password.V)
             .CaptureBtn(fun _ -> 
                 async {
                     return! takePicture().Then(fun _ -> printfn "Succesfully take or choose a picture").AsAsync()
@@ -212,19 +296,7 @@ module Pages =
                     isDrawing := false
                 )
             )
-            .Doc()    
-
-    let HomePage() = 
-        IndexTemplate.textAuth()
-            .authenticate(fun e -> 
-                e.Event.PreventDefault()
-                async {
-                    return! authenticateUser().AsAsync()
-                }
-                |> Async.StartImmediate
-            )      
-            .ToPicDrawPage(toPicDrawPage.V)
-            .Doc()
+            .Doc()            
 
 [<JavaScript>]
 module Client =   

FingerAuth/FingerAuth.fsproj

@@ -12,7 +12,7 @@
 
   <ItemGroup>
     <PackageReference Include="WebSharper" Version="8.0.0.487-beta1" />
-    <PackageReference Include="WebSharper.Capacitor" Version="8.0.0.490-beta1" />    
+    <PackageReference Include="WebSharper.Capacitor" Version="8.0.0.493-beta1" />    
     <PackageReference Include="WebSharper.FSharp" Version="8.0.0.487-beta1" />
     <PackageReference Include="WebSharper.MathJS" Version="8.0.0.473-beta1" />
     <PackageReference Include="WebSharper.TouchEvents" Version="8.0.0.492-beta1" />

FingerAuth/package.json

@@ -15,6 +15,7 @@
     "@capacitor/core": "^6.1.2",
     "@capacitor/dialog": "^6.0.1",
     "@capacitor/filesystem": "^6.0.1",
+    "@capacitor/preferences": "^6.0.2",
     "@capacitor/share": "^6.0.2",
     "@capacitor/toast": "^6.0.2",
     "@ionic/pwa-elements": "^3.3.0",

FingerAuth/wwwroot/index.html

@@ -16,24 +16,38 @@
 <body>
     <a class="pic-draw-header" href="/#">PicDraw App</a>
     <div ws-replace="PageContent"></div>
-    <div id="text" ws-children-template="textAuth">
+    <div id="text" ws-children-template="Home">
         <p class="authenticate-text">Please authenticate</p>
-        <button role="button" ws-onclick="authenticate" href="${ToPicDrawPage}" class="authenticate-button">Authenticate</button>
+        <input id="username" placeholder="Username" ws-var="Username" /><br />
+        <input id="password" type="password" placeholder="Password" ws-var="Password" />
+        <button role="button" ws-onclick="LogIn" href="${ToPicDrawPage}" class="login-button">Log in</button>
+        <button role="button" ws-onclick="BiometricAuthenticate" href="${ToPicDrawPage}" class="authenticate-button">Authorize with Biometric</button>
     </div>
     <div id="main" ws-children-template="PicDraw">
+        <p ws-hole="UsernamePicDraw"></p>
+        <p ws-hole="PasswordPicDraw"></p>
+        <div>Please choose your preferred color. </div>
+        <p class="color-picker">
+            <label for="colorPicker">
+                <input type="color" value="#1DB8CE" id="colorPicker">
+            </label>
+        </p>
         <div class="capture-button">
             <button role="button" id="captureBtn" ws-onclick="CaptureBtn">Capture Image</button>
         </div>
         <br />
         <div class="canvas-container">
-            <canvas id="annotationCanvas" width="300" height="400" ws-hole="canvas"
+            <canvas id="annotationCanvas" width="300" height="300" ws-hole="canvas"
                     ws-onmouseDown="canvasMouseDown" ws-onmouseup="canvasMouseUp"
                     ws-onmouseout="canvasMouseOut" ws-onmousemove="canvasMouseMove"
                     ws-onafterrender="canvasInit"></canvas>
         </div>
         <div class="save-share-button">
             <button role="button" id="saveShareBtn" ws-onclick="SaveShareBtn">Save & Share</button>
         </div>
+        <div class="logout-container">
+            <a role="button" ws-onclick="LogOut" href="${ToHomePage}" class="logout-button">Log out</a>
+        </div>
     </div>
 
     <script type="module" src="Content/FingerAuth.min.js"></script>

FingerAuth/wwwroot/styles.css

@@ -43,7 +43,8 @@ a {
 
 #captureBtn,
 #saveShareBtn,
-.authenticate-button {
+.authenticate-button,
+.login-button {
     font-size: 18px;
     font-family: sans-serif;
     letter-spacing: 2px;
@@ -55,17 +56,19 @@ a {
     background-color: #0f43f1;
     padding: 10px;
     color: white;
-    cursor:pointer
+    cursor: pointer
 }
 
-#captureBtn:hover,
-#saveShareBtn:hover,
-.authenticate-button:hover,
-#captureBtn:focus,
-#saveShareBtn:focus,
-.authenticate-button:focus {
-    opacity: 0.7;
-}
+    #captureBtn:hover,
+    #saveShareBtn:hover,
+    .authenticate-button:hover,
+    #captureBtn:focus,
+    #saveShareBtn:focus,
+    .authenticate-button:focus,
+    .login-button:hover,
+    .login-button:focus{
+        opacity: 0.7;
+    }
 
     #captureBtn:active,
     #saveShareBtn:active,
@@ -74,3 +77,46 @@ a {
     }
 
 
+.logout-button {
+    font-family: sans-serif;
+    background-color: #A9A9A9;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    margin: 20px auto;
+    text-align: center;
+    font-size: 16px;
+    border-radius: 5px;
+    cursor: pointer;
+    text-decoration: none;
+    display: block;
+    width: fit-content;
+    margin: 20px auto;
+}
+
+[type='color'] {
+    appearance: none;
+    padding: 0;
+    width: 15px;
+    height: 15px;
+    border: none;
+}
+
+[type='color']::-webkit-color-swatch-wrapper {
+    padding: 0;
+}
+
+[type='color']::-webkit-color-swatch {
+    border: none;
+}
+
+.color-picker {
+    display: inline-block;
+    padding: 10px 15px;
+    border-radius: 10px;
+    border: 1px solid #ccc;
+}
+
+
+
+