@@ -8,6 +8,27 @@ import { StaticContext } from 'react-router';
88import FlashMessageRender from '@/components/FlashMessageRender' ;
99import { ApplicationStore } from '@/state' ;
1010import Spinner from '@/components/elements/Spinner' ;
11+ import styled from 'styled-components' ;
12+ import { breakpoint } from 'styled-components-breakpoint' ;
13+
14+ const Container = styled . div `
15+ ${ breakpoint ( 'sm' ) `
16+ ${ tw `w-4/5 mx-auto` }
17+ ` } ;
18+
19+ ${ breakpoint ( 'md' ) `
20+ ${ tw `p-10` }
21+ ` } ;
22+
23+ ${ breakpoint ( 'lg' ) `
24+ ${ tw `w-3/5` }
25+ ` } ;
26+
27+ ${ breakpoint ( 'xl' ) `
28+ ${ tw `w-full` }
29+ max-width: 660px;
30+ ` } ;
31+ ` ;
1132
1233export default ( { history, location : { state } } : RouteComponentProps < { } , StaticContext , { token ?: string } > ) => {
1334 const [ code , setCode ] = useState ( '' ) ;
@@ -52,41 +73,43 @@ export default ({ history, location: { state } }: RouteComponentProps<{}, Static
5273 < h2 className = { 'text-center text-neutral-100 font-medium py-4' } >
5374 Device Checkpoint
5475 </ h2 >
55- < FlashMessageRender />
56- < LoginFormContainer onSubmit = { submit } >
57- < div className = { 'mt-6' } >
58- < label htmlFor = { 'authentication_code' } > Authentication Code</ label >
59- < input
60- id = { 'authentication_code' }
61- type = { 'number' }
62- autoFocus = { true }
63- className = { 'input' }
64- value = { code }
65- onChange = { onChangeHandler }
66- />
67- </ div >
68- < div className = { 'mt-6' } >
69- < button
70- type = { 'submit' }
71- className = { 'btn btn-primary btn-jumbo' }
72- disabled = { isLoading || code . length !== 6 }
73- >
74- { isLoading ?
75- < Spinner size = { 'tiny' } className = { 'mx-auto' } />
76- :
77- 'Continue'
78- }
79- </ button >
80- </ div >
81- < div className = { 'mt-6 text-center' } >
82- < Link
83- to = { '/auth/login' }
84- className = { 'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700' }
85- >
86- Return to Login
87- </ Link >
88- </ div >
89- </ LoginFormContainer >
76+ < Container >
77+ < FlashMessageRender />
78+ < LoginFormContainer onSubmit = { submit } >
79+ < div className = { 'mt-6' } >
80+ < label htmlFor = { 'authentication_code' } > Authentication Code</ label >
81+ < input
82+ id = { 'authentication_code' }
83+ type = { 'number' }
84+ autoFocus = { true }
85+ className = { 'input' }
86+ value = { code }
87+ onChange = { onChangeHandler }
88+ />
89+ </ div >
90+ < div className = { 'mt-6' } >
91+ < button
92+ type = { 'submit' }
93+ className = { 'btn btn-primary btn-jumbo' }
94+ disabled = { isLoading || code . length !== 6 }
95+ >
96+ { isLoading ?
97+ < Spinner size = { 'tiny' } className = { 'mx-auto' } />
98+ :
99+ 'Continue'
100+ }
101+ </ button >
102+ </ div >
103+ < div className = { 'mt-6 text-center' } >
104+ < Link
105+ to = { '/auth/login' }
106+ className = { 'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700' }
107+ >
108+ Return to Login
109+ </ Link >
110+ </ div >
111+ </ LoginFormContainer >
112+ </ Container >
90113 </ React . Fragment >
91114 ) ;
92115} ;
0 commit comments