chore: new sign-in, sign-up and forgot password workflows (#3415)

* chore: sign up workflow updated

* chore: sign in workflow updated

* refactor: folder structure

* chore: forgot password workflow

* refactor: form component props

* chore: forgot password popover for instances with smtp unconfigured

* chore: updated UX copy

* chore: update reset password link

* chore: update email placeholder

web/components/account/github-sign-in.tsx

@@ -1,61 +0,0 @@
-// react
-import { useEffect, useState, FC } from "react";
-// next
-import Link from "next/link";
-import Image from "next/image";
-import { useRouter } from "next/router";
-import { useTheme } from "next-themes";
-// images
-import githubLightModeImage from "/public/logos/github-black.png";
-import githubDarkModeImage from "/public/logos/github-dark.svg";
-
-type Props = {
-  handleSignIn: React.Dispatch<string>;
-  clientId: string;
-};
-
-export const GitHubSignInButton: FC<Props> = (props) => {
-  const { handleSignIn, clientId } = props;
-  // states
-  const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
-  const [gitCode, setGitCode] = useState<null | string>(null);
-  // router
-  const {
-    query: { code },
-  } = useRouter();
-  // theme
-  const { resolvedTheme } = useTheme();
-
-  useEffect(() => {
-    if (code && !gitCode) {
-      setGitCode(code.toString());
-      handleSignIn(code.toString());
-    }
-  }, [code, gitCode, handleSignIn]);
-
-  useEffect(() => {
-    const origin = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    setLoginCallBackURL(`${origin}/` as any);
-  }, []);
-  return (
-    <div className="w-full">
-      <Link
-        href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
-      >
-        <button
-          className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-onboarding-background-300 ${
-            resolvedTheme === "dark" ? "border-[#43484F] bg-[#2F3135]" : "border-[#D9E4FF]"
-          }`}
-        >
-          <Image
-            src={resolvedTheme === "dark" ? githubDarkModeImage : githubLightModeImage}
-            height={20}
-            width={20}
-            alt="GitHub Logo"
-          />
-          <span className="text-onboarding-text-200">Sign-in with GitHub</span>
-        </button>
-      </Link>
-    </div>
-  );
-};