kocoded/oqtane.framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add show/hide password toggle on Login form

Browse Source
This commit is contained in:
Shaun Walker 2022-03-04 11:43:54 -05:00
parent 5adecc307f
commit b80fe428ac
3 changed files with 43 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
Oqtane.Client/Modules/Admin/Login/Index.razor
View File

@ -23,11 +23,14 @@
<Label Class="control-label" For="username" HelpText="Please enter your Username" ResourceKey="Username">Username:</Label> <Label Class="control-label" For="username" HelpText="Please enter your Username" ResourceKey="Username">Username:</Label>
<input id="username" type="text" @ref="username" class="form-control input" placeholder="@Localizer["Username.Placeholder"]" @bind="@_username" required /> <input id="username" type="text" @ref="username" class="form-control input" placeholder="@Localizer["Username.Placeholder"]" @bind="@_username" required />
</div> </div>
<div class="form-group mt-1"> <div class="form-group mt-2">
<Label Class="control-label" For="password" HelpText="Please enter your Password" ResourceKey="Password">Password:</Label> <Label Class="control-label" For="password" HelpText="Please enter your Password" ResourceKey="Password">Password:</Label>
<input id="password" type="password" name="Password" class="form-control input" placeholder="@Localizer["Password.Placeholder"]" @bind="@_password" required /> <div class="input-group password">
<input id="password" type="@_passwordtype" name="Password" class="form-control" placeholder="@Localizer["Password.Placeholder"]" @bind="@_password" required />
<button type="button" class="btn btn-secondary" @onclick="@TogglePassword">@_togglepassword</button>
</div> </div>
<div class="form-group mt-1"> </div>
<div class="form-group mt-2">
<div class="form-check"> <div class="form-check">
<input id="remember" type="checkbox" class="form-check-input" @bind="@_remember" /> <input id="remember" type="checkbox" class="form-check-input" @bind="@_remember" />
<Label Class="control-label" For="remember" HelpText="Specify if you would like to be signed back in automatically the next time you visit this site" ResourceKey="Remember">Remember Me?</Label> <Label Class="control-label" For="remember" HelpText="Specify if you would like to be signed back in automatically the next time you visit this site" ResourceKey="Remember">Remember Me?</Label>
@ -64,6 +67,8 @@
private string _username = string.Empty; private string _username = string.Empty;
private ElementReference username; private ElementReference username;
private string _password = string.Empty; private string _password = string.Empty;
private string _passwordtype = "password";
private string _togglepassword = string.Empty;
private bool _remember = false; private bool _remember = false;
private string _code = string.Empty; private string _code = string.Empty;
@ -78,6 +83,8 @@
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
{ {
_togglepassword = Localizer["ShowPassword"];
if (PageState.QueryString.ContainsKey("returnurl")) if (PageState.QueryString.ContainsKey("returnurl"))
{ {
_returnUrl = PageState.QueryString["returnurl"]; _returnUrl = PageState.QueryString["returnurl"];
@ -225,4 +232,20 @@
await Login(); await Login();
} }
} }
private void TogglePassword()
{
if (_passwordtype == "password")
{
_passwordtype = "text";
_togglepassword = Localizer["HidePassword"];
}
else
{
_passwordtype = "password";
_togglepassword = Localizer["ShowPassword"];
}
//StateHasChanged();
}
} }

6
Oqtane.Client/Resources/Modules/Admin/Login/Index.resx
View File

@ -183,4 +183,10 @@
<data name="Username.Text" xml:space="preserve"> <data name="Username.Text" xml:space="preserve">
<value>Username:</value> <value>Username:</value>
</data> </data>
<data name="HidePassword" xml:space="preserve">
<value>Hide</value>
</data>
<data name="ShowPassword" xml:space="preserve">
<value>Show</value>
</data>
</root> </root>

4
Oqtane.Server/wwwroot/Modules/Oqtane.Modules.Admin.Login/Module.css
View File

@ -3,3 +3,7 @@
.Oqtane-Modules-Admin-Login .input { .Oqtane-Modules-Admin-Login .input {
width: 200px; width: 200px;
} }
.Oqtane-Modules-Admin-Login .password {
width: 270px;
}