Merge pull request #95 from VAuthenticator/split-pages-with-react-rou…

…ter-in-dedicated-pages

split pages

.github/workflows/build.yml

@@ -99,7 +99,7 @@ jobs:
         run: |
           cd src/main/frontend
           npm install --legacy-peer-deps
-          npm run-script build
+          npm run-script production-build
 
       - name: docker push
         run: |

pom.xml

@@ -6,7 +6,7 @@
     <parent>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-parent</artifactId>
-        <version>3.0.0</version>
+        <version>3.0.1</version>
         <relativePath/>
     </parent>
 
@@ -19,12 +19,12 @@
 
     <properties>
         <java.version>17</java.version>
-        <kotlin.version>1.7.21</kotlin.version>
+        <kotlin.version>1.7.22</kotlin.version>
         <snakeyaml.version>1.33</snakeyaml.version>
 
         <io.mockk.version>1.13.2</io.mockk.version>
         <aws.sdk.version>2.18.24</aws.sdk.version>
-        <greenmail.version>1.6.11</greenmail.version>
+        <greenmail.version>2.0.0-alpha-3</greenmail.version>
         <oauth2-authorization-server.version>1.0.0</oauth2-authorization-server.version>
         <wiremock.version>2.27.2</wiremock.version>
         <two-factor-auth.version>1.3</two-factor-auth.version>
@@ -48,13 +48,6 @@
             <artifactId>spring-boot-starter-mail</artifactId>
         </dependency>
 
-        <!-- https://mvnrepository.com/artifact/com.icegreen/greenmail -->
-        <dependency>
-            <groupId>javax.mail</groupId>
-            <artifactId>mail</artifactId>
-            <version>1.4.7</version>
-            <scope>test</scope>
-        </dependency>
 
         <dependency>
             <groupId>com.icegreen</groupId>

src/main/frontend/app/login/index.js → src/main/frontend/app/login/LoginPage.js

@@ -1,14 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from "react-dom";
+import React from "react";
+import {Box, Divider, Grid, ThemeProvider} from "@mui/material";
 import theme from "../component/styles";
 import Template from "../component/Template";
 import FormInputTextField from "../component/FormInputTextField";
+import {Fingerprint, Person} from "@mui/icons-material";
 import Separator from "../component/Separator";
 import FormButton from "../component/FormButton";
-import {HashRouter, Link} from "react-router-dom";
-import {Route, Routes, useNavigate} from "react-router";
-import {Box, Divider, Grid, ThemeProvider, Typography} from "@mui/material";
-import {Fingerprint, Person, VpnKey} from "@mui/icons-material";
+
 
 const VAuthenticatorTitle = () => {
     return <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
@@ -88,28 +87,14 @@ c-111 1 -132 4 -194 28 -38 15 -96 43 -128 62 -32 19 -64 35 -70 35 -7 0 -30
         </g>
     </svg>
 }
-const LoginMainPage = (props) => {
-    return (
-        <HashRouter>
-            <Routes>
-                <Route index path="/"
-                       element={<Login {...props} />}/>
-                <Route exact={true} path="/reset-password-challenge"
-                       element={<ResetPasswordChallengeSender {...props} />}/>
-                <Route exact={true} path="/reset-password-challenge-sent"
-                       element={<SuccessfulResetPasswordMailChallenge {...props} />}/>
-            </Routes>
-        </HashRouter>)
-}
-
 
 const Login = (props) => {
     const {rawFeatures} = props;
     let signUpLink = <div>
         <h3>are you not registered? if you want you can register <a href="/sign-up">here</a></h3>
     </div>
     let resetPasswordLink = <div>
-        <h3>do you have forgot your password? please click <Link to={'/reset-password-challenge'}>here</Link> to recover
+        <h3>do you have forgot your password? please click <a href='/reset-password/reset-password-challenge-sender'>here</a> to recover
             your
             password</h3>
     </div>
@@ -158,80 +143,7 @@ const Login = (props) => {
     )
 }
 
