lanyuanxiaoyao/gringotts
1
0
Fork 0
Code Activity

feat(web): 使用模块化js 增加账号改密、注销

Browse Source
This commit is contained in:
兰缘小妖
2024-11-18 18:51:55 +08:00
parent 05f4ad5b57
commit c466e5e49f
14 changed files with 393 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
gringotts-web/src/main/resources/static/assets/component/common.js
View File

@@ -1,4 +1,4 @@
function crudCommonOptions() {
export function crudCommonOptions() {
return {
affixHeader: false,
stopAutoRefreshWhenModalIsOpen: true,
@@ -8,7 +8,7 @@ function crudCommonOptions() {
}
}
function readOnlyDialogOptions() {
export function readOnlyDialogOptions() {
return {
actions: [],
showCloseButton: false,
@@ -18,7 +18,17 @@ function readOnlyDialogOptions() {
}
}
function paginationCommonOptions(perPage = true, maxButtons = 5) {
export function horizontalFormOptions() {
return {
mode: 'horizontal',
canAccessSuperData: false,
horizontal: {
left: 2,
},
}
}
export function paginationCommonOptions(perPage = true, maxButtons = 5) {
let option = {
type: 'pagination',
layout: [
@@ -34,7 +44,7 @@ function paginationCommonOptions(perPage = true, maxButtons = 5) {
return option
}
function paginationTemplate(perPage = 20, maxButtons = 5) {
export function paginationTemplate(perPage = 20, maxButtons = 5) {
return {
perPage: perPage,
headerToolbar: [
@@ -48,7 +58,7 @@ function paginationTemplate(perPage = 20, maxButtons = 5) {
}
}
function mappingField(field, mapping) {
export function mappingField(field, mapping) {
let mapData = {
'*': `<span class='label bg-gray-300'>\${${field}}</span>`,
}
@@ -70,97 +80,33 @@ function mappingItem(label, value, color = 'bg-info') {
}
}
const userRoleMapping = [
export const userRoleMapping = [
mappingItem('数据提供方', 'PROVIDER', 'bg-blue-500'),
mappingItem('数据使用方', 'CUSTOMER', 'bg-purple-500'),
mappingItem('审核监管方', 'CHECKER', 'bg-cyan-500'),
mappingItem('系统管理员', 'ADMINISTRATOR', 'bg-green-500'),
]
const userStateMapping = [
export const userStateMapping = [
mappingItem('审查中', 'CHECKING', 'bg-warning'),
mappingItem('正常', 'NORMAL', 'bg-success'),
mappingItem('禁用', 'DISABLED', 'bg-danger'),
]
function userAddDialog() {
function api(method, url) {
return {
actionType: 'dialog',
dialog: {
title: '新用户注册',
actions: [
{
type: 'reset',
label: '清空',
},
{
type: 'submit',
label: '注册',
level: 'primary',
}
],
body: {
type: 'form',
api: '${base}/user/register',
mode: 'horizontal',
canAccessSuperData: false,
horizontal: {
left: 2,
},
body: [
{
type: 'input-email',
name: 'username',
label: '邮箱',
placeholder: '请输入邮箱',
required: true,
clearable: true,
clearValueOnEmpty: true,
validateApi: '${base}/user/exists_username/${username}'
},
{
type: 'input-password',
name: 'password',
label: '密码',
placeholder: '请输入密码',
required: true,
clearable: true,
clearValueOnEmpty: true,
validations: {
matchRegexp: /^(?=.*\d)(?!.*(\d)\1{2})(?!.*(012|123|234|345|456|567|678|789|987|876|765|654|543|432|321|210))(?=.*[a-zA-Z])(?=.*[^\da-zA-Z\s]).{8,16}$/
},
validationErrors: {
matchRegexp: '密码至少包含字母、数字、特殊字符，8-16位，并且不能连续出现3个大小连续或相同的数字',
}
},
{
type: 'input-password',
name: 'confirm-password',
label: '确认密码',
placeholder: '请再次输入密码',
required: true,
clearable: true,
validations: {
equalsField: 'password'
},
validationErrors: {
equalsField: '两次输入密码不一致',
}
},
{
type: 'radios',
name: 'role',
label: '角色',
required: true,
selectFirst: true,
options: [
{label: '数据提供方', value: 'PROVIDER'},
{label: '数据使用方', value: 'CUSTOMER'},
{label: '审查监管方', value: 'CHECKER'},
]
},
]
}
method: method,
url: url,
headers: {
token: '${token|default:undefined}',
}
}
}
export function apiGet(url) {
return api('get', url)
}
export function apiPost(url) {
return api('post', url)
}

7
gringotts-web/src/main/resources/static/assets/component/constants.js
View File

@@ -1,5 +1,6 @@
const information = {
debug: false,
baseUrl: 'http://127.0.0.1:20080',
export const information = {
debug: true,
baseUrl: '',
// baseUrl: 'http://127.0.0.1:20080',
title: '可信供给中心',
}

2
gringotts-web/src/main/resources/static/assets/component/pages/overview-tab.js → gringotts-web/src/main/resources/static/assets/component/pages/tab-overview.js
View File

@@ -1,4 +1,4 @@
function overviewTab() {
export function tabOverview() {
return {
title: '概览',
icon: 'fa fa-house',

18
gringotts-web/src/main/resources/static/assets/component/pages/user-tab.js → gringotts-web/src/main/resources/static/assets/component/pages/tab-user.js
View File

@@ -1,14 +1,14 @@
function userTab() {
import {userRegisterDialog} from './user/dialog-user-register.js'
import {apiGet, crudCommonOptions, mappingField, userRoleMapping, userStateMapping} from '../common.js'
export function tabUser() {
return {
title: '用户管理',
icon: 'fa fa-user',
body: [
{
type: 'crud',
api: {
method: 'get',
url: '${base}/user_management/list'
},
api: apiGet('${base}/user_management/list'),
...crudCommonOptions(),
headerToolbar: [
'reload',
@@ -16,8 +16,8 @@ function userTab() {
type: 'action',
icon: 'fa fa-plus',
tooltip: '新增账号',
...userAddDialog(),
}
...userRegisterDialog(),
},
],
columns: [
{
@@ -61,7 +61,7 @@ function userTab() {
size: 'xs',
},
{
visibleOn: "${state === 'NORMAL'}",
visibleOn: "${state === 'NORMAL' && role !== 'ADMINISTRATOR'}",
label: '禁用',
icon: 'fa fa-ban',
level: 'danger',
@@ -73,7 +73,7 @@ function userTab() {
},
{
visibleOn: "${state === 'DISABLED'}",
visibleOn: "${state === 'DISABLED' && role !== 'ADMINISTRATOR'}",
label: '启用',
icon: 'fa fa-check',
level: 'success',

64
gringotts-web/src/main/resources/static/assets/component/pages/user/dialog-user-change-password.js Normal file
View File

@@ -0,0 +1,64 @@
import {horizontalFormOptions, apiPost} from '../../common.js'
export function userChangePasswordDialog() {
return {
actionType: 'dialog',
dialog: {
title: '修改密码',
actions: [
{
type: 'reset',
label: '清空',
},
{
type: 'submit',
label: '修改',
level: 'primary',
}
],
body: {
type: 'form',
api: apiPost('${base}/user_management/change_password'),
...horizontalFormOptions(),
body: [
{
type: 'input-password',
name: 'oldPassword',
label: '旧密码',
placeholder: '请输入旧密码',
required: true,
},
{
type: 'input-password',
name: 'newPassword',
label: '新密码',
placeholder: '请输入新密码',
required: true,
clearable: true,
clearValueOnEmpty: true,
validations: {
matchRegexp: /^(?=.*\d)(?!.*(\d)\1{2})(?!.*(012|123|234|345|456|567|678|789|987|876|765|654|543|432|321|210))(?=.*[a-zA-Z])(?=.*[^\da-zA-Z\s]).{8,16}$/
},
validationErrors: {
matchRegexp: '密码至少包含字母、数字、特殊字符，8-16位，并且不能连续出现3个大小连续或相同的数字',
}
},
{
type: 'input-password',
name: 'confirmNewPassword',
label: '确认新密码',
placeholder: '请再次输入新密码',
required: true,
clearable: true,
validations: {
equalsField: 'newPassword'
},
validationErrors: {
equalsField: '两次输入密码不一致',
}
},
]
}
}
}
}

34
gringotts-web/src/main/resources/static/assets/component/pages/user/dialog-user-detail.js Normal file
View File

@@ -0,0 +1,34 @@
import {horizontalFormOptions} from "../../common.js";
export function userDetailDialog() {
return {
actionType: 'dialog',
dialog: {
title: '用户注册',
actions: [],
body: {
type: 'form',
api: '${base}/user_management/detail/${username}',
...horizontalFormOptions(),
static: true,
body: [
{
type: 'input-email',
name: 'username',
label: '邮箱',
},
{
type: 'input-password',
name: 'password',
label: '密码',
},
{
type: 'radios',
name: 'role',
label: '角色',
},
]
}
}
}
}

79
gringotts-web/src/main/resources/static/assets/component/pages/user/dialog-user-register.js Normal file
View File

@@ -0,0 +1,79 @@
import {horizontalFormOptions} from "../../common.js";
export function userRegisterDialog() {
return {
actionType: 'dialog',
dialog: {
title: '用户注册',
actions: [
{
type: 'reset',
label: '清空',
},
{
type: 'submit',
label: '注册',
level: 'primary',
}
],
body: {
type: 'form',
api: '${base}/user/register',
...horizontalFormOptions(),
body: [
{
type: 'input-email',
name: 'username',
label: '邮箱',
placeholder: '请输入邮箱',
required: true,
clearable: true,
clearValueOnEmpty: true,
validateApi: '${base}/user/exists_username/${username}'
},
{
type: 'input-password',
name: 'password',
label: '密码',
placeholder: '请输入密码',
required: true,
clearable: true,
clearValueOnEmpty: true,
validations: {
matchRegexp: /^(?=.*\d)(?!.*(\d)\1{2})(?!.*(012|123|234|345|456|567|678|789|987|876|765|654|543|432|321|210))(?=.*[a-zA-Z])(?=.*[^\da-zA-Z\s]).{8,16}$/
},
validationErrors: {
matchRegexp: '密码至少包含字母、数字、特殊字符，8-16位，并且不能连续出现3个大小连续或相同的数字',
}
},
{
type: 'input-password',
name: 'confirm-password',
label: '确认密码',
placeholder: '请再次输入密码',
required: true,
clearable: true,
validations: {
equalsField: 'password'
},
validationErrors: {
equalsField: '两次输入密码不一致',
}
},
{
type: 'radios',
name: 'role',
label: '角色',
required: true,
selectFirst: true,
options: [
{label: '数据提供方', value: 'PROVIDER'},
{label: '数据使用方', value: 'CUSTOMER'},
{label: '审查监管方', value: 'CHECKER'},
]
},
]
}
}
}
}

37
gringotts-web/src/main/resources/static/index.html
View File

@@ -23,23 +23,20 @@
<div id="root"></div>
</body>
<script src="assets/sdk/sdk.js"></script>
<script src="assets/component/constants.js"></script>
<script src="assets/component/common.js"></script>
<script src="assets/component/pages/overview-tab.js"></script>
<script src="assets/component/pages/user-tab.js"></script>
<script>
<script type="module">
import {information} from './assets/component/constants.js'
import {userChangePasswordDialog} from './assets/component/pages/user/dialog-user-change-password'
import {tabUser} from './assets/component/pages/tab-user.js'
import {tabOverview} from './assets/component/pages/tab-overview.js'
import {apiGet} from "./assets/component/common.js";
(function () {
let amis = amisRequire('amis/embed')
let amisJSON = {
id: 'header-service',
className: 'h-full',
type: 'service',
api: {
method: 'get',
url: '${base}/user/state',
headers: {
token: '${token}'
},
},
api: apiGet('${base}/user/state'),
onEvent: {
fetchInited: {
actions: [
@@ -48,6 +45,7 @@
actionType: 'url',
args: {
url: '/login.html',
blank: false,
}
}
]
@@ -66,10 +64,14 @@
trigger: 'hover',
buttons: [
{
label: '个人资料',
label: '修改密码',
...userChangePasswordDialog(),
},
{
label: '退出登陆',
actionType: 'ajax',
api: apiGet('${base}/user/logout'),
reload: 'header-service',
}
]
}
@@ -80,14 +82,13 @@
type: 'tabs',
tabsMode: 'vertical',
tabs: [
userTab(),
overviewTab(),
tabOverview(),
tabUser(),
]
},
}
]
}
let debug = false
amis.embed(
'#root',
amisJSON,
@@ -98,10 +99,10 @@
},
{
theme: 'antd',
enableAMISDebug: debug,
enableAMISDebug: information.debug,
},
);
if (debug) {
if (information.debug) {
console.log('Source', amisJSON)
}
})()

11
gringotts-web/src/main/resources/static/login.html
View File

@@ -23,9 +23,11 @@
<div id="root"></div>
</body>
<script src="assets/sdk/sdk.js"></script>
<script src="assets/component/constants.js"></script>
<script src="assets/component/common.js"></script>
<script>
<script type="module">
import {information} from './assets/component/constants.js'
import {userRegisterDialog} from './assets/component/pages/user/dialog-user-register'
(function () {
let amis = amisRequire('amis/embed')
let amisJSON = {
@@ -53,11 +55,14 @@
api: '${base}/user/login',
redirect: '/index.html?token=${token}',
mode: 'horizontal',
horizontal: {
left: 2,
},
actions: [
{
type: 'action',
label: '注册',
...userAddDialog(),
...userRegisterDialog(),
},
{
type: 'action',