As I work on developing a website using NET Core 3 and VueJS, one of the key areas is the login page:
@page
@model project.Web.Pages.Accounts.LoginModel
@{
ViewData["Title"] = "User Login - ";
Layout = "../Shared/_Layout";
}
<!-- add class=modal-->
<div id="app">
<div id="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="columns is-centered">
<div class="column is-12">
<div class="card auth-card">
<div class="card-content">
<div class="login-form is-grouped-centered">
<form method="post">
<p class="login-form__title subtitle">Sign In or Register</p>
<div asp-validation-summary="All" class="has-text-danger"></div>
<div class="login-form__field field">
<div class="login-form__email-group form-row">
<label class="login-form__email-label" asp-for="Input.Email">My Email</label>
<input class="login-form__input control input" asp-for="Input.Email" id="email-input" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e9ecebedade7ece6c3e6fbe2eef3efe6ade0ecee">[email protected]</a>" required maxlength="255" />
<span asp-validation-for="Input.Email" class="has-text-danger"></span>
</div>
</div>
<p class="login-form__title subtitle">Are you an existing customer?</p>
<div class="login-form__radio-group">
<input type="radio" class="login-form__radio-group-radio radio" @@click="setPasswordDisabled(true)" name="new_account" value="1" id="signin_new_customer">
<label for="signin_new_customer">No, sign me up.</label>
</div>
<div class="login-form__field login-form__radio-group">
<input type="radio" class="login-form__radio-group-radio radio" @@click="setPasswordDisabled(false)" name="new_account" value="0" id="signin_existing_customer" checked>
<label for="signin_existing_customer">Yes, my password is</label>
<div class="login-form__radio-group">
<input class="login-form__input control input" asp-for="Input.Password" id="auth-password" required />
<span asp-validation-for="Input.Password" class="has-text-danger"></span>
</div>
</div>
<div class="field has-text-right">
<a href="#">Forgotten your password?</a>
</div>
<div class="login-form__submit">
<input v-if="!isNewAccount" class="login-form__submit-button button is-success" type="submit" name="name" value="Sign In" />
<a v-if="isNewAccount" class="login-form__submit-button button is-success" asp-page="/Accounts/Register">Sign Up</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="modal-close is-large" aria-label="close" @@click="toggleModal()"></button>
</div>
</div>
@section scripts {
<script src="~/js/login.js"></script>
}
Additionally, within the 'login.js' script file, there are functions to manage certain actions related to account creation, but upon inspection in the network tab, it appears that these functions are not being executed. Despite loading the 'Login.js' file successfully, the expected functionality does not trigger as intended, leaving me puzzled.
I have attempted enclosing the markup from 'Login.cshtml' into a div with an ID of "app," yet this has not resolved the issue. There are no error messages or warnings displayed in the console, adding to the mystery surrounding this behavior. The property 'isNewAccount' seems visible in the Vue DevTools, however, its value remains unchanged even when interacting with the radio buttons. Furthermore, the display logic based on 'isNewAccount' does not reflect accurately within the Login Page. This inconsistency is frustrating, especially considering the additional checks included.
If anyone has encountered a similar issue before or can offer insights into troubleshooting steps, I would greatly appreciate any assistance.