Siticone Password Strength Indicator
The SiticonePasswordStrengthIndicator is a robust validation control that visually represents password complexity using animated bars and descriptive text.
It connects seamlessly to any TextBox control to provide real-time feedback, supports comparing two fields (for "Confirm Password" scenarios), and includes a blacklist for rejecting common weak passwords.
Core Setup
The indicator does not accept text input directly. Instead, it "watches" other controls.
| Property | Type | Description & Usage Example |
|---|---|---|
TargetControl |
Control | psi.TargetControl = txtPassword; The primary TextBox (or SiticoneTextBox) to monitor. The indicator will analyze text typed here. |
CompareWithTargetControl |
Control | psi.CompareWithTargetControl = txtConfirm; Optional. A second TextBox used for confirmation. If set, the indicator will show a "Mismatch" state if the texts do not equal. |
Strength Calculation Logic
The control calculates a score from 0 to 6 based on the following criteria.
- +1 for Length ≥ 8 characters
- +1 for Length ≥ 12 characters
- +1 for Lowercase letters (a-z)
- +1 for Uppercase letters (A-Z)
- +1 for Digits (0-9)
- +1 for Special symbols (\W or _)
The score maps to levels as follows:
- Weak: Score ≤ 2
- Medium: Score = 3
- Strong: Score 4 or 5
- Very Strong: Score > 5
Visual Customization
Customize how the feedback is presented to the user.
| Property | Type | Description |
|---|---|---|
DisplayMode |
StrengthDisplayMode |
Options:
BarsAndText (Default),
BarsOnly,
TextOnly.
|
BarStyle |
PasswordBarStyle |
Flat (Rectangles) or Rounded (Pill shapes).
|
BarCount |
int | The number of segments in the visual bar (Default: 4). |
BarHeight |
int | Thickness of the bars in pixels. |
BarGap |
int | Spacing between bar segments. |
Colors & States
Define distinct colors for each strength level. The indicator animates transitions between these colors.
| Property | Default Color | Trigger Condition |
|---|---|---|
WeakColor |
● Red | Score 0-2 (e.g., "password") |
MediumColor |
● Yellow | Score 3 (e.g., "Pass123") |
StrongColor |
● Green | Score 4-5 (e.g., "Pass123!") |
VeryStrongColor |
● Teal | Score 6 (e.g., "My$ecureP@ss12") |
MismatchColor |
● Orange | TargetControl != CompareWithTargetControl |
RejectedColor |
● Dark Red | Input matches an entry in RejectPasswordList |
Validation & Rejection
The control includes a built-in blacklist to prevent users from choosing common or compromised passwords.
| Property | Type | Description |
|---|---|---|
RejectPasswordList |
string | psi.RejectPasswordList = "123456|password|admin|qwerty"; A pipe-separated string of forbidden passwords. Case-insensitive. If the input matches any word in this list, the state becomes Rejected. |
Events
Use events to trigger external UI updates, such as enabling a "Submit" button only when the password is strong enough.
// Fired when the calculated strength level changes.
psi.StrengthChanged += (s, e) =>
{
// e.Level gives the enum (Weak, Strong, etc.)
// e.Score gives the raw score (0-6)
if (e.Level >= PasswordStrengthLevel.Strong)
{
btnRegister.Enabled = true;
}
else
{
btnRegister.Enabled = false;
}
};
// Fired when comparing two fields (Password & Confirm Password).
psi.PasswordsMatchChanged += (s, e) =>
{
if (!e.AreMatching)
{
lblError.Text = "Passwords do not match!";
lblError.Visible = true;
}
else
{
lblError.Visible = false;
}
};
// Fired when the user types a blacklisted password.
psi.PasswordRejected += (s, e) =>
{
MessageBox.Show($"The password '{e.Password}' is too common. Please choose another.");
};
Usage Examples
Example 1: Basic Registration Form
A standard setup with a Password field and a Strength Indicator.
private void SetupRegistration()
{
// 1. Initialize Indicator
var strengthIndicator = new SiticonePasswordStrengthIndicator();
strengthIndicator.Location = new Point(20, 100);
strengthIndicator.Size = new Size(200, 30);
// 2. Link to Password TextBox
strengthIndicator.TargetControl = txtPassword;
// 3. Customize Appearance
strengthIndicator.BarStyle = PasswordBarStyle.Rounded;
strengthIndicator.BarCount = 5;
// 4. Add to Form
this.Controls.Add(strengthIndicator);
}
Example 2: Password Confirmation Logic
Using the indicator to handle both strength validation and the "Confirm Password" check simultaneously.
private void SetupPasswordReset()
{
// Link both fields
psiReset.TargetControl = txtNewPassword;
psiReset.CompareWithTargetControl = txtConfirmPassword;
// Customize Messages
psiReset.TextMismatch = "Passwords must match";
psiReset.MismatchColor = Color.OrangeRed;
// Disable the 'Save' button until valid
btnSave.Enabled = false;
psiReset.PasswordsMatchChanged += (s, e) =>
{
// Enable save only if strength is good AND passwords match
bool isStrongEnough = e.Level >= PasswordStrengthLevel.Medium;
btnSave.Enabled = isStrongEnough && e.AreMatching;
};
}
Example 3: Applying a Visual Theme
Use the built-in theme presets to quickly style the indicator.
public void ApplyDarkTheme()
{
// Apply a pre-defined theme
psiMain.ApplyThemeCyberpunkNeon();
// Or manually override colors for specific branding
psiMain.EmptyBarColor = Color.FromArgb(60, 60, 60);
psiMain.ForeColor = Color.White;
// Adjust layout
psiMain.DisplayMode = StrengthDisplayMode.BarsOnly;
}
Designer Smart Tags
The control integrates a comprehensive Smart Tag menu in Visual Studio for rapid configuration without code.
| Section | Available Actions |
|---|---|
Main Settings |
Dropdowns to select the Target Control and Compare Control from the form. |
Theme Presets |
One-click application of 20+ color themes (Material, Emerald, Cyberpunk, etc.). |
Appearance |
Toggles for Bar Style (Flat/Rounded) and Display Mode (Text/Bars). |
Settings Management |
Copy Settings and Paste Settings to duplicate styles across controls. |