cerc-io/keycloak-reg-ui
16
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Add e-mail verification.

Browse Source
This commit is contained in:
Thomas E Lackey 2023-09-13 14:26:13 -05:00
parent a4b2efcaca
commit a22ab195ae
4 changed files with 98 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package.json
View File

@ -9,12 +9,18 @@
"react-router-dom": "^6.15.0",
"react-scripts": "5.0.1"
},
"devDependencies": {
"eslint": "^8.22.0",
"eslint-plugin-simple-import-sort": "^10.0.0"
},
"scripts": {
"start": "react-scripts start",
"clean": "rm -rf build",
"build": "NODE_OPTIONS=--openssl-legacy-provider react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"eject": "react-scripts eject",
"lint": "eslint src/ --ext .js",
"lint:fix": "eslint src/ --ext .js --fix"
},
"eslintConfig": {
"extends": "react-app"

11
src/App.js
View File

@ -1,22 +1,21 @@
import React from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import LandingPage from './components/pages/LandingPage'
import LoginPage from './components/pages/LoginPage'
import RegisterPage from './components/pages/RegisterPage'
import ForgetPasswordPage from './components/pages/ForgetPasswordPage'
import HomePage from './components/pages/HomePage'
import VerifyPage from './components/pages/VerifyPage'
import './App.css'
export default function App() {
const basePath = "LACONIC_HOSTED_CONFIG_web_path"
//const basePath = "LACONIC_HOSTED_CONFIG_web_path"
const basePath = "";
return (
<Router>
<div>
<Routes>
<Route exact path={basePath} element={ <RegisterPage/> } />
<Route path={basePath + "/create"} element={ <RegisterPage/> } />
<Route exact path={basePath + "/create"} element={ <RegisterPage/> } />
<Route exact path={basePath + "/verify"} element={ <VerifyPage/> } />
</Routes>
<Footer />
</div>

41
src/components/pages/RegisterPage.js
View File

@ -5,16 +5,18 @@ import '../../App.css'
import {Link} from "react-router-dom";
export default function SignUpPage() {
const [username, setUsername] = useState("");
const [email, setEmail] = useState("");
const [apiKey, setApiKey] = useState("");
const [message, setMessage] = useState("");
const [error, setError] = useState("");
let handleSubmit = async (e) => {
setApiKey("");
setMessage("");
setError("");
const apiUrl = "LACONIC_HOSTED_CONFIG_api_url";
//const apiUrl = "LACONIC_HOSTED_CONFIG_api_url";
const apiUrl = "http://localhost:9393";
e.preventDefault();
try {
let res = await fetch(`${apiUrl}/register`, {
@ -23,13 +25,18 @@ export default function SignUpPage() {
"Content-Type": "application/json",
},
body: JSON.stringify({
username: username,
username: email,
email: email,
}),
});
let resJson = await res.json();
if (res.status === 200) {
setMessage(`${resJson['api-key']}`);
if (resJson['api-key']) {
setApiKey(`${resJson['api-key']}`);
setMessage(`${resJson['api-key']}`);
} else {
setMessage("Success");
}
} else {
setError(`An error occurred: ${res.status}`);
}
@ -40,37 +47,33 @@ export default function SignUpPage() {
return (
<div className="text-center m-5-auto">
{message ?
{apiKey ?
<div className="success">
<h2>Account Created</h2>
<div className="message">
<h5>API Key</h5>
{message}
{apiKey}
<div className="note">Save this key. It will not be displayed again.</div>
</div>
</div>
:
message ?
<div className="success">
<h2>Account Created</h2>
<div className="message">
<h5>Verification Required</h5>
Please check your e-mail for a link to verify your account.
</div>
</div>
:
<div>
{/*<h2>Join us</h2>*/}
{/*<h5>Create your personal account</h5>*/
}
<form onSubmit={handleSubmit} action="">
{/*<p>*/}
{/* <label>Username</label><br/>*/}
{/* <input type="text" name="username"*/}
{/* onChange={(e) => setUsername(e.target.value)}*/}
{/* required />*/}
{/*</p>*/}
<p>
<label>E-mail Address</label><br/>
<input type="email" name="email"
onChange={(e) => setEmail(e.target.value)}
required/>
</p>
{/*<p>*/}
{/* <label>Password</label><br/>*/}
{/* <input type="password" name="password" requiredc />*/}
{/*</p>*/}
<p>
<input type="checkbox" name="checkbox" id="checkbox" required/>
<span>I agree all statements in <a

64
src/components/pages/VerifyPage.js Normal file
View File

@ -0,0 +1,64 @@
import React from 'react'
import {useState} from "react";
import '../../App.css'
import {Link, useSearchParams} from "react-router-dom";
export default function VerifyPage(props) {
const [query] = useSearchParams();
const [message, setMessage] = useState("");
const [error, setError] = useState("");
const token = query.get("token")
let handleSubmit = async () => {
//const apiUrl = "LACONIC_HOSTED_CONFIG_api_url";
const apiUrl = "http://localhost:9393";
let res = await fetch(`${apiUrl}/verify`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
token
}),
});
const resJson = await res.json();
if (res.status === 200) {
return `${resJson['api-key']}`;
}
throw new Error(`An error occurred: ${res.status}`);
};
if (!message && !error) {
handleSubmit().then((message) => {
setMessage(message)
}).catch((reason) => {
setError("An error occurred.")
})
}
return (
<div className="text-center m-5-auto">
{message ?
<div className="success">
<h2>Account Verified</h2>
<div className="message">
<h5>API Key</h5>
{message}
<div className="note">Save this key. It will not be displayed again.</div>
</div>
</div>
:
<div>
Verifying account...
<div className="error">{error ? <p>{error}</p> : null}</div>
</div>
}
<footer>
<p><Link to="https://cerc.io">Docs</Link></p>
</footer>
</div>
)
}