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;
+}

packages/app/components/ui/Panel.tsx

@@ -1,121 +1,91 @@
-import React from 'react';
+import React, { FC, PropsWithChildren, useState, useCallback } from 'react';
 import clsx from 'clsx';
-import { omit } from 'app/functions';
 
 import styles from './panel.scss';
 import icons from './icons.scss';
 
-export function Panel(props: { title?: string; icon?: string; children: React.ReactNode }) {
-    const { title: titleText, icon: iconType } = props;
-    let icon: React.ReactElement | undefined;
-    let title: React.ReactElement | undefined;
-
-    if (iconType) {
-        icon = (
-            <button className={styles.headerControl}>
-                <span className={icons[iconType]} />
-            </button>
-        );
-    }
-
-    if (titleText) {
-        title = (
-            <PanelHeader>
-                {icon}
-                {titleText}
-            </PanelHeader>
-        );
-    }
+interface PanelProps extends PropsWithChildren<any> {
+    title?: string;
+    icon?: string;
+}
 
+export const Panel: FC<PanelProps> = ({ title, icon, children }) => {
     return (
         <div className={styles.panel}>
-            {title}
+            {title && (
+                <PanelHeader>
+                    {icon && (
+                        <button className={styles.headerControl}>
+                            <span className={icons[icon]} />
+                        </button>
+                    )}
+                    {title}
+                </PanelHeader>
+            )}
 
-            {props.children}
+            {children}
         </div>
     );
-}
+};
 
-export function PanelHeader(props: { children: React.ReactNode }) {
+export const PanelHeader: FC<PropsWithChildren<any>> = ({ children }) => {
     return (
-        <div className={styles.header} {...props} data-testid="auth-header">
-            {props.children}
+        <div className={styles.header} data-testid="auth-header">
+            {children}
         </div>
     );
-}
+};
 
-export function PanelBody(props: { children: React.ReactNode }) {
+export const PanelBody: FC<PropsWithChildren<any>> = ({ children }) => {
     return (
-        <div className={styles.body} {...props} data-testid="auth-body">
-            {props.children}
+        <div className={styles.body} data-testid="auth-body">
+            {children}
         </div>
     );
-}
+};
 
