chore: updated page error messages and theme in command palette

apiserver/plane/authentication/views/app/email.py

@@ -111,6 +111,7 @@ class SignInAuthEndpoint(View):
             return HttpResponseRedirect(url)
         except AuthenticationException as e:
             params = {
+                "email": email,
                 "error_code": str(e.error_code),
                 "error_message": str(e.error_message),
             }

web/components/account/auth-forms/sign-in-root.tsx

@@ -48,7 +48,15 @@ export const SignInAuthRoot = observer(() => {
         error_code?.toString() as EAuthenticationErrorCodes,
         error_message?.toString()
       );
-      if (errorhandler) setErrorInfo(errorhandler);
+      if (errorhandler) {
+        if (errorhandler?.type === EErrorAlertType.TOAST_ALERT) {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: errorhandler?.title,
+            message: errorhandler?.message as string,
+          });
+        } else setErrorInfo(errorhandler);
+      }
     }
   }, [error_code, error_message]);
 

web/components/account/auth-forms/sign-up-root.tsx

@@ -52,7 +52,15 @@ export const SignUpAuthRoot: FC = observer(() => {
         error_code?.toString() as EAuthenticationErrorCodes,
         error_message?.toString()
       );
-      if (errorhandler) setErrorInfo(errorhandler);
+      if (errorhandler) {
+        if (errorhandler?.type === EErrorAlertType.TOAST_ALERT) {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: errorhandler?.title,
+            message: errorhandler?.message as string,
+          });
+        } else setErrorInfo(errorhandler);
+      }
     }
   }, [error_code, error_message]);
 

web/components/command-palette/actions/theme-actions.tsx

@@ -2,10 +2,12 @@ import React, { FC, useEffect, useState } from "react";
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
-// icons
 import { Settings } from "lucide-react";
+import { TOAST_TYPE, setToast } from "@plane/ui";
 // constants
 import { THEME_OPTIONS } from "@/constants/themes";
