Merge pull request near#69 from nearprotocol/development

Pre-release integration

package.json

@@ -7,7 +7,7 @@
       "connected-react-router": "^6.4.0",
       "fetch-send-json": "0.0.2",
       "gh-pages": "^2.0.1",
-      "nearlib": "^0.8.2",
+      "nearlib": "^0.9.0",
       "prop-types": "^15.7.2",
       "query-string": "^6.4.2",
       "react": "^16.8.6",

src/actions/account.js

@@ -1,4 +1,4 @@
-import { parse } from 'query-string'
+import { parse, stringify } from 'query-string'
 import { createActions } from 'redux-actions';
 import { Wallet } from '../utils/wallet';
 
@@ -76,14 +76,26 @@ export function handleRefreshUrl(location) {
 
 const wallet = new Wallet()
 
-export const { requestCode, validateCode } = createActions({
+export const redirectToApp = () => (dispatch, getState) => {
+   const state = getState()
+   const nextUrl = (state.account.url && state.account.url.success_url) ? `/login/?${stringify(state.account.url)}` : '/'
+   setTimeout(() => {
+      window.location = nextUrl
+   }, 1500)
+}
+
+export const { requestCode, setupAccountRecovery, recoverAccount } = createActions({
    REQUEST_CODE: [
       wallet.requestCode.bind(wallet),
       () => ({ successCode: 'account.requestCode.success', errorCode: 'account.requestCode.error' })
    ],
-   VALIDATE_CODE: [
-      wallet.validateCode.bind(wallet),
-      () => ({ successCode: 'account.validateCode.success', errorCode: 'account.validateCode.error' })
+   SETUP_ACCOUNT_RECOVERY: [
+      wallet.setupAccountRecovery.bind(wallet),
+      () => ({ successCode: 'account.setupAccountRecovery.success', errorCode: 'account.setupAccountRecovery.error' })
+   ],
+   RECOVER_ACCOUNT: [
+      wallet.recoverAccount.bind(wallet),
+      () => ({ successCode: 'account.recoverAccount.success', errorCode: 'account.recoverAccount.error' })
    ]
 })
 

src/components/GlobalStyle.js

@@ -50,7 +50,7 @@ export default createGlobalStyle`
       font-size: 48px !important;
       font-weight: 500 !important;
       line-height: 100px;
-      color: #4a4f54;
+      color: #24272a;
    }
    h2, .h2 {
       font-family: Bw Seido Round !important;

src/components/accounts/AccountFormSection.js

@@ -5,10 +5,10 @@ import RequestStatusBox from '../common/RequestStatusBox'
 
 const AccountFormSection = ({ requestStatus, children }) => (
    <Grid>
-      <Grid.Column computer={8} tablet={8} mobile={16}>
+      <Grid.Column computer={9} tablet={8} mobile={16}>
          {children}
       </Grid.Column>
-      <Grid.Column computer={8} tablet={8} mobile={16}>
+      <Grid.Column computer={7} tablet={8} mobile={16}>
          <RequestStatusBox requestStatus={requestStatus} />
       </Grid.Column>
    </Grid>

src/components/accounts/CreateAccoungFormInput.js

@@ -8,41 +8,38 @@ import CheckBlueImage from '../../images/icon-check-blue.svg'
 import styled from 'styled-components'
 
 const CustomFormInput = styled(Form.Input)`
-   &&& input {
+   &&&& input {
       width: 100%;
       height: 64px;
       border: 4px solid #f8f8f8;
       padding: 0 0 0 20px;
-
       font-size: 18px;
       color: #4a4f54;
       font-weight: 400;
-      background: 0;
-
+      background-color: #f8f8f8;
       position: relative;
-
       :focus {
-         border-color: #6ad1e3;
+         border-color: #f8f8f8;
+         background-color: #fff;
+      }
+      :valid {
+         background-color: #fff;
       }
    }
-
    &&&&& .spinner {
       margin-right: 20px;
-
       :before,
       :after {
          top: 28px;
          width: 24px;
          height: 24px;
       }
    }
-
    &.problem > .input > input,
    &.problem > .input > input:focus {
       background: url(${ProblemsImage}) right 22px center no-repeat;
       background-size: 24px 24px;
    }
-
    &.success > .input > input,
    &.success > .input > input:focus {
       background: url(${CheckBlueImage}) right 22px center no-repeat;
@@ -66,6 +63,7 @@ const CreateAccoungFormInput = ({
       value={accountId}
       onChange={handleChangeAccountId}
       placeholder='example: satoshi.near'
+      required
    />
 )
 

src/components/accounts/CreateAccountContainer.js

@@ -10,7 +10,6 @@ import NearInfo from './NearInfo'
 import styled from 'styled-components'
 
 const CustomContainer = styled(Container)`
-
    &&& .page-title {
       padding-right: 0px;
       padding-top: 48px;
@@ -22,7 +21,8 @@ const CustomContainer = styled(Container)`
       h1 {
          line-height: 48px;
       }
-      .add {
+      h2 {
+         color: #4a4f54 !important;
       }
    }
 
@@ -58,12 +58,12 @@ const CreateAccountContainer = ({ loader, children, location }) => (
          </Dimmer>
 
          <Grid.Row columns='2' className='page-title'>
-            <Grid.Column>
-               <h1>Create Account</h1>
-               <h2>
+            <Grid.Column computer={9} tablet={8} mobile={16}>
+               <Header as='h1'>Create Account</Header>
+               <Header as='h2'>
                   Creating a NEAR account is easy. Just choose a username and
                   you’re ready to go.
-               </h2>
+               </Header>
                {parse(location.search).reset_accounts && (
                   <Header as='h3' className='color-blue'>
                      You have been redirected to this page because we had to
@@ -72,7 +72,7 @@ const CreateAccountContainer = ({ loader, children, location }) => (
                   </Header>
                )}
             </Grid.Column>
-            <Grid.Column className='add'>
+            <Grid.Column computer={7} tablet={8} mobile={16} className='add'>
                <NearInfo />
             </Grid.Column>
          </Grid.Row>

src/components/accounts/CreateAccountForm.js

@@ -40,10 +40,19 @@ const AccountForm = styled(Form)`
       }
    }
 
-   .recoverAccount {
-      display: block;
-      margin-top: 2em;
-      font-size: 18px
+   .recover {
+      margin-top: 36px;
+      color: #24272a;
+      line-height: 24px;
+      font-weight: 600;
+
+      a {
+         text-decoration: underline;
+
+         :hover {
+            text-decoration: none;
+         }
+      }
    }
 
    @media screen and (max-width: 767px) {
@@ -67,7 +76,6 @@ const CreateAccountForm = ({
          successMessage={successMessage}
          errorMessage={errorMessage}
       />
-
       <Responsive maxWidth={Responsive.onlyMobile.maxWidth}>
          {successMessage && (
             <Segment basic className='alert-info success'>
@@ -80,17 +88,18 @@ const CreateAccountForm = ({
             </Segment>
          )}
       </Responsive>
-
       <ReCAPTCHA
          sitekey='6LfNjp8UAAAAAByZu30I-2-an14USj3yVbbUI3eN'
          onChange={handleRecaptcha}
       />
-
       <Button type='submit' disabled={!successMessage}>
          CREATE ACCOUNT
       </Button>
 
-      <Link to='/recover-account' className="recoverAccount">I already have an account</Link>
+      <div className='recover'>
+         <div>Already have an account?</div>
+         <Link to='/recover-account'>Recover it here</Link>
+      </div>
    </AccountForm>
 )
 

src/components/accounts/CreateAccountSection.js

@@ -10,30 +10,25 @@ const CustomGrid = styled(Grid)`
          padding-bottom: 0px;
          margin-left: -1rem;
       }
-
       .alert-info {
          font-size: 18px;
          font-weight: 600;
          line-height: 64px;
          margin: 0 0 0 0;
          padding-left: 0px;
-
          &.problem {
             color: #ff585d;
          }
          &.success {
             color: #6ad1e3;
          }
       }
-
       .note-box {
          padding-left: 30px;
-
          .border-left-bold {
             padding-bottom: 20px;
          }
       }
-
       .note-info {
          .title {
             letter-spacing: 2px;
@@ -42,47 +37,41 @@ const CustomGrid = styled(Grid)`
             color: #4a4f54;
          }
       }
-
       .form-row {
          margin-left: -1rem;
       }
    }
-
    @media screen and (max-width: 991px) {
-      .note-box {
-         padding-left: 0px;
+      &&& {
+         .note-box {
+            padding-left: 0px;
+         }
       }
    }
-
    @media screen and (max-width: 767px) {
       &&& {
          .username-row {
             margin-left: 0;
          }
-
          .alert-info {
             padding: 0 0 6px 24px;
             line-height: 34px;
             font-size: 14px;
             margin-top: -6px;
          }
-
          .note-box {
             padding-left: 1rem;
             margin-top: 10px;
          }
-
          .note-box {
             .border-left-bold {
                padding-bottom: 0px;
             }
          }
-
          .form-row {
             padding-top: 6px;
             margin-left: 0;
          }
-
          &&& .note-info {
             font-size: 12px;
          }
@@ -98,10 +87,10 @@ const CreateAccountSection = ({ successMessage, errorMessage, children }) => (
          </Grid.Column>
       </Grid.Row>
       <Grid.Row className='form-row'>
-         <Grid.Column computer={8} tablet={8} mobile={16}>
+         <Grid.Column computer={9} tablet={8} mobile={16}>
             {children}
          </Grid.Column>
-         <Grid.Column computer={8} tablet={8} mobile={16}>
+         <Grid.Column computer={7} tablet={8} mobile={16}>
             <Grid className='note-box'>
                {successMessage && (
                   <Responsive

src/components/accounts/RecoverAccount.js

@@ -7,7 +7,7 @@ import { Wallet } from '../../utils/wallet'
 import AccountFormSection from './AccountFormSection'
 import RecoverAccountForm from './RecoverAccountForm'
 import RecoverAccountContainer from './RecoverAccountContainer'
-import { requestCode, validateCode } from '../../actions/account';
+import { requestCode, recoverAccount, redirectToApp } from '../../actions/account';
 
 class RecoverAccount extends Component {
    state = {
@@ -45,17 +45,14 @@ class RecoverAccount extends Component {
       }
 
       const { dispatch } = this.props;
+      const accountId = this.state.accountId || this.props.accountId;
       if (!this.props.sentSms) {
-         dispatch(requestCode(this.state.phoneNumber, this.props.accountId))
+         dispatch(requestCode(this.state.phoneNumber, accountId))
       } else {
-         dispatch(validateCode(this.state.phoneNumber, this.props.accountId, this.state.securityCode))
-            .then(({error}) => {
-               if (error) return
-
-               let nextUrl = `/login/${(this.props.url && this.props.url.next_url) || '/'}`
-               setTimeout(() => {
-                  this.props.history.push(nextUrl)
-               }, 1500)
+         dispatch(recoverAccount(this.state.phoneNumber, accountId, this.state.securityCode))
+            .then(({ error }) => {
+               if (error) return;
+               dispatch(redirectToApp())
             })
       }
    }
@@ -72,7 +69,7 @@ class RecoverAccount extends Component {
             <AccountFormSection {...combinedState}>
                <RecoverAccountForm
                   {...combinedState}
-                  handleSubmit={this.handleSubmit}
+                  handleSubmit={this.handleSubmit.bind(this)}
                   handleChange={this.handleChange}
                />
             </AccountFormSection>