docs(demo): Handle login errors

Author: ntucker

examples/github-app/src/navigation/LoginForm.tsx

@@ -1,28 +1,31 @@
+import { useLoading } from '@data-client/react';
 import { Button, Checkbox, Form, Input } from 'antd';
 
 export default function LoginForm({
   onFinish,
 }: {
-  onFinish: (values: any) => void;
+  onFinish: (values: any) => Promise<void>;
 }) {
-  const onFinishFailed = (errorInfo: any) => {
-    console.log('Failed:', errorInfo);
-  };
+  const [handleFinish, loading, error] = useLoading(onFinish, [onFinish]);
 
   return (
     <Form
       name="basic"
       labelCol={{ span: 6 }}
       wrapperCol={{ span: 16 }}
       initialValues={{ remember: true }}
-      onFinish={onFinish}
-      onFinishFailed={onFinishFailed}
-      autoComplete="off"
+      onFinish={handleFinish}
     >
       <Form.Item
         label="Username"
         name="login"
         rules={[{ required: true, message: 'Please input your username!' }]}
+        validateStatus={error ? 'error' : ''}
+        help={
+          (error as any)?.status === 401
+            ? 'Username and token were not valid'
+            : ''
+        }
       >
         <Input autoFocus />
       </Form.Item>
@@ -44,7 +47,7 @@ export default function LoginForm({
       </Form.Item>
 
       <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
-        <Button type="primary" htmlType="submit">
+        <Button type="primary" htmlType="submit" disabled={loading}>
           Submit
         </Button>
       </Form.Item>

examples/github-app/src/navigation/LoginModal.tsx

@@ -18,10 +18,13 @@ export default function LoginModal({
   const handleCancel = useCallback(() => {
     handleClose();
   }, []);
-  const onFinish = useCallback((data: { login: string; token: string }) => {
-    login(data);
-    handleClose();
-  }, []);
+  const onFinish = useCallback(
+    async (data: { login: string; token: string }) => {
+      await login(data);
+      handleClose();
+    },
+    [handleClose, login],
+  );
 
   return (
     <Modal

examples/github-app/src/navigation/authdContext.tsx

@@ -2,10 +2,10 @@ import { useController } from '@data-client/react';
 import React, { createContext, useCallback, useMemo } from 'react';
 
 import { setAuth, unAuth } from '@/resources/Auth';
-import UserResource from '@/resources/User';
+import UserResource, { User } from '@/resources/User';
 
 export const authdContext = createContext({
-  login(data: { login: string; token: string }): void {
+  async login(data: { login: string; token: string }): Promise<User> {
     throw new Error('context not set for auth');
   },
   logout(): void {
@@ -21,9 +21,9 @@ export function AuthdProvider({ children }: { children: React.ReactNode }) {
     ctrl.invalidate(UserResource.current);
   }, [ctrl]);
   const login = useCallback(
-    (data: { login: string; token: string }) => {
-      ctrl.fetch(UserResource.current);
+    async (data: { login: string; token: string }) => {
       setAuth(data);
+      return await ctrl.fetch(UserResource.current);
     },
     [ctrl],
   );