@rimori/client 1.4.0 → 1.4.3

package/src/plugin/RimoriClient.ts

@@ -1,23 +1,30 @@
-import { PostgrestQueryBuilder } from "@supabase/postgrest-js";
-import { SupabaseClient } from "@supabase/supabase-js";
-import { GenericSchema } from "@supabase/supabase-js/dist/module/lib/types";
-import { generateText, Message, OnLLMResponse, streamChatGPT } from "../core/controller/AIController";
-import { generateObject, ObjectRequest } from "../core/controller/ObjectController";
-import { SettingsController, UserInfo } from "../core/controller/SettingsController";
-import { SharedContent, SharedContentController, SharedContentFilter, SharedContentObjectRequest } from "../core/controller/SharedContentController";
-import { getSTTResponse, getTTSResponse } from "../core/controller/VoiceController";
-import { ExerciseController, CreateExerciseParams } from "../core/controller/ExerciseController";
-import { EventBus, EventBusMessage, EventHandler, EventPayload } from "../fromRimori/EventBus";
-import { ActivePlugin, MainPanelAction, Plugin, Tool } from "../fromRimori/PluginTypes";
-import { AccomplishmentHandler, AccomplishmentPayload } from "./AccomplishmentHandler";
-import { PluginController, RimoriInfo } from "./PluginController";
-import { ClientServerOptions } from "@supabase/postgrest-js/dist/cjs/types/common/common";
-
+import { PostgrestQueryBuilder } from '@supabase/postgrest-js';
+import { SupabaseClient } from '@supabase/supabase-js';
+import { GenericSchema } from '@supabase/supabase-js/dist/module/lib/types';
+import { generateText, Message, OnLLMResponse, streamChatGPT } from '../core/controller/AIController';
+import { generateObject, ObjectRequest } from '../core/controller/ObjectController';
+import { SettingsController, UserInfo } from '../core/controller/SettingsController';
+import {
+  SharedContent,
+  SharedContentController,
+  SharedContentFilter,
+  SharedContentObjectRequest,
+} from '../core/controller/SharedContentController';
+import { getSTTResponse, getTTSResponse } from '../core/controller/VoiceController';
+import { ExerciseController, CreateExerciseParams } from '../core/controller/ExerciseController';
+import { EventBus, EventBusMessage, EventHandler, EventPayload } from '../fromRimori/EventBus';
+import { ActivePlugin, MainPanelAction, Plugin, Tool } from '../fromRimori/PluginTypes';
+import { AccomplishmentHandler, AccomplishmentPayload } from './AccomplishmentHandler';
+import { PluginController, RimoriInfo } from './PluginController';
 
 interface Db {
   from: {
-    <TableName extends string & keyof GenericSchema['Tables'], Table extends GenericSchema['Tables'][TableName]>(relation: TableName): PostgrestQueryBuilder<ClientServerOptions, GenericSchema, Table, TableName>;
-    <ViewName extends string & keyof GenericSchema['Views'], View extends GenericSchema['Views'][ViewName]>(relation: ViewName): PostgrestQueryBuilder<ClientServerOptions, GenericSchema, View, ViewName>;
+    <TableName extends string & keyof GenericSchema['Tables'], Table extends GenericSchema['Tables'][TableName]>(
+      relation: TableName,
+    ): PostgrestQueryBuilder<GenericSchema, Table, TableName>;
+    <ViewName extends string & keyof GenericSchema['Views'], View extends GenericSchema['Views'][ViewName]>(
+      relation: ViewName,
+    ): PostgrestQueryBuilder<GenericSchema, View, ViewName>;
   };
   // storage: SupabaseClient["storage"];
 
@@ -42,7 +49,7 @@ interface PluginInterface {
    * Get the settings for the plugin. T can be any type of settings, UserSettings or SystemSettings.
    * @param defaultSettings The default settings to use if no settings are found.
    * @param genericSettings The type of settings to get.
-   * @returns The settings for the plugin. 
+   * @returns The settings for the plugin.
    */
   getSettings: <T extends object>(defaultSettings: T) => Promise<T>;
   /**
@@ -55,15 +62,15 @@ interface PluginInterface {
     /**
      * All installed plugins.
      */
-    installedPlugins: Plugin[],
+    installedPlugins: Plugin[];
     /**
      * The plugin that is loaded in the main panel.
      */
-    mainPanelPlugin?: ActivePlugin,
+    mainPanelPlugin?: ActivePlugin;
     /**
      * The plugin that is loaded in the side panel.
      */
-    sidePanelPlugin?: ActivePlugin,
+    sidePanelPlugin?: ActivePlugin;
   };
   getUserInfo: () => UserInfo;
 }
