Remove base path #2

Merged
telackey merged 5 commits from telackey/verify into master 2023-09-13 21:24:01 +00:00
4 changed files with 98 additions and 26 deletions
Showing only changes of commit a22ab195ae - Show all commits

View File

@ -9,12 +9,18 @@
"react-router-dom": "^6.15.0", "react-router-dom": "^6.15.0",
"react-scripts": "5.0.1" "react-scripts": "5.0.1"
}, },
"devDependencies": {
"eslint": "^8.22.0",
"eslint-plugin-simple-import-sort": "^10.0.0"
},
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
"clean": "rm -rf build", "clean": "rm -rf build",
"build": "NODE_OPTIONS=--openssl-legacy-provider react-scripts build", "build": "NODE_OPTIONS=--openssl-legacy-provider react-scripts build",
"test": "react-scripts test", "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": { "eslintConfig": {
"extends": "react-app" "extends": "react-app"

View File

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

View File

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

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>
)
}