+// hooks
+import { useUserProfile } from "@/hooks/store";
 
 type Props = {
   closePalette: () => void;
@@ -13,20 +15,20 @@ type Props = {
 
 export const CommandPaletteThemeActions: FC<Props> = observer((props) => {
   const { closePalette } = props;
+  const { setTheme } = useTheme();
+  // hooks
+  const { updateUserTheme } = useUserProfile();
   // states
   const [mounted, setMounted] = useState(false);
-  // hooks
-  const { setTheme } = useTheme();
 
-  const updateUserTheme = async (newTheme: string) => {
+  const updateTheme = async (newTheme: string) => {
     setTheme(newTheme);
-
+    return updateUserTheme({ theme: newTheme }).catch(() => {
-    // return updateUserProfile({ theme: newTheme }).catch(() => {
+      setToast({
-    //   setToast({
+        type: TOAST_TYPE.ERROR,
-    //     type: TOAST_TYPE.ERROR,
+        title: "Failed to save user theme settings!",
-    //     title: "Failed to save user theme settings!",
+      });
-    //   });
+    });
-    // });
   };
 
   // useEffect only runs on the client, so now we can safely show the UI
@@ -42,7 +44,7 @@ export const CommandPaletteThemeActions: FC<Props> = observer((props) => {
         <Command.Item
           key={theme.value}
           onSelect={() => {
-            updateUserTheme(theme.value);
+            updateTheme(theme.value);
             closePalette();
           }}
           className="focus:outline-none"

web/helpers/authentication.helper.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from "react";
+
 export enum EPageTypes {
   "PUBLIC" = "PUBLIC",
   "NON_AUTHENTICATED" = "NON_AUTHENTICATED",
@@ -35,11 +37,6 @@ export enum EAuthenticationErrorCodes {
   REQUIRED_EMAIL_PASSWORD_FIRST_NAME = "REQUIRED_EMAIL_PASSWORD_FIRST_NAME",
   REQUIRED_EMAIL_PASSWORD = "REQUIRED_EMAIL_PASSWORD",
   EMAIL_CODE_REQUIRED = "EMAIL_CODE_REQUIRED",
-  // inline local errors
-  INLINE_EMAIL = "INLINE_EMAIL",
-  INLINE_PASSWORD = "INLINE_PASSWORD",
-  INLINE_FIRST_NAME = "INLINE_FIRST_NAME",
-  INLINE_EMAIL_CODE = "INLINE_EMAIL_CODE",
 }
 
 export enum EErrorAlertType {
@@ -51,7 +48,64 @@ export enum EErrorAlertType {
   INLINE_EMAIL_CODE = "INLINE_EMAIL_CODE",
 }
 
-export type TAuthErrorInfo = { type: EErrorAlertType; message: string };
+export type TAuthErrorInfo = { type: EErrorAlertType; title: string; message: ReactNode };
+
+const errorCodeMessages: { [key in EAuthenticationErrorCodes]: { title: string; message: ReactNode } } = {
+  [EAuthenticationErrorCodes.INSTANCE_NOT_CONFIGURED]: {
+    title: `Instance not configured`,
+    message: `Instance not configured. Please contact your administrator.`,
+  },
+  [EAuthenticationErrorCodes.SMTP_NOT_CONFIGURED]: {
+    title: `SMTP not configured`,
+    message: `SMTP not configured. Please contact your administrator.`,
+  },
+  [EAuthenticationErrorCodes.AUTHENTICATION_FAILED]: {
+    title: `Authentication failed.`,
+    message: `Authentication failed. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.INVALID_TOKEN]: { title: `Invalid token.`, message: `Invalid token. Please try again.` },
+  [EAuthenticationErrorCodes.EXPIRED_TOKEN]: { title: `Expired token.`, message: `Expired token. Please try again.` },
+  [EAuthenticationErrorCodes.IMPROPERLY_CONFIGURED]: {
+    title: `Improperly configured.`,
+    message: `Improperly configured. Please contact your administrator.`,
+  },
+  [EAuthenticationErrorCodes.OAUTH_PROVIDER_ERROR]: {
+    title: `OAuth provider error.`,
+    message: `OAuth provider error. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.INVALID_EMAIL]: {
+    title: `Invalid email.`,
+    message: `Invalid email. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.INVALID_PASSWORD]: {
+    title: `Invalid password.`,
+    message: `Invalid password. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.USER_DOES_NOT_EXIST]: {
+    title: `User does not exist.`,
+    message: `User does not exist. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.ADMIN_ALREADY_EXIST]: {
+    title: `Admin already exists.`,
+    message: `Admin already exists. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.USER_ALREADY_EXIST]: {
+    title: `User already exists.`,
+    message: `User already exists. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.REQUIRED_EMAIL_PASSWORD_FIRST_NAME]: {
+    title: `Missing fields.`,
+    message: `Email, password, and first name are required.`,
+  },
+  [EAuthenticationErrorCodes.REQUIRED_EMAIL_PASSWORD]: {
+    title: `Missing fields.`,
+    message: `Email and password are required.`,
+  },
+  [EAuthenticationErrorCodes.EMAIL_CODE_REQUIRED]: {
+    title: `Missing fields.`,
+    message: `Email and code are required.`,
+  },
+};
 
 export const authErrorHandler = (
   errorCode: EAuthenticationErrorCodes,
@@ -67,49 +121,28 @@ export const authErrorHandler = (
     EAuthenticationErrorCodes.OAUTH_PROVIDER_ERROR,
   ];
   const bannerAlertErrorCodes = [
+    EAuthenticationErrorCodes.INVALID_EMAIL,
+    EAuthenticationErrorCodes.INVALID_PASSWORD,
     EAuthenticationErrorCodes.USER_DOES_NOT_EXIST,
     EAuthenticationErrorCodes.ADMIN_ALREADY_EXIST,
     EAuthenticationErrorCodes.USER_ALREADY_EXIST,
+    EAuthenticationErrorCodes.REQUIRED_EMAIL_PASSWORD_FIRST_NAME,
+    EAuthenticationErrorCodes.REQUIRED_EMAIL_PASSWORD,
+    EAuthenticationErrorCodes.EMAIL_CODE_REQUIRED,
   ];
-  const inlineFirstNameErrorCodes = [EAuthenticationErrorCodes.INLINE_FIRST_NAME];
-  const inlineEmailErrorCodes = [EAuthenticationErrorCodes.INLINE_EMAIL];
-  const inlineEmailCodeErrorCodes = [EAuthenticationErrorCodes.INLINE_EMAIL_CODE];
-  const inlinePasswordErrorCodes = [EAuthenticationErrorCodes.INLINE_PASSWORD];
 
   if (toastAlertErrorCodes.includes(errorCode))
     return {
       type: EErrorAlertType.TOAST_ALERT,
-      message: errorMessage || "Something went wrong. Please try again.",
+      title: errorCodeMessages[errorCode]?.title || "Error",
+      message: errorMessage || errorCodeMessages[errorCode]?.message || "Something went wrong. Please try again.",
     };
 
   if (bannerAlertErrorCodes.includes(errorCode))
     return {
       type: EErrorAlertType.BANNER_ALERT,
-      message: errorMessage || "Something went wrong. Please try again.",
+      title: errorCodeMessages[errorCode]?.title || "Error",
-    };
+      message: errorMessage || errorCodeMessages[errorCode]?.message || "Something went wrong. Please try again.",
-
-  if (inlineFirstNameErrorCodes.includes(errorCode))
-    return {
-      type: EErrorAlertType.INLINE_FIRST_NAME,
-      message: errorMessage || "Something went wrong. Please try again.",
-    };
-
-  if (inlineEmailErrorCodes.includes(errorCode))
-    return {
-      type: EErrorAlertType.INLINE_EMAIL,
-      message: errorMessage || "Something went wrong. Please try again.",
-    };
-
-  if (inlinePasswordErrorCodes.includes(errorCode))
-    return {
-      type: EErrorAlertType.INLINE_PASSWORD,
-      message: errorMessage || "Something went wrong. Please try again.",
-    };
-
-  if (inlineEmailCodeErrorCodes.includes(errorCode))
-    return {
-      type: EErrorAlertType.INLINE_EMAIL_CODE,
-      message: errorMessage || "Something went wrong. Please try again.",
     };
 
   return undefined;

web/layouts/settings-layout/profile/sidebar.tsx

@@ -2,8 +2,6 @@ import { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useTheme } from "next-themes";
-import { mutate } from "swr";
 // icons
 import { ChevronLeft, LogOut, MoveLeft, Plus, UserPlus } from "lucide-react";
 // ui
@@ -11,7 +9,7 @@ import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
 // constants
 import { PROFILE_ACTION_LINKS } from "@/constants/profile";
 // hooks
-import { useAppTheme, useUser, useWorkspace } from "@/hooks/store";
+import { useAppTheme, useUser, useUserSettings, useWorkspace } from "@/hooks/store";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
@@ -35,22 +33,19 @@ export const ProfileLayoutSidebar = observer(() => {
   const [isSigningOut, setIsSigningOut] = useState(false);
   // router
   const router = useRouter();
-  // next themes
-  const { setTheme } = useTheme();
   // store hooks
   const { sidebarCollapsed, toggleSidebar } = useAppTheme();
   const { data: currentUser, signOut } = useUser();
-  // const { currentUserSettings } = useUser();
+  const { data: currentUserSettings } = useUserSettings();
   const { workspaces } = useWorkspace();
   const { isMobile } = usePlatformOS();
 
   const workspacesList = Object.values(workspaces ?? {});
 
   // redirect url for normal mode
-  // FIXME:
   const redirectWorkspaceSlug =
-    // currentUserSettings?.workspace?.last_workspace_slug ||
+    currentUserSettings?.workspace?.last_workspace_slug ||
-    // currentUserSettings?.workspace?.fallback_workspace_slug ||
+    currentUserSettings?.workspace?.fallback_workspace_slug ||
     "";
 
   const ref = useRef<HTMLDivElement>(null);

web/services/auth.service.ts

@@ -25,13 +25,15 @@ export class AuthService extends APIService {
       });
   }
 
-  signUpEmailCheck = async (data: IEmailCheckData): Promise<IEmailCheckResponse> => this.post("/auth/sign-up/email-check/", data, { headers: {} })
+  signUpEmailCheck = async (data: IEmailCheckData): Promise<IEmailCheckResponse> =>
+    this.post("/auth/sign-up/email-check/", data, { headers: {} })
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
       });
 
-  signInEmailCheck = async (data: IEmailCheckData): Promise<IEmailCheckResponse> => this.post("/auth/sign-in/email-check/", data, { headers: {} })
+  signInEmailCheck = async (data: IEmailCheckData): Promise<IEmailCheckResponse> =>
+    this.post("/auth/sign-in/email-check/", data, { headers: {} })
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;

web/store/root.store.ts

@@ -77,6 +77,9 @@ export class RootStore {
   }
 
   resetOnSignOut() {
+    // handling the system theme when user logged out from the app
+    localStorage.setItem("theme", "system");
+
     this.workspaceRoot = new WorkspaceRootStore(this);
     this.projectRoot = new ProjectRootStore(this);
     this.memberRoot = new MemberRootStore(this);

web/store/user/index.ts

@@ -54,7 +54,7 @@ export class UserStore implements IUserStore {
 
   constructor(private store: RootStore) {
     // stores
-    this.userProfile = new ProfileStore();
+    this.userProfile = new ProfileStore(store);
     this.userSettings = new UserSettingsStore();
     this.membership = new UserMembershipStore(store);
     // service