mirror of https://gitlab.com/ecentrics/concordia
10 changed files with 206 additions and 149 deletions
@ -1,4 +1,13 @@ |
|||
{ |
|||
"topbar.button.signup": "Sign Up", |
|||
"signup.form.button.submit": "Sign Up" |
|||
"register.card.header": "Sign Up", |
|||
"register.form.button.back": "Back", |
|||
"register.form.button.guest": "Continue as guest", |
|||
"register.form.button.submit": "Sign Up", |
|||
"register.form.error.message.header": "Form contains errors", |
|||
"register.form.error.username.taken.message": "The username {{username}} is already taken.", |
|||
"register.form.header.already.member.message": "There is already an account for this address.\nIf you want to create another account please change your address.", |
|||
"register.form.username.field.label": "Username", |
|||
"register.form.username.field.placeholder": "Username", |
|||
"register.p.account.address": "Account address:", |
|||
"topbar.button.register": "Sign Up" |
|||
} |
|||
@ -1,3 +1,7 @@ |
|||
body { |
|||
margin: 1em !important; |
|||
} |
|||
|
|||
.i18next-newlines { |
|||
white-space: pre-line !important; |
|||
} |
|||
@ -1,144 +0,0 @@ |
|||
import React, { Component } from 'react'; |
|||
import { |
|||
Button, Form, Menu, Message, Modal, |
|||
} from 'semantic-ui-react'; |
|||
import { withTranslation } from 'react-i18next'; |
|||
import { connect } from 'react-redux'; |
|||
import AppContext from './AppContext'; |
|||
|
|||
const contractName = 'Forum'; |
|||
const checkUsernameTakenMethod = 'isUserNameTaken'; |
|||
const signUpMethod = 'signUp'; |
|||
|
|||
class SignUpForm extends Component { |
|||
constructor(props, context) { |
|||
super(props, context); |
|||
|
|||
// For quick access |
|||
this.contract = this.context.drizzle.contracts[contractName]; |
|||
|
|||
this.handleInputChange = this.handleInputChange.bind(this); |
|||
this.handleSubmit = this.handleSubmit.bind(this); |
|||
this.completeAction = this.completeAction.bind(this); |
|||
|
|||
this.checkedUsernames = []; |
|||
|
|||
this.state = { |
|||
usernameInput: '', |
|||
error: false, |
|||
errorHeader: '', |
|||
errorMessage: '', |
|||
signingUp: false, |
|||
}; |
|||
} |
|||
|
|||
componentDidUpdate() { |
|||
// TODO |
|||
} |
|||
|
|||
handleSubmit() { |
|||
const { usernameInput, error } = this.state; |
|||
|
|||
if (usernameInput === '') { |
|||
this.setState({ |
|||
error: true, |
|||
errorHeader: 'Data Incomplete', |
|||
errorMessage: 'You need to provide a username', |
|||
}); |
|||
} else if (!error) { |
|||
// TODO |
|||
// // Makes sure current input username has been checked for availability |
|||
// if (this.checkedUsernames.some((e) => e.usernameChecked === usernameInput)) { |
|||
// this.completeAction(); |
|||
// } |
|||
this.completeAction(); |
|||
} |
|||
} |
|||
|
|||
handleInputChange(e, { name, value }) { |
|||
this.setState({ |
|||
[name]: value, |
|||
error: false, |
|||
}); |
|||
if (value !== '') { |
|||
if (this.checkedUsernames.length > 0) { |
|||
if (this.checkedUsernames.some((e) => e.usernameChecked === value)) { |
|||
return; |
|||
} |
|||
} |
|||
|
|||
this.contract.methods[checkUsernameTakenMethod].cacheCall( |
|||
value, |
|||
); |
|||
} |
|||
} |
|||
|
|||
completeAction() { |
|||
const { usernameInput } = this.state; |
|||
const { user, account } = this.props; |
|||
|
|||
if (user.hasSignedUp) { |
|||
this.contract.methods.signUp.cacheSend(usernameInput); |
|||
} else { |
|||
this.setState({ |
|||
signingUp: true, |
|||
}); |
|||
this.contract.methods[signUpMethod].cacheSend( |
|||
...[usernameInput], { from: account }, |
|||
); |
|||
} |
|||
this.setState({ |
|||
usernameInput: '', |
|||
}); |
|||
} |
|||
|
|||
render() { |
|||
const { |
|||
error, usernameInput, errorHeader, errorMessage, signingUp, |
|||
} = this.state; |
|||
const { t } = this.props; |
|||
|
|||
return ( |
|||
<Modal |
|||
as={Form} |
|||
onSubmit={(e) => this.handleSubmit(e)} |
|||
trigger={( |
|||
<Menu.Item |
|||
name="signup" |
|||
position="right" |
|||
content={t('topbar.button.signup')} |
|||
/> |
|||
)} |
|||
> |
|||
<Modal.Header>Sign Up</Modal.Header> |
|||
<Modal.Content> |
|||
|
|||
<Form.Field required> |
|||
<label>Username</label> |
|||
<Form.Input |
|||
placeholder="Username" |
|||
name="usernameInput" |
|||
value={usernameInput} |
|||
onChange={this.handleInputChange} |
|||
/> |
|||
</Form.Field> |
|||
<Message |
|||
error |
|||
header={errorHeader} |
|||
content={errorMessage} |
|||
/> |
|||
<Button type="submit" color="black" content={t('signup.form.button.submit')} /> |
|||
|
|||
</Modal.Content> |
|||
</Modal> |
|||
); |
|||
} |
|||
} |
|||
|
|||
SignUpForm.contextType = AppContext.Context; |
|||
|
|||
const mapStateToProps = (state) => ({ |
|||
user: state.user, |
|||
}); |
|||
|
|||
export default connect(mapStateToProps)(withTranslation()(SignUpForm)); |
|||
@ -0,0 +1,172 @@ |
|||
import React, { |
|||
useCallback, useContext, useEffect, useMemo, useState, |
|||
} from 'react'; |
|||
import { |
|||
Button, Card, Form, Header, Input, Message, |
|||
} from 'semantic-ui-react'; |
|||
import throttle from 'lodash/throttle'; |
|||
import { useTranslation } from 'react-i18next'; |
|||
import { connect } from 'react-redux'; |
|||
import { useHistory } from 'react-router'; |
|||
import AppContext from '../../components/AppContext'; |
|||
import './styles.css'; |
|||
|
|||
const Register = (props) => { |
|||
const { user, account, isUserNameTakenResults } = props; |
|||
const { |
|||
drizzle: { |
|||
contracts: { |
|||
Forum: { |
|||
methods: { isUserNameTaken, signUp }, |
|||
}, |
|||
}, |
|||
}, |
|||
} = useContext(AppContext.Context); |
|||
const [usernameInput, setUsernameInput] = useState(''); |
|||
const [usernameIsChecked, setUsernameIsChecked] = useState(true); |
|||
const [usernameIsTaken, setUsernameIsTaken] = useState(true); |
|||
const [error, setError] = useState(false); |
|||
const [errorMessage, setErrorMessage] = useState(''); |
|||
const [signingUp, setSigningUp] = useState(false); |
|||
const history = useHistory(); |
|||
const { t } = useTranslation(); |
|||
|
|||
useEffect(() => { |
|||
if (usernameInput.length > 0) { |
|||
const checkedUsernames = Object |
|||
.values(isUserNameTakenResults) |
|||
.map((callCompleted) => ({ |
|||
checkedUsername: callCompleted.args[0], |
|||
isTaken: callCompleted.value, |
|||
})); |
|||
const checkedUsername = checkedUsernames |
|||
.find((callCompleted) => callCompleted.checkedUsername === usernameInput); |
|||
|
|||
setUsernameIsChecked(checkedUsername !== undefined); |
|||
|
|||
if (checkedUsername && checkedUsername.isTaken) { |
|||
setUsernameIsTaken(true); |
|||
setError(true); |
|||
setErrorMessage(t('register.form.error.username.taken.message', { username: usernameInput })); |
|||
} else { |
|||
setUsernameIsTaken(false); |
|||
setError(false); |
|||
} |
|||
} |
|||
}, [isUserNameTakenResults, t, usernameInput]); |
|||
|
|||
const checkUsernameTaken = useMemo(() => throttle( |
|||
(username) => { |
|||
isUserNameTaken.cacheCall(username); |
|||
}, 200, |
|||
), [isUserNameTaken]); |
|||
|
|||
const handleInputChange = useCallback((event, { value }) => { |
|||
setUsernameInput(value); |
|||
|
|||
if (value.length > 0) { |
|||
checkUsernameTaken(value); |
|||
} |
|||
}, [checkUsernameTaken]); |
|||
|
|||
const handleSubmit = useCallback(() => { |
|||
if (user.hasSignedUp) { |
|||
signUp.cacheSend(usernameInput); |
|||
} else { |
|||
setSigningUp(true); |
|||
signUp.cacheSend( |
|||
...[usernameInput], { from: account }, |
|||
); |
|||
} |
|||
}, [account, signUp, user.hasSignedUp, usernameInput]); |
|||
|
|||
const goToHomePage = React.useCallback(() => history.push('/'), [history]); |
|||
|
|||
return ( |
|||
<div className="centered form-card-container"> |
|||
<Card fluid> |
|||
<Card.Content> |
|||
<Card.Header>Sign Up</Card.Header> |
|||
<Card.Description> |
|||
<p> |
|||
<strong>{t('register.p.account.address')}</strong> |
|||
|
|||
{user.address} |
|||
</p> |
|||
{user.hasSignedUp |
|||
? ( |
|||
<div> |
|||
<Header as="h4" className="i18next-newlines"> |
|||
{t('register.form.header.already.member.message')} |
|||
</Header> |
|||
</div> |
|||
) |
|||
: ( |
|||
<Form loading={signingUp}> |
|||
<Form.Field required> |
|||
<label htmlFor="form-register-field-username"> |
|||
{t('register.form.username.field.label')} |
|||
</label> |
|||
<Input |
|||
id="form-register-field-username" |
|||
placeholder={t('register.form.username.field.placeholder')} |
|||
name="usernameInput" |
|||
className="form-input" |
|||
value={usernameInput} |
|||
onChange={handleInputChange} |
|||
/> |
|||
</Form.Field> |
|||
</Form> |
|||
)} |
|||
</Card.Description> |
|||
</Card.Content> |
|||
{error === true && ( |
|||
<Card.Content extra> |
|||
<Message |
|||
error |
|||
header={t('register.form.error.message.header')} |
|||
content={errorMessage} |
|||
/> |
|||
</Card.Content> |
|||
)} |
|||
<Card.Content extra> |
|||
{user.hasSignedUp |
|||
? ( |
|||
<Button |
|||
color="black" |
|||
floated="right" |
|||
content={t('register.form.button.back')} |
|||
onClick={goToHomePage} |
|||
/> |
|||
) |
|||
: ( |
|||
<> |
|||
<Button |
|||
color="green" |
|||
floated="right" |
|||
content={t('register.form.button.submit')} |
|||
onClick={handleSubmit} |
|||
disabled={usernameIsTaken || signingUp} |
|||
loading={!usernameIsChecked} |
|||
/> |
|||
<Button |
|||
color="violet" |
|||
floated="right" |
|||
basic |
|||
content={t('register.form.button.guest')} |
|||
onClick={goToHomePage} |
|||
/> |
|||
</> |
|||
)} |
|||
</Card.Content> |
|||
</Card> |
|||
</div> |
|||
); |
|||
}; |
|||
|
|||
const mapStateToProps = (state) => ({ |
|||
user: state.user, |
|||
isUserNameTakenResults: state.contracts.Forum.isUserNameTaken, |
|||
}); |
|||
|
|||
export default connect(mapStateToProps)(Register); |
|||
@ -0,0 +1,10 @@ |
|||
.centered { |
|||
position: fixed; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
|
|||
.form-card-container { |
|||
min-width: 15vw; |
|||
} |
|||
Loading…
Reference in new issue