-
-const ResetPasswordChallengeSender = (props) => {
-    const [email, setEmail] = React.useState("")
-    let navigate = useNavigate();
-
-    const sentResetPasswordChallenge = (email) => {
-        return fetch(`/api/mail/${email}/rest-password-challenge`, {
-            method: "PUT",
-            credentials: 'same-origin'
-        }).then(r => {
-            if (r.status === 204) {
-                navigate("/reset-password-challenge-sent", {replace: true});
-            }
-        })
-    }
-
-    return (
-        <ThemeProvider theme={theme}>
-            <Template maxWidth="sm">
-                <Typography variant="h3" component="h3">
-                    <VpnKey fontSize="large"/> Reset your password
-                </Typography>
-
-                <Grid style={{marginTop: '10px'}}>
-                    <Divider/>
-                </Grid>
-
-                <Box>
-                    <FormInputTextField id="email"
-                                        label="Email"
-
-                                        required={true}
-                                        handler={(value) => {
-                                            setEmail(value.target.value)
-                                        }}
-                                        value={email || ""}
-                                        suffix={<Person fontSize="large"/>}/>
-
-                    <Separator/>
-
-                    <FormButton type="button" label="Reset passwrd" onClickHandler={() => {
-                        sentResetPasswordChallenge(email)
-                    }}/>
-
-                </Box>
-
-            </Template>
-        </ThemeProvider>
-    )
-}
-
-const SuccessfulResetPasswordMailChallenge = () => {
-    return (
-        <ThemeProvider theme={theme}>
-            <Template maxWidth="lg">
-                <Typography variant="h3" component="h3">
-                    <VpnKey fontSize="large"/> Reset Password
-                </Typography>
-
-                <Grid style={{marginTop: '10px'}}>
-                    <Divider/>
-                </Grid>
-
-                <Typography variant="h3" component="h3">
-                    We are sent an email on your account inbox please follow the instruction on the mail to reset yout
-                    password
-                </Typography>
-            </Template>
-        </ThemeProvider>
-    )
-}
-
-
 if (document.getElementById('app')) {
     let features = document.getElementById('features').innerHTML
-    ReactDOM.render(<LoginMainPage rawFeatures={features}/>, document.getElementById('app'));
+    ReactDOM.render(<Login rawFeatures={features}/>, document.getElementById('app'));
 }

src/main/frontend/app/reset-password/ResetPasswordChallengeSenderPage.js

@@ -0,0 +1,63 @@
+import ReactDOM from "react-dom";
+import React from "react";
+import {Box, Divider, Grid, ThemeProvider, Typography} from "@mui/material";
+import theme from "../component/styles";
+import Template from "../component/Template";
+import {Person, VpnKey} from "@mui/icons-material";
+import FormInputTextField from "../component/FormInputTextField";
+import Separator from "../component/Separator";
+import FormButton from "../component/FormButton";
+
+
+const ResetPasswordChallengeSender = (props) => {
+    const [email, setEmail] = React.useState("")
+
+    const sentResetPasswordChallenge = (email) => {
+        return fetch(`/api/mail/${email}/rest-password-challenge`, {
+            method: "PUT",
+            credentials: 'same-origin'
+        }).then(r => {
+            if (r.status === 204) {
+                window.location.href = "/reset-password/successful-reset-password-mail-challenge";
+            }
+        })
+    }
+
+    return (
+        <ThemeProvider theme={theme}>
+            <Template maxWidth="sm">
+                <Typography variant="h3" component="h3">
+                    <VpnKey fontSize="large"/> Reset your password
+                </Typography>
+
+                <Grid style={{marginTop: '10px'}}>
+                    <Divider/>
+                </Grid>
+
+                <Box>
+                    <FormInputTextField id="email"
+                                        label="Email"
+
+                                        required={true}
+                                        handler={(value) => {
+                                            setEmail(value.target.value)
+                                        }}
+                                        value={email || ""}
+                                        suffix={<Person fontSize="large"/>}/>
+
+                    <Separator/>
+
+                    <FormButton type="button" label="Reset passwrd" onClickHandler={() => {
+                        sentResetPasswordChallenge(email)
+                    }}/>
+
+                </Box>
+
+            </Template>
+        </ThemeProvider>
+    )
+}
+if (document.getElementById('app')) {
+    let features = document.getElementById('features').innerHTML
+    ReactDOM.render(<ResetPasswordChallengeSender rawFeatures={features}/>, document.getElementById('app'));
+}

src/main/frontend/app/reset-password/SuccessfulResetPasswordMailChallengePage.js

