add login form to playground

Author: joshunrau

apps/playground/src/components/Header/LoginForm/LoginForm.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable perfectionist/sort-objects */
+
+import { Form } from '@douglasneuroinformatics/libui/components';
+import { $LoginCredentials } from '@opendatacapture/schemas/auth';
+
+type LoginFormProps = {
+  onSubmit: (credentials: $LoginCredentials) => void;
+};
+
+export const LoginForm = ({ onSubmit }: LoginFormProps) => {
+  return (
+    <Form
+      content={{
+        username: {
+          kind: 'string',
+          label: 'Username',
+          variant: 'input'
+        },
+        password: {
+          kind: 'string',
+          label: 'Password',
+          variant: 'password'
+        }
+      }}
+      submitBtnLabel="Login"
+      validationSchema={$LoginCredentials}
+      onSubmit={onSubmit}
+    />
+  );
+};

apps/playground/src/components/Header/LoginForm/index.ts

@@ -0,0 +1 @@
+export * from './LoginForm';

packages/schemas/src/auth/auth.ts

@@ -10,8 +10,8 @@ export type AuthPayload = {
 
 export type $LoginCredentials = z.infer<typeof $LoginCredentials>;
 export const $LoginCredentials = z.object({
-  password: z.string(),
-  username: z.string()
+  password: z.string().min(1),
+  username: z.string().min(1)
 });
 
 export type TokenPayload = {