-export function PanelFooter(props: { children: React.ReactNode }) {
+export const PanelFooter: FC<PropsWithChildren<any>> = ({ children }) => {
     return (
-        <div className={styles.footer} {...props} data-testid="auth-controls">
-            {props.children}
+        <div className={styles.footer} data-testid="auth-controls">
+            {children}
         </div>
     );
+};
+
+interface PanelBodyHeaderProps extends PropsWithChildren<any> {
+    type?: 'default' | 'error';
+    onClose?: () => void;
 }
 
-export class PanelBodyHeader extends React.Component<
-    {
-        type?: 'default' | 'error';
-        onClose?: () => void;
-        children: React.ReactNode;
-    },
-    {
-        isClosed: boolean;
-    }
-> {
-    state: {
-        isClosed: boolean;
-    } = {
-        isClosed: false,
-    };
+export const PanelBodyHeader: FC<PanelBodyHeaderProps> = ({ type = 'default', onClose, children }) => {
+    const [isClosed, setIsClosed] = useState<boolean>(false);
+    const handleCloseClick = useCallback(() => {
+        setIsClosed(true);
+        onClose?.();
+    }, [onClose]);
 
-    render() {
-        const { type = 'default', children } = this.props;
+    return (
+        <div
+            className={clsx({
+                [styles.defaultBodyHeader]: type === 'default',
+                [styles.errorBodyHeader]: type === 'error',
+                [styles.isClosed]: isClosed,
+            })}
+        >
+            {type === 'error' && <span className={styles.close} onClick={handleCloseClick} />}
+            {children}
+        </div>
+    );
+};
 
-        let close;
-
-        if (type === 'error') {
-            close = <span className={styles.close} onClick={this.onClose} />;
-        }
-
-        const className = clsx(styles[`${type}BodyHeader`], {
-            [styles.isClosed]: this.state.isClosed,
-        });
-
-        const extraProps = omit(this.props, ['type', 'onClose']);
-
-        return (
-            <div className={className} {...extraProps}>
-                {close}
-                {children}
-            </div>
-        );
-    }
-
-    onClose = (event: React.MouseEvent<HTMLElement>) => {
-        event.preventDefault();
-
-        const { onClose } = this.props;
-
-        this.setState({ isClosed: true });
-
-        if (onClose) {
-            onClose();
-        }
-    };
+interface PanelIconProps {
+    icon: string;
 }
 
-export function PanelIcon({ icon }: { icon: string }) {
+export const PanelIcon: FC<PanelIconProps> = ({ icon }) => {
     return (
         <div className={styles.panelIcon}>
             <span className={icons[icon]} />
         </div>
     );
-}
+};

packages/app/components/ui/form/Form.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import clsx from 'clsx';
 
 import logger from 'app/services/logger';
@@ -10,7 +10,8 @@ interface BaseProps {
     id: string;
     isLoading: boolean;
     onInvalid: (errors: Record<string, string>) => void;
-    children: React.ReactNode;
+    className?: string;
+    children?: ReactNode;
 }
 
 interface PropsWithoutForm extends BaseProps {
@@ -24,10 +25,6 @@ interface PropsWithForm extends BaseProps {
 
 type Props = PropsWithoutForm | PropsWithForm;
 
-function hasForm(props: Props): props is PropsWithForm {
-    return 'form' in props;
-}
-
 interface State {
     id: string; // just to track value for derived updates
     isTouched: boolean;
@@ -54,10 +51,7 @@ export default class Form extends React.Component<Props, State> {
     mounted = false;
 
     componentDidMount() {
-        if (hasForm(this.props)) {
-            this.props.form.addLoadingListener(this.onLoading);
-        }
-
+        (this.props as PropsWithForm).form?.addLoadingListener(this.onLoading);
         this.mounted = true;
     }
 
@@ -77,8 +71,8 @@ export default class Form extends React.Component<Props, State> {
     }
 
     componentDidUpdate(prevProps: Props) {
-        const nextForm = hasForm(this.props) ? this.props.form : undefined;
-        const prevForm = hasForm(prevProps) ? prevProps.form : undefined;
+        const nextForm = (this.props as PropsWithForm).form;
+        const prevForm = (prevProps as PropsWithForm).form;
 
         if (nextForm !== prevForm) {
             if (prevForm) {
@@ -92,10 +86,7 @@ export default class Form extends React.Component<Props, State> {
     }
 
     componentWillUnmount() {
-        if (hasForm(this.props)) {
-            this.props.form.removeLoadingListener(this.onLoading);
-        }
-
+        (this.props as PropsWithForm).form?.removeLoadingListener(this.onLoading);
         this.mounted = false;
     }
 
@@ -104,7 +95,7 @@ export default class Form extends React.Component<Props, State> {
 
         return (
             <form
-                className={clsx(styles.form, {
+                className={clsx(styles.form, this.props.className, {
                     [styles.isFormLoading]: isLoading,
                     [styles.formTouched]: this.state.isTouched,
                 })}
@@ -134,12 +125,10 @@ export default class Form extends React.Component<Props, State> {
             this.clearErrors();
             let result: Promise<void> | void;
 
-            if (hasForm(this.props)) {
-                // @ts-ignore this prop has default value
-                result = this.props.onSubmit(this.props.form);
+            if ((this.props as PropsWithForm).form) {
+                result = (this.props as PropsWithForm).onSubmit!((this.props as PropsWithForm).form);
             } else {
-                // @ts-ignore this prop has default value
-                result = this.props.onSubmit(new FormData(form));
+                result = (this.props as PropsWithoutForm).onSubmit!(new FormData(form));
             }
 
             if (result && result.then) {
@@ -181,14 +170,11 @@ export default class Form extends React.Component<Props, State> {
     }
 
     setErrors(errors: { [key: string]: string }) {
-        if (hasForm(this.props)) {
-            this.props.form.setErrors(errors);
-        }
-
+        (this.props as PropsWithForm).form?.setErrors(errors);
         this.props.onInvalid(errors);
     }
 
-    clearErrors = () => hasForm(this.props) && this.props.form.clearErrors();
+    clearErrors = () => (this.props as PropsWithForm).form?.clearErrors();
 
     onFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();

packages/app/components/ui/panel.scss

@@ -76,6 +76,7 @@ $bodyTopBottomPadding: 15px;
     padding: 10px 20px;
     margin: (-$bodyTopBottomPadding) (-$bodyLeftRightPadding) 15px;
     max-height: 200px;
+    text-align: center;
 
     transition: 0.4s ease;
 }