Change the value of input textbox with eyeball

Question

I have 2 properties created, one with a masked value and the other with a raw value for my web page. Currently when I submit the form I have the masked value to display with the eyeball slash. When I click on the eyeball I want the raw value to be displayed and masked again when clicked. None of the research online explains this, they only focus on passwords which I do not need.

index.cshtml.cs

// Properties
public ResidencyCheckResult CheckResult { get; set; }
public string OutputSSN { get => CheckResult.SSNumber; set => CheckResult.SSNumber = value; }
public string OutputSSNMasked { get; set; }

// Constructors(Parameters)
public IndexModel(Assess50Context context)
    {
        _context = context;
        CheckResult = new ResidencyCheckResult();
    }
    
// Methods(Parameters)
public async Task<IActionResult> OnPostSubmit()
    {
        using HttpClient client = new HttpClient();
        ResidencyCheckClient checkClient = new ResidencyCheckClient();
        await checkClient.OpenAsync();
    
        ResidencyCheckCriteria checkCriteria = new ResidencyCheckCriteria() 
            {
            };
    
        ResidencyCheckResult checkResult = await checkClient.ValidateFloridaResidencyAsync(checkCriteria);
        OutputSSN = checkResult.SSNumber;
        OutputSSNMasked = OutputSSN;
    
        OutputSSN = $"{SubstringCheck(OutputSSN, 3)}-{SubstringCheck(OutputSSN, 3, 2)}-{SubstringCheck(OutputSSN, 5, 4)}";
        OutputSSNMasked = $"{SubstringCheck(OutputSSNMasked, 3)}-{SubstringCheck(OutputSSNMasked, 3, 2)}-{SubstringCheck(OutputSSNMasked.Replace(OutputSSNMasked, "XXXX"), 5, 4)}";
    
        await checkClient.CloseAsync();
        return Page();
    }
    
// methods to prevent causing argument out of range exceptions on substring calls
public string SubstringCheck(string s, int length)
    {
        int len = s.Length;

        if (len > length)
        {
            len = length;
        }
        return s.Substring(0, len);
    }

public string SubstringCheck(string s, int b, int length)
    {
        int len = s.Length;

        if (len <= b)
        {
            return s;
        }

        len -= b;  // b < len

        if (len > length)
        {
            len = length;
        }
        return s.Substring(b, len);
    }

index.cshtml

<form class="mt-0" method="post">
    <button class="btn btn-outline-dark col-1 offset-5" type="submit" id="SubmitBtn" name="SubmitBtn" value="Submit" disabled asp-page-handler="Submit">Submit</button>
    <input class="form-control" title="Social security number" readonly asp-for="OutputSSNMasked">
    <i class="fa fa-eye-slash" id="ToggleOutputSSN" style="cursor: pointer;"></i>
</form>

@section Scripts {
<script>
    const toggleOutputSSN = document.querySelector('#ToggleOutputSSN');
    const outputSSNMasked = document.querySelector('#OutputSSN');

    toggleOutputSSN.addEventListener('click', function (e) {
    const type = outputSSNMasked.getAttribute('type') === 'text' ? 'password' : 'text';
    outputSSNMasked.setAttribute('type', type);
    this.classList.toggle('fa-eye');
    });
});
</script>

Answer 1

Try something like this.

const toggleOutputSSN = document.querySelector('#ToggleOutputSSN');
const outputSSNMasked = document.querySelector('#OutputSSNMasked');

toggleOutputSSN.addEventListener('click', function(e) {
  const parts = outputSSNMasked.dataset.ssn.split('-');
  if(!outputSSNMasked.value.endsWith('XXXX')) {
    parts[2] = 'XXXX';
  }
  outputSSNMasked.value = parts.join('-');
  const iTag = this.querySelector('i');
  iTag.classList.toggle('fa-eye');
});

.masked-input {
  margin: 20px;
  width: 200px !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="input-group masked-input">
  <input type="text" 
    id="OutputSSNMasked" 
    class="form-control" 
    title="Social security number" 
    aria-label="Social security number"
    data-ssn="115-67-0707"
    value="115-67-0707">
  <span id="ToggleOutputSSN" class="input-group-text" style="cursor: pointer;">
    <i class="far fa-eye-slash"></i>
  </span>
</div>