Skip to content

Commit

Permalink
♻️ Refactoring code. 授权码登录页面重构
Browse files Browse the repository at this point in the history
  • Loading branch information
lbw committed Nov 7, 2023
1 parent ae071dc commit 4260fe0
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 29 deletions.
25 changes: 25 additions & 0 deletions pig-auth/src/main/resources/static/css/signin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,3 +64,28 @@ footer{
width:100%;
height:100px;
}

* {
margin: 0;
padding: 0;
}

.input {
transition: border 0.2s ease-in-out;
min-width: 280px
}

.input:focus + .label,
.input:active + .label,
.input.filled + .label {
font-size: .75rem;
transition: all 0.2s ease-out;
top: -0.3rem;
color: #6b7280;
}

.label {
transition: all 0.2s ease-out;
top: 0.4rem;
left: 0;
}
4 changes: 0 additions & 4 deletions pig-auth/src/main/resources/templates/ftl/confirm.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,5 @@
</p>
</form>
</div>
<footer>
<p>support by: pig4cloud.com</p>
<p>email: <a href="mailto:wangiegie@gmail.com">wangiegie@gmail.com</a>.</p>
</footer>
</body>
</html>
90 changes: 65 additions & 25 deletions pig-auth/src/main/resources/templates/ftl/login.ftl
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<#-- 内网部署下载相对应放文件放在 resource目录离线加载-->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!-- component -->
<div
class="bg-purple-900 absolute top-0 left-0 bg-gradient-to-b from-gray-900 via-gray-900 to-purple-800 bottom-0 leading-5 h-full w-full overflow-hidden">

<title>Pig 微服务统一认证</title>
</div>
<div
class="relative min-h-screen sm:flex sm:flex-row justify-center bg-transparent rounded-3xl shadow-xl">
<div class="flex-col flex self-center lg:px-14 sm:max-w-4xl xl:max-w-md z-10">
<div class="self-start hidden lg:flex flex-col text-gray-300">
<p class="pr-3 text-sm opacity-75">
为企业提供一套集中式的账号、权限、认证、审计工具，帮助企业打通身份数据孤岛，实现“一个账号、一次认证、多点通行”的效果，强化企业安全体系的同时，提升组织管理效率，助力企业数字化升级转型。</p>
</div>
</div>
<div class="flex justify-center self-center z-10">
<div class="p-12 bg-white mx-auto rounded-3xl w-96 ">
<div class="mb-7">
<h3 class="font-semibold text-2xl text-gray-800 text-center">统一身份平台</h3>
</div>
<form class="form-signin" action="/token/form" method="post">
<input type="hidden" name="client_id" class="form-control" value="pig" placeholder="所属客户端">
<input type="hidden" name="grant_type" class="form-control" value="password" placeholder="所属客户端">
<div class="space-y-6">
<div class="">
<input class=" w-full text-sm px-4 py-3 bg-gray-200 focus:bg-gray-100 border border-gray-200 rounded-lg focus:outline-none focus:border-purple-400"
type="text" placeholder="账号" name="username" required>
</div>

<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/signin.css" rel="stylesheet">
</head>

<body class="sign_body">
<div class="container form-margin-top">
<form class="form-signin" action="/token/form" method="post">
<h2 class="form-signin-heading" align="center">统一认证系统</h2>
<input type="hidden" name="client_id" class="form-control" value="pig" placeholder="所属客户端">
<input type="hidden" name="grant_type" class="form-control" value="password" placeholder="所属客户端">
<input type="text" name="username" class="form-control form-margin-top" placeholder="账号" required autofocus>
<input type="password" name="password" class="form-control" placeholder="密码" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">sign in</button>
<#if error??>
<span style="color: red; ">${error}</span>
</#if>
</form>
<div class="relative">
<input placeholder="密码" type="password" name="password" required
class=" w-full text-sm px-4 py-3 bg-gray-200 focus:bg-gray-100 border border-gray-200 rounded-lg focus:outline-none focus:border-purple-400">
</div>

<#if error??>
<div class="relative text-center">
<span class="text-red-600">${error}</span>
</div>
</#if>

<div>
<button type="submit"
class="w-full flex justify-center bg-purple-800 hover:bg-purple-700 text-gray-100 p-3 rounded-lg tracking-wide font-semibold cursor-pointer transition ease-in duration-500">
登 录
</button>
</div>
</div>
</form>
<div class="mt-7 text-center text-gray-300 text-xs">
<span>
Copyright © 2021-2023
<a href="#" rel="" target="_blank" title="Codepen aji"
class="text-purple-500 hover:text-purple-600 ">PIGCLOUD</a></span>
</div>
</div>
</div>
</div>
</div>
<svg class="absolute bottom-0 left-0 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#fff" fill-opacity="1"
d="M0,0L40,42.7C80,85,160,171,240,197.3C320,224,400,192,480,154.7C560,117,640,75,720,74.7C800,75,880,117,960,154.7C1040,192,1120,224,1200,213.3C1280,203,1360,149,1400,122.7L1440,96L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>
</svg>
</body>
</html>

0 comments on commit 4260fe0

Please sign in to comment.