@@ -84,7 +91,7 @@ export class RimoriClient {
     this.rimoriInfo = info;
     this.superbase = supabase;
     this.pluginController = pluginController;
-    this.settingsController = new SettingsController(supabase, info.pluginId);
+    this.settingsController = new SettingsController(supabase, info.pluginId, info.guild);
     this.sharedContentController = new SharedContentController(this.superbase, this);
     this.exerciseController = new ExerciseController(supabase, pluginController);
     this.accomplishmentHandler = new AccomplishmentHandler(info.pluginId);
@@ -98,7 +105,7 @@ export class RimoriClient {
       // functions: this.superbase.functions,
       tablePrefix: info.tablePrefix,
       getTableName: this.getTableName,
-    }
+    };
     this.plugin = {
       pluginId: info.pluginId,
       setSettings: async (settings: any) => {
@@ -115,14 +122,14 @@ export class RimoriClient {
           installedPlugins: this.rimoriInfo.installedPlugins,
           mainPanelPlugin: this.rimoriInfo.mainPanelPlugin,
           sidePanelPlugin: this.rimoriInfo.sidePanelPlugin,
-        }
-      }
-    }
+        };
+      },
+    };
   }
 
   public event = {
     /**
-     * Emit an event to Rimori or a plugin. 
+     * Emit an event to Rimori or a plugin.
      * The topic schema is:
      * {pluginId}.{eventId}
      * Check out the event bus documentation for more information.
@@ -153,7 +160,10 @@ export class RimoriClient {
      */
     on: <T = EventPayload>(topic: string | string[], callback: EventHandler<T>) => {
       const topics = Array.isArray(topic) ? topic : [topic];
-      return EventBus.on<T>(topics.map(t => this.pluginController.getGlobalEventTopic(t)), callback);
+      return EventBus.on<T>(
+        topics.map((t) => this.pluginController.getGlobalEventTopic(t)),
+        callback,
+      );
     },
     /**
      * Subscribe to an event once.
@@ -168,9 +178,16 @@ export class RimoriClient {
      * @param topic The topic to respond to.
      * @param data The data to respond with.
      */
-    respond: <T = EventPayload>(topic: string | string[], data: EventPayload | ((data: EventBusMessage<T>) => EventPayload | Promise<EventPayload>)) => {
+    respond: <T = EventPayload>(
+      topic: string | string[],
+      data: EventPayload | ((data: EventBusMessage<T>) => EventPayload | Promise<EventPayload>),
+    ) => {
       const topics = Array.isArray(topic) ? topic : [topic];
-      EventBus.respond(this.plugin.pluginId, topics.map(t => this.pluginController.getGlobalEventTopic(t)), data);
+      EventBus.respond(
+        this.plugin.pluginId,
+        topics.map((t) => this.pluginController.getGlobalEventTopic(t)),
+        data,
+      );
     },
     /**
      * Emit an accomplishment.
@@ -184,7 +201,10 @@ export class RimoriClient {
      * @param accomplishmentTopic The topic to subscribe to.
      * @param callback The callback to call when the accomplishment is emitted.
      */
-    onAccomplishment: (accomplishmentTopic: string, callback: (payload: EventBusMessage<AccomplishmentPayload>) => void) => {
+    onAccomplishment: (
+      accomplishmentTopic: string,
+      callback: (payload: EventBusMessage<AccomplishmentPayload>) => void,
+    ) => {
       this.accomplishmentHandler.subscribe(accomplishmentTopic, callback);
     },
     /**
@@ -194,21 +214,21 @@ export class RimoriClient {
      * @param text Optional text to be used for the action like for example text that the translator would look up.
      */
     emitSidebarAction: (pluginId: string, actionKey: string, text?: string) => {
-      this.event.emit("global.sidebar.triggerAction", { plugin_id: pluginId, action_key: actionKey, text });
+      this.event.emit('global.sidebar.triggerAction', { plugin_id: pluginId, action_key: actionKey, text });
     },
 
     onMainPanelAction: (callback: (data: MainPanelAction) => void) => {
       // this needs to be a emit and on because the main panel action is triggered by the user and not by the plugin
-      this.event.emit("action.requestMain")
-      this.event.on<MainPanelAction>("action.requestMain", ({ data }) => callback(data));
-    }
-  }
+      this.event.emit('action.requestMain');
+      this.event.on<MainPanelAction>('action.requestMain', ({ data }) => callback(data));
+    },
+  };
 
   public navigation = {
     toDashboard: () => {
-      this.event.emit("global.navigation.triggerToDashboard");
-    }
-  }
+      this.event.emit('global.navigation.triggerToDashboard');
+    },
+  };
 
   /**
    * Get a query parameter value that was passed via MessageChannel
@@ -229,36 +249,37 @@ export class RimoriClient {
 
   private from<
     TableName extends string & keyof GenericSchema['Tables'],
-    Table extends GenericSchema['Tables'][TableName]
-  >(relation: TableName): PostgrestQueryBuilder<ClientServerOptions, GenericSchema, Table, TableName>
-  private from<
-    ViewName extends string & keyof GenericSchema['Views'],
-    View extends GenericSchema['Views'][ViewName]
-  >(relation: ViewName): PostgrestQueryBuilder<ClientServerOptions, GenericSchema, View, ViewName>
-  private from(relation: string): PostgrestQueryBuilder<ClientServerOptions, GenericSchema, any, any> {
+    Table extends GenericSchema['Tables'][TableName],
+  >(relation: TableName): PostgrestQueryBuilder<GenericSchema, Table, TableName>;
+  private from<ViewName extends string & keyof GenericSchema['Views'], View extends GenericSchema['Views'][ViewName]>(
+    relation: ViewName,
+  ): PostgrestQueryBuilder<GenericSchema, View, ViewName>;
+  private from(relation: string): PostgrestQueryBuilder<GenericSchema, any, any> {
     return this.superbase.from(this.getTableName(relation));
   }
 
   private getTableName(table: string) {
     if (/[A-Z]/.test(table)) {
-      throw new Error("Table name cannot include uppercase letters. Please use snake_case for table names.");
+      throw new Error('Table name cannot include uppercase letters. Please use snake_case for table names.');
     }
-    if (table.startsWith("global_")) {
-      return table.replace("global_", "");
+    if (table.startsWith('global_')) {
+      return table.replace('global_', '');
     }
-    return this.db.tablePrefix + "_" + table;
+    return this.db.tablePrefix + '_' + table;
   }
 
   public ai = {
     getText: async (messages: Message[], tools?: Tool[]): Promise<string> => {
       const token = await this.pluginController.getToken();
-      return generateText(this.pluginController.getBackendUrl(), messages, tools || [], token).then(({ messages }) => messages[0].content[0].text);
+      return generateText(this.pluginController.getBackendUrl(), messages, tools || [], token).then(
+        ({ messages }) => messages[0].content[0].text,
+      );
     },
     getSteamedText: async (messages: Message[], onMessage: OnLLMResponse, tools?: Tool[]) => {
       const token = await this.pluginController.getToken();
       streamChatGPT(this.pluginController.getBackendUrl(), messages, tools || [], onMessage, token);
     },
-    getVoice: async (text: string, voice = "alloy", speed = 1, language?: string): Promise<Blob> => {
+    getVoice: async (text: string, voice = 'alloy', speed = 1, language?: string): Promise<Blob> => {
       const token = await this.pluginController.getToken();
       return getTTSResponse(this.pluginController.getBackendUrl(), { input: text, voice, speed, language }, token);
     },
@@ -271,7 +292,7 @@ export class RimoriClient {
       return generateObject(this.pluginController.getBackendUrl(), request, token);
     },
     // getSteamedObject: this.generateObjectStream,
-  }
+  };
 
   public runtime = {
     fetchBackend: async (url: string, options: RequestInit) => {
@@ -280,11 +301,11 @@ export class RimoriClient {
         ...options,
         headers: {
           ...options.headers,
-          'Authorization': `Bearer ${token}`
-        }
+          Authorization: `Bearer ${token}`,
+        },
       });
-    }
-  }
+    },
+  };
 
   public community = {
     /**
@@ -309,7 +330,11 @@ export class RimoriClient {
        * @param limit The optional limit for the number of results.
        * @returns The list of shared content items.
        */
