Authentication Workflow fixes. Redirection fixes (#832)
* auth integration fixes * auth integration fixes * auth integration fixes * auth integration fixes * dev: update user api to return fallback workspace and improve the structure of the response * dev: fix the issue keyerror and move onboarding logic to serializer method field * dev: use-user-auth hook imlemented for route access validation and build issues resolved effected by user payload * fix: global theme color fix * style: new onboarding ui , fix: use-user-auth hook implemented * fix: command palette, project invite modal and issue detail page mutation type fix * fix: onboarding redirection fix * dev: build isuue resolved * fix: use user auth hook fix * fix: sign in toast alert fix, sign out redirection fix and user theme error fix * fix: user response fix * fix: unAuthorizedStatus logic updated --------- Co-authored-by: pablohashescobar <nikhilschacko@gmail.com> Co-authored-by: gurusainath <gurusainath007@gmail.com> Co-authored-by: anmolsinghbhatia <anmolsinghbhatia@caravel.tech>
This commit is contained in:
sriram veeraghanta
GitHub
parent
33db616767
commit
44f8ba407d
43 changed files with 821 additions and 593 deletions
|
|
@ -45,8 +45,9 @@ export const InviteMembers: React.FC<Props> = ({ setStep, workspace }) => {
|
|||
>
|
||||
<div className="flex w-full max-w-xl flex-col gap-12">
|
||||
<div className="flex flex-col gap-6 rounded-[10px] bg-brand-base p-7 shadow-md">
|
||||
<h2 className="text-xl font-medium">Invite your team to your workspace.</h2>
|
||||
<h2 className="text-xl font-medium">Invite co-workers to your team</h2>
|
||||
<div className="flex flex-col items-start justify-center gap-2.5">
|
||||
<span>Email</span>
|
||||
<div className="w-full">
|
||||
<MultiInput
|
||||
name="emails"
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ type Props = {
|
|||
export const OnboardingCard: React.FC<Props> = ({ data, gradient = false }) => (
|
||||
<div
|
||||
className={`flex flex-col items-center justify-center gap-7 rounded-[10px] px-14 pt-10 text-center ${
|
||||
gradient ? "bg-gradient-to-b from-[#2C8DFF]/50 via-brand-base to-transparent" : ""
|
||||
gradient ? "bg-gradient-to-b from-[#C1DDFF] via-brand-base to-transparent" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="h-44 w-full">
|
||||
|
|
|
|||
|
|
@ -66,10 +66,17 @@ export const UserDetails: React.FC<Props> = ({ user, setStep, setUserRole }) =>
|
|||
|
||||
return (
|
||||
<form className="flex w-full items-center justify-center" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="flex w-full max-w-xl flex-col gap-12">
|
||||
<div className="flex w-full max-w-xl flex-col gap-7">
|
||||
<div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
|
||||
<div className="flex flex-col justify-between gap-3 px-10 py-7 sm:flex-row">
|
||||
<div className="flex flex-col items-start justify-center gap-2.5">
|
||||
<div className="flex flex-col gap-2 justify-center px-7 pt-7 pb-3.5">
|
||||
<h3 className="text-base font-semibold text-brand-base">User Details</h3>
|
||||
<p className="text-sm text-brand-secondary">
|
||||
Enter your details as a first step to open your Plane account.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-between gap-4 px-7 py-3.5 sm:flex-row">
|
||||
<div className="flex flex-col items-start justify-center gap-2.5 w-full sm:w-1/2">
|
||||
<span>First name</span>
|
||||
<Input
|
||||
name="first_name"
|
||||
|
|
@ -81,7 +88,7 @@ export const UserDetails: React.FC<Props> = ({ user, setStep, setUserRole }) =>
|
|||
error={errors.first_name}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col items-start justify-center gap-2.5">
|
||||
<div className="flex flex-col items-start justify-center gap-2.5 w-full sm:w-1/2">
|
||||
<span>Last name</span>
|
||||
<Input
|
||||
name="last_name"
|
||||
|
|
@ -94,7 +101,8 @@ export const UserDetails: React.FC<Props> = ({ user, setStep, setUserRole }) =>
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-start justify-center gap-2.5 border-t border-brand-base px-10 py-7">
|
||||
|
||||
<div className="flex flex-col items-start justify-center gap-2.5 border-t border-brand-base px-7 pt-3.5 pb-7">
|
||||
<span>What is your role?</span>
|
||||
<div className="w-full">
|
||||
<Controller
|
||||
|
|
@ -123,6 +131,7 @@ export const UserDetails: React.FC<Props> = ({ user, setStep, setUserRole }) =>
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full items-center justify-center ">
|
||||
<PrimaryButton
|
||||
type="submit"
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import { USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
|
|||
import { CreateWorkspaceForm } from "components/workspace";
|
||||
// ui
|
||||
import { PrimaryButton } from "components/ui";
|
||||
import { getFirstCharacters, truncateText } from "helpers/string.helper";
|
||||
|
||||
type Props = {
|
||||
setStep: React.Dispatch<React.SetStateAction<number>>;
|
||||
|
|
@ -30,6 +31,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
|
|||
slug: "",
|
||||
company_size: null,
|
||||
});
|
||||
const [currentTab, setCurrentTab] = useState("create");
|
||||
|
||||
const { data: invitations, mutate } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
|
||||
workspaceService.userWorkspaceInvitations()
|
||||
|
|
@ -64,53 +66,72 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
|
|||
});
|
||||
};
|
||||
|
||||
const currentTabValue = (tab: string | null) => {
|
||||
switch (tab) {
|
||||
case "join":
|
||||
return 0;
|
||||
case "create":
|
||||
return 1;
|
||||
default:
|
||||
return 1;
|
||||
}
|
||||
};
|
||||
|
||||
console.log("invitations:", invitations);
|
||||
|
||||
return (
|
||||
<div className="grid min-h-[490px] w-full place-items-center">
|
||||
<div className="grid w-full place-items-center">
|
||||
<Tab.Group
|
||||
as="div"
|
||||
className="flex h-full w-full max-w-xl flex-col justify-between rounded-[10px] bg-brand-base shadow-md"
|
||||
className="flex h-[417px] w-full max-w-xl flex-col justify-between rounded-[10px] bg-brand-base shadow-md"
|
||||
defaultIndex={currentTabValue(currentTab)}
|
||||
onChange={(i) => {
|
||||
switch (i) {
|
||||
case 0:
|
||||
return setCurrentTab("join");
|
||||
case 1:
|
||||
return setCurrentTab("create");
|
||||
default:
|
||||
return setCurrentTab("create");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Tab.List
|
||||
as="div"
|
||||
className="text-gray-8 flex items-center justify-start gap-3 px-4 pt-4 text-sm"
|
||||
>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`rounded-3xl border px-4 py-2 outline-none ${
|
||||
selected
|
||||
? "border-brand-accent bg-brand-accent text-white"
|
||||
: "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
|
||||
}`
|
||||
}
|
||||
>
|
||||
New Workspace
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`rounded-3xl border px-5 py-2 outline-none ${
|
||||
selected
|
||||
? "border-brand-accent bg-brand-accent text-white"
|
||||
: "border-brand-base bg-brand-surface-2 hover:bg-brand-surface-1"
|
||||
}`
|
||||
}
|
||||
>
|
||||
Invited Workspace
|
||||
</Tab>
|
||||
<Tab.List as="div" className="flex flex-col gap-3 px-7 pt-7 pb-3.5">
|
||||
<div className="flex flex-col gap-2 justify-center">
|
||||
<h3 className="text-base font-semibold text-brand-base">Workspaces</h3>
|
||||
<p className="text-sm text-brand-secondary">
|
||||
Create or join the workspace to get started with Plane.
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-gray-8 flex items-center justify-start gap-3 text-sm">
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`rounded-3xl border px-4 py-2 outline-none ${
|
||||
selected
|
||||
? "border-brand-accent bg-brand-accent text-white font-medium"
|
||||
: "border-brand-base bg-brand-base hover:bg-brand-surface-2"
|
||||
}`
|
||||
}
|
||||
>
|
||||
Invited Workspace
|
||||
</Tab>
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
`rounded-3xl border px-4 py-2 outline-none ${
|
||||
selected
|
||||
? "border-brand-accent bg-brand-accent text-white font-medium"
|
||||
: "border-brand-base bg-brand-base hover:bg-brand-surface-2"
|
||||
}`
|
||||
}
|
||||
>
|
||||
New Workspace
|
||||
</Tab>
|
||||
</div>
|
||||
</Tab.List>
|
||||
<Tab.Panels as="div" className="h-full">
|
||||
<Tab.Panel>
|
||||
<CreateWorkspaceForm
|
||||
onSubmit={(res) => {
|
||||
setWorkspace(res);
|
||||
setStep(3);
|
||||
}}
|
||||
defaultValues={defaultValues}
|
||||
setDefaultValues={setDefaultValues}
|
||||
/>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel className="h-full">
|
||||
<div className="flex h-full w-full flex-col justify-between">
|
||||
<div className="divide-y px-4 py-7">
|
||||
<div className="flex h-full w-full flex-col">
|
||||
<div className="h-[255px] overflow-y-auto px-7">
|
||||
{invitations && invitations.length > 0 ? (
|
||||
invitations.map((invitation) => (
|
||||
<div key={invitation.id}>
|
||||
|
|
@ -129,34 +150,62 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
|
|||
alt={invitation.workspace.name}
|
||||
/>
|
||||
) : (
|
||||
<span className="flex h-full w-full items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
|
||||
{invitation.workspace.name.charAt(0)}
|
||||
<span className="flex h-full w-full items-center justify-center rounded-xl bg-gray-700 p-4 uppercase text-white">
|
||||
{getFirstCharacters(invitation.workspace.name)}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-sm font-medium">{invitation.workspace.name}</div>
|
||||
<div className="text-sm font-medium">
|
||||
{truncateText(invitation.workspace.name, 30)}
|
||||
</div>
|
||||
<p className="text-sm text-brand-secondary">
|
||||
Invited by {invitation.workspace.owner.first_name}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 self-center">
|
||||
<input
|
||||
id={invitation.id}
|
||||
aria-describedby="workspaces"
|
||||
name={invitation.id}
|
||||
checked={invitationsRespond.includes(invitation.id)}
|
||||
value={invitation.workspace.name}
|
||||
onChange={(e) => {
|
||||
<button
|
||||
className={`${
|
||||
invitationsRespond.includes(invitation.id)
|
||||
? "bg-brand-surface-2 text-brand-secondary"
|
||||
: "bg-brand-accent text-white"
|
||||
} text-sm px-4 py-2 border border-brand-base rounded-3xl`}
|
||||
onClick={(e) => {
|
||||
handleInvitation(
|
||||
invitation,
|
||||
invitationsRespond.includes(invitation.id) ? "withdraw" : "accepted"
|
||||
);
|
||||
}}
|
||||
type="checkbox"
|
||||
className="h-4 w-4 rounded border-brand-base text-brand-accent focus:ring-brand-accent"
|
||||
/>
|
||||
>
|
||||
{invitationsRespond.includes(invitation.id)
|
||||
? "Invitation Accepted"
|
||||
: "Accept Invitation"}
|
||||
</button>
|
||||
{/* <input
|
||||
id={invitation.id}
|
||||
aria-describedby="workspaces"
|
||||
name={invitation.id}
|
||||
value={
|
||||
invitationsRespond.includes(invitation.id)
|
||||
? "Invitation Accepted"
|
||||
: "Accept Invitation"
|
||||
}
|
||||
onClick={(e) => {
|
||||
handleInvitation(
|
||||
invitation,
|
||||
invitationsRespond.includes(invitation.id) ? "withdraw" : "accepted"
|
||||
);
|
||||
}}
|
||||
type="button"
|
||||
className={`${
|
||||
invitationsRespond.includes(invitation.id)
|
||||
? "bg-brand-surface-2 text-brand-secondary"
|
||||
: "bg-brand-accent text-white"
|
||||
} text-sm px-4 py-2 border border-brand-base rounded-3xl`}
|
||||
|
||||
// className="h-4 w-4 rounded border-brand-base text-brand-accent focus:ring-brand-accent"
|
||||
/> */}
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -167,7 +216,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex w-full items-center justify-center rounded-b-[10px] py-7">
|
||||
<div className="flex w-full items-center justify-center rounded-b-[10px] pt-10">
|
||||
<PrimaryButton
|
||||
type="submit"
|
||||
className="w-1/2 text-center"
|
||||
|
|
@ -180,6 +229,16 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
|
|||
</div>
|
||||
</div>
|
||||
</Tab.Panel>
|
||||
<Tab.Panel className="h-full">
|
||||
<CreateWorkspaceForm
|
||||
onSubmit={(res) => {
|
||||
setWorkspace(res);
|
||||
setStep(3);
|
||||
}}
|
||||
defaultValues={defaultValues}
|
||||
setDefaultValues={setDefaultValues}
|
||||
/>
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue