Merge pull request #1694 from blockstack/hotfix/minor-fixes-onboarding-september

Additional fixes for v34

Author: yknl

app/js/App.js

@@ -193,7 +193,6 @@ class AppContainer extends Component {
     }
   }
 
-
   onSupportClick = () => {
     openInNewTab('https://forum.blockstack.org/t/frequently-ask-questions/2123')
   }
@@ -215,15 +214,17 @@ class AppContainer extends Component {
     return (
       <div className={`body-main ${noHeader ? 'no-header' : ''}`}>
         <div className="wrapper footer-padding">{children}</div>
-        <SupportButton onClick={this.onSupportClick} />
         <NotificationsSystem theme={NotificationsTheme} />
       </div>
     )
   }
 }
 
 const App = withRouter(
-  connect(mapStateToProps, mapDispatchToProps)(AppContainer)
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(AppContainer)
 )
 
 export default hot(module)(App)

app/js/components/ui/components/form/index.js

@@ -41,7 +41,7 @@ const Textarea = styled.textarea`
   box-sizing: border-box;
   resize: vertical;
   min-height: ${({ mh }) => (mh ? `${mh}px` : '48px')};
-  margin-top: 5px;
+  margin-top: 15px;
   color: rgba(39, 16, 51, 0.7);
 `
 
@@ -150,9 +150,13 @@ const ErrorMessage = styled.div`
   left: 0;
   top: -5px !important;
 
+  ${Textarea} ~ & {
+    top: -20px !important;
+  }
+
   ${Input}:not(:focus) ~ &,
   ${Textarea}:not(:focus) ~ & {
-    top: 10px;
+    
     ${({ overlay }) =>
       overlay &&
       css`
@@ -184,9 +188,11 @@ const PositiveMessage = styled.div`
   top: -5px !important;
   font-size: 12px;
   font-weight: 500;
+  ${Textarea} ~ & {
+    top: -20px !important;
+  }
   ${Input}:not(:focus) ~ &,
   ${Textarea}:not(:focus) ~ & {
-    top: 10px;
     ${({ overlay }) =>
       overlay &&
       css`

app/js/components/ui/containers/button.js