-      getList: async <T = any>(contentType: string, filter?: SharedContentFilter, limit?: number): Promise<SharedContent<T>[]> => {
+      getList: async <T = any>(
+        contentType: string,
+        filter?: SharedContentFilter,
+        limit?: number,
+      ): Promise<SharedContent<T>[]> => {
         return await this.sharedContentController.getSharedContentList(contentType, filter, limit);
       },
       /**
@@ -330,7 +355,12 @@ export class RimoriClient {
         filter?: SharedContentFilter,
         options?: { privateTopic?: boolean; skipDbSave?: boolean; alwaysGenerateNew?: boolean; excludeIds?: string[] },
       ): Promise<SharedContent<T>> => {
-        return await this.sharedContentController.getNewSharedContent(contentType, generatorInstructions, filter, options);
+        return await this.sharedContentController.getNewSharedContent(
+          contentType,
+          generatorInstructions,
+          filter,
+          options,
+        );
       },
       /**
        * Create a new shared content item.
@@ -350,10 +380,10 @@ export class RimoriClient {
         return await this.sharedContentController.updateSharedContent(id, content);
       },
       /**
-        * Complete a shared content item.
-        * @param contentType The type of shared content to complete. E.g. assignments, exercises, etc.
-        * @param assignmentId The id of the shared content item to complete.
-        */
+       * Complete a shared content item.
+       * @param contentType The type of shared content to complete. E.g. assignments, exercises, etc.
+       * @param assignmentId The id of the shared content item to complete.
+       */
       complete: async (contentType: string, assignmentId: string) => {
         return await this.sharedContentController.completeSharedContent(contentType, assignmentId);
       },
@@ -363,11 +393,11 @@ export class RimoriClient {
         * Useful for marking content as completed, ongoing, hidden, liked, disliked, or bookmarked.
         */
       updateState: async (params: {
-        contentType: string
-        id: string
-        state?: 'completed' | 'ongoing' | 'hidden'
-        reaction?: 'liked' | 'disliked' | null
-        bookmarked?: boolean
+        contentType: string;
+        id: string;
+        state?: 'completed' | 'ongoing' | 'hidden';
+        reaction?: 'liked' | 'disliked' | null;
+        bookmarked?: boolean;
       }): Promise<void> => {
         return await this.sharedContentController.updateSharedContentState(params);
       },
@@ -378,9 +408,9 @@ export class RimoriClient {
        */
       remove: async (id: string): Promise<SharedContent<any>> => {
         return await this.sharedContentController.removeSharedContent(id);
-      }
-    }
-  }
+      },
+    },
+  };
 
   public exercise = {
     /**
@@ -409,5 +439,5 @@ export class RimoriClient {
     delete: async (id: string) => {
       return this.exerciseController.deleteExercise(id);
     },
-  }
+  };
 }

package/src/plugin/StandaloneClient.ts

@@ -1,11 +1,11 @@
-import { createClient, SupabaseClient } from "@supabase/supabase-js";
-import { EventBus } from "../fromRimori/EventBus";
-import { DEFAULT_ANON_KEY, DEFAULT_ENDPOINT } from "../utils/endpoint";
+import { createClient, SupabaseClient } from '@supabase/supabase-js';
+import { EventBus } from '../fromRimori/EventBus';
+import { DEFAULT_ANON_KEY, DEFAULT_ENDPOINT } from '../utils/endpoint';
 
 export interface StandaloneConfig {
-  url: string,
-  key: string,
-  backendUrl?: string
+  url: string;
+  key: string;
+  backendUrl?: string;
 }
 
 export class StandaloneClient {
@@ -20,9 +20,11 @@ export class StandaloneClient {
 
   public static async getInstance(): Promise<StandaloneClient> {
     if (!StandaloneClient.instance) {
-      const config = await fetch("https://app.rimori.se/config.json").then(res => res.json()).catch(err => {
-        console.warn("Error fetching config.json, using default values", err);
-      });
+      const config = await fetch('https://app.rimori.se/config.json')
+        .then((res) => res.json())
+        .catch((err) => {
+          console.warn('Error fetching config.json, using default values', err);
+        });
       StandaloneClient.instance = new StandaloneClient({
         url: config?.SUPABASE_URL || DEFAULT_ENDPOINT,
         key: config?.SUPABASE_ANON_KEY || DEFAULT_ANON_KEY,
@@ -44,33 +46,54 @@ export class StandaloneClient {
   public async login(email: string, password: string) {
     const { error } = await this.supabase.auth.signInWithPassword({ email, password });
     if (error) {
-      console.error("Login failed:", error);
+      console.error('Login failed:', error);
       return false;
     }
-    console.log("Successfully logged in");
+    console.log('Successfully logged in');
     return true;
   }
 
   public static async initListeners(pluginId: string) {
-    console.warn("The plugin seams to not be running inside the Rimori platform. Switching to development standalone mode.");
+    console.warn(
+      'The plugin seams to not be running inside the Rimori platform. Switching to development standalone mode.',
+    );
     // console.log("event that needs to be handled", event);
     const { supabase, config } = await StandaloneClient.getInstance();
 
     // EventBus.on("*", async (event) => {
-    EventBus.respond("standalone", "global.supabase.requestAccess", async () => {
+    EventBus.respond('standalone', 'global.supabase.requestAccess', async () => {
       const session = await supabase.auth.getSession();
-      console.log("session", session);
-      
+      console.log('session', session);
+
       // Call the NestJS backend endpoint instead of the Supabase edge function
+      // get current guild id if any
+      let guildId: string | null = null;
+      try {
+        const {
+          data: { user },
+        } = await supabase.auth.getUser();
+        if (user) {
+          const { data: profile } = await supabase
+            .from('profiles')
+            .select('current_guild_id')
+            .eq('user_id', user.id)
+            .maybeSingle();
+          guildId = (profile as { current_guild_id?: string | null } | null)?.current_guild_id || null;
+        }
+      } catch (_) {
+        guildId = null;
+      }
+
       const response = await fetch(`${config.backendUrl}/plugin/token`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          'Authorization': `Bearer ${session.data.session?.access_token}`
+          Authorization: `Bearer ${session.data.session?.access_token}`,
         },
         body: JSON.stringify({
-          pluginId: pluginId
-        })
+          pluginId: pluginId,
+          guildId: guildId,
+        }),
       });
 
       if (!response.ok) {
@@ -79,7 +102,7 @@ export class StandaloneClient {
       }
 
       const data = await response.json();
-      
+
       return {
         token: data.token,
         pluginId: pluginId,
@@ -88,11 +111,15 @@ export class StandaloneClient {
         backendUrl: config.backendUrl,
         tablePrefix: pluginId,
         expiration: new Date(Date.now() + 1000 * 60 * 60 * 1.5), // 1.5 hours
-      }
+      };
     });
 
-    EventBus.on("*", async (event) => {
-      console.log("[standalone] would send event to parent", event);
-    }, ["standalone"]);
+    EventBus.on(
+      '*',
+      async (event) => {
+        console.log('[standalone] would send event to parent', event);
+      },
+      ['standalone'],
+    );
   }
-}
+}

package/src/plugin/ThemeSetter.ts

@@ -1,10 +1,10 @@
 export function setTheme(theme?: string | null) {
-  document.documentElement.classList.add("dark:text-gray-200");
+  document.documentElement.classList.add('dark:text-gray-200');
 
   if (isDarkTheme(theme)) {
-    document.documentElement.setAttribute("data-theme", "dark");
-    document.documentElement.classList.add('dark', "dark:bg-gray-950");
-    document.documentElement.style.background = "hsl(var(--background))";
+    document.documentElement.setAttribute('data-theme', 'dark');
+    document.documentElement.classList.add('dark', 'dark:bg-gray-950');
+    document.documentElement.style.background = 'hsl(var(--background))';
   }
 }
 
@@ -20,4 +20,4 @@ export function isDarkTheme(theme?: string | null): boolean {
   }
 
   return theme === 'dark';
-}
+}

package/src/providers/PluginProvider.tsx

@@ -10,7 +10,7 @@ interface PluginProviderProps {
   pluginId: string;
   settings?: {
     disableContextMenu?: boolean;
-  }
+  };
 }
 
 const PluginContext = createContext<RimoriClient | null>(null);
@@ -20,29 +20,29 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
   const [standaloneClient, setStandaloneClient] = useState<StandaloneClient | boolean>(false);
   const [applicationMode, setApplicationMode] = useState<string | null>(null);
   const [theme, setTheme] = useState<string | null>(null);
-  
-  const isSidebar = applicationMode === "sidebar";
-  const isSettings = applicationMode === "settings";
+
+  const isSidebar = applicationMode === 'sidebar';
+  const isSettings = applicationMode === 'settings';
 
   useEffect(() => {
     initEventBus(pluginId);
-    
+
     // Check if we're in an iframe context - if not, we're standalone
     const standaloneDetected = window === window.parent;
-    
+
     if (standaloneDetected && !standaloneClient) {
-      StandaloneClient.getInstance().then(client => {
+      StandaloneClient.getInstance().then((client) => {
         client.needsLogin().then((needLogin) => setStandaloneClient(needLogin ? client : true));
       });
     }
 
     if ((!standaloneDetected && !plugin) || (standaloneDetected && standaloneClient === true)) {
-      PluginController.getInstance(pluginId, standaloneDetected).then(client => {
+      PluginController.getInstance(pluginId, standaloneDetected).then((client) => {
         setPlugin(client);
         // Get applicationMode and theme from MessageChannel query params
         if (!standaloneDetected) {
-          const mode = client.getQueryParam("applicationMode");
-          const themeParam = client.getQueryParam("rm_theme");
+          const mode = client.getQueryParam('applicationMode');
+          const themeParam = client.getQueryParam('rm_theme');
           setApplicationMode(mode);
           setTheme(themeParam);
         }
@@ -81,13 +81,17 @@ export const PluginProvider: React.FC<PluginProviderProps> = ({ children, plugin
   }, [plugin]);
 
   if (standaloneClient instanceof StandaloneClient) {
-    return <StandaloneAuth onLogin={async (email, password) => {
-      if (await standaloneClient.login(email, password)) setStandaloneClient(true);
-    }} />
+    return (
+      <StandaloneAuth
+        onLogin={async (email, password) => {
+          if (await standaloneClient.login(email, password)) setStandaloneClient(true);
+        }}
+      />
+    );
   }
 
   if (!plugin) {
-    return ""
+    return '';
   }
 
   return (
@@ -114,7 +118,7 @@ function getUrlParam(name: string) {
     const hashValue = hashParams.get(name);
     if (hashValue) return hashValue;
   }
-  
+
   // Fallback to regular URL search params
   const url = new URL(window.location.href);
   return url.searchParams.get(name);
@@ -122,34 +126,84 @@ function getUrlParam(name: string) {
 
 function initEventBus(pluginId: string) {
   // For now, use URL fallback for EventBus naming - this will be updated once MessageChannel is ready
-  const isSidebar = getUrlParam("applicationMode") === "sidebar";
-  EventBusHandler.getInstance("Plugin EventBus " + pluginId + " " + (isSidebar ? "sidebar" : "main"));
+  const isSidebar = getUrlParam('applicationMode') === 'sidebar';
+  EventBusHandler.getInstance('Plugin EventBus ' + pluginId + ' ' + (isSidebar ? 'sidebar' : 'main'));
 }
 
 function StandaloneAuth({ onLogin }: { onLogin: (user: string, password: string) => void }) {
-  const [user, setUser] = useState("");
-  const [password, setPassword] = useState("");
+  const [user, setUser] = useState('');
+  const [password, setPassword] = useState('');
   return (
-    <div style={{
-      position: 'fixed',
-      inset: 0,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    }}>
-      <div style={{ backgroundColor: '#343534', padding: '1rem', borderRadius: '0.5rem', width: '500px', flexDirection: 'column', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+    <div
+      style={{
+        position: 'fixed',
+        inset: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      }}
+    >
+      <div
+        style={{
+          backgroundColor: '#343534',
+          padding: '1rem',
+          borderRadius: '0.5rem',
+          width: '500px',
+          flexDirection: 'column',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
         <p style={{ fontSize: '2rem', fontWeight: 'bold', marginBottom: '1rem', textAlign: 'center' }}>Rimori Login</p>
         <p style={{ marginBottom: '1rem', textAlign: 'center' }}>
-          Please login with your Rimori developer account for this plugin to be able to access the Rimori platform the same it will operate in the Rimori platform.
+          Please login with your Rimori developer account for this plugin to be able to access the Rimori platform the
+          same it will operate in the Rimori platform.
         </p>
         {/* email and password input */}
