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

Add e-mail verification support. (#1)

Browse Source 
Reviewed-on: #1
Co-authored-by: Thomas E Lackey <telackey@bozemanpass.com>
Co-committed-by: Thomas E Lackey <telackey@bozemanpass.com>
This commit is contained in:
Thomas E Lackey 2023-09-13 21:08:48 +00:00 committed by Thomas E Lackey
parent a4b2efcaca
commit 20fbc3a9ff
4 changed files with 94 additions and 25 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"

10
src/App.js
View File

@ -1,11 +1,8 @@
import React from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import { HashRouter 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'
@ -16,7 +13,8 @@ export default function App() {
<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>

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

@ -5,12 +5,13 @@ 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("");
@ -23,13 +24,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 +46,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

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

@ -0,0 +1,63 @@
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";
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>
)
}