mirror of
https://gitee.com/log4j/pig.git
synced 2024-12-22 04:47:10 +08:00
refactor(auth): 重构授权码模式的确认页面
This commit is contained in:
冷冷
parent
010774c689
commit
2ff0c87cdd
File diff suppressed because one or more lines are too long
@ -1,91 +0,0 @@
|
||||
/*
|
||||
* Copyright (c) 2020 pig4cloud Authors. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.sign_body {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.form-signin {
|
||||
max-width: 330px;
|
||||
padding: 15px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.form-margin-top {
|
||||
margin-top: 50px;
|
||||
}
|
||||
.form-signin .form-signin-heading,
|
||||
.form-signin .checkbox {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.form-signin .checkbox {
|
||||
font-weight: normal;
|
||||
}
|
||||
.form-signin .form-control {
|
||||
position: relative;
|
||||
height: auto;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.form-signin .form-control:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
.form-signin input[type="email"] {
|
||||
margin-bottom: -1px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.form-signin input[type="password"] {
|
||||
margin-bottom: 10px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
footer{
|
||||
text-align: center;
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
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;
|
||||
}
|
||||
@ -1,52 +1,117 @@
|
||||
<#assign content>
|
||||
<div class="mb-7">
|
||||
<h3 class="font-semibold text-2xl text-gray-800 text-center">应用授权确认</h3>
|
||||
<div class="mt-4 flex justify-between text-sm text-gray-600">
|
||||
<div>
|
||||
<#if principalName=="anonymousUser">
|
||||
未登录
|
||||
<#else>
|
||||
<a href="https://pig4cloud.com" class="hover:text-purple-600">${principalName}</a>
|
||||
</#if>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://pig4cloud.com" class="hover:text-purple-600">技术支持</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id='confirmationForm' name='confirmationForm' action="/oauth2/authorize" method='post'>
|
||||
<input type="hidden" name="client_id" value="${clientId}">
|
||||
<input type="hidden" name="state" value="${state}">
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="mb-4">
|
||||
<p class="text-gray-700 mb-3">将获得以下权限：</p>
|
||||
<div class="space-y-3 bg-gray-50 p-4 rounded-lg">
|
||||
<#list scopeList as scope>
|
||||
<div class="flex items-center">
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport"
|
||||
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
|
||||
<title>Pig 第三方授权</title>
|
||||
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="/css/signin.css"/>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar navbar-default container-fluid">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="#">开放平台</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-5">
|
||||
<p class="navbar-text navbar-right">
|
||||
<a target="_blank" href="https://pig4cloud.com">技术支持</a>
|
||||
</p>
|
||||
<p class="navbar-text navbar-right">
|
||||
<#if principalName=="anonymousUser">
|
||||
未登录
|
||||
<#else>
|
||||
<a target="_blank" href="https://pig4cloud.com">${principalName}</a>
|
||||
</#if>
|
||||
<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">
|
||||
</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>
|
||||
</nav>
|
||||
<div style="padding-top: 80px;width: 300px; color: #555; margin:0px auto;">
|
||||
<form id='confirmationForm' name='confirmationForm' action="/oauth2/authorize" method='post'>
|
||||
<input type="hidden" name="client_id" value="${clientId}">
|
||||
<input type="hidden" name="state" value="${state}">
|
||||
|
||||
<p>
|
||||
将获得以下权限：</p>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item"> <span>
|
||||
<#list scopeList as scope>
|
||||
<input type="checkbox" checked="checked" name="scope" value="${scope}"/><label>${scope}</label>
|
||||
</#list>
|
||||
</ul>
|
||||
<p class="help-block">授权后表明你已同意 <a>服务协议</a></p>
|
||||
<button class="btn btn-success pull-right" type="submit" id="write-email-btn">授权</button>
|
||||
</p>
|
||||
</form>
|
||||
<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 class="mt-4 flex justify-between text-sm text-gray-600">
|
||||
<div>
|
||||
<#if principalName=="anonymousUser">
|
||||
未登录
|
||||
<#else>
|
||||
<a href="https://pig4cloud.com" class="hover:text-purple-600">${principalName}</a>
|
||||
</#if>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://pig4cloud.com" class="hover:text-purple-600">技术支持</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id='confirmationForm' name='confirmationForm' action="/oauth2/authorize" method='post'>
|
||||
<input type="hidden" name="client_id" value="${clientId}">
|
||||
<input type="hidden" name="state" value="${state}">
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="mb-4">
|
||||
<p class="text-gray-700 mb-3">将获得以下权限：</p>
|
||||
<div class="space-y-3 bg-gray-50 p-4 rounded-lg">
|
||||
<#list scopeList as scope>
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" checked="checked" name="scope" value="${scope}"
|
||||
class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
|
||||
<label class="ml-3 text-gray-600">${scope}</label>
|
||||
</div>
|
||||
</#list>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-sm text-gray-500 mb-4">
|
||||
授权后表明你已同意
|
||||
<a href="#" class="text-purple-600 hover:text-purple-700">服务协议</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="submit" id="write-email-btn"
|
||||
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-2025
|
||||
<a href="#" class="text-purple-500 hover:text-purple-600">PIGCLOUD</a>
|
||||
</span>
|
||||
</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>
|
||||
|
||||
48
pig-auth/src/main/resources/templates/ftl/layout/base.ftl
Normal file
48
pig-auth/src/main/resources/templates/ftl/layout/base.ftl
Normal file
@ -0,0 +1,48 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title><#if title??>${title}<#else>Pig 统一身份认证</#if></title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<#if extraHead??>${extraHead}</#if>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 背景渐变 -->
|
||||
<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">
|
||||
</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">
|
||||
<#if content??>${content}</#if>
|
||||
|
||||
<!-- 版权信息 -->
|
||||
<div class="mt-7 text-center text-gray-300 text-xs">
|
||||
<span>
|
||||
Copyright © 2021-2025
|
||||
<a href="#" class="text-purple-500 hover:text-purple-600">PIGCLOUD</a>
|
||||
</span>
|
||||
</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>
|
||||
@ -1,72 +1,36 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<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">
|
||||
<#assign content>
|
||||
<div class="mb-7">
|
||||
<h3 class="font-semibold text-2xl text-gray-800 text-center">统一身份平台</h3>
|
||||
</div>
|
||||
|
||||
<form class="form-signin" action="/oauth2/form" method="post">
|
||||
<input type="hidden" name="client_id" value="pig">
|
||||
<input type="hidden" name="grant_type" value="password">
|
||||
<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>
|
||||
|
||||
</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>
|
||||
<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 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>
|
||||
<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>
|
||||
</#assign>
|
||||
|
||||
<#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>
|
||||
<#include "layout/base.ftl">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user