From 0a9e3c0fe8f849f5165f3a40d74f05e2458c58b2 Mon Sep 17 00:00:00 2001 From: dungreact Date: Mon, 30 Oct 2023 23:09:59 +0700 Subject: [PATCH] update import --- generators/react/files-react.mjs | 1 + generators/react/templates/package.json.ejs | 2 + .../templates/src/main/webapp/app/app.tsx.ejs | 16 +- .../modules/account/activate/activate.tsx.ejs | 29 +- .../finish/password-reset-finish.tsx.ejs | 8 +- .../init/password-reset-init.tsx.ejs | 2 +- .../modules/account/password/password.tsx.ejs | 2 +- .../modules/account/settings/settings.tsx.ejs | 5 +- .../health/health-modal.tsx.ejs | 31 +- .../user-management-delete-dialog.tsx.ejs | 29 +- .../user-management-detail.tsx.ejs | 17 +- .../user-management-update.tsx.ejs | 337 +++++++++--------- .../user-management/user-management.tsx.ejs | 26 +- .../main/webapp/app/modules/home/home.tsx.ejs | 68 +--- .../app/modules/login/login-modal.tsx.ejs | 134 +++---- .../webapp/app/modules/login/logout.tsx.ejs | 1 + .../layout/header/header-components.tsx.ejs | 8 +- .../app/shared/layout/header/header.tsx.ejs | 101 +----- .../app/shared/layout/menus/menu-item.tsx.ejs | 2 + .../app/shared/layout/sider/sider.tsx.ejs | 100 ++++++ 20 files changed, 443 insertions(+), 476 deletions(-) create mode 100644 generators/react/templates/src/main/webapp/app/shared/layout/sider/sider.tsx.ejs diff --git a/generators/react/files-react.mjs b/generators/react/files-react.mjs index fb34a72..e0ef2a9 100644 --- a/generators/react/files-react.mjs +++ b/generators/react/files-react.mjs @@ -210,6 +210,7 @@ export const files = { 'shared/layout/menus/menu-components.tsx', 'shared/layout/menus/menu-item.tsx', 'shared/layout/password/password-strength-bar.tsx', + 'shared/layout/sider/sider.tsx', // util 'shared/util/date-utils.ts', 'shared/util/pagination.constants.ts', diff --git a/generators/react/templates/package.json.ejs b/generators/react/templates/package.json.ejs index 5c22683..27ee928 100644 --- a/generators/react/templates/package.json.ejs +++ b/generators/react/templates/package.json.ejs @@ -33,6 +33,7 @@ "@reduxjs/toolkit": "<%= nodeDependencies['@reduxjs/toolkit'] %>", "axios": "<%= nodeDependencies['axios'] %>", "antd": "5.10.2", + "bootstrap": "<%= nodeDependencies['bootstrap'] %>", <%_ if (!clientThemeNone) { _%> "bootswatch": "<%= nodeDependencies['bootswatch'] %>", <%_ } _%> @@ -50,6 +51,7 @@ "react-router-dom": "<%= nodeDependencies['react-router-dom'] %>", "react-toastify": "<%= nodeDependencies['react-toastify'] %>", "react-transition-group": "<%= nodeDependencies['react-transition-group'] %>", + "reactstrap": "<%= nodeDependencies['reactstrap'] %>", "redux": "<%= nodeDependencies['redux'] %>", "redux-thunk": "<%= nodeDependencies['redux-thunk'] %>", <%_ if (communicationSpringWebsocket) { _%> diff --git a/generators/react/templates/src/main/webapp/app/app.tsx.ejs b/generators/react/templates/src/main/webapp/app/app.tsx.ejs index 168c7a4..f8d08a6 100644 --- a/generators/react/templates/src/main/webapp/app/app.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/app.tsx.ejs @@ -29,12 +29,10 @@ import { useAppDispatch, useAppSelector } from 'app/config/store'; import { getSession } from 'app/shared/reducers/authentication'; import { getProfile } from 'app/shared/reducers/application-profile'; import Header from 'app/shared/layout/header/header'; -import Footer from 'app/shared/layout/footer/footer'; import { hasAnyAuthority } from 'app/shared/auth/private-route'; import ErrorBoundary from 'app/shared/error/error-boundary'; import { AUTHORITIES } from 'app/config/constants'; import AppRoutes from 'app/routes'; -import 'antd/dist/antd.css'; import Sider from 'app/shared/layout/sider/sider'; const baseHref = document.querySelector('base').getAttribute('href').replace(/\/$/, ''); @@ -47,9 +45,9 @@ export const App = () => { dispatch(getProfile()); }, []); -<%_ if (enableTranslation) { _%> - const currentLocale = useAppSelector(state => state.locale.currentLocale); -<%_ } _%> + <%_ if (enableTranslation) { _%> + const currentLocale = useAppSelector(state => state.locale.currentLocale); + <%_ } _%> const isAuthenticated = useAppSelector(state => state.authentication.isAuthenticated); const isAdmin = useAppSelector(state => hasAnyAuthority(state.authentication.account.authorities, [AUTHORITIES.ADMIN])); const ribbonEnv = useAppSelector(state => state.applicationProfile.ribbonEnv); @@ -57,7 +55,7 @@ export const App = () => { const isOpenAPIEnabled = useAppSelector(state => state.applicationProfile.isOpenAPIEnabled); return ( - + {isAdmin ? ( @@ -72,7 +70,9 @@ export const App = () => { + currentLocale={currentLocale} + <%_ } _%> ribbonEnv={ribbonEnv} isInProduction={isInProduction} isOpenAPIEnabled={isOpenAPIEnabled} @@ -85,7 +85,7 @@ export const App = () => { - + ); }; diff --git a/generators/react/templates/src/main/webapp/app/modules/account/activate/activate.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/activate/activate.tsx.ejs index fe5a0f7..2b8f5c0 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/activate/activate.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/account/activate/activate.tsx.ejs @@ -1,23 +1,5 @@ -<%# - Copyright 2013-2023 the original author or authors from the JHipster project. - - This file is part of the JHipster project, see https://www.jhipster.tech/ - for more information. - - 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 - - https://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. --%> import React, { useEffect } from 'react'; -import { Link, RouteComponentProps } from 'react-router-dom'; +import { Link, useSearchParams } from 'react-router-dom'; import { Row, Col, Button, Result } from 'antd'; import { Translate, getUrlParameter } from 'react-jhipster'; @@ -28,9 +10,7 @@ const successAlert = ( - Your user account has been activated. Please - + Your user account has been activated. } extra={[ + + + + + )} + ); }; diff --git a/generators/react/templates/src/main/webapp/app/modules/administration/user-management/user-management.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/administration/user-management/user-management.tsx.ejs index 997839f..2dfaf84 100644 --- a/generators/react/templates/src/main/webapp/app/modules/administration/user-management/user-management.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/administration/user-management/user-management.tsx.ejs @@ -131,7 +131,7 @@ export const UserManagement = () => { - +
@@ -159,8 +159,8 @@ export const UserManagement = () => { users.map((user, i) => ( @@ -184,7 +184,7 @@ export const UserManagement = () => { user.authorities ? ( user.authorities.map((authority, j) => (
- {authority} + {authority}
))) : null } @@ -202,14 +202,20 @@ export const UserManagement = () => { <%_ } _%> diff --git a/generators/react/templates/src/main/webapp/app/modules/home/home.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/home/home.tsx.ejs index 838a0dd..c44c092 100644 --- a/generators/react/templates/src/main/webapp/app/modules/home/home.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/home/home.tsx.ejs @@ -1,5 +1,5 @@ <%# - Copyright 2013-2023 the original author or authors from the JHipster project. + Copyright 2013-2021 the original author or authors from the JHipster project. This file is part of the JHipster project, see https://www.jhipster.tech/ for more information. @@ -18,11 +18,7 @@ -%> import './home.scss'; -<%_ if (authenticationTypeOauth2) { _%> import React, { useEffect } from 'react'; -<%_ } else { _%> -import React from 'react'; -<%_ } _%> import { Link } from 'react-router-dom'; import { Translate } from 'react-jhipster'; import { Row, Col, Alert } from 'antd'; @@ -50,79 +46,41 @@ export const Home = () => { -

Welcome, <%= backendName %> Hipster!

+

Welcome, <%= backendType %> Hipster!

This is your homepage

{ - (account?.login) ? ( + (account && account.login) ? (
- You are logged in as user {account.login}.} /> +
) : (
- If you want to + If you want to <% if (!enableTranslation) { %> <% } %> <%_ if (authenticationTypeOauth2) { _%> - sign in + sign in <%_ } else { _%> sign in <%_ } _%> - , you can try the default accounts: + , you can try the default accounts:
- Administrator (login="admin" and password="admin")
- User (login="user" and password="user"). - } /> + } /> -<%_ if (generateUserManagement) { _%> - - You do not have an account yet?  - Register a new account - +<%_ if (!skipUserManagement) { _%> + Register a new account + ]}/> <%_ } _%>
) } -

- If you have any question on JHipster: -

- - - -

- If you like JHipster, do not forget to give us a star on - {' '} - GitHub! -

+

Import the home page here!

); }; export default Home; - diff --git a/generators/react/templates/src/main/webapp/app/modules/login/login-modal.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/login/login-modal.tsx.ejs index 9742b80..17d1673 100644 --- a/generators/react/templates/src/main/webapp/app/modules/login/login-modal.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/login/login-modal.tsx.ejs @@ -18,7 +18,7 @@ -%> import React from 'react'; import { Translate, translate, ValidatedField } from 'react-jhipster'; -import { Modal, Form, Input, Checkbox, notification, Button } from 'antd'; +import { Modal, Form, Input, Checkbox, notification, Button, Alert, Row, Col } from 'antd'; import { Link } from 'react-router-dom'; import { type FieldError, useForm } from 'react-hook-form'; @@ -47,82 +47,66 @@ const LoginModal = (props: ILoginModalProps) => { }; return ( - -
- Sign in - - - - { loginError ? - - - Failed to sign in! Please check your credentials and try again. - - - : null - } - - - - - hidden<% } %> - name="rememberMe" - type="checkbox" - check - label={translate('login.form.rememberme')} - value={true} - register={register} - /> - - -
 
