Use Ant Design for basic Identity pages
This commit is contained in:
Pat Hartl
parent
99a638b64d
commit
830edf3e55
4 changed files with 240 additions and 115 deletions
|
|
@ -7,46 +7,84 @@
|
|||
ViewData["Title"] = "First Time Setup";
|
||||
}
|
||||
|
||||
<div class="page page-center">
|
||||
<form asp-route-returnUrl="@Model.ReturnUrl" class="container-tight py-4">
|
||||
<div class="text-center mb-4">
|
||||
<h2>LANCommander</h2>
|
||||
</div>
|
||||
<div class="card card-md">
|
||||
<div class="card-body text-center py-4 p-sm-5">
|
||||
<h1>Welcome to LANCommander!</h1>
|
||||
<p class="text-muted">LANCommander is your one stop shop for distributing games on your LAN. Start your adventure with LANCommander and take control of your local multiplayer gaming!</p>
|
||||
</div>
|
||||
<div class="hr-text hr-text-center hr-text-spaceless">registration</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Register your admin account</label>
|
||||
<input asp-for="Input.UserName" type="text" class="form-control ps-1" autocomplete="off" placeholder="Username" />
|
||||
<div class="form-hint">For first-time setup, an admin user is required. This user will be able to manage all aspects of the application.</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label asp-for="Input.Password" class="form-label"></label>
|
||||
<input asp-for="Input.Password" type="password" class="form-control ps-1" autocomplete="new-password" />
|
||||
<span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label asp-for="Input.ConfirmPassword" class="form-label"></label>
|
||||
<input asp-for="Input.ConfirmPassword" type="password" class="form-control ps-1" autocomplete="new-password" />
|
||||
<span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-row ant-row-middle ant-row-space-around" style="position: absolute; top:0; left: 0; right: 0; bottom: 0;">
|
||||
<div class="ant-col ant-col-10">
|
||||
|
||||
<div style="text-align: center; margin-bottom: 24px;">
|
||||
<img src="~/static/logo.svg" />
|
||||
</div>
|
||||
|
||||
<div class="row align-items-center mt-3">
|
||||
<div class="col">
|
||||
<div class="btn-list justify-content-end">
|
||||
<button type="submit" class="btn btn-primary">Continue</button>
|
||||
<div class="ant-card ant-card-bordered">
|
||||
<div class="ant-card-head">
|
||||
<div class="ant-card-head-wrapper">
|
||||
<div class="ant-card-head-title">First Time Setup</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<form asp-route-returnUrl="@Model.ReturnUrl" class="ant-card-body" autocomplete="off">
|
||||
<div class="ant-form ant-form-vertical">
|
||||
<div class="ant-form-item">
|
||||
<p>LANCommander is your one stop shop for distributing games on your LAN. Start your adventure with LANCommander and take control of your local multiplayer gaming!</p>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<partial name="_ValidationScriptsPartial" />
|
||||
}
|
||||
<div class="ant-form-item">
|
||||
<div class="ant-form-item-row ant-row">
|
||||
<div class="ant-form-item-label ant-col">
|
||||
<label class="form-label">Register your admin account</label>
|
||||
</div>
|
||||
|
||||
<div class="ant-form-item-control ant-col">
|
||||
<div class="ant-form-item-control-input">
|
||||
<div class="ant-form-item-control-input-content">
|
||||
<input asp-for="Input.UserName" class="ant-input" autocomplete="username" aria-required="true" placeholder="Username" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ant-form-item">
|
||||
<div class="ant-form-item-row ant-row">
|
||||
<div class="ant-form-item-label ant-col">
|
||||
<label asp-for="Input.Password" class="form-label"></label>
|
||||
</div>
|
||||
|
||||
<div class="ant-form-item-control ant-col">
|
||||
<div class="ant-form-item-control-input">
|
||||
<div class="ant-form-item-control-input-content">
|
||||
<input asp-for="Input.Password" class="ant-input" autocomplete="current-password" aria-required="true" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ant-form-item">
|
||||
<div class="ant-form-item-row ant-row">
|
||||
<div class="ant-form-item-label ant-col">
|
||||
<label asp-for="Input.ConfirmPassword" class="form-label"></label>
|
||||
</div>
|
||||
|
||||
<div class="ant-form-item-control ant-col">
|
||||
<div class="ant-form-item-control-input">
|
||||
<div class="ant-form-item-control-input-content">
|
||||
<input asp-for="Input.ConfirmPassword" class="ant-input" autocomplete="new-password" aria-required="true" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ant-form-item" style="margin-bottom: 0;">
|
||||
<div class="ant-form-item-row ant-row">
|
||||
<button type="submit" class="ant-btn ant-btn-primary ant-btn-block">Continue</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; margin-top: 16px;">
|
||||
Don't have account yet? <a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl" tabindex="-1">Register</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -6,47 +6,84 @@
|
|||
ViewData["Title"] = "Log in";
|
||||
}
|
||||
|
||||
<div class="page page-center">
|
||||
<div class="container-tight py-4">
|
||||
<div class="text-center mb-4">
|
||||
<div class="ant-row ant-row-middle ant-row-space-around" style="position: absolute; top:0; left: 0; right: 0; bottom: 0;">
|
||||
<div class="ant-col ant-col-10">
|
||||
|
||||
<div style="text-align: center; margin-bottom: 24px;">
|
||||
<img src="~/static/logo.svg" />
|
||||
</div>
|
||||
|
||||
<form id="account" method="post" class="card card-md" autocomplete="off">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-center mb-4">Login to your account</h2>
|
||||
|
||||
<div class="mb-3">
|
||||
<label asp-for="Input.UserName" class="form-label"></label>
|
||||
<input asp-for="Input.UserName" class="form-control" autocomplete="username" aria-required="true" />
|
||||
<span asp-validation-for="Input.UserName" class="text-danger"></span>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label asp-for="Input.Password" class="form-label"></label>
|
||||
<input asp-for="Input.Password" class="form-control" autocomplete="current-password" aria-required="true" />
|
||||
<span asp-validation-for="Input.Password" class="text-danger"></span>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label asp-for="Input.RememberMe" class="form-check">
|
||||
<input class="form-check-input" asp-for="Input.RememberMe" />
|
||||
<span class="form-check-label">@Html.DisplayNameFor(m => m.Input.RememberMe)</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<button id="login-submit" type="submit" class="btn btn-primary w-100">Sign in</button>
|
||||
<div class="ant-card ant-card-bordered">
|
||||
<div class="ant-card-head">
|
||||
<div class="ant-card-head-wrapper">
|
||||
<div class="ant-card-head-title">Login</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<form id="account" method="post" class="ant-card-body" autocomplete="off">
|
||||
<div class="ant-form ant-form-vertical">
|
||||
<div class="ant-form-item">
|
||||
<div class="ant-form-item-row ant-row">
|
||||
<div class="ant-form-item-label ant-col">
|
||||
<label asp-for="Input.UserName" class="form-label"></label>
|
||||
</div>
|
||||
|
||||
<div class="text-center text-muted mt-3">
|
||||
Don't have account yet? <a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl" tabindex="-1">Register</a>
|
||||
<div class="ant-form-item-control ant-col">
|
||||
<div class="ant-form-item-control-input">
|
||||
<div class="ant-form-item-control-input-content">
|
||||
<input asp-for="Input.UserName" class="ant-input" autocomplete="username" aria-required="true" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ant-form-item">
|
||||
<div class="ant-form-item-row ant-row">
|
||||
<div class="ant-form-item-label ant-col">
|
||||
<label asp-for="Input.Password" class="form-label"></label>
|
||||
</div>
|
||||
|
||||
<div class="ant-form-item-control ant-col">
|
||||
<div class="ant-form-item-control-input">
|
||||
<div class="ant-form-item-control-input-content">
|
||||
<input asp-for="Input.Password" class="ant-input" autocomplete="current-password" aria-required="true" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ant-form-item">
|
||||
<div class="ant-form-item-row ant-row">
|
||||
<div class="ant-form-item-control ant-col">
|
||||
<div class="ant-form-item-control-input">
|
||||
<div class="ant-form-item-control-input-content">
|
||||
<label class="ant-checkbox-wrapper">
|
||||
<span class="ant-checkbox">
|
||||
<input class="ant-checkbox-input" asp-for="Input.RememberMe" />
|
||||
<span class="ant-checkbox-inner"></span>
|
||||
</span>
|
||||
<span>
|
||||
@Html.DisplayNameFor(m => m.Input.RememberMe)
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ant-form-item" style="margin-bottom: 0;">
|
||||
<div class="ant-form-item-row ant-row">
|
||||
<button id="login-submit" type="submit" class="ant-btn ant-btn-primary ant-btn-block">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; margin-top: 16px;">
|
||||
Don't have account yet? <a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl" tabindex="-1">Register</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<partial name="_ValidationScriptsPartial" />
|
||||
}
|
||||
</div>
|
||||
|
|
@ -5,46 +5,80 @@
|
|||
ViewData["Title"] = "Register";
|
||||
}
|
||||
|
||||
<div class="page page-center">
|
||||
<div class="container-tight py-4">
|
||||
<div class="text-center mb-4">
|
||||
<div class="ant-row ant-row-middle ant-row-space-around" style="position: absolute; top:0; left: 0; right: 0; bottom: 0;">
|
||||
<div class="ant-col ant-col-10">
|
||||
|
||||
<div style="text-align: center; margin-bottom: 24px;">
|
||||
<img src="~/static/logo.svg" />
|
||||
</div>
|
||||
|
||||
<form id="registerForm" method="post" class="card card-md" autocomplete="off">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-center mb-4">Create a new account</h2>
|
||||
|
||||
<div class="mb-3">
|
||||
<label asp-for="Input.UserName" class="form-label"></label>
|
||||
<input asp-for="Input.UserName" class="form-control" autocomplete="username" aria-required="true" />
|
||||
<span asp-validation-for="Input.UserName" class="text-danger"></span>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label asp-for="Input.Password" class="form-label"></label>
|
||||
<input asp-for="Input.Password" class="form-control" autocomplete="current-password" aria-required="true" />
|
||||
<span asp-validation-for="Input.Password" class="text-danger"></span>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<label asp-for="Input.ConfirmPassword" class="form-label"></label>
|
||||
<input asp-for="Input.ConfirmPassword" class="form-control" autocomplete="new-password" aria-required="true" />
|
||||
<span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<button id="register-submit" type="submit" class="btn btn-primary w-100">Register</button>
|
||||
<div class="ant-card ant-card-bordered">
|
||||
<div class="ant-card-head">
|
||||
<div class="ant-card-head-wrapper">
|
||||
<div class="ant-card-head-title">Create An Account</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<form id="registerForm" method="post" class="ant-card-body" autocomplete="off">
|
||||
<div class="ant-form ant-form-vertical">
|
||||
<div class="ant-form-item">
|
||||
<div class="ant-form-item-row ant-row">
|
||||
<div class="ant-form-item-label ant-col">
|
||||
<label asp-for="Input.UserName" class="form-label"></label>
|
||||
</div>
|
||||
|
||||
<div class="text-center text-muted mt-3">
|
||||
Already have an account? <a asp-page="./Login" asp-route-returnUrl="@Model.ReturnUrl" tabindex="-1">Login</a>
|
||||
<div class="ant-form-item-control ant-col">
|
||||
<div class="ant-form-item-control-input">
|
||||
<div class="ant-form-item-control-input-content">
|
||||
<input asp-for="Input.UserName" class="ant-input" autocomplete="username" aria-required="true" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ant-form-item">
|
||||
<div class="ant-form-item-row ant-row">
|
||||
<div class="ant-form-item-label ant-col">
|
||||
<label asp-for="Input.Password" class="form-label"></label>
|
||||
</div>
|
||||
|
||||
<div class="ant-form-item-control ant-col">
|
||||
<div class="ant-form-item-control-input">
|
||||
<div class="ant-form-item-control-input-content">
|
||||
<input asp-for="Input.Password" class="ant-input" autocomplete="current-password" aria-required="true" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ant-form-item">
|
||||
<div class="ant-form-item-row ant-row">
|
||||
<div class="ant-form-item-label ant-col">
|
||||
<label asp-for="Input.ConfirmPassword" class="form-label"></label>
|
||||
</div>
|
||||
|
||||
<div class="ant-form-item-control ant-col">
|
||||
<div class="ant-form-item-control-input">
|
||||
<div class="ant-form-item-control-input-content">
|
||||
<input asp-for="Input.ConfirmPassword" class="ant-input" autocomplete="new-password" aria-required="true" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ant-form-item" style="margin-bottom: 0;">
|
||||
<div class="ant-form-item-row ant-row">
|
||||
<button id="register-submit" type="submit" class="ant-btn ant-btn-primary ant-btn-block">Register</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; margin-top: 16px;">
|
||||
Already have an account? <a asp-page="./Login" asp-route-returnUrl="@Model.ReturnUrl" tabindex="-1">Login</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<partial name="_ValidationScriptsPartial" />
|
||||
}
|
||||
</div>
|
||||
|
|
@ -4,17 +4,33 @@
|
|||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>@ViewData["Title"] - LANCommander</title>
|
||||
<link href="~/css/tabler.min.css" rel="stylesheet" />
|
||||
<link href="~/lib/selectize.js/css/selectize.bootstrap5.min.css" rel="stylesheet" />
|
||||
<base href="~/" />
|
||||
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
|
||||
<link href="~/css/site.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
@RenderBody()
|
||||
|
||||
<script src="~/lib/jquery/dist/jquery.min.js"></script>
|
||||
<script src="~/lib/selectize.js/js/selectize.min.js"></script>
|
||||
<script src="~/lib/tabler/core/dist/js/tabler.min.js"></script>
|
||||
<script src="~/js/Modal.js"></script>
|
||||
<script src="~/js/Select.js"></script>
|
||||
<script src="~/lib/antv/g2plot/dist/g2plot.js"></script>
|
||||
<script src="~/_content/AntDesign/js/ant-design-blazor.js"></script>
|
||||
<script src="~/_content/AntDesign.Charts/ant-design-charts-blazor.js"></script>
|
||||
<script src="~/js/site.js"></script>
|
||||
|
||||
<script>
|
||||
$('input[type="checkbox"]').on('change', function() {
|
||||
var checked = $(this).prop('checked');
|
||||
|
||||
if (checked) {
|
||||
$(this).parents('.ant-checkbox-wrapper').addClass('ant-checkbox-wrapper-checked');
|
||||
$(this).parents('.ant-checkbox').addClass('ant-checkbox-checked');
|
||||
}
|
||||
else {
|
||||
$(this).parents('.ant-checkbox-wrapper').removeClass('ant-checkbox-wrapper-checked');
|
||||
$(this).parents('.ant-checkbox').removeClass('ant-checkbox-checked');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@await RenderSectionAsync("Scripts", required: false)
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue