Using the new api manager to login

Fixing the login page
using the router instead of remix links.

frontend/apps/editor2d/src/Classes/ApiManager/UsersApi.ts

@@ -63,6 +63,7 @@ export class UsersApi extends ApiManager {
     password: string;
   }): Promise<ApiResponse<{ signedSession?: string }>> {
     const endpoint = `${this.ApiTargets.BaseApi}/v1/login`;
+  
     const body = {
       username_or_email: usernameOrEmail,
       password: password,

frontend/apps/editor2d/src/app/pages/login.tsx

@@ -5,7 +5,7 @@ import { faKey, faUser } from "@fortawesome/pro-solid-svg-icons";
 import { Button, Input, LoadingSpinner } from "~/components/ui";
 import { authentication } from "~/signals";
 import { twMerge } from "tailwind-merge";
-
+import { UsersApi } from "@storyteller/api";
 export const Login = () => {
   const {
     signals: { status: authStatus },
@@ -36,17 +36,21 @@ export const Login = () => {
     return "Getting Session...";
   }
 
-  const handleOnSumbit = (ev: React.FormEvent<HTMLFormElement>) => {
+  const handleOnSumbit = async (ev: React.FormEvent<HTMLFormElement>) => {
     ev.preventDefault();
     if (formRef.current) {
       const form = new FormData(formRef.current);
       const usernameOrEmail = form.get("usernameOrEmail")?.toString();
       const password = form.get("password")?.toString();
-      if (usernameOrEmail && password && login) {
-        login({
+   
+      if (usernameOrEmail && password) {
+        let api = new UsersApi();
+        
+        let response = await api.Login({
           usernameOrEmail,
           password,
         });
+        console.log("response", response);
       }
     }
   }; // end handleOnSubmit

frontend/apps/editor2d/src/components/features/ToolbarUserProfile/ProfileDropdown.tsx

@@ -21,22 +21,9 @@ export function ProfileDropdown() {
     signals: { userInfo },
     fetchers: { logout },
   } = authentication;
-
+  
   if (!userInfo.value) return null;
 
-  // Extract user info for better readability
-  const {
-    core_info: {
-      username,
-      gravatar_hash: emailHash,
-      display_name,
-      default_avatar: {
-        image_index: avatarIndex,
-        color_index: backgroundColorIndex,
-      },
-    },
-  } = userInfo.value;
-
   const profileUrl = `https://storyteller.ai/profile/${display_name}`;
 
   const menuOptions = [

frontend/apps/editor2d/src/components/shared_authentication/AuthButtons.tsx

@@ -2,14 +2,16 @@ import { useSignals } from "@preact/signals-react/runtime";
 // import { AUTH_STATUS } from "~/signals/authentication/enums";
 // import { authentication } from "~/signals";
 import { ButtonLink } from "~/components/reusable/ButtonLink/ButtonLink";
+import { ProfileDropdown } from "../features/ToolbarUserProfile/ProfileDropdown";
 // import ProfileDropdown from "./ProfileDropdown";
 
 // TODO MAKE THIS A SHARED COMPONENT ART CRAFT
 export const AuthButtons = () => {
   useSignals();
-  //const { status } = authentication;
+  // const { status } = authentication;
+  // status.value === AUTH_STATUS.LOGGED_IN
+
   if (false) {
-    // status.value === AUTH_STATUS.LOGGED_IN
     return <ProfileDropdown />;
   } else {
     return (

frontend/apps/editor2d/src/components/shared_authentication/profiledropdown.tsx

@@ -1,191 +0,0 @@
-// import { faEnvelope, faKey, faUser } from "@fortawesome/pro-solid-svg-icons";
-// // import { GlobalSettingsManager } from "./pages/PageEnigma/GlobalSettingsManager";
-// import { Button } from "@storyteller/ui-button";
-// import { Input } from "@storyteller/ui-input";
-
-// // import { addToast, authentication, signUp } from "~/signals";
-// import { FormEvent, useRef, useState, StrictMode } from "react";
-// // import { AUTH_STATUS, ToastTypes } from "~/enums";
-// import { useSignalEffect, useSignals } from "@preact/signals-react/runtime";
-// import { useNavigate, useSearchParams, BrowserRouter } from "react-router-dom";
-// import { createRoot } from "react-dom/client";
-
-// // import "./styles/normalize.css";
-// // import "./styles/tailwind.css";
-// // import "./styles/base.css";
-
-// import "@fortawesome/fontawesome-svg-core/styles.css";
-
-// import { config } from "@fortawesome/fontawesome-svg-core";
-
-// config.autoAddCss = false; /* eslint-disable import/first */
-// // TODO MAKE THIS A SHARED COMPONENT ART CRAFT
-// const regEx =
-//   /^(([^<>()[\].,;:\s@"]+(.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
-
-// // TODO(bt,2025-04-19): Make these configurable
-// const ENV = {
-//   BASE_API: "https://api.storyteller.ai",
-//   GOOGLE_API: "https://studio.storyteller.ai",
-//   FUNNEL_API: "https://studio.storyteller.ai",
-//   CDN_API: "https://cdn-2.fakeyou.com",
-//   GRAVATAR_API: "https://studio.storyteller.ai",
-//   DEPLOY_PRIME_URL: "https://studio.storyteller.ai",
-// };
-
-// export default function SignUpScreen() {
-//   useSignals();
-//   const navigate = useNavigate();
-//   const formRef = useRef<HTMLFormElement | null>(null);
-//   const [usernameError, setUsernameError] = useState("");
-//   const [emailError, setEmailError] = useState("");
-//   const [passwordError, setPasswordError] = useState("");
-//   const [passwordConfirmationError, setPasswordConfirmationError] =
-//     useState("");
-//   const [searchParams] = useSearchParams();
-//   const { status: authStatus } = authentication;
-
-//   const handleOnSubmit = (ev: FormEvent<HTMLFormElement>) => {
-//     ev.preventDefault();
-//     if (formRef.current) {
-//       const form = new FormData(formRef.current);
-//       const email = form.get("email")?.toString();
-//       const password = form.get("password")?.toString();
-//       const passwordConfirmation = form
-//         .get("password-confirmation")
-//         ?.toString();
-//       const username = form.get("username")?.toString();
-//       setUsernameError("");
-//       if (!username || username.length < 6) {
-//         setUsernameError("Username must be at least 6 characters long");
-//       }
-//       setEmailError("");
-//       if (!email || !email.match(regEx)) {
-//         setEmailError("Email must be a valid email address");
-//       }
-//       setPasswordError("");
-//       if (!password || password.length < 8) {
-//         setPasswordError("Password must be at least 8 characters long");
-//       }
-//       setPasswordConfirmationError("");
-//       if (!passwordError && passwordConfirmation !== password) {
-//         setPasswordConfirmationError("Passwords do not match");
-//       }
-
-//       if (
-//         !usernameError &&
-//         !passwordError &&
-//         !emailError &&
-//         !passwordConfirmationError &&
-//         signUp
-//       ) {
-//         signUp({
-//           username: username!,
-//           email: email!,
-//           password: password!,
-//           passwordConfirmation: passwordConfirmation!,
-//         }).then((error) => {
-//           console.log("Error occured", error);
-//           if (error) {
-//             addToast(ToastTypes.ERROR, error);
-//           }
-//         });
-//       }
-//     }
-//   }; // end handleOnSubmit
-
-//   useSignalEffect(() => {
-//     const redirectPath = searchParams.get("redirect");
-//     if (authStatus.value === AUTH_STATUS.LOGGED_IN) {
-//       navigate(redirectPath ? redirectPath : "/");
-//       return;
-//     }
-//     if (authStatus.value === AUTH_STATUS.NO_ACCESS) {
-//       window.open("https://storyteller.ai/", "_self");
-//       return;
-//     }
-//   });
-
-//   return (
-//     <div className="fixed flex h-full w-full flex-col items-center justify-center overflow-auto bg-[#1b1b1f] bg-center bg-repeat">
-//       <div className="mb-7 flex w-10/12 max-w-2xl items-center justify-center gap-4">
-//         <img
-//           src="/resources/images/artcraft-logo-3.png"
-//           alt="ArtCraft Logo"
-//           className="h-9 select-none"
-//         />
-//       </div>
-//       <div className="w-full max-w-xl rounded-xl shadow-lg">
-//         <div className="glass glass-no-hover relative mx-auto w-full rounded-none rounded-t-xl p-6 shadow-none">
-//           <h1 className="mb-8 text-center text-2xl font-bold">Sign up</h1>
-//           <form
-//             ref={formRef}
-//             onSubmit={handleOnSubmit}
-//             className="flex flex-col gap-4"
-//           >
-//             <Input
-//               label="Username"
-//               icon={faUser}
-//               placeholder="Username"
-//               name="username"
-//               errorMessage={usernameError}
-//               required
-//             />
-//             <Input
-//               type="email"
-//               label="Email"
-//               icon={faEnvelope}
-//               placeholder="Email"
-//               name="email"
-//               errorMessage={emailError}
-//               required
-//             />
-//             <Input
-//               type="password"
-//               label="Password"
-//               icon={faKey}
-//               name="password"
-//               placeholder="Password"
-//               autoComplete="current-password"
-//               errorMessage={passwordError}
-//               required
-//             />
-//             <Input
-//               type="password"
-//               label="Password Confirmation"
-//               icon={faKey}
-//               placeholder="Password Confirmation"
-//               name="password-confirmation"
-//               errorMessage={passwordConfirmationError}
-//               required
-//             />
-//             <Button className="mt-4 py-3">Sign up</Button>
-//           </form>
-//         </div>
-//         <div className="align-items flex w-full max-w-xl rounded-b-xl bg-ui-controls px-6 py-4">
-//           <div className="flex w-full justify-end gap-1 text-sm">
-//             <p className="opacity-75">Already have an account?</p>
-//             <a
-//               href="/login"
-//               className="text-brand-primary-400 hover:text-brand-primary-300 font-medium"
-//             >
-//               Log in
-//             </a>
-//           </div>
-//         </div>
-//       </div>
-//     </div>
-//   );
-// }
-
-// // TODO: Replace environment variables from `root.tsx`
-// createRoot(document.getElementById("root")!).render(
-//   <>
-//     <StrictMode>
-//       <BrowserRouter>
-      
-//         <SignUpScreen />
-//       </BrowserRouter>
-//     </StrictMode>
-//   </>,
-// );

frontend/apps/editor2d/tsconfig.app.json

@@ -28,12 +28,6 @@
     "src"
   ],
   "references": [
-    {
-      "path": "../../libs/components/toaster/tsconfig.lib.json"
-    },
-    {
-      "path": "../../libs/components/input/tsconfig.lib.json"
-    },
     {
       "path": "../../libs/components/settings-modal/tsconfig.lib.json"
     },
@@ -45,6 +39,9 @@
     },
     {
       "path": "../../libs/components/demo-modal/tsconfig.lib.json"
+    },
+    {
+      "path": "../../libs/api/tsconfig.lib.json"
     }
   ]
 }

frontend/apps/editor2d/tsconfig.json

@@ -1,12 +1,6 @@
 {
   "files": [],
   "references": [
-    {
-      "path": "../../libs/components/toaster"
-    },
-    {
-      "path": "../../libs/components/input"
-    },
     {
       "path": "../../libs/components/settings-modal"
     },
@@ -19,6 +13,9 @@
     {
       "path": "../../libs/components/demo-modal"
     },
+    {
+      "path": "../../libs/api"
+    },
     {
       "path": "./tsconfig.app.json"
     },

frontend/libs/api/src/lib/CommentsApi.ts

@@ -1,91 +1,91 @@
-import { ApiManager, ApiResponse } from "../apis/ApiManager";
+// import { ApiManager, ApiResponse } from "../apis/ApiManager";
 
-export class CommentsApi extends ApiManager {
-  public CreateComment({
-    commentMarkdown,
-    entityToken,
-    entityType,
-    uuidIdempotencyToken,
-  }: {
-    commentMarkdown: string;
-    entityToken: string;
-    entityType: string;
-    uuidIdempotencyToken: string;
-  }): Promise<ApiResponse<string>> {
-    const endpoint = `${this.ApiTargets.BaseApi}/v1/comments/new`;
+// export class CommentsApi extends ApiManager {
+//   public CreateComment({
+//     commentMarkdown,
+//     entityToken,
+//     entityType,
+//     uuidIdempotencyToken,
+//   }: {
+//     commentMarkdown: string;
+//     entityToken: string;
+//     entityType: string;
+//     uuidIdempotencyToken: string;
+//   }): Promise<ApiResponse<string>> {
+//     const endpoint = `${this.ApiTargets.BaseApi}/v1/comments/new`;
 
-    const body = {
-      comment_markdown: commentMarkdown,
-      entity_token: entityToken,
-      entity_type: entityType,
-      uuid_idempotency_token: uuidIdempotencyToken,
-    };
+//     const body = {
+//       comment_markdown: commentMarkdown,
+//       entity_token: entityToken,
+//       entity_type: entityType,
+//       uuid_idempotency_token: uuidIdempotencyToken,
+//     };
 
-    return this.post<
-      {
-        comment_markdown: string;
-        entity_token: string;
-        entity_type: string;
-        uuid_idempotency_token: string;
-      },
-      {
-        success?: boolean;
-        comment_token?: string;
-        BadInput?: string;
-      }
-    >({ endpoint, body })
-      .then((response) => ({
-        success: response.success ?? false,
-        data: response.comment_token,
-        errorMessage: response.BadInput,
-      }))
-      .catch((err) => {
-        return { success: false, errorMessage: err.message };
-      });
-  }
+//     return this.post<
+//       {
+//         comment_markdown: string;
+//         entity_token: string;
+//         entity_type: string;
+//         uuid_idempotency_token: string;
+//       },
+//       {
+//         success?: boolean;
+//         comment_token?: string;
+//         BadInput?: string;
+//       }
+//     >({ endpoint, body })
+//       .then((response) => ({
+//         success: response.success ?? false,
+//         data: response.comment_token,
+//         errorMessage: response.BadInput,
+//       }))
+//       .catch((err) => {
+//         return { success: false, errorMessage: err.message };
+//       });
+//   }
 
-  public DeleteComment({
-    commentToken,
-  }: {
-    commentToken: string;
-  }): Promise<ApiResponse<undefined>> {
-    const endpoint = `${this.ApiTargets.BaseApi}/v1/comments/delete/${commentToken}`;
+//   public DeleteComment({
+//     commentToken,
+//   }: {
+//     commentToken: string;
+//   }): Promise<ApiResponse<undefined>> {
+//     const endpoint = `${this.ApiTargets.BaseApi}/v1/comments/delete/${commentToken}`;
 
-    return this.post<
-      { as_mod: boolean },
-      {
-        success?: boolean;
-        BadInput?: string;
-      }
-    >({ endpoint, body: { as_mod: true } })
-      .then((response) => ({
-        success: response.success ?? false,
-        errorMessage: response.BadInput,
-      }))
-      .catch((err) => {
-        return { success: false, errorMessage: err.message };
-      });
-  }
+//     return this.post<
+//       { as_mod: boolean },
+//       {
+//         success?: boolean;
+//         BadInput?: string;
+//       }
+//     >({ endpoint, body: { as_mod: true } })
+//       .then((response) => ({
+//         success: response.success ?? false,
+//         errorMessage: response.BadInput,
+//       }))
+//       .catch((err) => {
+//         return { success: false, errorMessage: err.message };
+//       });
+//   }
 
-  public ListCommentsByEntity({
-    entityType,
-    entityToken,
-  }: {
-    entityType: string;
-    entityToken: string;
-  }): Promise<ApiResponse<string[]>> {
-    const endpoint = `${this.ApiTargets.BaseApi}/v1/comments/list/${entityType}/${entityToken}`;
+//   public ListCommentsByEntity({
+//     entityType,
+//     entityToken,
+//   }: {
+//     entityType: string;
+//     entityToken: string;
+//   }): Promise<ApiResponse<string[]>> {
+//     const endpoint = `${this.ApiTargets.BaseApi}/v1/comments/list/${entityType}/${entityToken}`;
 
-    return this.get<{
-      success: boolean;
-      comments: string[];
-    }>({ endpoint })
-      .then((response) => ({
-        success: true,
-        data: response.comments,
-      }))
-      .catch((err) => {
-        return { success: false, errorMessage: err.message };
-      });
-  }
-}
+//     return this.get<{
+//       success: boolean;
+//       comments: string[];
+//     }>({ endpoint })
+//       .then((response) => ({
+//         success: true,
+//         data: response.comments,
+//       }))
+//       .catch((err) => {
+//         return { success: false, errorMessage: err.message };
+//       });
+//   }
+// }

frontend/libs/api/src/lib/FeaturedItemsApi.ts

@@ -1,96 +1,96 @@
-import { ApiManager, ApiResponse } from "../apis/ApiManager";
+// import { ApiManager, ApiResponse } from "../apis/ApiManager";
 
-export class FeaturedItemsApi extends ApiManager {
-  public CreateFeaturedItem({
-    entityToken,
-    entityType,
-  }: {
-    entityToken: string;
-    entityType: string;
-  }): Promise<ApiResponse<undefined>> {
-    const endpoint = `${this.ApiTargets.BaseApi}/v1/featured_item/create`;
+// export class FeaturedItemsApi extends ApiManager {
+//   public CreateFeaturedItem({
+//     entityToken,
+//     entityType,
+//   }: {
+//     entityToken: string;
+//     entityType: string;
+//   }): Promise<ApiResponse<undefined>> {
+//     const endpoint = `${this.ApiTargets.BaseApi}/v1/featured_item/create`;
 
-    const body = {
-      entity_token: entityToken,
-      entity_type: entityType,
-    };
+//     const body = {
+//       entity_token: entityToken,
+//       entity_type: entityType,
+//     };
 
-    return this.post<
-      {
-        entity_token: string;
-        entity_type: string;
-      },
-      {
-        success?: boolean;
-        BadInput?: string;
-      }
-    >({ endpoint, body })
-      .then((response) => ({
-        success: response.success ?? false,
-        errorMessage: response.BadInput,
-      }))
-      .catch((err) => {
-        return { success: false, errorMessage: err.message };
-      });
-  }
+//     return this.post<
+//       {
+//         entity_token: string;
+//         entity_type: string;
+//       },
+//       {
+//         success?: boolean;
+//         BadInput?: string;
+//       }
+//     >({ endpoint, body })
+//       .then((response) => ({
+//         success: response.success ?? false,
+//         errorMessage: response.BadInput,
+//       }))
+//       .catch((err) => {
+//         return { success: false, errorMessage: err.message };
+//       });
+//   }
 
-  public DeleteFeaturedItem({
-    entityToken,
-    entityType,
-  }: {
-    entityToken: string;
-    entityType: string;
-  }): Promise<ApiResponse<undefined>> {
-    const endpoint = `${this.ApiTargets.BaseApi}/v1/featured_item/delete`;
+//   public DeleteFeaturedItem({
+//     entityToken,
+//     entityType,
+//   }: {
+//     entityToken: string;
+//     entityType: string;
+//   }): Promise<ApiResponse<undefined>> {
+//     const endpoint = `${this.ApiTargets.BaseApi}/v1/featured_item/delete`;
 
-    const body = {
-      entity_token: entityToken,
-      entity_type: entityType,
-    };
+//     const body = {
+//       entity_token: entityToken,
+//       entity_type: entityType,
+//     };
 
-    return this.delete<
-      {
-        entity_token: string;
-        entity_type: string;
-      },
-      {
-        success?: boolean;
-        BadInput?: string;
-      }
-    >({ endpoint, body })
-      .then((response) => ({
-        success: response.success ?? false,
-        errorMessage: response.BadInput,
-      }))
-      .catch((err) => {
-        return { success: false, errorMessage: err.message };
-      });
-  }
+//     return this.delete<
+//       {
+//         entity_token: string;
+//         entity_type: string;
+//       },
+//       {
+//         success?: boolean;
+//         BadInput?: string;
+//       }
+//     >({ endpoint, body })
+//       .then((response) => ({
+//         success: response.success ?? false,
+//         errorMessage: response.BadInput,
+//       }))
+//       .catch((err) => {
+//         return { success: false, errorMessage: err.message };
+//       });
+//   }
 
-  public CheckFeaturedItem({
-    entityType,
-    entityToken,
-  }: {
-    entityType: string;
-    entityToken: string;
-  }): Promise<ApiResponse<boolean>> {
-    const endpoint = `${this.ApiTargets.BaseApi}/v1/featured_item/is_featured/${entityType}/${entityToken}`;
+//   public CheckFeaturedItem({
+//     entityType,
+//     entityToken,
+//   }: {
+//     entityType: string;
+//     entityToken: string;
+//   }): Promise<ApiResponse<boolean>> {
+//     const endpoint = `${this.ApiTargets.BaseApi}/v1/featured_item/is_featured/${entityType}/${entityToken}`;
 
-    return this.post<
-      undefined,
-      {
-        success?: boolean;
-        is_featured?: boolean;
-        BadInput?: string;
-      }
-    >({ endpoint })
-      .then((response) => ({
-        success: response.success ?? false,
-        data: response.is_featured,
-        errorMessage: response.BadInput,
-      }))
-      .catch((err) => {
-        return { success: false, errorMessage: err.message };
-      });
-  }
-}
+//     return this.post<
+//       undefined,
+//       {
+//         success?: boolean;
+//         is_featured?: boolean;
+//         BadInput?: string;
+//       }
+//     >({ endpoint })
+//       .then((response) => ({
+//         success: response.success ?? false,
+//         data: response.is_featured,
+//         errorMessage: response.BadInput,
+//       }))
+//       .catch((err) => {
+//         return { success: false, errorMessage: err.message };
+//       });
+//   }
+// }

frontend/libs/api/src/lib/ModerationApi.ts

@@ -1,42 +1,42 @@
-import { ApiManager, ApiResponse } from "../apis/ApiManager";
+// import { ApiManager, ApiResponse } from "../apis/ApiManager";
 
-export class ModerationApi extends ApiManager {
-  public async UpdateFeatureFlagsByToken({
-    usernameOrToken,
-    flags,
-  }: {
-    usernameOrToken: string;
-    flags: string[];
-  }): Promise<
-    ApiResponse<{
-      inference_job_token?: string;
-      inference_job_token_type?: string;
-    }>
-  > {
-    const endpoint = `${this.ApiTargets.BaseApi}/v1/moderation/user_feature_flags/${usernameOrToken}`;
+// export class ModerationApi extends ApiManager {
+//   public async UpdateFeatureFlagsByToken({
+//     usernameOrToken,
+//     flags,
+//   }: {
+//     usernameOrToken: string;
+//     flags: string[];
+//   }): Promise<
+//     ApiResponse<{
+//       inference_job_token?: string;
+//       inference_job_token_type?: string;
+//     }>
+//   > {
+//     const endpoint = `${this.ApiTargets.BaseApi}/v1/moderation/user_feature_flags/${usernameOrToken}`;
 
-    const body = {
-      action: {
-        AddFlags: {
-          flags,
-        },
-      },
-    };
+//     const body = {
+//       action: {
+//         AddFlags: {
+//           flags,
+//         },
+//       },
+//     };
 
-    return this.post<
-      { action: { AddFlags: { flags: string[] } } },
-      { success?: boolean; BadInput?: string }
-    >({
-      endpoint,
-      body: body,
-    })
-      .then((response) => ({
-        success: response.success ?? false,
-        errorMessage: response.BadInput,
-      }))
-      .catch((err) => ({
-        success: false,
-        errorMessage: err.message,
-      }));
-  }
-}
+//     return this.post<
+//       { action: { AddFlags: { flags: string[] } } },
+//       { success?: boolean; BadInput?: string }
+//     >({
+//       endpoint,
+//       body: body,
+//     })
+//       .then((response) => ({
+//         success: response.success ?? false,
+//         errorMessage: response.BadInput,
+//       }))
+//       .catch((err) => ({
+//         success: false,
+//         errorMessage: err.message,
+//       }));
+//   }
+// }

frontend/libs/api/src/lib/UsersApi.ts

@@ -62,6 +62,7 @@ export class UsersApi extends ApiManager {
     usernameOrEmail: string;
     password: string;
   }): Promise<ApiResponse<{ signedSession?: string }>> {
+    console.log("Logging in with usernameOrEmail:", usernameOrEmail);
     const endpoint = `${this.ApiTargets.BaseApi}/v1/login`;
     const body = {
       username_or_email: usernameOrEmail,

package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "@tauri-apps/cli": "^2.5.0"
+  }
+}