feat: extract kratos api into services folder

src/website/app/forms/SubmitButton.tsx

@@ -11,7 +11,7 @@ export const SubmitButton: FC<
     disabled={disabled}
     className={join(
       "flex w-full justify-center rounded-md bg-slate-500 hover:bg-slate-900 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600 transition",
-      disabled ? "opacity-50" : ""
+      disabled ? "pointer-events-none opacity-50" : ""
     )}
   >
     {children}

src/website/app/layout/FieldError.tsx

@@ -7,7 +7,7 @@ export const FieldError: FC<{ name: string }> = ({ name }) => {
 
   if (
     data === undefined ||
-    data.state !== "not-valid" ||
+    data.type !== "not-valid" ||
     name in data.messages === false
   ) {
     return null;

src/website/app/layout/FormField.tsx

@@ -25,7 +25,7 @@ export const FormField: FC<{
       disabled={disabled}
       className={join(
         "sm:col-span-2 sm:h-10 sm:mt-0 sm:text-sm focus:ring-slate-500 focus:border-slate-500 bg-white border-2 border-slate-300 col-span-3 mt-1 px-2 rounded-md",
-        disabled ? "opacity-50" : ""
+        disabled ? "pointer-events-none opacity-50" : ""
       )}
     />
   </div>

src/website/app/layout/ServerMessage.tsx

@@ -1,4 +1,8 @@
-import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/20/solid";
+import {
+  CheckCircleIcon,
+  InformationCircleIcon,
+  XCircleIcon,
+} from "@heroicons/react/20/solid";
 import { FC } from "react";
 import { useFetcherData } from "~/hooks/useFetcherContext";
 
@@ -11,7 +15,7 @@ export const ServerMessage: FC = () => {
 
   console.log("ServerMessage data", data);
 
-  if (data.state === "success") {
+  if (data.type === "success") {
     return (
       <div className="flex rounded-md bg-green-50 p-4 space-x-3">
         <CheckCircleIcon
@@ -25,7 +29,21 @@ export const ServerMessage: FC = () => {
       </div>
     );
   }
-  if (data.state === "failure") {
+  if (data.type === "info") {
+    return (
+      <div className="flex rounded-md bg-yellow-50 p-4 space-x-3">
+        <InformationCircleIcon
+          className="h-5 w-5 text-yellow-400"
+          aria-hidden="true"
+        />
+        <div className="space-y-2">
+          <h3 className="text-sm font-medium text-yellow-800">Info</h3>
+          <div className="text-sm text-yellow-700">{data.message}</div>
+        </div>
+      </div>
+    );
+  }
+  if (data.type === "failure") {
     return (
       <div className="flex rounded-md bg-red-50 p-4 space-x-3">
         <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />

src/website/app/openapi/kratos.ts

@@ -1,4 +1,4 @@
-import { NormalizeOAS, OASComponentSchema, OASModel } from "fets";
+import { NormalizeOAS, OASModel } from "fets";
 
 const schema = {
   components: {
@@ -6887,5 +6887,6 @@ export default schema;
 
 export type Kratos = NormalizeOAS<typeof schema>;
 
+// TODO: remove me!
 export type KratosIdentity = OASModel<Kratos, "identity">;
 export type KratosSession = OASModel<Kratos, "session">;

src/website/app/routes/_index.tsx

@@ -15,14 +15,17 @@ import { Section } from "~/layout/Section";
 import { SectionHeader } from "~/layout/SectionHeader";
 import { SectionItem } from "~/layout/SectionItem";
 import { KratosIdentity, KratosSession } from "~/openapi/kratos";
-import { kratos, listMySessions } from "~/ory.server";
+import { disableMySession } from "~/services/kratos/disableMySession";
+import { exchangeSessionToken } from "~/services/kratos/exchangeSessionToken";
+import { listMySessions } from "~/services/kratos/listMySessions";
 import { sessionStorage } from "~/session.server";
 import {
   ActionData,
   actionGuard,
   join,
   LoaderData,
   loaderGuard,
+  redirectToHome,
   redirectToLogin,
 } from "~/utils";
 import { CurrentSession } from "./index/CurrentSession";
@@ -48,8 +51,6 @@ export const loader = async ({
 > => {
   const guard = await loaderGuard(request);
 
-  console.log("_index url", guard.url);
-
   const { url, session } = guard;
 
   const code = url.searchParams.get("code");
@@ -59,53 +60,35 @@ export const loader = async ({
   );
 
   if (code && session_token_exchange_code) {
-    const response = await kratos["/sessions/token-exchange"].get({
+    const response = await exchangeSessionToken({
       query: {
         init_code: session_token_exchange_code,
         return_to_code: code,
       },
     });
 
-    if (response.ok === false) {
-      const body = await response.json();
-
-      console.log(
-        "_index loader",
-        response.status,
-        JSON.stringify(body, null, 2)
-      );
+    switch (response.type) {
+      case "failure":
+        throw serverError(response.message);
+      case "success":
+        session.unset("session_token_exchange_code");
+        session.set("session_token", response.session_token);
 
-      throw serverError(body.error.message);
+        return redirectToHome(guard);
     }
-
-    const body = await response.json();
-
-    console.log(
-      "_index loader",
-      response.status,
-      JSON.stringify(body, null, 2)
-    );
-
-    session.unset("session_token_exchange_code");
-
-    session.set("session_token", body.session_token);
-
-    return redirect(url.searchParams.get("from") || "/", {
-      status: 303,
-      headers: {
-        "set-cookie": await sessionStorage.commitSession(session),
-      },
-    });
   }
 
-  if (guard.state === "without-identity") {
+  if (guard.type === "without-identity") {
     return redirectToLogin(guard);
   }
 
   const { identity: me, csrf } = guard;
 
   const [sessions, tuples] = await Promise.all([
-    listMySessions(session.get("session_token"), 1),
+    listMySessions({
+      headers: { "X-Session-Token": session.get("session_token") },
+      query: { per_page: 100, page: 1 },
+    }),
     // keto.getRelationships({ subjectId: userId }),
     null,
   ]);
@@ -167,9 +150,9 @@ export const action = async ({
 }: ActionArgs): Promise<TypedJsonResponse<ActionData>> => {
   const guard = await actionGuard(request, actionSchema);
 
-  if (guard.state === "not-valid") {
-    return json<ActionData>({
-      state: "not-valid",
+  if (guard.type === "not-valid") {
+    return json({
+      type: "not-valid",
       messages: guard.messages,
 
       defaultValues: guard.defaultValues,
@@ -186,39 +169,32 @@ export const action = async ({
       });
     }
     case "remove-session": {
-      const response = await kratos["/sessions/{id}"].delete({
+      const response = await disableMySession({
         headers: { "X-Session-Token": session.get("session_token") },
         params: { id: data.sessionId },
       });
 
-      if (response.ok === false) {
-        const body = await response.json();
-
-        console.log(
-          "_index remove-session",
-          response.status,
-          JSON.stringify(body, null, 2)
-        );
-
-        return json<ActionData>({
-          state: "failure",
-          message: body.error.message,
-
-          defaultValues: guard.defaultValues,
-        });
+      switch (response.type) {
+        case "failure":
+          return json({
+            type: "failure",
+            message: response.message,
+
+            defaultValues: guard.defaultValues,
+          });
+        case "success":
+          return json({
+            type: "success",
+            message: response.message,
+
+            defaultValues: guard.defaultValues,
+          });
       }
-
-      return json<ActionData>({
-        state: "success",
-        message: `Revoked session ${data.sessionId}`,
-
-        defaultValues: guard.defaultValues,
-      });
     }
   }
 
-  return json<ActionData>({
-    state: "failure",
+  return json({
+    type: "failure",
     message: "Unsupported operation",
 
     defaultValues: guard.defaultValues,

src/website/app/routes/api.webhooks.oidc.$.ts

@@ -8,12 +8,8 @@ const kratosUrl = process.env.KRATOS_PUBLIC_ENDPOINT;
 export const loader = async ({ params, request }: LoaderArgs) => {
   const guard = await loaderGuard(request);
 
-  console.log("api/webhooks/oidc loader params", params);
-
   const { url, session } = guard;
 
-  console.log("session", session.data);
-
   return redirect(`${kratosUrl}/${params["*"]}?${url.searchParams}`, {
     status: 303,
     headers: {