add interface

id.saladeaula.digital/client/app/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

id.saladeaula.digital/client/app/lib/session.ts

@@ -0,0 +1,12 @@
+import { createCookieSessionStorage } from 'react-router'
+
+const { getSession, commitSession, destroySession } =
+  createCookieSessionStorage({
+    cookie: {
+      name: 'session_id',
+      httpOnly: true,
+      secure: true
+    }
+  })
+
+export { getSession, commitSession, destroySession }

id.saladeaula.digital/client/app/routes.ts

@@ -1,5 +1,11 @@
-import { type RouteConfig, index, layout } from '@react-router/dev/routes'
+import {
+  type RouteConfig,
+  index,
+  layout,
+  route
+} from '@react-router/dev/routes'
 
 export default [
-  layout('routes/layout.tsx', [index('routes/home.tsx')])
+  layout('routes/layout.tsx', [index('routes/index.tsx')]),
+  route('/authorize', 'routes/authorize.tsx')
 ] satisfies RouteConfig

id.saladeaula.digital/client/app/routes/authorize.tsx

@@ -0,0 +1,32 @@
+// import { parse } from 'cookie'
+
+import type { Route } from './+types/authorize'
+
+export async function loader({ request, context }: Route.LoaderArgs) {
+  const url = new URL(request.url)
+  const issuerUrl = new URL('/authorize', context.cloudflare.env.ISSUER_URL)
+  issuerUrl.search = url.search
+
+  console.log(request.headers.get('Cookie'))
+
+  console.log(issuerUrl.toString())
+
+  try {
+    const r = await fetch(issuerUrl.toString(), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Cookie: request.headers.get('Cookie')
+      }
+    })
+
+    console.log(r)
+
+    // return new Response(await r.text(), {
+    //   status: r.status,
+    //   headers: r.headers
+    // })
+  } catch {
+    return new Response(null, { status: 500 })
+  }
+}

id.saladeaula.digital/client/app/routes/index.tsx

@@ -1,14 +1,18 @@
-import type { Route } from './+types/home'
+import type { Route } from './+types/index'
 
 import { isValidCPF } from '@brazilian-utils/brazilian-utils'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { Loader2Icon } from 'lucide-react'
 import { useForm } from 'react-hook-form'
+import { useFetcher } from 'react-router'
 import { z } from 'zod'
 
 import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 
+import { useState } from 'react'
 import logo from './logo.svg'
 
 const cpf = z.string().refine(isValidCPF, { message: 'CPF inválido' })
@@ -16,7 +20,7 @@ const email = z.string().email({ message: 'Email inválido' })
 
 const schema = z.object({
   username: z.union([cpf, email]),
-  password: z.string()
+  password: z.string().nonempty()
 })
 
 type Schema = z.infer<typeof schema>
@@ -25,17 +29,44 @@ export function meta({}: Route.MetaArgs) {
   return [{ title: 'EDUSEG®' }]
 }
 
-export function loader({ context }: Route.LoaderArgs) {
-  return { message: context.cloudflare.env.ISSUER_URL }
+export async function action({ request, context }: Route.ActionArgs) {
+  const issuerUrl = context.cloudflare.env.ISSUER_URL
+  const formData = Object.fromEntries(await request.formData())
+  const url = new URL(request.url)
+  url.pathname = '/authorize'
+
+  try {
+    const r = await fetch(`${issuerUrl}/session`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(formData)
+    })
+
+    const headers = new Headers(r.headers)
+    headers.set('Location', url.toString())
+
+    return new Response(await r.text(), {
+      status: 302,
+      headers
+    })
+  } catch {
+    return new Response(null, { status: 500 })
+  }
 }
 
