polish landing page and add create account button

This commit is contained in:
hippoz 2021-05-21 02:54:18 +03:00
parent d2f1ca9e02
commit 7d756029d9
Signed by: hippoz
GPG key ID: 7C52899193467641
4 changed files with 102 additions and 3 deletions

View file

@ -0,0 +1,95 @@
import { useState } from 'react';
import { useHistory } from 'react-router-dom';
import Notification from '../UI/Notification';
import APIRequest from '../../API/APIRequest';
import { getSignupMessageFromError } from '../../Util/Errors'
export default function Create() {
const history = useHistory();
const [ usernameInput, setUsernameInput ] = useState();
const [ passwordInput, setPasswordInput ] = useState();
const [ specialCodeInput, setSpecialCodeInput ] = useState();
const [ specialCodePrompt, setSpecialCodePrompt ] = useState();
const [ info, setInfo ] = useState();
const doCreateAccount = async () => {
const { json, isOK } = await APIRequest('/api/v1/users/account/create', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: usernameInput,
password: passwordInput,
email: "user@example.com",
specialCode: specialCodeInput
})
});
if (!isOK && json) {
setInfo(getSignupMessageFromError(json));
return;
}
if (!isOK) {
setInfo('Something went wrong');
return;
}
history.push('/login');
};
const handleCreateContinueButton = async () => {
if (!usernameInput || !passwordInput) {
setInfo('One of more fields is not filled in.');
return;
}
const { json, isOK } = await APIRequest('/api/v1/users/account/create/info', {
method: 'GET',
headers: {
'Accept': 'application/json',
}
});
if (!json || !isOK) return setInfo('Something went wrong');
setSpecialCodePrompt(json.requiresSpecialCode);
if (!json.requiresSpecialCode) {
await doCreateAccount();
}
}
if (specialCodePrompt) return (
<div id="login-container" className="main-card">
<h1>One more thing!</h1>
<p>You need a special code to sign up here!</p>
<label htmlFor="specialcode">Special Code</label>
<br />
<input type="password" name="specialcode" className="text-input" onChange={ ({ target }) => setSpecialCodeInput(target.value) } />
<button id="login-submit" className="button" onClick={ doCreateAccount }>Continue</button>
<Notification text={ info } />
</div>
);
return (
<div id="login-container" className="main-card">
<h1>Create an account</h1>
<label htmlFor="username">Username</label>
<br />
<input type="text" name="username" className="text-input" onChange={ ({ target }) => setUsernameInput(target.value) } />
<br />
<label htmlFor="password">Password</label>
<br />
<input type="password" name="password" className="text-input" onChange={ ({ target }) => setPasswordInput(target.value) } />
<br />
<button id="login-submit" className="button" onClick={ handleCreateContinueButton }>Continue</button>
<Notification text={ info } />
</div>
);
}

View file

@ -50,6 +50,7 @@ export default function Login() {
return ( return (
<div id="login-container" className="main-card"> <div id="login-container" className="main-card">
<h1>Log in</h1>
<label htmlFor="username">Username</label> <label htmlFor="username">Username</label>
<br /> <br />
<input type="text" name="username" className="text-input" onChange={ ({ target }) => setUsernameInput(target.value) } /> <input type="text" name="username" className="text-input" onChange={ ({ target }) => setUsernameInput(target.value) } />

View file

@ -8,8 +8,9 @@ export default function Root(props) {
} else { } else {
return ( return (
<div id="login-message-container"> <div id="login-message-container">
<h1>Welcome, - nevermind, you aren't logged in</h1> <h1>Welcome back!</h1>
<button onClick={ () => { history.push('/login') } }>Log in</button> <button className="button" onClick={ () => { history.push('/login') } }>Log in</button>
<button className="button" onClick={ () => { history.push('/create') } }>Create an account</button>
</div> </div>
); );
} }

View file

@ -1,4 +1,5 @@
import Login from '../Auth/Login'; import Login from '../Auth/Login';
import Create from '../Auth/Create';
import Root from '../Home/Root'; import Root from '../Home/Root';
import Authenticator from '../../API/Authenticator'; import Authenticator from '../../API/Authenticator';
import Notification from '../UI/Notification'; import Notification from '../UI/Notification';
@ -34,6 +35,7 @@ function App({ user }) {
<BrowserRouter> <BrowserRouter>
<Switch> <Switch>
<Route path="/login" component={ Login } /> <Route path="/login" component={ Login } />
<Route path="/create" component={ Create } />
<Route path="/channels/:id" <Route path="/channels/:id"
render={(props) => { render={(props) => {
return ( return (