-        <input style={{ marginBottom: '1rem', width: '100%', padding: '0.5rem', borderRadius: '0.5rem', border: 'none', backgroundColor: '#444444' }} type="email" placeholder="Email" onChange={(e) => setUser(e.target.value)} />
-        <input style={{ marginBottom: '1rem', width: '100%', padding: '0.5rem', borderRadius: '0.5rem', border: 'none', backgroundColor: '#444444' }} type="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} />
-        <button style={{ marginBottom: '1rem', width: '100%', padding: '0.5rem', borderRadius: '0.5rem', border: 'none', backgroundColor: '#928358' }} onClick={() => {
-          onLogin(user, password);
-        }}>Login</button>
+        <input
+          style={{
+            marginBottom: '1rem',
+            width: '100%',
+            padding: '0.5rem',
+            borderRadius: '0.5rem',
+            border: 'none',
+            backgroundColor: '#444444',
+          }}
+          type="email"
+          placeholder="Email"
+          onChange={(e) => setUser(e.target.value)}
+        />
+        <input
+          style={{
+            marginBottom: '1rem',
+            width: '100%',
+            padding: '0.5rem',
+            borderRadius: '0.5rem',
+            border: 'none',
+            backgroundColor: '#444444',
+          }}
+          type="password"
+          placeholder="Password"
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <button
+          style={{
+            marginBottom: '1rem',
+            width: '100%',
+            padding: '0.5rem',
+            borderRadius: '0.5rem',
+            border: 'none',
+            backgroundColor: '#928358',
+          }}
+          onClick={() => {
+            onLogin(user, password);
+          }}
+        >
+          Login
+        </button>
       </div>
     </div>
-  )
-}
+  );
+}