Merge branch 'fix-authentication-ui' of github.com:makeplane/plane in…

…to fix-authentication-ui

admin/components/common/empty-state.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import Image from "next/image";
+import { Button } from "@plane/ui";
+
+type Props = {
+  title: string;
+  description?: React.ReactNode;
+  image?: any;
+  primaryButton?: {
+    icon?: any;
+    text: string;
+    onClick: () => void;
+  };
+  secondaryButton?: React.ReactNode;
+  disabled?: boolean;
+};
+
+export const EmptyState: React.FC<Props> = ({
+  title,
+  description,
+  image,
+  primaryButton,
+  secondaryButton,
+  disabled = false,
+}) => (
+  <div className={`flex h-full w-full items-center justify-center`}>
+    <div className="flex w-full flex-col items-center text-center">
+      {image && <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />}
+      <h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">{title}</h6>
+      {description && <p className="mb-7 px-5 text-custom-text-300 sm:mb-8">{description}</p>}
+      <div className="flex items-center gap-4">
+        {primaryButton && (
+          <Button
+            variant="primary"
+            prependIcon={primaryButton.icon}
+            onClick={primaryButton.onClick}
+            disabled={disabled}
+          >
+            {primaryButton.text}
+          </Button>
+        )}
+        {secondaryButton}
+      </div>
+    </div>
+  </div>
+);

admin/components/common/index.ts

@@ -4,3 +4,4 @@ export * from "./controller-input";
 export * from "./copy-field";
 export * from "./password-strength-meter";
 export * from "./banner";
+export * from "./empty-state";

admin/lib/wrappers/instance-wrapper.tsx

@@ -13,6 +13,7 @@ import { InstanceNotReady } from "@/components/instance";
 import { useInstance } from "@/hooks/store";
 // helpers
 import { EInstancePageType } from "@/helpers";
+import { EmptyState } from "@/components/common";
 
 type TInstanceWrapper = {
   children: ReactNode;
@@ -41,7 +42,12 @@ export const InstanceWrapper: FC<TInstanceWrapper> = observer((props) => {
     );
 
   if (!instance) {
-    return <>Something went wrong</>;
+    return (
+      <EmptyState
+        title="Your instance wasn't configured successfully."
+        description="Please try re-installing Plane to fix the problem. If the issue still persists please reach out to support@plane.so."
+      />
+    );
   }
 
   if (instance?.instance?.is_setup_done === false && authEnabled === "1")

apiserver/plane/settings/local.py

@@ -35,10 +35,10 @@
     "http://127.0.0.1",
     "http://localhost:3000",
     "http://127.0.0.1:3000",
-    "http://localhost:4000",
-    "http://127.0.0.1:4000",
-    "http://localhost:3333",
-    "http://127.0.0.1:3333",
+    "http://localhost:3001",
+    "http://127.0.0.1:3001",
+    "http://localhost:3002",
+    "http://127.0.0.1:3002",
 ]
 CSRF_TRUSTED_ORIGINS = CORS_ALLOWED_ORIGINS
 CORS_ALLOW_ALL_ORIGINS = True

space/components/accounts/onboarding-form.tsx

@@ -140,8 +140,11 @@ export const OnBoardingForm: React.FC<Props> = observer((props) => {
         </button>
       </div>
       <div className="flex gap-4">
-        <div className="space-y-1">
-          <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="first_name">
+        <div className="space-y-1 w-full">
+          <label
+            className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            htmlFor="first_name"
+          >
             First name
           </label>
           <Controller
@@ -171,8 +174,11 @@ export const OnBoardingForm: React.FC<Props> = observer((props) => {
           />
           {errors.first_name && <span className="text-sm text-red-500">{errors.first_name.message}</span>}
         </div>
-        <div className="space-y-1">
-          <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="last_name">
+        <div className="space-y-1 w-full">
+          <label
+            className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            htmlFor="last_name"
+          >
             Last name
           </label>
           <Controller

space/hooks/store/user/use-user-profile.ts

@@ -6,5 +6,5 @@ import { IProfileStore } from "@/store/user/profile.store";
 export const useUserProfile = (): IProfileStore => {
   const context = useContext(StoreContext);
   if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
-  return context.profile;
+  return context.user.userProfile;
 };

space/lib/wrappers/auth-wrapper.tsx

@@ -32,13 +32,17 @@ export const AuthWrapper: FC<TAuthWrapper> = observer((props) => {
         <Spinner />
       </div>
     );
-
   if (pageType === EPageTypes.PUBLIC) return <>{children}</>;
 
   if (pageType === EPageTypes.INIT) {
     if (!currentUser?.id) return <>{children}</>;
     else {
-      if (currentUserProfile?.id && currentUserProfile?.onboarding_step?.profile_complete) return <>{children}</>;
+      if (
+        currentUserProfile &&
+        currentUserProfile?.id &&
+        Boolean(currentUserProfile?.onboarding_step?.profile_complete)
+      )
+        return <>{children}</>;
       else {
         router.push(`/onboarding`);
         return <></>;

space/pages/onboarding/index.tsx

@@ -16,7 +16,7 @@ import { useUser, useUserProfile } from "@/hooks/store";
 import { AuthWrapper } from "@/lib/wrappers";
 // assets
 import ProfileSetupDark from "public/onboarding/profile-setup-dark.svg";
-import ProfileSetup from "public/onboarding/profile-setup.svg";
+import ProfileSetup from "public/onboarding/profile-setup-light.svg";
 
 const OnBoardingPage = observer(() => {
   // router
@@ -47,8 +47,8 @@ const OnBoardingPage = observer(() => {
       console.log("Failed to update onboarding status");
     });
 
-    if (next_path) router.replace(next_path.toString());
-    router.replace("/");
+    if (next_path) router.push(next_path.toString());
+    router.push("/");
   };
 
   return (

space/store/root.store.ts

@@ -4,7 +4,6 @@ import { enableStaticRendering } from "mobx-react-lite";
 import { IInstanceStore, InstanceStore } from "@/store/instance.store";
 import { IProjectStore, ProjectStore } from "@/store/project";
 import { IUserStore, UserStore } from "@/store/user";
-import { IProfileStore, ProfileStore } from "@/store/user/profile.store";
 
 import IssueStore, { IIssueStore } from "./issue";
 import IssueDetailStore, { IIssueDetailStore } from "./issue_details";
@@ -16,7 +15,6 @@ enableStaticRendering(typeof window === "undefined");
 export class RootStore {
   instance: IInstanceStore;
   user: IUserStore;
-  profile: IProfileStore;
   project: IProjectStore;
 
   issue: IIssueStore;
@@ -27,9 +25,8 @@ export class RootStore {
   constructor() {
     this.instance = new InstanceStore(this);
     this.user = new UserStore(this);
-    this.profile = new ProfileStore(this);
-    this.project = new ProjectStore(this);
 
+    this.project = new ProjectStore(this);
     this.issue = new IssueStore(this);
     this.issueDetails = new IssueDetailStore(this);
     this.mentionsStore = new MentionsStore(this);
@@ -41,7 +38,6 @@ export class RootStore {
 
     this.instance = new InstanceStore(this);
     this.user = new UserStore(this);
-    this.profile = new ProfileStore(this);
     this.project = new ProjectStore(this);
 
     this.issue = new IssueStore(this);