🎨ui: 优化Identity样式

This commit is contained in:
yubaolee
2026-06-27 00:51:53 +08:00
parent 5e6ca18770
commit 97a96e8b4b
11 changed files with 778 additions and 196 deletions

View File

@@ -1,4 +1,19 @@

<div class="auth-card">
<div class="auth-card-header">
<div class="status-icon status-icon--error">&#128683;</div>
<h1>访问被拒绝</h1>
<p>抱歉,您没有权限访问该资源。</p>
</div>
<div class="status-text">
请联系管理员获取相应的访问权限,或返回首页。
</div>
<div style="text-align: center;">
<a class="status-link" href="/">返回首页 &#8594;</a>
</div>
</div>
<div class="container">
<div class="page-header">
<h1>Access Denied</h1>

View File

@@ -1,27 +1,28 @@
@model OpenAuth.IdentityServer.Quickstart.Account.LoggedOutViewModel
@{
// set this so the layout rendering sees an anonymous user
@{
ViewData["signed-out"] = true;
}
<div class="page-header logged-out">
<h1>
Logout
<small>You are now logged out</small>
</h1>
<div class="auth-card">
<div class="auth-card-header">
<div class="status-icon status-icon--success">&#10004;</div>
<h1>已安全退出</h1>
<p>您已成功退出登录</p>
</div>
@if (Model.PostLogoutRedirectUri != null)
{
<div>
Click <a class="PostLogoutRedirectUri" href="@Model.PostLogoutRedirectUri">here</a> to return to the
<span>@Model.ClientName</span> application.
<div style="text-align: center;">
<a class="status-link" href="@Model.PostLogoutRedirectUri">
返回 @Model.ClientName &#8594;
</a>
</div>
}
@if (Model.SignOutIframeUrl != null)
{
<iframe width="0" height="0" class="signout" src="@Model.SignOutIframeUrl"></iframe>
<iframe class="signout-iframe" src="@Model.SignOutIframeUrl"></iframe>
}
</div>

View File

@@ -1,92 +1,75 @@
@model OpenAuth.IdentityServer.Quickstart.Account.LoginViewModel
@model OpenAuth.IdentityServer.Quickstart.Account.LoginViewModel
<div class="login-page">
<div class="page-header">
<h1>Login</h1>
<div class="auth-card">
<div class="auth-card-header">
<div class="auth-icon">&#128274;</div>
<h1>欢迎登录</h1>
<p>登录 OpenAuth.Net 统一认证平台</p>
</div>
<partial name="_ValidationSummary" />
<div class="row">
@if (Model.EnableLocalLogin)
{
<form asp-route="Login">
<input type="hidden" asp-for="ReturnUrl" />
<div class="form-group">
<label asp-for="Username">用户名</label>
<input class="form-control" placeholder="请输入用户名" asp-for="Username" autofocus>
</div>
<div class="form-group">
<label asp-for="Password">密码</label>
<input type="password" class="form-control" placeholder="请输入密码" asp-for="Password" autocomplete="off">
</div>
@if (Model.AllowRememberLogin)
{
<div class="checkbox-group">
<input type="checkbox" asp-for="RememberLogin" id="RememberLogin">
<label for="RememberLogin">记住登录状态</label>
</div>
}
<div class="btn-group">
<button class="btn btn-primary" name="button" value="login">登 录</button>
<button class="btn btn-secondary" name="button" value="cancel">取 消</button>
</div>
<div class="hint-text">
测试账号System/123456 | admin/admin | test/test
</div>
</form>
}
@if (Model.VisibleExternalProviders.Any())
{
@if (Model.EnableLocalLogin)
{
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Local Login</h3>
</div>
<div class="panel-body">
<form asp-route="Login">
<input type="hidden" asp-for="ReturnUrl" />
<fieldset>
<div class="form-group">
<label asp-for="Username"></label>
<input class="form-control" placeholder="Username" asp-for="Username" autofocus>
</div>
<div class="form-group">
<label asp-for="Password"></label>
<input type="password" class="form-control" placeholder="Password" asp-for="Password" autocomplete="off">
</div>
@if (Model.AllowRememberLogin)
{
<div class="form-group login-remember">
<label asp-for="RememberLogin">
<input asp-for="RememberLogin">
<strong>Remember My Login</strong>
</label>
</div>
}
<div class="form-group">
<button class="btn btn-primary" name="button" value="login">Login</button>
<button class="btn btn-default" name="button" value="cancel">Cancel</button>
</div>
<div class="form-group">
*Test Accounts: System/123456 | admin/admin | test/test
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="divider"><span>或使用其他方式登录</span></div>
}
<div class="external-providers">
@foreach (var provider in Model.VisibleExternalProviders)
{
<a class="btn btn-outline"
asp-controller="External"
asp-action="Challenge"
asp-route-provider="@provider.AuthenticationScheme"
asp-route-returnUrl="@Model.ReturnUrl">
@provider.DisplayName
</a>
}
</div>
}
@if (Model.VisibleExternalProviders.Any())
{
<div class="col-md-6 col-sm-6 external-providers">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">External Login</h3>
</div>
<div class="panel-body">
<ul class="list-inline">
@foreach (var provider in Model.VisibleExternalProviders)
{
<li>
<a class="btn btn-default"
asp-controller="External"
asp-action="Challenge"
asp-route-provider="@provider.AuthenticationScheme"
asp-route-returnUrl="@Model.ReturnUrl">
@provider.DisplayName
</a>
</li>
}
</ul>
</div>
</div>
@if (!Model.EnableLocalLogin && !Model.VisibleExternalProviders.Any())
{
<div class="alert alert-warning">
<span>&#9888;</span>
<div>
<strong>无效的登录请求</strong>
<p>当前客户端未配置任何登录方式。</p>
</div>
}
@if (!Model.EnableLocalLogin && !Model.VisibleExternalProviders.Any())
{
<div class="alert alert-warning">
<strong>Invalid login request</strong>
There are no login schemes configured for this client.
</div>
}
</div>
</div>
</div>
}
</div>

View File

@@ -1,21 +1,16 @@
@model OpenAuth.IdentityServer.Quickstart.Account.LogoutViewModel
<div class="logout-page">
<div class="page-header">
<h1>Logout</h1>
<div class="auth-card">
<div class="auth-card-header">
<div class="status-icon status-icon--warning">&#128075;</div>
<h1>确认退出</h1>
<p>您确定要退出当前登录状态吗?</p>
</div>
<div class="row">
<div class="col-sm-6">
<p>Would you like to logout of IdentityServer?</p>
<form asp-action="Logout">
<input type="hidden" name="logoutId" value="@Model.LogoutId" />
<fieldset>
<div class="form-group">
<button class="btn btn-primary">Yes</button>
</div>
</fieldset>
</form>
<form asp-action="Logout">
<input type="hidden" name="logoutId" value="@Model.LogoutId" />
<div class="btn-group">
<button class="btn btn-danger" type="submit">确认退出</button>
</div>
</div>
</div>
</form>
</div>

View File

@@ -1,21 +1,19 @@
<div class="welcome-page">
<div class="row page-header">
<div class="col-sm-10">
<h1>
<img class="icon" src="~/icon.jpg">
Welcome to OpenAuth.Net IdentityServer
<small>(OpenIddict)</small>
</h1>
</div>
<div class="auth-card auth-card--wide">
<div class="auth-card-header">
<div class="auth-icon">&#127968;</div>
<h1>OpenAuth.Net 认证中心</h1>
<p>基于 OpenIddict 的统一身份认证平台</p>
</div>
<div class="row">
<div class="col-sm-8">
<p>
IdentityServer publishes a
<a href="~/.well-known/openid-configuration">discovery document</a>
where you can find metadata and links to all the endpoints, key material, etc.
</p>
<div class="welcome-content">
<div class="status-text">
本服务提供 OpenID Connect / OAuth 2.0 协议支持,为应用提供安全可靠的身份验证服务。
</div>
<div style="text-align: center; margin-top: 24px;">
<a class="discovery-link" href="~/.well-known/openid-configuration">
&#128279; 查看发现文档 (Discovery)
</a>
</div>
</div>
</div>

View File

@@ -1,25 +1,31 @@
@model OpenAuth.IdentityServer.Quickstart.Home.ErrorViewModel
@model OpenAuth.IdentityServer.Quickstart.Home.ErrorViewModel
<div class="error-page">
<div class="page-header">
<h1>Error</h1>
<div class="auth-card">
<div class="auth-card-header">
<div class="status-icon status-icon--error">&#10060;</div>
<h1>出错了</h1>
<p>处理您的请求时发生了错误</p>
</div>
<div class="row">
<div class="col-sm-6">
<div class="alert alert-danger">
Sorry, there was an error
@if (!string.IsNullOrEmpty(Model?.ErrorId))
{
<div>Error Id: @Model.ErrorId</div>
}
@if (!string.IsNullOrEmpty(Model?.ErrorMessage))
{
<div>@Model.ErrorMessage</div>
}
</div>
<div class="alert alert-error">
<span>&#9888;</span>
<div>
@if (!string.IsNullOrEmpty(Model?.ErrorId))
{
<div><strong>错误编号:</strong>@Model.ErrorId</div>
}
@if (!string.IsNullOrEmpty(Model?.ErrorMessage))
{
<div>@Model.ErrorMessage</div>
}
else
{
<div>抱歉,服务器遇到了意外问题。</div>
}
</div>
</div>
<div style="text-align: center;">
<a class="status-link" href="/">返回首页 &#8594;</a>
</div>
</div>

View File

@@ -1,7 +1,16 @@
@model OpenAuth.IdentityServer.Quickstart.Account.RedirectViewModel
@model OpenAuth.IdentityServer.Quickstart.Account.RedirectViewModel
<h1>You are now being returned to the application.</h1>
<p>Once complete, you may close this tab</p>
<div class="auth-card">
<div class="auth-card-header">
<div class="status-icon status-icon--info">&#8634;</div>
<h1>正在跳转</h1>
<p class="loading-dots">正在返回应用程序</p>
</div>
<div class="status-text">
页面即将自动跳转,如未自动跳转请 <a href="@Model.RedirectUrl">点击此处</a>
</div>
</div>
<meta http-equiv="refresh" content="0;url=@Model.RedirectUrl" data-url="@Model.RedirectUrl">
<script src="~/js/signin-redirect.js"></script>

View File

@@ -6,66 +6,42 @@
}
}
<!DOCTYPE html>
<html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OpenAuth.Net认证中心- 最好用的.net权限工作流框架|.net core快速开发框架|.net core权限管理|.net core工作流</title>
<meta name="Keywords" content="openauth.net,.net开源工作流,.NET开源权限管理">
<meta name="Description" content="最好用的.net开源工作流框架,最好用的.NET开源权限管理框架">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>OpenAuth.Net 认证中心</title>
<meta name="description" content="OpenAuth.Net 统一身份认证平台" />
<link rel="icon" type="image/x-icon" href="~/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="~/">
<span class="navbar-brand">
<img src="~/icon.png" class="icon-banner">
OpenAuth.Net IdentityServer认证中心
</span>
</a>
</div>
<div class="auth-wrapper">
<header class="auth-header">
<a href="~/" class="brand">
<img src="~/favicon.ico" alt="Logo" />
<span>OpenAuth.Net</span>
</a>
@if (!string.IsNullOrWhiteSpace(name))
{
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">@name <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a asp-action="Logout" asp-controller="Account">Logout</a></li>
</ul>
</li>
</ul>
<div class="user-menu">
<span>@name</span>
<a asp-action="Logout" asp-controller="Account">退出登录</a>
</div>
}
</div>
</header>
<main class="auth-main">
@RenderBody()
</main>
<footer class="auth-footer">
&copy; @DateTime.Now.Year OpenAuth.Net - 统一身份认证平台
</footer>
</div>
<div class="container body-content">
@RenderBody()
</div>
<script src="~/lib/jquery/jquery.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?93a7b9a145222f9b7109d643a0c58f8d";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
@RenderSection("scripts", required: false)
</body>
</html>

View File

@@ -1,4 +1,14 @@
@if (ViewContext.ModelState.IsValid == false)
{
<div class="alert alert-error">
<span>&#9888;</span>
<div>
<strong>操作失败</strong>
<div asp-validation-summary="All"></div>
</div>
</div>
}
@if (ViewContext.ModelState.IsValid == false)
{
<div class="alert alert-danger">
<strong>Error</strong>