@@ -0,0 +1,34 @@
+import ReactDOM from "react-dom";
+import React from "react";
+import {Divider, Grid, ThemeProvider, Typography} from "@mui/material";
+import theme from "../component/styles";
+import Template from "../component/Template";
+import {VpnKey} from "@mui/icons-material";
+
+
+const SuccessfulResetPasswordMailChallenge = () => {
+    return (
+        <ThemeProvider theme={theme}>
+            <Template maxWidth="lg">
+                <Typography variant="h3" component="h3">
+                    <VpnKey fontSize="large"/> Reset Password
+                </Typography>
+
+                <Grid style={{marginTop: '10px'}}>
+                    <Divider/>
+                </Grid>
+
+                <Typography variant="h3" component="h3">
+                    We are sent an email on your account inbox please follow the instruction on the mail to reset yout
+                    password
+                </Typography>
+            </Template>
+        </ThemeProvider>
+    )
+}
+
+
+if (document.getElementById('app')) {
+    let features = document.getElementById('features').innerHTML
+    ReactDOM.render(<SuccessfulResetPasswordMailChallenge rawFeatures={features}/>, document.getElementById('app'));
+}

src/main/frontend/app/signup/SignUpPage.js

@@ -4,12 +4,12 @@ import FormInputTextField from "../component/FormInputTextField";
 import FormButton from "../component/FormButton";
 
 import {signUp} from "./SignUpRepository";
-import {useNavigate} from "react-router";
 import FormDatePicker, {ApiDateFormatPattern} from "../component/FormDatePicker";
 import {Divider, Grid, ThemeProvider, Typography} from "@mui/material";
 import {GroupAdd, VpnKey} from "@mui/icons-material";
 import theme from "../component/styles";
 import FormInputMask from "../component/FormInputMask";
+import {createRoot} from "react-dom/client";
 
 const SignUpPage = () => {
     const [email, setEmail] = React.useState("")
@@ -19,8 +19,6 @@ const SignUpPage = () => {
     const [birthDate, setBirthDate] = React.useState("")
     const [phone, setPhone] = React.useState("")
 
-    let navigate = useNavigate();
-
     return (
         <ThemeProvider theme={theme}>
             <Template maxWidth="sm">
@@ -105,7 +103,7 @@ const SignUpPage = () => {
                                 })
                                     .then(r => {
                                         if (r.status === 201) {
-                                            navigate("/succeeded", {replace: true});
+                                            window.location.href="/sign-up/succeeded";
                                         }
                                     })
                             }}
@@ -116,4 +114,9 @@ const SignUpPage = () => {
     )
 }
 
-export default SignUpPage
+if (document.getElementById('app')) {
+    let features = document.getElementById('features').innerHTML
+    const container = document.getElementById('app');
+    const root = createRoot(container);
+    root.render(<SignUpPage features={features}/>);
+}

src/main/frontend/app/signup/SuccessfulSignUpPage.js

@@ -3,6 +3,7 @@ import Template from "../component/Template";
 import {Divider, Grid, ThemeProvider, Typography} from "@mui/material";
 import {VpnKey} from "@mui/icons-material";
 import theme from "../component/styles";
+import {createRoot} from "react-dom/client";
 
 const SuccessfulSignUpPage = () => {
     return (
@@ -25,4 +26,9 @@ const SuccessfulSignUpPage = () => {
 }
 
 
-export default SuccessfulSignUpPage
+if (document.getElementById('app')) {
+    let features = document.getElementById('features').innerHTML
+    const container = document.getElementById('app');
+    const root = createRoot(container);
+    root.render(<SuccessfulSignUpPage features={features}/>);
+}

src/main/frontend/package.json

@@ -9,7 +9,8 @@
     ]
   },
   "scripts": {
-    "build": "webpack --config webpack.config.js",
+    "build": "webpack --config webpack.config.js --mode=development",
+    "production-build": "webpack --config webpack.config.js --mode=production",
     "watch": "webpack --watch"
   },
   "author": "mrFlick72",
@@ -38,8 +39,6 @@
     "react": "18.2.0",
     "react-datetime": "3.1.1",
     "react-dom": "18.2.0",
-    "react-imask": "^6.4.3",
-    "react-router": "^6.3.0",
-    "react-router-dom": "^6.3.0"
+    "react-imask": "^6.4.3"
   }
 }