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

closes #1812, closes #1813
This commit is contained in:
Matthew Penner 2020-02-11 10:37:12 -07:00 committed by GitHub
parent 1b1c95d8ce
commit b05048871c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 69 additions and 35 deletions

View File

@ -8,6 +8,27 @@ import { StaticContext } from 'react-router';
import FlashMessageRender from '@/components/FlashMessageRender'; import FlashMessageRender from '@/components/FlashMessageRender';
import { ApplicationStore } from '@/state'; import { ApplicationStore } from '@/state';
import Spinner from '@/components/elements/Spinner'; 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 }>) => { export default ({ history, location: { state } }: RouteComponentProps<{}, StaticContext, { token?: string }>) => {
const [ code, setCode ] = useState(''); 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'}> <h2 className={'text-center text-neutral-100 font-medium py-4'}>
Device Checkpoint Device Checkpoint
</h2> </h2>
<FlashMessageRender/> <Container>
<LoginFormContainer onSubmit={submit}> <FlashMessageRender/>
<div className={'mt-6'}> <LoginFormContainer onSubmit={submit}>
<label htmlFor={'authentication_code'}>Authentication Code</label> <div className={'mt-6'}>
<input <label htmlFor={'authentication_code'}>Authentication Code</label>
id={'authentication_code'} <input
type={'number'} id={'authentication_code'}
autoFocus={true} type={'number'}
className={'input'} autoFocus={true}
value={code} className={'input'}
onChange={onChangeHandler} value={code}
/> onChange={onChangeHandler}
</div> />
<div className={'mt-6'}> </div>
<button <div className={'mt-6'}>
type={'submit'} <button
className={'btn btn-primary btn-jumbo'} type={'submit'}
disabled={isLoading || code.length !== 6} className={'btn btn-primary btn-jumbo'}
> disabled={isLoading || code.length !== 6}
{isLoading ? >
<Spinner size={'tiny'} className={'mx-auto'}/> {isLoading ?
: <Spinner size={'tiny'} className={'mx-auto'}/>
'Continue' :
} 'Continue'
</button> }
</div> </button>
<div className={'mt-6 text-center'}> </div>
<Link <div className={'mt-6 text-center'}>
to={'/auth/login'} <Link
className={'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'} to={'/auth/login'}
> className={'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
Return to Login >
</Link> Return to Login
</div> </Link>
</LoginFormContainer> </div>
</LoginFormContainer>
</Container>
</React.Fragment> </React.Fragment>
); );
}; };

View File

@ -81,6 +81,17 @@ export default () => {
// @see https://github.com/xtermjs/xterm.js/issues/2265 // @see https://github.com/xtermjs/xterm.js/issues/2265
// @see https://github.com/xtermjs/xterm.js/issues/2230 // @see https://github.com/xtermjs/xterm.js/issues/2230
TerminalFit.fit(terminal); 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 ]); }, [ terminal, connected, terminalElement ]);