Skip to content

Commit

Permalink
Remove hard coded HTML Ids from UserFields.Edit.cshtml to allow reusi…
Browse files Browse the repository at this point in the history 
…ng it (#12532)
  • Loading branch information
@MikeAlhayek
MikeAlhayek authored Oct 6, 2022
1 parent b5db66a commit 88d709e
Showing 1 changed file with 65 additions and 59 deletions.
124 changes: 65 additions & 59 deletions src/OrchardCore.Modules/OrchardCore.Users/Views/UserFields.Edit.cshtml
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@model EditUserViewModel
@model OrchardCore.Users.ViewModels.EditUserViewModel

@using OrchardCore.Entities
@using OrchardCore.Users.Models
@using Microsoft.Extensions.Options
Expand All @@ -25,45 +26,40 @@

@if (Model.IsNewRequest)
{
<div class="mb-1">
<label asp-for="Password">@T["Password"]</label>
<div class="input-group col-md-4">
<span class="input-group-text" id="passwordToggle"><span class="toggle-icon fas fa-eye prefix"></span></span>
<input asp-for="Password" type="password" class="form-control" placeholder="@T["Password"]" />
<span asp-validation-for="Password" class="text-danger"></span>
<div class="password-generator-wrapper">
<div class="mb-1">
<label asp-for="Password">@T["Password"]</label>
<div class="input-group col-md-4">
<span class="input-group-text password-toggle-button"><span class="toggle-icon fas fa-eye prefix"></span></span>
<input asp-for="Password" type="password" class="form-control password-input-field" placeholder="@T["Password"]" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>
</div>

<div class="mb-3">
<label asp-for="PasswordConfirmation" class="sr-only">@T["Password Confirmation"]</label>
<div class="input-group col-md-4">
<span class="input-group-text" id="passwordConfirmationToggle"><span class="toggle-icon fas fa-eye prefix"></span></span>
<input asp-for="PasswordConfirmation" type="password" class="form-control" placeholder="@T["Password confirmation"]" />
<span asp-validation-for="PasswordConfirmation" class="text-danger"></span>
</div>
<div class="mb-3">
<label asp-for="PasswordConfirmation" class="sr-only">@T["Password Confirmation"]</label>
<div class="input-group col-md-4">
<span class="input-group-text password-confirmation-toggle-button"><span class="toggle-icon fas fa-eye prefix"></span></span>
<input asp-for="PasswordConfirmation" type="password" class="form-control password-confirmation-input-field" placeholder="@T["Password confirmation"]" />
<span asp-validation-for="PasswordConfirmation" class="text-danger"></span>
</div>

<div class="mt-2">
<div class="btn btn-warning btn-sm" id="generatePassword"
data-password-length="@IdentityOptions.Value.Password.RequiredLength"
data-password-requireUppercase="@IdentityOptions.Value.Password.RequireUppercase.ToString().ToLowerInvariant()"
data-password-requireLowercase="@IdentityOptions.Value.Password.RequireLowercase.ToString().ToLowerInvariant()"
data-password-requireDigit="@IdentityOptions.Value.Password.RequireDigit.ToString().ToLowerInvariant()"
data-password-requireNonAlphanumeric="@IdentityOptions.Value.Password.RequireNonAlphanumeric.ToString().ToLowerInvariant()"
data-password-requiredUniqueChars="@IdentityOptions.Value.Password.RequiredUniqueChars">
@T["Generate password"]
<div class="mt-2">
<div class="btn btn-warning btn-sm password-generator-button"
data-password-length="@IdentityOptions.Value.Password.RequiredLength"
data-password-requireUppercase="@IdentityOptions.Value.Password.RequireUppercase.ToString().ToLowerInvariant()"
data-password-requireLowercase="@IdentityOptions.Value.Password.RequireLowercase.ToString().ToLowerInvariant()"
data-password-requireDigit="@IdentityOptions.Value.Password.RequireDigit.ToString().ToLowerInvariant()"
data-password-requireNonAlphanumeric="@IdentityOptions.Value.Password.RequireNonAlphanumeric.ToString().ToLowerInvariant()"
data-password-requiredUniqueChars="@IdentityOptions.Value.Password.RequiredUniqueChars">
@T["Generate password"]
</div>
<div class="btn btn-info btn-sm copy-password-button">@T["Copy password"]</div>
</div>
<div class="btn btn-info btn-sm" id="copyPassword">@T["Copy password"]</div>
</div>
</div>
<script at="Foot" asp-name="userFieldsPassword" depends-on="password-generator">
document.addEventListener('DOMContentLoaded', function() {
let password = document.getElementById('@Html.IdFor(p => p.Password)');
let passwordConfirmation = document.getElementById('@Html.IdFor(p => p.PasswordConfirmation)');
let passwordToggle = document.getElementById('passwordToggle');
let passwordConfirmationToggle = document.getElementById('passwordConfirmationToggle');
let generate = document.getElementById('generatePassword');
let copy = document.getElementById('copyPassword');
document.addEventListener('DOMContentLoaded', function () {
const toggetIcons = (element) => {
if (element.classList.contains('fa-eye')) {
element.classList.remove('fa-eye');
Expand All @@ -75,7 +71,6 @@
element.classList.remove('fa-eye-slash');
element.classList.add('fa-eye');
}
const toggleFieldType = (element) => {
if (element.type == 'password') {
element.type = 'text';
Expand All @@ -86,32 +81,43 @@
element.type = 'password';
}
const togglePasswordFieldState = () => {
toggleFieldType(password);
toggleFieldType(passwordConfirmation);
toggetIcons(passwordToggle.querySelector('.toggle-icon'));
toggetIcons(passwordConfirmationToggle.querySelector('.toggle-icon'));
}
var wrappers = document.querySelectorAll('.password-generator-wrapper');
for (let i = 0; i < wrappers.length; i++) {
let wrapper = wrappers[i];
let password = wrapper.querySelector('.password-input-field');
let passwordConfirmation = wrapper.querySelector('.password-confirmation-input-field');
let passwordToggle = wrapper.querySelector('.password-toggle-button');
let passwordConfirmationToggle = wrapper.querySelector('.password-confirmation-toggle-button');
let generate = wrapper.querySelector('.password-generator-button');
generate.addEventListener('click', function () {
const requiredPasswordLength = parseInt(generate.getAttribute('data-password-length'));
const requireUppercase = generate.getAttribute('data-password-requireUppercase') === 'true';
const requireLowercase = generate.getAttribute('data-password-requireLowercase') === 'true';
const requireDigit = generate.getAttribute('data-password-requireDigit') === 'true';
const requireNonAlphanumeric = generate.getAttribute('data-password-requireNonAlphanumeric') === 'true';
const requiredUniqueChars = generate.getAttribute('data-password-requiredUniqueChars') === 'true';
var newPassword = passwordManager.generatePassword(requiredPasswordLength, requireUppercase, requireLowercase, requireDigit, requireNonAlphanumeric, requiredUniqueChars);
password.value = newPassword;
passwordConfirmation.value = newPassword;
});
wrapper.querySelector('.copy-password-button').addEventListener('click', function () {
passwordManager.copyPassword(password.value);
});
let togglePasswordFieldState = () => {
toggleFieldType(password);
toggleFieldType(passwordConfirmation);
toggetIcons(passwordToggle.querySelector('.toggle-icon'));
toggetIcons(passwordConfirmationToggle.querySelector('.toggle-icon'));
}
generate.addEventListener('click', function() {
const requiredPasswordLength = parseInt(generate.getAttribute('data-password-length'));
const requireUppercase = generate.getAttribute('data-password-requireUppercase') === 'true';
const requireLowercase = generate.getAttribute('data-password-requireLowercase') === 'true';
const requireDigit = generate.getAttribute('data-password-requireDigit') === 'true';
const requireNonAlphanumeric = generate.getAttribute('data-password-requireNonAlphanumeric') === 'true';
const requiredUniqueChars = generate.getAttribute('data-password-requiredUniqueChars') === 'true';
var newPassword = passwordManager.generatePassword(requiredPasswordLength, requireUppercase, requireLowercase, requireDigit, requireNonAlphanumeric, requiredUniqueChars);
password.value = newPassword;
passwordConfirmation.value = newPassword;
});
copy.addEventListener('click', function() {
passwordManager.copyPassword(password.value);
});
passwordToggle.addEventListener('click', togglePasswordFieldState);
passwordConfirmationToggle.addEventListener('click', togglePasswordFieldState);
passwordToggle.addEventListener('click', togglePasswordFieldState);
passwordConfirmationToggle.addEventListener('click', togglePasswordFieldState);
}
});
</script>
}

0 comments on commit 88d709e

Please sign in to comment.