sms verification: polish UI, linting issues 👕

This commit is contained in:
Jannis R 2016-11-10 13:54:09 +01:00
parent ac80276ad8
commit 2309e53fe6
No known key found for this signature in database
GPG Key ID: 0FE83946296A88A5
4 changed files with 15 additions and 7 deletions

View File

@ -45,8 +45,6 @@ export default class GatherData extends Component {
state = { state = {
init: true, init: true,
isVerified: null,
hasRequested: null,
numberIsValid: null, numberIsValid: null,
consentGiven: false consentGiven: false
}; };
@ -63,6 +61,7 @@ export default class GatherData extends Component {
render () { render () {
const { numberIsValid } = this.state; const { numberIsValid } = this.state;
const { isVerified, hasRequested } = this.props.data;
// TODO: proper legal text // TODO: proper legal text
return ( return (
@ -74,12 +73,14 @@ export default class GatherData extends Component {
label={ 'phone number' } label={ 'phone number' }
hint={ 'the sms will be sent to this number' } hint={ 'the sms will be sent to this number' }
error={ numberIsValid ? null : 'invalid number' } error={ numberIsValid ? null : 'invalid number' }
disabled={ isVerified || hasRequested }
onChange={ this.numberOnChange } onChange={ this.numberOnChange }
onSubmit={ this.numberOnSubmit } onSubmit={ this.numberOnSubmit }
/> />
<Checkbox <Checkbox
className={ styles.spacing } className={ styles.spacing }
label={ 'I agree that my number will be stored.' } label={ 'I agree that my number will be stored.' }
disabled={ isVerified || hasRequested }
onCheck={ this.consentOnChange } onCheck={ this.consentOnChange }
/> />
</Form> </Form>
@ -123,7 +124,12 @@ export default class GatherData extends Component {
} }
renderRequested () { renderRequested () {
const { hasRequested } = this.props.data; const { isVerified, hasRequested } = this.props.data;
// If the account is verified, don't show that it has requested verification.
if (isVerified) {
return null;
}
if (hasRequested) { if (hasRequested) {
return ( return (
@ -203,7 +209,7 @@ export default class GatherData extends Component {
} }
onChange = () => { onChange = () => {
const { fee, isVerified, hasRequested } = this.props.data; const { fee, isVerified } = this.props.data;
const { numberIsValid, consentGiven } = this.state; const { numberIsValid, consentGiven } = this.state;
if (fee && numberIsValid && consentGiven && isVerified === false) { if (fee && numberIsValid && consentGiven && isVerified === false) {

View File

@ -14,6 +14,7 @@
/* You should have received a copy of the GNU General Public License /* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see <http://www.gnu.org/licenses/>. /* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/ */
.spacing {
margin-top: 1.5em; .centered {
text-align: center;
} }

View File

@ -14,6 +14,7 @@
/* You should have received a copy of the GNU General Public License /* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see <http://www.gnu.org/licenses/>. /* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/ */
.centered { .centered {
text-align: center; text-align: center;
} }

View File

@ -105,7 +105,7 @@ class Account extends Component {
<Button <Button
key='sms-verification' key='sms-verification'
icon={ <VerifyIcon /> } icon={ <VerifyIcon /> }
label='Verify via SMS' label='Verify'
onClick={ this.openVerification } />, onClick={ this.openVerification } />,
<Button <Button
key='editmeta' key='editmeta'