I am having trouble encrypting my PII. Everytime I try something new, nothing works. This is the base of my code for registration. I'm just starting out and I am having a hard time figuring this out. Need help on how to go about fixing the issue. What I intend to do is to ecrypt all PII going in to my Database
`Parent
@inject IHttpContextAccessor HttpContextAccessor
@{
ViewData["Title"] = "Parent Registration";
var textBoxClasses = new Dictionary<string, object>()
{
{ "class", "form-control" },
// { "readonly", "readonly" },
};
}
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
@if (HttpContextAccessor.HttpContext.Request.Query.TryGetValue("error", out var errorString))
{
<div class="alert alert-danger" role="alert">
@errorString
</div>
}
<div class="text-center container-fluid row text-primary">
<h1 class="display-4 long-rounded fw-bold">Registration</h1>
<p class="fw-bold text-dark">
Register a BabyPedia account
</p>
</div>
<script>
var checkForm = function (form) {
var response = grecaptcha.getResponse();
var email = form.Email.value.trim();
var username = form.UserName.value.trim();
var firstname = form.FirstName.value.trim();
var lastname = form.LastName.value.trim();
var address = form.Address.value.trim();
if (email === "") showError("EmailError", "Email cannot be left blank.");
if (username === "") showError("userNameError", "Username cannot be left blank.");
if (firstname === "") showError("FirstNameError", "First Name cannot be left blank.");
if (lastname === "") showError("LastNameError", "Last Name cannot be left blank.");
if (address === "") showError("AddressError", "Address cannot be left blank.");
if (email.length === 0 || username.length === 0 || firstname.length === 0 || lastname.length === 0 || address.length === 0) {
return false; // Prevent form submission
}
if (response.length === 0) {
var errorElement = document.getElementById("captchaError");
errorElement.innerText = "Please complete the reCAPTCHA.";
errorElement.style.display = "block";
errorElement.style.color = "red";
return false; // Prevent form submission
}
if(!form.tos.checked) {
alert("Please indicate that you accept the Terms and Conditions");
form.tos.focus();
return false;
}
if(!form.personalcheck.checked) {
alert("Please indicate that your personal data will be uploaded to the internet");
form.personalcheck.focus();
return false;
}
function showError(elementId, errorMessage) {
var errorElement = document.getElementById(elementId);
errorElement.innerText = errorMessage;
errorElement.style.display = "block";
errorElement.style.color = "red";
}
var username = form.UserName.value;
// Check if username is in email format
var emailRegex = /^[^\s@@]+@@[^\s@@]+\.[^\s@@]+$/;
if (emailRegex.test(username)) {
alert("Username cannot be in email format.");
return false; // Prevent form submission
}
return true;
};
</script>
<form id="registrationForm" class="container-fluid row" onsubmit="return checkForm(this)" method="post" action="/register-parent">
<div class="col-md-6 col-12">
<div class="form-floating mb-3">
@Html.TextBoxFor(m => m.UserName, htmlAttributes: textBoxClasses)
<label for="UserName">User Name</label>
<div id="userNameError" class="text-danger"></div>
</div>
<div class="form-floating mb-3">
@Html.TextBoxFor(m => m.Email, htmlAttributes: textBoxClasses)
@Html.LabelFor(x => x.Email)
<div id="EmailError" class="text-danger"></div>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" id="password" name="password">
<label for="password">Password</label>
</div>
</div>
<div class="col-md-6 col-12">
<div class="form-floating mb-3">
@Html.TextBoxFor(m => m.FirstName, htmlAttributes: textBoxClasses)
<label for="FirstName">First Name</label>
<div id="FirstNameError" class="text-danger"></div>
</div>
<div class="form-floating mb-3">
@Html.TextBoxFor(m => m.LastName, htmlAttributes: textBoxClasses)
<label for="LastName">Last Name</label>
<div id="LastNameError" class="text-danger"></div>
</div>
<div class="form-floating mb-3">
@Html.TextBoxFor(m => m.Address, htmlAttributes: textBoxClasses)
@Html.LabelFor(x => x.Address)
<div id="AddressError" class="text-danger"></div>
</div>
<div class="form-check mb-2">
<input name="tos" class="form-check-input" type="checkbox" value="" id="toscheck">
<label class="form-check-label" for="toscheck">
I agree to the <strong>Terms of Service</strong> and <strong>Privacy Policy</strong>
</label>
</div>
<div class="form-check mb-2">
<input name="personalcheck" class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
I understand that personal data will be uploaded to the internet
</label>
</div>
<div class="flex-column d-flex justify-content-between">
<a href="/home/login" class="mb-2 nav-link">Already have an account?</a>
<button class="btn btn-primary">
<i class="bi bi-arrow-bar-right"></i> Register
</button>
</div>
<div class="g-recaptcha" data-sitekey="6Lcx37YmAAAAAISNDMnLkBcnEH2hg7dCBMJSRK6d"></div>
<div id="captchaError" class="text-danger"></div>
</div>
</form>
`