Use formattable text input for login account number field

2 files changed, 7 insertions, 4 deletions

diff --git a/gui/src/renderer/components/Login.tsx b/gui/src/renderer/components/Login.tsx
index 8d9f96c14e..6118f7ac8e 100644
--- a/gui/src/renderer/components/Login.tsx
+++ b/gui/src/renderer/components/Login.tsx
@@ -128,14 +128,13 @@ export default class Login extends React.Component<IProps, IState> {
     }
   };
 
-  private onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  private onInputChange = (accountToken: string) => {
     // reset error when user types in the new account number
     if (this.shouldResetLoginError) {
       this.shouldResetLoginError = false;
       this.props.resetLoginError();
     }
 
-    const accountToken = event.target.value.replace(/[^0-9]/g, '');
     this.props.updateAccountToken(accountToken);
   };
 
@@ -255,12 +254,15 @@ export default class Login extends React.Component<IProps, IState> {
           onSubmit={this.onSubmit}>
           <StyledAccountInputBackdrop>
             <StyledInput
+              allowedCharacters="[0-9]"
+              separator=" "
+              groupLength={4}
               placeholder="0000 0000 0000 0000"
               value={this.props.accountToken || ''}
               disabled={!this.allowInteraction()}
               onFocus={this.onFocus}
               onBlur={this.onBlur}
-              onChange={this.onInputChange}
+              handleChange={this.onInputChange}
               autoFocus={true}
               ref={this.accountInput}
               aria-autocomplete="list"
diff --git a/gui/src/renderer/components/LoginStyles.tsx b/gui/src/renderer/components/LoginStyles.tsx
index c8469ba672..3677b60d4e 100644
--- a/gui/src/renderer/components/LoginStyles.tsx
+++ b/gui/src/renderer/components/LoginStyles.tsx
@@ -3,6 +3,7 @@ import { colors } from '../../config.json';
 import ImageView from './ImageView';
 import * as Cell from './cell';
 import { bigText, smallText } from './common-styles';
+import FormattableTextInput from './FormattableTextInput';
 
 export const StyledAccountDropdownContainer = styled.ul({
   display: 'flex',
@@ -154,7 +155,7 @@ export const StyledSubtitle = styled.span(smallText, {
   marginBottom: '8px',
 });
 
-export const StyledInput = styled.input({
+export const StyledInput = styled(FormattableTextInput)({
   minWidth: 0,
   borderWidth: 0,
   padding: '10px 12px 12px',