Extract device code into a separate view.

Convert more components from class components to functional.
Fix invalid finish state when client was auto approved

packages/app/components/auth/AuthTitle.tsx

@@ -1,8 +1,12 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { FormattedMessage as Message, MessageDescriptor } from 'react-intl';
 
-export default function AuthTitle({ title }: { title: MessageDescriptor }) {
+interface Props {
+    title: MessageDescriptor;
+}
+
+const AuthTitle: FC<Props> = ({ title }) => {
     return (
         <Message {...title}>
             {(msg) => (
@@ -13,4 +17,6 @@ export default function AuthTitle({ title }: { title: MessageDescriptor }) {
             )}
         </Message>
     );
-}
+};
+
+export default AuthTitle;

packages/app/components/auth/PanelTransition.tsx

@@ -94,7 +94,8 @@ interface OwnProps {
     Title: ReactElement;
     Body: ReactElement;
     Footer: ReactElement;
-    Links: ReactNode;
+    Links?: ReactNode;
+    className?: string;
 }
 
 interface Props extends OwnProps {
@@ -255,6 +256,7 @@ class PanelTransition extends React.PureComponent<Props, State> {
                                 onSubmit={this.onFormSubmit}
                                 onInvalid={this.onFormInvalid}
                                 isLoading={this.props.auth.isLoading}
+                                className={this.props.className}
                             >
                                 <Panel>
                                     <PanelHeader>{panels.map((config) => this.getHeader(config))}</PanelHeader>
@@ -285,10 +287,7 @@ class PanelTransition extends React.PureComponent<Props, State> {
 
     onFormSubmit = (): void => {
         this.props.clearErrors();
-
-        if (this.body) {
-            this.body.onFormSubmit();
-        }
+        this.body?.onFormSubmit();
     };
 
     onFormInvalid = (errors: Record<string, ValidationError>): void => this.props.setErrors(errors);
@@ -377,7 +376,7 @@ class PanelTransition extends React.PureComponent<Props, State> {
 
         if (length === 1) {
             if (!this.wasAutoFocused) {
-                this.body.autoFocus();
+                this.body?.autoFocus();
             }
 
             this.wasAutoFocused = true;

packages/app/components/auth/actions.test.ts

@@ -87,6 +87,9 @@ describe('components/auth/actions', () => {
                     [setClient(resp.client)],
                     [
                         setOAuthRequest({
+                            params: {
+                                userCode: '',
+                            },
                             prompt: 'none',
                             loginHint: undefined,
                         }),

packages/app/components/auth/actions.ts

@@ -382,7 +382,12 @@ export function oAuthComplete(params: { accept?: boolean } = {}) {
                 localStorage.removeItem('oauthData');
 
                 if (!resp.redirectUri) {
-                    dispatch(setOAuthCode({ success: resp.success && params.accept }));
+                    dispatch(
+                        setOAuthCode({
+                            // if accept is undefined, then it was auto approved
+                            success: resp.success && (typeof params.accept === 'undefined' || params.accept),
+                        }),
+                    );
                 } else if (resp.redirectUri.startsWith('static_page')) {
                     const displayCode = resp.redirectUri.includes('static_page_with_code');
 

packages/app/components/auth/deviceCode/DeviceCode.tsx

@@ -1,18 +1,32 @@
-import React from 'react';
+import React, { FC } from 'react';
+import { RouteComponentProps } from 'react-router-dom';
 import { FormattedMessage as Message, defineMessages } from 'react-intl';
 
-import factory from '../factory';
-import Body from './DeviceCodeBody';
+import { Button } from 'app/components/ui/form';
+import AuthTitle from 'app/components/auth/AuthTitle';
+import PanelTransition from 'app/components/auth/PanelTransition';
+
+import style from './deviceCode.scss';
+import DeviceCodeBody from './DeviceCodeBody';
 
 const messages = defineMessages({
-    deviceCodeTitle: 'Device code',
+    deviceCodeTitle: 'Device Code',
 });
 
-export default factory({
-    title: messages.deviceCodeTitle,
-    body: Body,
-    footer: {
-        color: 'green',
-        children: <Message key="continueButton" defaultMessage="Continue" />,
-    },
-});
+const DeviceCode: FC<RouteComponentProps> = (props) => {
+    return (
+        <PanelTransition
+            key="deviceCode"
+            className={style.form}
+            Title={<AuthTitle title={messages.deviceCodeTitle} />}
+            Body={<DeviceCodeBody {...props} />}
+            Footer={
+                <Button type="submit">
+                    <Message id="continue" defaultMessage="Cotinute" />
+                </Button>
+            }
+        />
+    );
+};
+
+export default DeviceCode;

packages/app/components/auth/deviceCode/DeviceCodeBody.tsx

@@ -1,13 +1,9 @@
 import React from 'react';
-import { defineMessages } from 'react-intl';
+import { FormattedMessage as Message } from 'react-intl';
 
 import { Input } from 'app/components/ui/form';
 import BaseAuthBody from 'app/components/auth/BaseAuthBody';
 
-const messages = defineMessages({
-    deviceCode: 'Device code',
-});
-
 export default class DeviceCodeBody extends BaseAuthBody {
     static displayName = 'DeviceCodeBody';
     static panelId = 'deviceCode';
@@ -16,16 +12,22 @@ export default class DeviceCodeBody extends BaseAuthBody {
 
     render() {
         return (
-            <div>
+            <>
                 {this.renderErrors()}
 
-                <Input
-                    {...this.bindField('user_code')}
-                    icon="key"
-                    required
-                    placeholder={messages.deviceCode}
-                />
-            </div>
+                <Message id="deviceCode" defaultMessage="Device Code">
+                    {(nodes) => (
+                        <Input
+                            {...this.bindField('user_code')}
+                            icon="key"
+                            name="user_cide"
+                            autoFocus
+                            required
+                            placeholder={nodes as string}
+                        />
+                    )}
+                </Message>
+            </>
         );
     }
 }

packages/app/components/auth/deviceCode/deviceCode.scss

@@ -0,0 +1,5 @@
+.form {
+    max-width: 340px;
+    margin: 0 auto;
+    padding: 55px 13px 0;
+}