From bb189261d7e301da78ac3c5a78bb66aa8a50b629 Mon Sep 17 00:00:00 2001
From: Ellpeck <me@ellpeck.de>
Date: Thu, 8 Jul 2021 18:17:39 +0200
Subject: [PATCH] Added a masking character to text fields

---
 CHANGELOG.md                  |  3 +++
 Demos/UiDemo.cs               |  7 +++++++
 MLEM.Ui/Elements/TextField.cs | 32 ++++++++++++++++++++++++++------
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7e4db6a..de3ef0e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,9 @@ Improvements
 - Moved sound-related classes into Sound namespace
 
 ### MLEM.Ui
+Additions
+- Added a masking character to TextField to allow for password-style text fields
+
 Fixes
 - Fixed a crash if a paragraph has a link formatting code, but no font
 
diff --git a/Demos/UiDemo.cs b/Demos/UiDemo.cs
index 7379a03..ef4b0fe 100644
--- a/Demos/UiDemo.cs
+++ b/Demos/UiDemo.cs
@@ -101,6 +101,13 @@ namespace Demos {
             this.root.AddChild(new Paragraph(Anchor.AutoCenter, 1, "Numbers-only input:", true));
             this.root.AddChild(new TextField(Anchor.AutoLeft, new Vector2(1, 10), TextField.OnlyNumbers) {PositionOffset = new Vector2(0, 1)});
 
+            this.root.AddChild(new VerticalSpace(3));
+            this.root.AddChild(new Paragraph(Anchor.AutoCenter, 1, "Password-style input:", true));
+            this.root.AddChild(new TextField(Anchor.AutoLeft, new Vector2(1, 10), text: "secret") {
+                PositionOffset = new Vector2(0, 1),
+                MaskingCharacter = '*'
+            });
+
             this.root.AddChild(new VerticalSpace(3));
             this.root.AddChild(new Paragraph(Anchor.AutoLeft, 1, "Zoom in or out:"));
             this.root.AddChild(new Button(Anchor.AutoLeft, new Vector2(10), "+") {
diff --git a/MLEM.Ui/Elements/TextField.cs b/MLEM.Ui/Elements/TextField.cs
index 7605b41..d9785f1 100644
--- a/MLEM.Ui/Elements/TextField.cs
+++ b/MLEM.Ui/Elements/TextField.cs
@@ -74,7 +74,6 @@ namespace MLEM.Ui.Elements {
         /// The font that this text field should display text with
         /// </summary>
         public StyleProp<GenericFont> Font;
-        private readonly StringBuilder text = new StringBuilder();
         /// <summary>
         /// This text field's current text
         /// </summary>
@@ -95,9 +94,6 @@ namespace MLEM.Ui.Elements {
         /// The width that the caret should render with.
         /// </summary>
         public float CaretWidth = 0.5F;
-        private double caretBlinkTimer;
-        private string displayedText;
-        private int textOffset;
         /// <summary>
         /// The rule used for text input.
         /// Rules allow only certain characters to be allowed inside of a text field.
@@ -111,7 +107,6 @@ namespace MLEM.Ui.Elements {
         /// The description of the <c>KeyboardInput</c> field on mobile devices and consoles
         /// </summary>
         public string MobileDescription;
-        private int caretPos;
         /// <summary>
         /// The position of the caret within the text.
         /// This is always between 0 and the <see cref="string.Length"/> of <see cref="Text"/>
@@ -128,6 +123,26 @@ namespace MLEM.Ui.Elements {
                 }
             }
         }
+        /// <summary>
+        /// A character that should be displayed instead of this text field's <see cref="Text"/> content.
+        /// The amount of masking characters displayed will be equal to the <see cref="Text"/>'s length.
+        /// This behavior is useful for password fields or similar.
+        /// </summary>
+        public char? MaskingCharacter {
+            get => this.maskingCharacter;
+            set {
+                this.maskingCharacter = value;
+                this.HandleTextChange(false);
+            }
+        }
+
+        private readonly StringBuilder text = new StringBuilder();
+
+        private char? maskingCharacter;
+        private double caretBlinkTimer;
+        private string displayedText;
+        private int textOffset;
+        private int caretPos;
 
         /// <summary>
         /// Creates a new text field with the given settings
@@ -136,10 +151,13 @@ namespace MLEM.Ui.Elements {
         /// <param name="size">The text field's size</param>
         /// <param name="rule">The text field's input rule</param>
         /// <param name="font">The font to use for drawing text</param>
-        public TextField(Anchor anchor, Vector2 size, Rule rule = null, GenericFont font = null) : base(anchor, size) {
+        /// <param name="text">The text that the text field should contain by default</param>
+        public TextField(Anchor anchor, Vector2 size, Rule rule = null, GenericFont font = null, string text = null) : base(anchor, size) {
             this.InputRule = rule ?? DefaultRule;
             if (font != null)
                 this.Font.Set(font);
+            if (text != null)
+                this.SetText(text, true);
 
             MlemPlatform.EnsureExists();
             this.OnPressed += async e => {
@@ -190,6 +208,8 @@ namespace MLEM.Ui.Elements {
                 this.displayedText = this.Text;
                 this.textOffset = 0;
             }
+            if (this.MaskingCharacter != null)
+                this.displayedText = new string(this.MaskingCharacter.Value, this.displayedText.Length);
 
             if (textChanged)
                 this.OnTextChange?.Invoke(this, this.Text);