@@ -58,7 +58,7 @@ const Button = ({
     )
   return (
     <ButtonComponent {...rest} loading={loading} height={height} to={to}>
-      <StyledButton.Label {...labelProps}>{content}</StyledButton.Label>
+      <StyledButton.Label style={{whiteSpace: 'nowrap'}} {...labelProps}>{content}</StyledButton.Label>
       {renderIcon()}
     </ButtonComponent>
   )

app/js/components/ui/containers/profile.js

@@ -4,13 +4,29 @@ import { UserAvatar } from '@components/ui/containers/user'
 import { Type } from '@components/ui/components/typography'
 
 export const Title = ({ user, ...p }) => (
-  <Box {...p}>
-    <Type.h2>
+  <Flex
+    {...p}
+    alignItems="center"
+    justifyContent="center"
+    style={{ overflow: 'hidden' }}
+    width="100%"
+  >
+    <Type.h2
+      display="block"
+      style={{
+        textAlign: 'center',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+      }}
+      width='100%'
+      maxWidth={['calc(100% - 60px)', 'calc(100% - 40px)']}
+    >
       {user.username && user.username.includes('.')
         ? user.username.split('.')[0]
         : user.username}
     </Type.h2>
-  </Box>
+  </Flex>
 )
 export const Suffix = ({ user, ...p }) => (
   <Box opacity={0.5} {...p}>
@@ -25,11 +41,9 @@ export const Line = p => (
 )
 export const ProfileScreen = ({ children, user, ...p }) => {
   const avatarUrl =
-    user &&
-    user.profile &&
-    user.profile.image &&
-    user.profile.image.length ?
-    user.profile.image[0].contentUrl : undefined
+    user && user.profile && user.profile.image && user.profile.image.length
+      ? user.profile.image[0].contentUrl
+      : undefined
 
   return (
     <Flex

app/js/sign-in/views/_initial.js

@@ -7,15 +7,13 @@ import { validateAndCleanRecoveryInput } from '@utils/encryption-utils'
 
 const validateInput = async value =>
   import(/* webpackChunkName: 'bip39' */ 'bip39').then(bip39 => {
-    {
-      // Raw mnemonic phrase
-      if (bip39.validateMnemonic(value)) {
-        console.log('valid mnemonic')
-        return true
-      }
-      // Base64 encoded encrypted phrase
-      return /[a-zA-Z0-9+/]=$/.test(value)
+    // Raw mnemonic phrase
+    if (bip39.validateMnemonic(value)) {
+      console.log('valid mnemonic')
+      return true
     }
+    // Base64 encoded encrypted phrase
+    return /[a-zA-Z0-9+/]=$/.test(value)
   })
 
 const validationSchema = Yup.object({
@@ -83,7 +81,7 @@ export default class InitialSignInScreen extends React.PureComponent {
           validationSchema,
           initialValues: { recoveryKey: value },
           onSubmit: values => {
-            next(values.recoveryKey)
+            next(validateAndCleanRecoveryInput(values.recoveryKey).cleaned)
           },
           fields: [
             {

app/js/sign-up/index.js

@@ -128,6 +128,7 @@ class Onboarding extends React.Component {
     emailsSending: false,
     emailsSent: false,
     recoveryEmailError: null,
+    recoveryEmailErrorCount: 0,
     restoreEmailError: null,
     loading: false,
     view: VIEWS.INITIAL,
@@ -344,7 +345,10 @@ class Onboarding extends React.Component {
       await sendEmail(email, id, encodedPhrase)
       this.setState({ recoveryEmailError: null })
     } catch (err) {
-      this.setState({ recoveryEmailError: err })
+      this.setState({
+        recoveryEmailError: err,
+        recoveryEmailErrorCount: this.state.recoveryEmailErrorCount + 1
+      })
     }
 
     return this.setState({
@@ -540,6 +544,7 @@ class Onboarding extends React.Component {
           app,
           restoreEmailError: this.state.restoreEmailError,
           emailsSending: this.state.emailsSending,
+          recoveryEmailErrorCount: this.state.recoveryEmailErrorCount,
           sendRestoreEmail: () => this.sendEmails('restore'),
           next: () => this.infoNext()
         }

app/js/sign-up/views/_recovery-information.js

@@ -7,28 +7,36 @@ import React from 'react'
 import { ShellScreen, Type, Shell } from '@blockstack/ui'
 import PropTypes from 'prop-types'
 class RecoverInformationScreen extends React.Component {
-  sendEmailAgain = () => {
-    if (!this.props.emailsSending) {
-      this.props.sendRestoreEmail()
-    }
-  }
-
   render() {
-    const { next, email, emailsSending, ...rest } = this.props
+    const {
+      next,
+      email,
+      emailsSending,
+      recoveryEmailErrorCount,
+      ...rest
+    } = this.props
 
     const title = 'Recovery email failed to send'
-    const body = (
-      <>
-        <Type.p>
-          We tried to send recovery info to {email} but something went wrong.
-          You can{' '}
-          <Type.a onClick={() => this.sendEmailAgain()}>
-            try to resend the email
-          </Type.a>
-          , or manually save your Secret Recovery Key.
-        </Type.p>
-      </>
-    )
+    const body =
+      recoveryEmailErrorCount > 1 ? (
+        <>
+          <Type.p>
+            We tried to send recovery info to {email} but something went wrong.
+            You must manually save your Secret Recovery Key.
+          </Type.p>
+        </>
+      ) : (
+        <>
+          <Type.p>
+            We tried to send recovery info to {email} but something went wrong.
+            You can{' '}
+            <Type.a onClick={() => this.props.backView()}>
+              try to resend the email
+            </Type.a>
+            , or manually save your Secret Recovery Key.
+          </Type.p>
+        </>
+      )
 
     const props = {
       title: {
@@ -41,7 +49,7 @@ class RecoverInformationScreen extends React.Component {
       actions: {
         items: [
           {
-            label: 'Secret Recover Key',
+            label: 'Secret Recovery Key',
             onClick: () => next(),
             primary: true
           }
@@ -63,7 +71,7 @@ RecoverInformationScreen.propTypes = {
   next: PropTypes.func.isRequired,
   toggleConsent: PropTypes.func.isRequired,
   email: PropTypes.string.isRequired,
-  consent: PropTypes.bool.isRequired,
+  recoveryEmailErrorCount: PropTypes.number.isRequired,
   restoreEmailError: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.instanceOf(Error)

app/js/sign-up/views/_username.js

@@ -74,18 +74,29 @@ class UsernameView extends React.Component {
 
     if (values.username !== this.state.username && !noValues) {
       const MIN_USERNAME_LENGTH = 8
-      const validLength = values.username.length >= MIN_USERNAME_LENGTH
+      const MAX_USERNAME_LENGTH = 38
+      const validMinLength = values.username.length >= MIN_USERNAME_LENGTH
+      const validMaxLength = values.username.length < MAX_USERNAME_LENGTH
 
       const minLengthErrorMessage = `Must be at least ${8} characters.`
+      const maxLengthErrorMessage = 'Username is too long.'
 
-      if (!validLength) {
+      if (!validMinLength) {
         this.setState({
           status: STATUS.ERROR
         })
         errors.username = minLengthErrorMessage
         throw errors
       }
 
+      if (!validMaxLength) {
+        this.setState({
+          status: STATUS.ERROR
+        })
+        errors.username = maxLengthErrorMessage
+        throw errors
+      }
+
       const invalidChars = values.username.match(/\W+/g)
 
       if (invalidChars) {
@@ -178,7 +189,8 @@ class UsernameView extends React.Component {
         children: (
           <>
             <Type.small pt={3}>
-              This will be your unique, public identity for any Blockstack&nbsp;app.
+              This will be your unique, public identity for any
+              Blockstack&nbsp;app.
             </Type.small>
             {canSkip && (
               <Type.small pt={3}>

app/js/utils/encryption-utils.js

@@ -38,6 +38,7 @@ export function validateAndCleanRecoveryInput(input) {
     .join(' ')
 
   if (bip39.validateMnemonic(cleanedMnemonic)) {
+    logger.debug('This is a valid mnemonic.')
     return {
       isValid: true,
       type: RECOVERY_TYPE.MNEMONIC,