chore: onboarding (#2790)
* style: onboarding light version * style: dark mode * fix: onboarding gradient * refactor: imports * chore: add use case field in users api * feat: delete account * fix: delete modal points alignment * feat: usecase in profile * fix: build error * fix: typos & hardcoded strings --------- Co-authored-by: pablohashescobar <nikhilschacko@gmail.com>
This commit is contained in:
Lakhan Baheti
sriram veeraghanta
parent
9d5f835bea
commit
6512b8205f
25 changed files with 2674 additions and 580 deletions
|
|
@ -19,8 +19,11 @@ import {
|
|||
import { Loader, Spinner } from "@plane/ui";
|
||||
// images
|
||||
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
|
||||
import signInIssues from "public/onboarding/onboarding-issues.svg";
|
||||
// types
|
||||
import { IUser, IUserSettings } from "types";
|
||||
// icons
|
||||
import { Lightbulb } from "lucide-react";
|
||||
|
||||
const authService = new AuthService();
|
||||
|
||||
|
|
@ -36,7 +39,8 @@ export const SignInView = observer(() => {
|
|||
const [isLoading, setLoading] = useState(false);
|
||||
// toast
|
||||
const { setToastAlert } = useToast();
|
||||
// computed
|
||||
|
||||
// computed.
|
||||
const enableEmailPassword =
|
||||
envConfig &&
|
||||
(envConfig?.email_password_login ||
|
||||
|
|
@ -180,71 +184,82 @@ export const SignInView = observer(() => {
|
|||
<Spinner />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<>
|
||||
<div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
|
||||
<div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
|
||||
<div className="grid place-items-center bg-custom-background-100">
|
||||
<div className="h-[30px] w-[30px]">
|
||||
<Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
|
||||
</div>
|
||||
<div className={`bg-onboarding-gradient-primary h-full overflow-y-auto`}>
|
||||
<div className="sm:py-5 pl-8 pb-4 sm:pl-16 lg:pl-28 ">
|
||||
<div className="flex text-3xl items-center mt-16 font-semibold">
|
||||
<div className="h-[30px] w-[30px] mr-2">
|
||||
<Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
<div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
|
||||
<div>
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
|
||||
Sign in to Plane
|
||||
</h1>
|
||||
|
||||
{!envConfig ? (
|
||||
<div className="pt-10 w-ful">
|
||||
<Loader className="space-y-4 w-full pb-4">
|
||||
<Loader.Item height="46px" width="360px" />
|
||||
<Loader.Item height="46px" width="360px" />
|
||||
</Loader>
|
||||
|
||||
<Loader className="space-y-4 w-full pt-4">
|
||||
<Loader.Item height="46px" width="360px" />
|
||||
<Loader.Item height="46px" width="360px" />
|
||||
</Loader>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<>
|
||||
{enableEmailPassword && <EmailPasswordForm onSubmit={handlePasswordSignIn} />}
|
||||
{envConfig?.magic_login && (
|
||||
<div className="flex flex-col divide-y divide-custom-border-200">
|
||||
<div className="pb-7">
|
||||
<EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
|
||||
{envConfig?.google_client_id && (
|
||||
<GoogleLoginButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
|
||||
)}
|
||||
{envConfig?.github_client_id && (
|
||||
<GithubLoginButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
<p className="pt-16 text-custom-text-200 text-sm text-center">
|
||||
By signing up, you agree to the{" "}
|
||||
<a
|
||||
href="https://plane.so/terms-and-conditions"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium underline"
|
||||
>
|
||||
Terms & Conditions
|
||||
</a>
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
Plane
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
<div className="md:w-2/3 sm:w-4/5 rounded-md mx-auto shadow-sm border border-custom-border-200">
|
||||
<div className={`p-4`}>
|
||||
<div className={`px-7 sm:px-0 bg-onboarding-gradient-secondary h-full pt-32 pb-20 rounded-md`}>
|
||||
{!envConfig ? (
|
||||
<div className="pt-10 mx-auto flex justify-center">
|
||||
<div>
|
||||
<Loader className="space-y-4 w-full pb-4 mx-auto">
|
||||
<Loader.Item height="46px" width="360px" />
|
||||
<Loader.Item height="46px" width="360px" />
|
||||
</Loader>
|
||||
|
||||
<Loader className="space-y-4 w-full pt-4 mx-auto">
|
||||
<Loader.Item height="46px" width="360px" />
|
||||
<Loader.Item height="46px" width="360px" />
|
||||
</Loader>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<>
|
||||
{enableEmailPassword && <EmailPasswordForm onSubmit={handlePasswordSignIn} />}
|
||||
{envConfig?.magic_login && (
|
||||
<div className="flex flex-col divide-y divide-custom-border-200">
|
||||
<div className="pb-2">
|
||||
<EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex sm:w-96 items-center mt-4 mx-auto">
|
||||
<hr className={`border-onboarding-border-100 w-full`} />
|
||||
<p className="text-center text-sm text-onboarding-text-400 mx-3 flex-shrink-0">
|
||||
Or continue with
|
||||
</p>
|
||||
<hr className={`border-onboarding-border-100 w-full`} />
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-96 mx-auto overflow-hidden">
|
||||
{envConfig?.google_client_id && (
|
||||
<GoogleLoginButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
|
||||
)}
|
||||
{envConfig?.github_client_id && (
|
||||
<GithubLoginButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
<div className={`flex py-2 bg-onboarding-background-100 mx-auto rounded-sm sm:w-96 mt-16`}>
|
||||
<Lightbulb className="h-7 w-7 mr-2 mx-3" />
|
||||
<p className={`text-sm text-left text-onboarding-text-200`}>
|
||||
Try the latest features, like Tiptap editor, to write compelling responses.{" "}
|
||||
<span className="font-medium underline hover:cursor-pointer" onClick={() => {}}>
|
||||
See new features
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-center sm:w-96 sm:h-64 object-cover mt-8 mx-auto rounded-md ">
|
||||
<Image
|
||||
src={signInIssues}
|
||||
alt="Plane Logo"
|
||||
className={`flex object-cover rounded-md bg-onboarding-background-100`}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue