Skip to content

Commit

Permalink
feat: Ui changes, refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
Siddharth committed Oct 30, 2023
1 parent 4b581d1 commit 2a9860d
Show file tree
Hide file tree
Showing 7 changed files with 284 additions and 102 deletions.
59 changes: 40 additions & 19 deletions apps/dashboard/app/security/email/add/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
"use client"

import ArrowForwardIcon from "@mui/icons-material/ArrowForward"

import {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore-next-line no-implicit-any error
experimental_useFormStatus as useFormStatus,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore-next-line no-implicit-any error
experimental_useFormState as useFormState,
Expand All @@ -16,23 +12,24 @@ import {
Button,
Input,
FormControl,
FormLabel,
FormHelperText,
Card,
Typography,
Card,
} from "@mui/joy"
import InfoOutlined from "@mui/icons-material/InfoOutlined"
import Link from "next/link"

import { emailRegisterInitiateServerAction } from "../../server-actions"

import FormSubmitButton from "@/components/form-submit-button"

export default function AddEmail() {
const [state, formAction] = useFormState(emailRegisterInitiateServerAction, {
error: null,
message: null,
responsePayload: {},
})
const { pending } = useFormStatus()

return (
<main
style={{
Expand All @@ -42,26 +39,27 @@ export default function AddEmail() {
marginTop: "4em",
}}
>
<Card
<Box
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
width: "30em",
gap: "1em",
gap: "1.5em",
}}
>
<Typography level="h4">Add Email Address</Typography>

<Typography level="h2">Add Your Email Address</Typography>
<Box>
<Typography>A Verification Code sent to this Email </Typography>
</Box>
<FormControl
sx={{
width: "90%",
}}
error={state.error}
>
<form action={formAction}>
<FormLabel>Email</FormLabel>
<Input
name="email"
type="email"
Expand All @@ -74,7 +72,7 @@ export default function AddEmail() {
{state.error ? (
<FormHelperText>
<InfoOutlined />
Oops! something is wrong.
{state.message}
</FormHelperText>
) : null}

Expand All @@ -87,23 +85,46 @@ export default function AddEmail() {
alignItems: "center",
}}
>
<Link href={"/security"}> Cancel</Link>
<Button
loading={pending}
<Link href={"/security"} style={{ width: "49%" }}>
<Button
type="submit"
name="submit"
color="danger"
variant="outlined"
sx={{
marginTop: "1em",
display: "flex",
gap: "1em",
width: "100%",
}}
>
Cancel
</Button>
</Link>
<FormSubmitButton
type="submit"
name="submit"
sx={{
marginTop: "2em",
marginTop: "1em",
display: "flex",
gap: "1em",
width: "49%",
}}
>
Send Code <ArrowForwardIcon></ArrowForwardIcon>
</Button>
</FormSubmitButton>
</Box>
</form>
</FormControl>
</Card>
<Card
sx={{
width: "90%",
textAlign: "center",
}}
>
<Typography>This Email can be used to login to your Account.</Typography>
</Card>
</Box>
</main>
)
}
24 changes: 17 additions & 7 deletions apps/dashboard/app/security/email/verify/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
emailRegistrationInitiate,
} from "@/services/graphql/mutations/email"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"
import { UserEmailRegistrationInitiateMutation } from "@/services/graphql/generated"

