Restore placeholders.
This commit is contained in:
parent
0cc7909df8
commit
cee5c64b72
13
package.json
13
package.json
@ -2,12 +2,12 @@
|
||||
"name": "react-login-page",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"homepage": "LACONIC_HOSTED_CONFIG_web_path",
|
||||
"homepage": ".",
|
||||
"dependencies": {
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-router-dom": "^5.0.1",
|
||||
"react-scripts": "3.0.1"
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.15.0",
|
||||
"react-scripts": "5.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
@ -30,5 +30,8 @@
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-proposal-private-property-in-object": "^7.21.11"
|
||||
}
|
||||
}
|
||||
|
||||
27
src/App.css
27
src/App.css
@ -80,7 +80,7 @@ form {
|
||||
background: #f3f3f3;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 2px;
|
||||
padding: 2rem;
|
||||
padding: 1rem;
|
||||
margin: 2rem 0 1rem 0
|
||||
}
|
||||
|
||||
@ -88,7 +88,7 @@ form label {
|
||||
float: left;
|
||||
font-size: .9rem;
|
||||
margin: 0;
|
||||
padding: 0
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.right-label {
|
||||
@ -126,7 +126,8 @@ footer p {
|
||||
|
||||
/*** Register Page ***/
|
||||
#checkbox {
|
||||
width: 1rem
|
||||
width: 1rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
form span {
|
||||
@ -140,4 +141,24 @@ form span {
|
||||
/*** Home Page ***/
|
||||
.home-page-title {
|
||||
color: #222
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.message {
|
||||
display: inline-block;
|
||||
background: #f3f3f3;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 2px;
|
||||
padding: 2rem;
|
||||
margin: 1rem 0 1rem 0;
|
||||
}
|
||||
|
||||
.note {
|
||||
color: #888;
|
||||
font-size: .8rem;
|
||||
margin: 1rem 0 0.5rem 0;
|
||||
font-style: italic;
|
||||
}
|
||||
10
src/App.js
10
src/App.js
@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import { BrowserRouter as Router, Switch, 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'
|
||||
@ -14,10 +14,10 @@ export default function App() {
|
||||
return (
|
||||
<Router>
|
||||
<div>
|
||||
<Switch>
|
||||
<Route exact path={basePath} component={ RegisterPage } />
|
||||
<Route path={basePath + "/register"} component={ RegisterPage } />
|
||||
</Switch>
|
||||
<Routes>
|
||||
<Route exact path={basePath} element={ <RegisterPage/> } />
|
||||
<Route path={basePath + "/create"} element={ <RegisterPage/> } />
|
||||
</Routes>
|
||||
<Footer />
|
||||
</div>
|
||||
</Router>
|
||||
|
||||
@ -1,22 +1,27 @@
|
||||
import React from 'react'
|
||||
import { useState } from "react";
|
||||
import {useState} from "react";
|
||||
|
||||
import '../../App.css'
|
||||
import {Link} from "react-router-dom";
|
||||
|
||||
export default function SignUpPage() {
|
||||
const [username, setUsername] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [message, setMessage] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
|
||||
let handleSubmit = async (e) => {
|
||||
setMessage("");
|
||||
setError("");
|
||||
|
||||
const apiBase = "LACONIC_HOSTED_CONFIG_api_url";
|
||||
e.preventDefault();
|
||||
try {
|
||||
let res = await fetch(`${apiBase}/register`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username: username,
|
||||
email: email,
|
||||
@ -24,49 +29,64 @@ export default function SignUpPage() {
|
||||
});
|
||||
let resJson = await res.json();
|
||||
if (res.status === 200) {
|
||||
setMessage(`API Key: ${resJson['api-key']}`);
|
||||
setMessage(`${resJson['api-key']}`);
|
||||
} else {
|
||||
setMessage("Some error occured");
|
||||
setError(`An error occurred: ${res.status}`);
|
||||
}
|
||||
} catch (err) {
|
||||
setMessage("Some error occured");
|
||||
setError("An error occurred.");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="text-center m-5-auto">
|
||||
{/*<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>Email 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 href="https://cerc.io" target="_blank" rel="noopener noreferrer">terms of service</a></span>.
|
||||
</p>
|
||||
<p>
|
||||
<button id="sub_btn" type="submit">Register</button>
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<div className="message">{message ? <p>{message}</p> : null}</div>
|
||||
{/*<footer>*/}
|
||||
{/* <p><Link to="/">Back to Homepage</Link>.</p>*/}
|
||||
{/*</footer>*/}
|
||||
{message ?
|
||||
<div className="success">
|
||||
<h2>Account Created</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>
|
||||
{/*<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
|
||||
href="https://cerc.io" target="_blank"
|
||||
rel="noopener noreferrer">terms of service</a></span>.
|
||||
</p>
|
||||
<p>
|
||||
<button id="sub_btn" type="submit">Register</button>
|
||||
</p>
|
||||
</form>
|
||||
<div className="error">{error ? <p>{error}</p> : null}</div>
|
||||
</div>
|
||||
}
|
||||
<footer>
|
||||
<p><Link to="https://cerc.io">Docs</Link></p>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user