+ + Cancel + , + ]}> + + + + { loginError ? + Failed to sign in! Please check your credentials and try again.} /> + : null + } + + + + + hidden<% } %> + name="rememberMe" + type="checkbox" + check + label={translate('login.form.rememberme')} + value={true} + register={register} + /> + + +
 
<%_ if (generateUserManagement) { _%> - - - Did you forget your password? - - - - - You don't have an account yet? - - {' '} - - Register a new account - - + + Did you forget your password? + + } /> + + Register a new account + } /> <%_ } _%> - - - - {' '} - - ); diff --git a/generators/react/templates/src/main/webapp/app/modules/login/logout.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/login/logout.tsx.ejs index 4655743..ebc04e3 100644 --- a/generators/react/templates/src/main/webapp/app/modules/login/logout.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/login/logout.tsx.ejs @@ -21,6 +21,7 @@ import React, { useLayoutEffect } from 'react'; import { useAppDispatch, useAppSelector } from 'app/config/store'; import { logout } from 'app/shared/reducers/authentication'; import { Button, Result } from 'antd'; +import {Link} from "react-router-dom"; export const Logout = () => { const logoutUrl = useAppSelector(state => state.authentication.logoutUrl); diff --git a/generators/react/templates/src/main/webapp/app/shared/layout/header/header-components.tsx.ejs b/generators/react/templates/src/main/webapp/app/shared/layout/header/header-components.tsx.ejs index c74e474..ba12092 100644 --- a/generators/react/templates/src/main/webapp/app/shared/layout/header/header-components.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/shared/layout/header/header-components.tsx.ejs @@ -20,9 +20,7 @@ import React from 'react'; import { Translate } from 'react-jhipster'; import { NavLink as Link } from 'react-router-dom'; -import appConfig from 'app/config/constants'; - -export const BrandIcon = () => ( +export const BrandIcon = () => ( Logo ); @@ -30,9 +28,9 @@ export const Brand = () => ( - 1stsportscards + Brand - {appConfig.VERSION} + {VERSION} ); diff --git a/generators/react/templates/src/main/webapp/app/shared/layout/header/header.tsx.ejs b/generators/react/templates/src/main/webapp/app/shared/layout/header/header.tsx.ejs index 394c636..77e5687 100644 --- a/generators/react/templates/src/main/webapp/app/shared/layout/header/header.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/shared/layout/header/header.tsx.ejs @@ -18,95 +18,20 @@ -%> import './header.scss'; -import React, { useState<% if (enableI18nRTL) { %>, useEffect<% } %> } from 'react'; -import { Translate<% if (enableTranslation) { %>, Storage<% } %> } from 'react-jhipster'; -import { - Navbar, - Nav, - NavbarToggler, - Collapse -} from 'reactstrap'; +import React from 'react'; import LoadingBar from 'react-redux-loading-bar'; - -<%_ if (enableTranslation && enableI18nRTL) { _%> -import { isRTL } from 'app/config/translation'; -<%_ } _%> -import { Home, Brand } from './header-components'; -import { AdminMenu, EntitiesMenu, AccountMenu<%_ if (enableTranslation) { _%>, LocaleMenu<%_ } _%>} from '../menus'; -<%_ if (enableTranslation) { _%> -import { useAppDispatch } from 'app/config/store'; -import { setLocale } from 'app/shared/reducers/locale'; -<%_ } _%> - -export interface IHeaderProps { - isAuthenticated: boolean; - isAdmin: boolean; - ribbonEnv: string; - isInProduction: boolean; - isOpenAPIEnabled: boolean; -<%_ if (enableTranslation) { _%> - currentLocale: string; -<%_ } _%> -} - - -const Header = (props: IHeaderProps) => { - const [menuOpen, setMenuOpen] = useState(false); -<%_ if (enableI18nRTL) { _%> - useEffect(() => document.querySelector('html').setAttribute('dir', isRTL(Storage.session.get('locale')) ? 'rtl' : 'ltr')); -<%_ } _%> - -<%_ if (enableTranslation) { _%> - const dispatch = useAppDispatch(); - - const handleLocaleChange = event => { - const langKey = event.target.value; - Storage.session.set('locale', langKey); - dispatch(setLocale(langKey)); - <%_ if (enableI18nRTL) { _%> - document.querySelector('html').setAttribute('dir', isRTL(langKey) ? 'rtl' : 'ltr'); - <%_ } _%> - } -<%_ } _%> - - const renderDevRibbon = () => props.isInProduction === false ? ( - - ) : null; - - const toggleMenu = () => setMenuOpen(!menuOpen); - - /* jhipster-needle-add-element-to-menu - JHipster will add new menu items here */ - - return ( -
- {renderDevRibbon()} - - dark<% } else { %>light<% } %> expand="md" fixed="top" className="<%_ if (clientThemeNone) { _%>jh-navbar<%_ } else { _%>bg-<%= clientThemeVariant %><%_ } _%>"> - - - - - - -
- ); +import { Layout } from 'antd'; +import { Brand } from './header-components'; + +const Header = () => { + /* jhipster-needle-add-element-to-menu - JHipster will add new menu items here */ + + return ( + + + + + ); }; export default Header; diff --git a/generators/react/templates/src/main/webapp/app/shared/layout/menus/menu-item.tsx.ejs b/generators/react/templates/src/main/webapp/app/shared/layout/menus/menu-item.tsx.ejs index a19f800..d624bf1 100644 --- a/generators/react/templates/src/main/webapp/app/shared/layout/menus/menu-item.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/shared/layout/menus/menu-item.tsx.ejs @@ -38,6 +38,8 @@ const MenuItem = (props: IMenuItem) => { {children} ); + + return null; }; export default MenuItem; diff --git a/generators/react/templates/src/main/webapp/app/shared/layout/sider/sider.tsx.ejs b/generators/react/templates/src/main/webapp/app/shared/layout/sider/sider.tsx.ejs new file mode 100644 index 0000000..8a80169 --- /dev/null +++ b/generators/react/templates/src/main/webapp/app/shared/layout/sider/sider.tsx.ejs @@ -0,0 +1,100 @@ +import React, { useState<% if (enableI18nRTL) { %>, useEffect<% } %> } from 'react'; +import { translate<% if (enableTranslation) { %>, Storage<% } %> } from 'react-jhipster'; + +<%_ if (enableTranslation && enableI18nRTL) { _%> + import { isRTL } from 'app/config/translation'; +<%_ } _%> + +import LoadingBar from 'react-redux-loading-bar'; +import { Layout, Menu } from 'antd'; +import { Home } from '../header/header-components'; +import { AdminMenu, EntitiesMenu, AccountMenu<%_ if (enableTranslation) { _%>, LocaleMenu<%_ } _%> } from '../menus'; +import { ApartmentOutlined, ClusterOutlined, GlobalOutlined, HomeOutlined, UserOutlined } from '@ant-design/icons'; +import { languages } from 'app/config/translation'; + +<%_ if (enableTranslation) { _%> + import { useAppDispatch } from 'app/config/store'; + import { setLocale } from 'app/shared/reducers/locale'; +<%_ } _%> + +export interface IHeaderProps { + isAuthenticated: boolean; + isAdmin: boolean; + ribbonEnv: string; + isInProduction: boolean; + isOpenAPIEnabled: boolean; + <%_ if (enableTranslation) { _%> + currentLocale: string; + <%_ } _%> +} + +const { SubMenu } = Menu; +const rootSubmenuKeys = ['entities', 'admin', 'lang', 'account']; + +const Sider = (props: IHeaderProps) => { + const [menuOpen, setMenuOpen] = useState(false); + + const [openKeys, setOpenKeys] = React.useState([]); + + const onOpenChange = keys => { + const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1); + if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) { + setOpenKeys(keys); + } else { + setOpenKeys(latestOpenKey ? [latestOpenKey] : []); + } + }; + <%_ if (enableI18nRTL) { _%> + useEffect(() => document.querySelector('html').setAttribute('dir', isRTL(Storage.session.get('locale')) ? 'rtl' : 'ltr')); + <%_ } _%> + + <%_ if (enableTranslation) { _%> + const dispatch = useAppDispatch(); + + const handleLocaleChange = event => { + const langKey = event.target.value; + Storage.session.set('locale', langKey); + dispatch(setLocale(langKey)); + <%_ if (enableI18nRTL) { _%> + document.querySelector('html').setAttribute('dir', isRTL(langKey) ? 'rtl' : 'ltr'); + <%_ } _%> + } + <%_ } _%> + + const toggleMenu = () => setMenuOpen(!menuOpen); + + const [selectedKeys, setSelectedKeys] = useState(['home']); + + const onSelect = ({ key }) => { + setSelectedKeys([key]); + }; + + /* jhipster-needle-add-element-to-menu - JHipster will add new menu items here */ + + return ( + + + + }> + + + }> + {EntitiesMenu} + + }> + {AdminMenu(props.isOpenAPIEnabled)} + + <%_ if (enableTranslation) { _%> + }> + + + <%_ } _%> + }> + {AccountMenu(props.isAuthenticated)} + + + + ); +}; + +export default Sider;
ID
- {user.login}
- - -