type VerifyEmailProp = {
emailRegistrationId: string | null | undefined
Expand All @@ -23,14 +24,18 @@ export default async function VerifyEmail({
const token = session?.accessToken

// this is if user has address but not verified
if (!emailRegistrationId || typeof emailRegistrationId !== "string") {
const email = session?.userData.data.me?.email?.address
if (!email || typeof email !== "string" || !token) {
redirect("/security")
}
const email = session?.userData.data.me?.email?.address
if (!email || typeof email !== "string") {
redirect("/security")
}

if (!token || typeof token !== "string") {
redirect("/security")
}

if (!emailRegistrationId || typeof emailRegistrationId !== "string") {
await deleteEmail(token)
let data
let data: UserEmailRegistrationInitiateMutation | null | undefined
try {
data = await emailRegistrationInitiate(email, token)
} catch (err) {
Expand All @@ -49,5 +54,10 @@ export default async function VerifyEmail({
redirect("/security")
}

return <VerifyEmailForm emailRegistrationId={emailRegistrationId}></VerifyEmailForm>
return (
<VerifyEmailForm
email={email}
emailRegistrationId={emailRegistrationId}
></VerifyEmailForm>
)
}
69 changes: 51 additions & 18 deletions apps/dashboard/app/security/email/verify/verify-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,6 @@

import ArrowForwardIcon from "@mui/icons-material/ArrowForward"
import {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore-next-line no-implicit-any error
experimental_useFormStatus as useFormStatus,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore-next-line no-implicit-any error
experimental_useFormState as useFormState,
Expand All @@ -15,7 +12,6 @@ import {
Button,
Input,
FormControl,
FormLabel,
FormHelperText,
Card,
Typography,
Expand All @@ -25,12 +21,16 @@ import Link from "next/link"

import { emailRegisterValidateServerAction } from "../../server-actions"

import FormSubmitButton from "@/components/form-submit-button"

type VerifyEmailFormProps = {
emailRegistrationId: string
email: string
}
export default function VerifyEmailForm({ emailRegistrationId }: VerifyEmailFormProps) {
const { pending } = useFormStatus()

export default function VerifyEmailForm({
emailRegistrationId,
email,
}: VerifyEmailFormProps) {
const [state, formAction] = useFormState(emailRegisterValidateServerAction, {
error: null,
message: null,
Expand All @@ -46,24 +46,35 @@ export default function VerifyEmailForm({ emailRegistrationId }: VerifyEmailForm
marginTop: "4em",
}}
>
<Card
<Box
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
width: "30em",
gap: "1.5em",
}}
>
<Typography level="h3">Verification Code</Typography>
<Typography level="h2">Email Verification Code</Typography>
<Box>
<Typography>Enter The verfication Code sent to your Email </Typography>
<Typography
sx={{
textAlign: "center",
}}
level="h4"
>
{email}{" "}
</Typography>
</Box>
<FormControl
sx={{
width: "90%",
}}
error={state.error}
>
<form action={formAction}>
<FormLabel>Code</FormLabel>
<input type="hidden" name="emailRegistrationId" value={emailRegistrationId} />
<Input
name="code"
Expand All @@ -78,36 +89,58 @@ export default function VerifyEmailForm({ emailRegistrationId }: VerifyEmailForm
{state.error ? (
<FormHelperText>
<InfoOutlined />
{state.message.message}
{state.message}
</FormHelperText>
) : null}

<Box
sx={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
width: "100%",
alignItems: "center",
}}
>
<Link href={"/security"}>Cancel</Link>
<Button
loading={pending}
<Link href={"/security"} style={{ width: "49%" }}>
<Button
type="submit"
name="submit"
color="danger"
variant="outlined"
sx={{
marginTop: "1em",
display: "flex",
gap: "1em",
width: "100%",
}}
>
Cancel
</Button>
</Link>
<FormSubmitButton
type="submit"
name="submit"
sx={{
marginTop: "2em",
marginTop: "1em",
display: "flex",
gap: "1em",
width: "49%",
}}
>
Confirm <ArrowForwardIcon></ArrowForwardIcon>
</Button>
</FormSubmitButton>
</Box>
</form>
</FormControl>
</Card>
<Card
sx={{
width: "90%",
textAlign: "center",
}}
>
<Typography>This Email can be used to login to your Account.</Typography>
</Card>
</Box>
</main>
)
}
27 changes: 23 additions & 4 deletions apps/dashboard/app/security/server-actions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,20 @@
import { getServerSession } from "next-auth"
import { redirect } from "next/navigation"

import { revalidatePath } from "next/cache"

import {
deleteEmail,
emailRegistrationInitiate,
emailRegistrationValidate,
} from "@/services/graphql/mutations/email"
import { authOptions } from "@/app/api/auth/[...nextauth]/route"

import {
UserEmailRegistrationInitiateMutation,
UserEmailRegistrationValidateMutation,
} from "@/services/graphql/generated"

export const emailRegisterInitiateServerAction = async (
_prevState: unknown,
form: FormData,
Expand All @@ -31,7 +39,7 @@ export const emailRegisterInitiateServerAction = async (
}
}

let data
let data: UserEmailRegistrationInitiateMutation | null | undefined
try {
data = await emailRegistrationInitiate(email, token)
} catch (err) {
Expand All @@ -45,9 +53,10 @@ export const emailRegisterInitiateServerAction = async (
}

if (data?.userEmailRegistrationInitiate.errors.length) {
console.log()
return {
error: true,
message: data?.userEmailRegistrationInitiate.errors[0],
message: data?.userEmailRegistrationInitiate.errors[0].message,
data: null,
}
}
Expand Down Expand Up @@ -87,7 +96,7 @@ export const emailRegisterValidateServerAction = async (
}
}

let codeVerificationResponse
let codeVerificationResponse: UserEmailRegistrationValidateMutation | null | undefined
try {
codeVerificationResponse = await emailRegistrationValidate(
code,
Expand All @@ -107,10 +116,20 @@ export const emailRegisterValidateServerAction = async (
if (codeVerificationResponse?.userEmailRegistrationValidate.errors.length) {
return {
error: true,
message: codeVerificationResponse?.userEmailRegistrationValidate.errors[0],
message: codeVerificationResponse?.userEmailRegistrationValidate.errors[0].message,
data: null,
}
}

redirect("/security")
}

export const deleteEmailServerAction = async () => {
const session = await getServerSession(authOptions)
const token = session?.accessToken
if (!token && typeof token !== "string") {
return
}
await deleteEmail(token)
revalidatePath("/security")
}
Loading

0 comments on commit 2a9860d

Please sign in to comment.