Fix 2FA sizing issue, add support for copying text from xterm.js (#1825)

closes #1812, closes #1813

resources/scripts/components/auth/LoginCheckpointContainer.tsx

@@ -8,6 +8,27 @@ import { StaticContext } from 'react-router';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { ApplicationStore } from '@/state';
 import Spinner from '@/components/elements/Spinner';
+import styled from 'styled-components';
+import { breakpoint } from 'styled-components-breakpoint';
+
+const Container = styled.div`
+    ${breakpoint('sm')`
+        ${tw`w-4/5 mx-auto`}
+    `};
+
+    ${breakpoint('md')`
+        ${tw`p-10`}
+    `};
+
+    ${breakpoint('lg')`
+        ${tw`w-3/5`}
+    `};
+
+    ${breakpoint('xl')`
+        ${tw`w-full`}
+        max-width: 660px;
+    `};
+`;
 
 export default ({ history, location: { state } }: RouteComponentProps<{}, StaticContext, { token?: string }>) => {
     const [ code, setCode ] = useState('');
@@ -52,41 +73,43 @@ export default ({ history, location: { state } }: RouteComponentProps<{}, Static
             <h2 className={'text-center text-neutral-100 font-medium py-4'}>
                 Device Checkpoint
             </h2>
-            <FlashMessageRender/>
-            <LoginFormContainer onSubmit={submit}>
-                <div className={'mt-6'}>
-                    <label htmlFor={'authentication_code'}>Authentication Code</label>
-                    <input
-                        id={'authentication_code'}
-                        type={'number'}
-                        autoFocus={true}
-                        className={'input'}
-                        value={code}
-                        onChange={onChangeHandler}
-                    />
-                </div>
-                <div className={'mt-6'}>
-                    <button
-                        type={'submit'}
-                        className={'btn btn-primary btn-jumbo'}
-                        disabled={isLoading || code.length !== 6}
-                    >
-                        {isLoading ?
-                            <Spinner size={'tiny'} className={'mx-auto'}/>
-                            :
-                            'Continue'
-                        }
-                    </button>
-                </div>
-                <div className={'mt-6 text-center'}>
-                    <Link
-                        to={'/auth/login'}
-                        className={'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
-                    >
-                        Return to Login
-                    </Link>
-                </div>
-            </LoginFormContainer>
+            <Container>
+                <FlashMessageRender/>
+                <LoginFormContainer onSubmit={submit}>
+                    <div className={'mt-6'}>
+                        <label htmlFor={'authentication_code'}>Authentication Code</label>
+                        <input
+                            id={'authentication_code'}
+                            type={'number'}
+                            autoFocus={true}
+                            className={'input'}
+                            value={code}
+                            onChange={onChangeHandler}
+                        />
+                    </div>
+                    <div className={'mt-6'}>
+                        <button
+                            type={'submit'}
+                            className={'btn btn-primary btn-jumbo'}
+                            disabled={isLoading || code.length !== 6}
+                        >
+                            {isLoading ?
+                                <Spinner size={'tiny'} className={'mx-auto'}/>
+                                :
+                                'Continue'
+                            }
+                        </button>
+                    </div>
+                    <div className={'mt-6 text-center'}>
+                        <Link
+                            to={'/auth/login'}
+                            className={'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
+                        >
+                            Return to Login
+                        </Link>
+                    </div>
+                </LoginFormContainer>
+            </Container>
         </React.Fragment>
     );
 };

resources/scripts/components/server/Console.tsx

@@ -81,6 +81,17 @@ export default () => {
             // @see https://github.com/xtermjs/xterm.js/issues/2265
             // @see https://github.com/xtermjs/xterm.js/issues/2230
             TerminalFit.fit(terminal);
+
+            // Add support for copying terminal text.
+            terminal.attachCustomKeyEventHandler((e: KeyboardEvent) => {
+                // Ctrl + C
+                if (e.ctrlKey && (e.key === 'c')) {
+                    document.execCommand('copy');
+                    return false;
+                }
+
+                return true;
+            });
         }
     }, [ terminal, connected, terminalElement ]);