github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: auth redirection issue fixes when user is logged in (#2499)

Browse Source 
* fix: auth redirection issues

* fix: redirect flickering fix

* chore: sign in page ui improvement and redirection fix (#2501)

* style: sign in page ui improvement

* chore: sign up redirection added and ui improvement

* chore: redirection validation and create workspace form fix (#2504)

* chore: sign in redirection validation

* fix: create workspace form input fix

* chore: code refactor

---------

Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
This commit is contained in:
sriram veeraghanta 2023-10-20 17:10:17 +05:30 committed by GitHub
parent d78b4dccf3
commit 9f1fd2327a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 99 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/ui/src/icons/layers-icon.tsx
View File

@ -14,7 +14,7 @@ export const LayersIcon: React.FC<ISvgIcons> = ({
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<g clip-path="url(#clip0_7258_81938)">
<g clipPath="url(#clip0_7258_81938)">
<path
d="M16.5953 6.69606L16.6072 5.17376L6.85812 8.92381L6.85812 19.4238L9.00319 18.6961"
strokeLinecap="round"

2
web/components/account/email-code-form.tsx
View File

@ -203,7 +203,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
variant="primary"
type="submit"
className="w-full"
size="md"
size="xl"
onClick={handleSubmit(handleSignin)}
disabled={!isValid && isDirty}
loading={isLoading}

2
web/components/account/email-forgot-password-form.tsx
View File

@ -51,7 +51,7 @@ export const EmailForgotPasswordForm: FC<IEmailForgotPasswordForm> = (props) =>
onChange={onChange}
hasError={Boolean(errors.email)}
placeholder="Enter registered email address.."
className="border-custom-border-300 h-[46px]"
className="border-custom-border-300 h-[46px] w-full"
/>
)}
/>

8
web/components/account/email-password-form.tsx
View File

@ -56,7 +56,7 @@ export const EmailPasswordForm: React.FC<IEmailPasswordForm> = (props) => {
onChange={onChange}
hasError={Boolean(errors.email)}
placeholder="Enter your email address..."
className="border-custom-border-300 h-[46px]"
className="border-custom-border-300 h-[46px] w-full"
/>
)}
/>
@ -77,7 +77,7 @@ export const EmailPasswordForm: React.FC<IEmailPasswordForm> = (props) => {
onChange={onChange}
hasError={Boolean(errors.password)}
placeholder="Enter your password..."
className="border-custom-border-300 h-[46px]"
className="border-custom-border-300 h-[46px] w-full"
/>
)}
/>
@ -93,8 +93,10 @@ export const EmailPasswordForm: React.FC<IEmailPasswordForm> = (props) => {
</div>
<div>
<Button
variant="primary"
type="submit"
className="w-full text-center h-[46px]"
className="w-full"
size="xl"
disabled={!isValid && isDirty}
loading={isSubmitting}
>

1
web/components/account/email-signup-form.tsx
View File

@ -122,6 +122,7 @@ export const EmailSignUpForm: React.FC<Props> = (props) => {
variant="primary"
type="submit"
className="w-full"
size="xl"
disabled={!isValid && isDirty}
loading={isSubmitting}
>

45
web/components/page-views/signin.tsx
View File

@ -1,3 +1,4 @@
import { useState, useEffect } from "react";
import useSWR from "swr";
import { observer } from "mobx-react-lite";
import Image from "next/image";
@ -20,14 +21,15 @@ import {
import { Loader, Spinner } from "@plane/ui";
// images
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
// types
import { IUserSettings } from "types";
import { useState } from "react";
const appConfigService = new AppConfigService();
const authService = new AuthService();
export const SignInView = observer(() => {
const { user: userStore } = useMobxStore();
const { fetchCurrentUserSettings } = userStore;
// router
const router = useRouter();
// states
@ -35,25 +37,46 @@ export const SignInView = observer(() => {
// toast
const { setToastAlert } = useToast();
// fetch app config
const { data, error } = useSWR("APP_CONFIG", () => appConfigService.envConfig());
// fetch user info
useSWR("USER_INFO", () => userStore.fetchCurrentUser());
const { data, error: appConfigError } = useSWR("APP_CONFIG", () => appConfigService.envConfig());
// computed
const enableEmailPassword =
data &&
(data?.email_password_login || !(data?.email_password_login || data?.magic_login || data?.google || data?.github));
const handleLoginRedirection = () =>
useEffect(() => {
fetchCurrentUserSettings().then((settings) => {
setLoading(true);
router.push(
`/${
settings.workspace.last_workspace_slug
? settings.workspace.last_workspace_slug
: settings.workspace.fallback_workspace_slug
}`
);
});
}, [fetchCurrentUserSettings, router]);
const handleLoginRedirection = () => {
userStore.fetchCurrentUser().then((user) => {
const isOnboard = user.onboarding_step.profile_complete;
if (isOnboard) {
userStore
.fetchCurrentUserSettings()
.then((userSettings: IUserSettings) => {
const workspaceSlug =
userSettings?.workspace?.last_workspace_slug || userSettings?.workspace?.fallback_workspace_slug;
router.push(`/${workspaceSlug}`);
if (workspaceSlug) router.push(`/${workspaceSlug}`);
else if (userSettings.workspace.invites > 0) router.push("/invitations");
else router.push("/create-workspace");
})
.catch(() => {
setLoading(false);
});
} else {
router.push("/onboarding");
}
});
};
const handleGoogleSignIn = async ({ clientId, credential }: any) => {
try {
@ -114,7 +137,13 @@ export const SignInView = observer(() => {
return authService
.emailLogin(formData)
.then(() => {
handleLoginRedirection();
userStore.fetchCurrentUser().then((user) => {
const isOnboard = user.onboarding_step.profile_complete;
if (isOnboard) handleLoginRedirection();
else {
router.push("/onboarding");
}
});
})
.catch((err) => {
setLoading(false);
@ -166,7 +195,7 @@ export const SignInView = observer(() => {
Sign in to Plane
</h1>
{!data && !error ? (
{!data && !appConfigError ? (
<div className="pt-10 w-ful">
<Loader className="space-y-4 w-full pb-4">
<Loader.Item height="46px" width="360px" />

7
web/components/project/create-project-modal.tsx
View File

@ -1,6 +1,7 @@
import { useState, useEffect, Fragment, FC, ChangeEvent } from "react";
import { useForm, Controller } from "react-hook-form";
import { Dialog, Transition } from "@headlessui/react";
import { observer } from "mobx-react-lite";
// icons
import { X } from "lucide-react";
// hooks
@ -8,9 +9,9 @@ import { useMobxStore } from "lib/mobx/store-provider";
import useToast from "hooks/use-toast";
import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
// ui
import { Button, CustomSelect, CustomSearchSelect, Input, TextArea } from "@plane/ui";
import { Avatar } from "components/ui";
import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
// components
import { WorkspaceMemberSelect } from "components/workspace";
import { ImagePickerPopover } from "components/core";
import EmojiIconPicker from "components/emoji-icon-picker";
// helpers
@ -19,8 +20,6 @@ import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper";
import { IWorkspaceMember } from "types";
// constants
import { NETWORK_CHOICES, PROJECT_UNSPLASH_COVERS } from "constants/project";
import { WorkspaceMemberSelect } from "components/workspace";
import { observer } from "mobx-react-lite";
type Props = {
isOpen: boolean;

10
web/components/workspace/create-workspace-form.tsx
View File

@ -136,13 +136,17 @@ export const CreateWorkspaceForm: FC<Props> = ({
message: "Workspace name should not exceed 80 characters",
},
}}
render={({ field: { value, ref } }) => (
render={({ field: { value, ref, onChange } }) => (
<Input
id="workspaceName"
name="name"
type="text"
value={value}
onChange={(e) => setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"))}
onChange={(e) => {
onChange(e.target.value);
setValue("name", e.target.value);
setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"));
}}
ref={ref}
hasError={Boolean(errors.name)}
placeholder="Enter workspace name..."
@ -166,7 +170,7 @@ export const CreateWorkspaceForm: FC<Props> = ({
id="workspaceUrl"
name="slug"
type="text"
value={value}
value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
onChange={(e) =>
/^[a-zA-Z0-9_-]+$/.test(e.target.value) ? setInvalidSlug(false) : setInvalidSlug(true)
}

18
web/constants/crisp.tsx
View File

@ -1,5 +1,7 @@
import useUser from "hooks/use-user";
import { useCallback, useEffect } from "react";
import { observer } from "mobx-react-lite";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
declare global {
interface Window {
@ -8,16 +10,14 @@ declare global {
}
}
const Crisp = () => {
const { user } = useUser();
const Crisp = observer(() => {
const { user: userStore } = useMobxStore();
const { currentUser } = userStore;
const validateCurrentUser = useCallback(() => {
const currentUser = user ? user : null;
if (currentUser && currentUser.email) return currentUser.email;
if (currentUser) return currentUser.email;
return null;
}, [user]);
}, [currentUser]);
useEffect(() => {
if (typeof window && validateCurrentUser()) {
@ -40,5 +40,5 @@ const Crisp = () => {
}, [validateCurrentUser]);
return <></>;
};
});
export default Crisp;

10
web/layouts/default-layout/index.tsx
View File

@ -1,12 +1,12 @@
import { FC, ReactNode } from "react";
type Props = {
children: React.ReactNode;
children: ReactNode;
gradient?: boolean;
};
const DefaultLayout: React.FC<Props> = ({ children, gradient = false }) => (
<div className={`h-screen w-full overflow-hidden ${gradient ? "" : "bg-custom-background-100"}`}>
{children}
</div>
const DefaultLayout: FC<Props> = ({ children, gradient = false }) => (
<div className={`h-screen w-full overflow-hidden ${gradient ? "" : "bg-custom-background-100"}`}>{children}</div>
);
export default DefaultLayout;

20
web/lib/mobx/store-init.tsx
View File

@ -8,6 +8,10 @@ import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
import { observer } from "mobx-react-lite";
const MobxStoreInit = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId, globalViewId, viewId, inboxId } = router.query;
// store
const {
theme: themeStore,
user: userStore,
@ -23,14 +27,11 @@ const MobxStoreInit = observer(() => {
const [dom, setDom] = useState<any>();
// theme
const { setTheme } = useTheme();
// router
const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId, globalViewId, viewId, inboxId } = router.query;
// const dom = useMemo(() => window && window.document?.querySelector<HTMLElement>("[data-theme='custom']"), [document]);
/**
* Sidebar collapsed fetching from local storage
*/
useEffect(() => {
// sidebar collapsed toggle
const localValue = localStorage && localStorage.getItem("app_sidebar_collapsed");
const localBoolValue = localValue ? (localValue === "true" ? true : false) : false;
if (localValue && themeStore?.sidebarCollapsed === undefined) {
@ -38,6 +39,9 @@ const MobxStoreInit = observer(() => {
}
}, [themeStore, userStore, setTheme]);
/**
* Setting up the theme of the user by fetching it from local storage
*/
useEffect(() => {
if (!userStore.currentUser) return;
if (window) {
@ -45,11 +49,13 @@ const MobxStoreInit = observer(() => {
}
setTheme(userStore.currentUser?.theme?.theme || "system");
if (userStore.currentUser?.theme?.theme === "custom" && dom) {
console.log("userStore.currentUser?.theme?.theme", userStore.currentUser?.theme);
applyTheme(userStore.currentUser?.theme?.palette, false);
} else unsetCustomCssVariables();
}, [userStore.currentUser, setTheme, dom]);
/**
* Setting router info to the respective stores.
*/
useEffect(() => {
if (workspaceSlug) workspaceStore.setWorkspaceSlug(workspaceSlug.toString());
if (projectId) projectStore.setProjectId(projectId.toString());

2
web/pages/accounts/sign-up.tsx
View File

@ -50,7 +50,7 @@ const SignUp: NextPage = () => {
});
if (response) await mutateUser();
router.push("/");
router.push("/onboarding");
})
.catch((err) =>
setToastAlert({

6
web/store/user.store.ts
View File

@ -11,6 +11,7 @@ import { IWorkspaceMember, IProjectMember } from "types";
export interface IUserStore {
loader: boolean;
isUserLoggedIn: boolean | null;
currentUser: IUser | null;
currentUserSettings: IUserSettings | null;
@ -38,6 +39,7 @@ export interface IUserStore {
class UserStore implements IUserStore {
loader: boolean = false;
isUserLoggedIn: boolean | null = null;
currentUser: IUser | null = null;
currentUserSettings: IUserSettings | null = null;
@ -85,10 +87,14 @@ class UserStore implements IUserStore {
if (response) {
runInAction(() => {
this.currentUser = response;
this.isUserLoggedIn = true;
});
}
return response;
} catch (error) {
runInAction(() => {
this.isUserLoggedIn = false;
});
throw error;
}
};