fix: admin auth related fixes

admin/components/admin-sidebar/help-section.tsx

@@ -1,16 +1,16 @@
 "use client";
 
 import { FC, useState, useRef } from "react";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
-import { Transition } from "@headlessui/react";
+import Link from "next/link";
 import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react";
+import { Transition } from "@headlessui/react";
 import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
 // hooks
+import { WEB_BASE_URL } from "@/helpers/common.helper";
 import { useTheme } from "@/hooks/store";
 // assets
 import packageJson from "package.json";
-import { WEB_BASE_URL } from "@/helpers/common.helper";
 
 const helpOptions = [
   {

admin/components/admin-sidebar/root.tsx

@@ -3,10 +3,10 @@
 import { FC, useEffect, useRef } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
+import { HelpSection, SidebarMenu, SidebarDropdown } from "@/components/admin-sidebar";
 import { useTheme } from "@/hooks/store";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
-import { HelpSection, SidebarMenu, SidebarDropdown } from "@/components/admin-sidebar";
 
 export interface IInstanceSidebar {}
 

admin/components/admin-sidebar/sidebar-dropdown.tsx

@@ -1,15 +1,15 @@
 "use client";
 
 import { Fragment, useEffect, useState } from "react";
-import { useTheme as useNextTheme } from "next-themes";
 import { observer } from "mobx-react-lite";
+import { useTheme as useNextTheme } from "next-themes";
 import { LogOut, UserCog2, Palette } from "lucide-react";
 import { Menu, Transition } from "@headlessui/react";
 import { Avatar } from "@plane/ui";
 // hooks
+import { API_BASE_URL, cn } from "@/helpers/common.helper";
 import { useTheme, useUser } from "@/hooks/store";
 // helpers
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
 // services
 import { AuthService } from "@/services";
 

admin/components/admin-sidebar/sidebar-menu-hamburger-toogle.tsx

@@ -3,9 +3,9 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
+import { Menu } from "lucide-react";
 import { useTheme } from "@/hooks/store";
 // icons
-import { Menu } from "lucide-react";
 
 export const SidebarHamburgerToggle: FC = observer(() => {
   const { isSidebarCollapsed, toggleSidebar } = useTheme();

admin/components/admin-sidebar/sidebar-menu.tsx

@@ -1,14 +1,14 @@
 "use client";
 
+import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { observer } from "mobx-react-lite";
 import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react";
 import { Tooltip } from "@plane/ui";
 // hooks
+import { cn } from "@/helpers/common.helper";
 import { useTheme } from "@/hooks/store";
 // helpers
-import { cn } from "@/helpers/common.helper";
 
 const INSTANCE_ADMIN_LINKS = [
   {

admin/components/auth-header.tsx

@@ -1,16 +1,16 @@
 "use client";
 
 import { FC } from "react";
+import { observer } from "mobx-react-lite";
 import { usePathname } from "next/navigation";
 // mobx
-import { observer } from "mobx-react-lite";
 // ui
 import { Settings } from "lucide-react";
 // icons
 import { Breadcrumbs } from "@plane/ui";
 // components
-import { BreadcrumbLink } from "components/common";
 import { SidebarHamburgerToggle } from "@/components/admin-sidebar";
+import { BreadcrumbLink } from "components/common";
 
 export const InstanceHeader: FC = observer(() => {
   const pathName = usePathname();

admin/components/common/controller-input.tsx

@@ -3,9 +3,9 @@
 import React, { useState } from "react";
 import { Controller, Control } from "react-hook-form";
 // ui
+import { Eye, EyeOff } from "lucide-react";
 import { Input } from "@plane/ui";
 // icons
-import { Eye, EyeOff } from "lucide-react";
 // helpers
 import { cn } from "@/helpers/common.helper";
 
@@ -62,6 +62,7 @@ export const ControllerInput: React.FC<Props> = (props) => {
         {type === "password" &&
           (showPassword ? (
             <button
+              tabIndex={-1}
               className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
               onClick={() => setShowPassword(false)}
             >
@@ -69,6 +70,7 @@ export const ControllerInput: React.FC<Props> = (props) => {
             </button>
           ) : (
             <button
+              tabIndex={-1}
               className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
               onClick={() => setShowPassword(true)}
             >

admin/components/common/copy-field.tsx

@@ -2,9 +2,9 @@
 
 import React from "react";
 // ui
+import { Copy } from "lucide-react";
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // icons
-import { Copy } from "lucide-react";
 
 type Props = {
   label: string;
@@ -40,7 +40,7 @@ export const CopyField: React.FC<Props> = (props) => {
         <p className="text-sm font-medium">{url}</p>
         <Copy size={18} color="#B9B9B9" />
       </Button>
-      <p className="text-xs text-custom-text-400">{description}</p>
+      <div className="text-xs text-custom-text-400">{description}</div>
     </div>
   );
 };

admin/components/common/password-strength-meter.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 // helpers
+import { CircleCheck } from "lucide-react";
 import { cn } from "@/helpers/common.helper";
 import { getPasswordStrength } from "@/helpers/password.helper";
 // icons
-import { CircleCheck } from "lucide-react";
 
 type Props = {
   password: string;

admin/components/instance/index.ts

@@ -1 +1,2 @@
 export * from "./instance-not-ready";
+export * from "./instance-failure-view";

admin/components/instance/instance-failure-view.tsx

@@ -0,0 +1,42 @@
+"use client";
+import { FC } from "react";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+import { Button } from "@plane/ui";
+// assets
+import InstanceFailureDarkImage from "@/public/instance/instance-failure-dark.svg";
+import InstanceFailureImage from "@/public/instance/instance-failure.svg";
+
+type InstanceFailureViewProps = {
+  // mutate: () => void;
+};
+
+export const InstanceFailureView: FC<InstanceFailureViewProps> = () => {
+  const { resolvedTheme } = useTheme();
+
+  const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
+
+  const handleRetry = () => {
+    window.location.reload();
+  };
+
+  return (
+    <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center mt-10">
+      <div className="w-auto max-w-2xl relative space-y-8 py-10">
+        <div className="relative flex flex-col justify-center items-center space-y-4">
+          <Image src={instanceImage} alt="Plane Logo" />
+          <h3 className="font-medium text-2xl text-white ">Unable to fetch instance details.</h3>
+          <p className="font-medium text-base text-center">
+            We were unable to fetch the details of the instance. <br />
+            Fret not, it might just be a connectivity issue.
+          </p>
+        </div>
+        <div className="flex justify-center">
+          <Button size="md" onClick={handleRetry}>
+            Retry
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

admin/components/instance/instance-not-ready.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { FC } from "react";
-import Link from "next/link";
 import Image from "next/image";
+import Link from "next/link";
 import { Button } from "@plane/ui";
 // assets
 import PlaneTakeOffImage from "@/public/images/plane-takeoff.png";

admin/components/login/sign-in-form.tsx

@@ -3,15 +3,15 @@
 import { FC, useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
 // services
-import { AuthService } from "@/services/auth.service";
-// ui
+import { Eye, EyeOff } from "lucide-react";
 import { Button, Input, Spinner } from "@plane/ui";
 // components
-import { Banner } from "components/common";
-// icons
-import { Eye, EyeOff } from "lucide-react";
+import { Banner } from "@/components/common";
 // helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
+import { AuthService } from "@/services/auth.service";
+// ui
+// icons
 
 // service initialization
 const authService = new AuthService();
@@ -57,6 +57,8 @@ export const InstanceSignInForm: FC = (props) => {
   const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
     setFormData((prev) => ({ ...prev, [key]: value }));
 
+  console.log("csrfToken", csrfToken);
+
   useEffect(() => {
     if (csrfToken === undefined)
       authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
@@ -119,7 +121,7 @@ export const InstanceSignInForm: FC = (props) => {
               Email <span className="text-red-500">*</span>
             </label>
             <Input
-              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
               id="email"
               name="email"
               type="email"
@@ -137,7 +139,7 @@ export const InstanceSignInForm: FC = (props) => {
             </label>
             <div className="relative">
               <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
                 id="password"
                 name="password"
                 type={showPassword ? "text" : "password"}