-export default function Home({ loaderData }: Route.ComponentProps) {
-  const { register, handleSubmit } = useForm({
+export default function Index({}: Route.ComponentProps) {
+  const [show, setShow] = useState(false)
+  const fetcher = useFetcher()
+
+  const { register, handleSubmit, formState } = useForm({
     resolver: zodResolver(schema)
   })
 
-  const onSubmit = (data: Schema) => {
-    console.log(data)
+  const onSubmit = async (data: Schema) => {
+    await fetcher.submit(data, { method: 'post' })
+    console.log(fetcher.data)
   }
 
   return (
@@ -72,14 +103,36 @@ export default function Home({ loaderData }: Route.ComponentProps) {
                 <Label htmlFor="password">Senha</Label>
                 <a
                   href="#"
+                  tabIndex={-1}
                   className="ml-auto text-sm underline-offset-4 hover:underline"
                 >
                   Esqueceu sua senha?
                 </a>
               </div>
-              <Input id="password" {...register('password')} />
+
+              <Input
+                id="password"
+                type={show ? 'text' : 'password'}
+                {...register('password')}
+              />
+
+              <div className="flex items-center gap-3">
+                <Checkbox
+                  id="showPassword"
+                  onClick={() => setShow((x) => !x)}
+                />
+                <Label htmlFor="showPassword">Mostrar senha</Label>
+              </div>
             </div>
-            <Button type="submit" className="w-full bg-lime-400 cursor-pointer">
+
+            <Button
+              type="submit"
+              className="w-full bg-lime-400 cursor-pointer"
+              disabled={formState.isSubmitting}
+            >
+              {formState.isSubmitting && (
+                <Loader2Icon className="animate-spin" />
+              )}
               Entrar
             </Button>
           </div>

id.saladeaula.digital/client/app/routes/layout.tsx

@@ -10,6 +10,7 @@ export default function Layout() {
       >
         <ChevronLeftIcon className="size-5" /> Página inicial
       </a>
+
       <div className="w-full max-w-sm relative z-1">
         <Outlet />
       </div>

id.saladeaula.digital/client/app/routes/logo.svg

@@ -1 +1,7 @@
-<svg width="18" height="24" viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.2756 23.4353L8.93847 20.1298C8.7383 20.0015 8.48167 20.0015 8.27893 20.1298L0.941837 23.4353C0.533793 23.6945 0 23.4019 0 22.9194V1.12629C0.00256631 0.787535 0.277162 0.512939 0.615915 0.512939H16.6066C16.9454 0.512939 17.22 0.787535 17.22 1.12629V22.9194C17.22 23.4019 16.6862 23.6945 16.2781 23.4353H16.2756Z" fill="#8CD366"></path><path d="M10.7274 3.71313H3.34668V6.41803H10.7274V3.71313Z" fill="#2E3524"></path><path d="M9.42115 8.4939H3.34668V10.6496H9.42115V8.4939Z" fill="#2E3524"></path><path d="M10.7274 12.7263H3.34668V15.4312H10.7274V12.7263Z" fill="#2E3524"></path><path d="M12.9984 13.6731H12.9958C12.5111 13.6731 12.1182 14.066 12.1182 14.5508V14.5533C12.1182 15.0381 12.5111 15.431 12.9958 15.431H12.9984C13.4831 15.431 13.8761 15.0381 13.8761 14.5533V14.5508C13.8761 14.066 13.4831 13.6731 12.9984 13.6731Z" fill="#2E3524"></path></svg>
+<svg width="18" height="24" viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.2756 23.4353L8.93847 20.1298C8.7383 20.0015 8.48167 20.0015 8.27893 20.1298L0.941837 23.4353C0.533793 23.6945 0 23.4019 0 22.9194V1.12629C0.00256631 0.787535 0.277162 0.512939 0.615915 0.512939H16.6066C16.9454 0.512939 17.22 0.787535 17.22 1.12629V22.9194C17.22 23.4019 16.6862 23.6945 16.2781 23.4353H16.2756Z" fill="#8CD366"></path>
+    <path d="M10.7274 3.71313H3.34668V6.41803H10.7274V3.71313Z" fill="#2E3524"></path>
+    <path d="M9.42115 8.4939H3.34668V10.6496H9.42115V8.4939Z" fill="#2E3524"></path>
+    <path d="M10.7274 12.7263H3.34668V15.4312H10.7274V12.7263Z" fill="#2E3524"></path>
+    <path d="M12.9984 13.6731H12.9958C12.5111 13.6731 12.1182 14.066 12.1182 14.5508V14.5533C12.1182 15.0381 12.5111 15.431 12.9958 15.431H12.9984C13.4831 15.431 13.8761 15.0381 13.8761 14.5533V14.5508C13.8761 14.066 13.4831 13.6731 12.9984 13.6731Z" fill="#2E3524"></path>
+</svg>