Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 LAKHAN BAHETI
|
6c3c3c3aa3 |
@@ -1,6 +1,6 @@
|
||||
import React, { useEffect } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { XCircle } from "lucide-react";
|
||||
import { XCircle, X } from "lucide-react";
|
||||
// services
|
||||
import { AuthService } from "services/auth.service";
|
||||
// hooks
|
||||
@@ -27,6 +27,8 @@ const authService = new AuthService();
|
||||
|
||||
export const EmailForm: React.FC<Props> = (props) => {
|
||||
const { handleStepChange, updateEmail } = props;
|
||||
// states
|
||||
const [emailErrorToast, setEmailErrorToast] = useState(false);
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
@@ -91,23 +93,51 @@ export const EmailForm: React.FC<Props> = (props) => {
|
||||
validate: (value) => checkEmailValidity(value) || "Email is invalid",
|
||||
}}
|
||||
render={({ field: { value, onChange, ref } }) => (
|
||||
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
ref={ref}
|
||||
hasError={Boolean(errors.email)}
|
||||
placeholder="orville.wright@frstflt.com"
|
||||
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
|
||||
/>
|
||||
{value.length > 0 && (
|
||||
<XCircle
|
||||
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
|
||||
onClick={() => onChange("")}
|
||||
<div className="flex transition-all">
|
||||
<div
|
||||
className={`relative flex-grow flex items-center rounded-[4.5px] bg-onboarding-background-200 border-0 ${
|
||||
errors.email
|
||||
? "!border-2 border-red-200"
|
||||
: "focus-within:!border-2 focus-within:border-custom-primary-30 "
|
||||
}`}
|
||||
>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={value}
|
||||
onChange={(event) => {
|
||||
if (errors.email && !emailErrorToast) setEmailErrorToast(true);
|
||||
onChange(event.target.value);
|
||||
}}
|
||||
ref={ref}
|
||||
hasError={Boolean(errors.email)}
|
||||
placeholder="orville.wright@frstflt.com"
|
||||
className={`h-[46px] w-full !rounded-[3.5px] !border ${
|
||||
errors.email ? "!border-red-400" : "focus:border-custom-primary-100"
|
||||
} pr-12 placeholder:text-onboarding-text-400`}
|
||||
/>
|
||||
{value.length > 0 && (
|
||||
<XCircle
|
||||
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
|
||||
onClick={() => onChange("")}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{errors.email && emailErrorToast && (
|
||||
<div className="absolute ml-[400px] w-full transition-all">
|
||||
<div className="relative px-2 gap-x-2 flex w-fit h-10 bg-red-50 rounded-[4px] border border-red-200">
|
||||
{"🤥"}
|
||||
<div>
|
||||
<X
|
||||
className="right-1 top-1 absolute h-2.5 w-2.5 hover:cursor-pointer stroke-custom-text-400"
|
||||
onClick={() => setEmailErrorToast(false)}
|
||||
/>
|
||||
<p className="mt-1 text-[10px]">That doesn{"’"}t look like an email address.</p>
|
||||
<p className="mt-1 text-[10px]">Sometimes, we miss an @ or a . Make sure you have it right.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -244,7 +244,15 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
|
||||
<button
|
||||
type="button"
|
||||
className="ml-3 hidden place-items-center self-center rounded group-hover:grid"
|
||||
onClick={() => remove(index)}
|
||||
onClick={() => {
|
||||
if (fields.length > 3) {
|
||||
remove(index);
|
||||
} else {
|
||||
setValue(`emails.${index}.email`, "");
|
||||
setValue(`emails.${index}.role`, 15);
|
||||
setValue(`emails.${index}.role_active`, false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<XCircle className="h-3.5 w-3.5 text-custom-text-400" />
|
||||
</button>
|
||||
|
||||
@@ -14,7 +14,7 @@ import { IUser } from "types";
|
||||
// services
|
||||
import { FileService } from "services/file.service";
|
||||
// assets
|
||||
import IssuesSvg from "public/onboarding/onboarding-issues.webp";
|
||||
import IssuesSvg from "public/onboarding/onboarding-issues.png";
|
||||
|
||||
const defaultValues: Partial<IUser> = {
|
||||
first_name: "",
|
||||
|
||||
@@ -43,7 +43,7 @@ export const SignInView = observer(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3 ">
|
||||
<div className="mx-auto relative h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3 ">
|
||||
<div className="h-full overflow-auto rounded-t-md bg-onboarding-gradient-200 px-7 pb-56 pt-24 sm:px-0">
|
||||
{!envConfig ? (
|
||||
<div className="mx-auto flex justify-center pt-10">
|
||||
|
||||
@@ -139,7 +139,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
|
||||
<SwitchOrDeleteAccountModal isOpen={showDeleteAccountModal} onClose={() => setShowDeleteAccountModal(false)} />
|
||||
{user && step !== null ? (
|
||||
<div className={`fixed flex h-full w-full flex-col bg-onboarding-gradient-100`}>
|
||||
<div className="flex items-center px-4 py-10 sm:px-7 sm:pb-8 sm:pt-14 md:px-14 lg:pl-28 lg:pr-24">
|
||||
<div className="flex items-center px-4 py-10 sm:px-7 sm:pb-8 sm:pt-14 md:px-14 lg:pl-28 ">
|
||||
<div className="flex w-full items-center justify-between font-semibold ">
|
||||
<div className="flex items-center gap-x-1 text-3xl">
|
||||
<Image src={BluePlaneLogoWithoutText} alt="Plane Logo" height={30} width={30} />
|
||||
@@ -158,8 +158,8 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
|
||||
currentUser?.first_name
|
||||
? `${currentUser?.first_name} ${currentUser?.last_name ?? ""}`
|
||||
: value.length > 0
|
||||
? value
|
||||
: currentUser?.email
|
||||
? value
|
||||
: currentUser?.email
|
||||
}
|
||||
src={currentUser?.avatar}
|
||||
size={35}
|
||||
@@ -174,13 +174,13 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
|
||||
{currentUser?.first_name
|
||||
? `${currentUser?.first_name} ${currentUser?.last_name ?? ""}`
|
||||
: value.length > 0
|
||||
? value
|
||||
: null}
|
||||
? value
|
||||
: null}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<Menu>
|
||||
<Menu.Button className={"flex items-center gap-x-2"}>
|
||||
<Menu.Button className={"flex items-center gap-x-2 min-w-[180px]"}>
|
||||
<span className="text-base font-medium">{user.email}</span>
|
||||
<ChevronDown className="h-4 w-4 text-custom-text-300" />
|
||||
</Menu.Button>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 251 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
Reference in New Issue
Block a user