feat(admin): ✨ added create new store page

apps/admin/.env.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_API_URL=
+NEXT_PUBLIC_GOOGLE_CLIENT_ID=

apps/admin/env.d.ts

@@ -1,6 +1,9 @@
 declare global {
 	namespace NodeJS {
-		interface ProcessEnv {}
+		interface ProcessEnv {
+			NEXT_PUBLIC_API_URL: string;
+			NEXT_PUBLIC_GOOGLE_CLIENT_ID: string;
+		}
 	}
 }
 

apps/admin/package.json

@@ -19,12 +19,15 @@
 		"@chakra-ui/react": "^2.8.0",
 		"@emotion/react": "^11.11.1",
 		"@emotion/styled": "^11.11.0",
+		"@hookform/resolvers": "^2.9.11",
 		"@tanstack/react-table": "^8.9.11",
 		"framer-motion": "^6.5.1",
 		"next": "latest",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
-		"react-icons": "^4.11.0"
+		"react-hook-form": "^7.45.4",
+		"react-icons": "^4.11.0",
+		"yup": "^0.32.11"
 	},
 	"devDependencies": {
 		"@graphql-codegen/cli": "2.6.2",

apps/admin/src/components/auth/AuthProvider.tsx

@@ -0,0 +1,29 @@
+import { Stack, Button, Box } from "@chakra-ui/react";
+import { FcGoogle } from "react-icons/fc";
+import { GOOGLE_OAUTH_REDIRECT_URL } from "../../../constants";
+
+const SignInWithGoogle = () => (
+	<Stack spacing="4" as="a" href={getGoogleOAuthUrl()}>
+		<Button leftIcon={<Box as={FcGoogle} />}>Continue with Google</Button>
+	</Stack>
+);
+
+export default SignInWithGoogle;
+
+export const getGoogleOAuthUrl = () => {
+	const rootUrl = "https://accounts.google.com/o/oauth2/v2/auth";
+
+	const qs = new URLSearchParams({
+		redirect_uri: GOOGLE_OAUTH_REDIRECT_URL,
+		client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
+		access_type: "offline",
+		response_type: "code",
+		prompt: "consent",
+		scope: [
+			"https://www.googleapis.com/auth/userinfo.profile",
+			"https://www.googleapis.com/auth/userinfo.email",
+		].join(" "),
+	});
+
+	return `${rootUrl}?${qs.toString()}`;
+};

apps/admin/src/components/auth/LoginForm.tsx

@@ -0,0 +1,158 @@
+import {
+	Button,
+	Flex,
+	LightMode,
+	Stack,
+	Text,
+	useColorModeValue as mode,
+	useToast,
+} from "@chakra-ui/react";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as Yup from "yup";
+import { useRouter } from "next/router";
+import { useAdminLoginMutation } from "@/generated/graphql";
+import UnderlineLink from "@/components/ui/UnderlineLink";
+import InputField from "../ui/InputField";
+
+interface FormValues {
+	email: string;
+	password: string;
+}
+
+const LoginFormSchema = Yup.object({
+	email: Yup.string().email().required("Required"),
+	password: Yup.string()
+		.required("Required")
+		.min(8, "Too Short")
+		.max(20, "Too Long"),
+});
+
+const LoginForm = () => {
+	const toast = useToast();
+	const router = useRouter();
+	const {
+		register,
+		handleSubmit,
+		formState: { errors, dirtyFields },
+		setError,
+	} = useForm<FormValues>({
+		defaultValues: {
+			email: "",
+			password: "",
+		},
+		resolver: yupResolver(LoginFormSchema),
+	});
+	const [loginMutation, { loading }] = useAdminLoginMutation({
+		onCompleted: (data) => {
+			const { errors: userErrors, user } = data.adminLogin;
+			if (userErrors) {
+				toast({
+					title: "Login Failed",
+					description: userErrors[0].message,
+					status: "error",
+					duration: 5000,
+					isClosable: true,
+				});
+				setError(userErrors[0].field as "email" | "password", {
+					type: "manual",
+					message: userErrors[0].message,
+				});
+			} else {
+				toast({
+					title: "Login successful",
+					description: `Welcome back, ${user?.first_name}!`,
+					status: "success",
+					duration: 5000,
+					isClosable: true,
+				});
+				router.push((router.query.redirect as string) ?? "/dashboard");
+			}
+		},
+		onError: (error) => {
+			toast({
+				title: "Login Failed",
+				description: error.message,
+				status: "error",
+				duration: 5000,
+				isClosable: true,
+			});
+		},
+		refetchQueries: ["MeStaff"],
+	});
+
+	return (
+		<form
+			onSubmit={handleSubmit((values) =>
+				loginMutation({
+					variables: {
+						email: values.email,
+						password: values.password,
+					},
+				})
+			)}
+		>
+			<Stack spacing="-px">
+				<InputField
+					register={{ ...register("email") }}
+					error={errors.email}
+					touched={dirtyFields.email}
+					showErrorMessage={false}
+					showLabel={false}
+					required
+					name="email"
+					type="email"
+					label="Email address"
+					autoComplete="email"
+					placeholder="Email address"
+					size="lg"
+					bg={mode("white", "gray.700")}
+					fontSize="md"
+					roundedBottom="0"
+				/>
+				<InputField
+					register={{ ...register("password") }}
+					error={errors.password}
+					touched={dirtyFields.password}
+					showErrorMessage={false}
+					showLabel={false}
+					label="Password"
+					name="password"
+					type="password"
+					autoComplete="current-password"
+					required
+					size="lg"
+					bg={mode("white", "gray.700")}
+					fontSize="md"
+					roundedTop="0"
+					placeholder="Password"
+				/>
+			</Stack>
+			<Flex align="center" justify="space-between" mt="8">
+				<Text>
+					Dont Have a Store yet?{" "}
+					<UnderlineLink href="/auth/register">Create Store</UnderlineLink>
+				</Text>
+				<UnderlineLink href="/auth/forgot-password" fontSize="sm">
+					Forgot Password
+				</UnderlineLink>
+			</Flex>
+			<LightMode>
+				<Button
+					isLoading={loading}
+					size="lg"
+					type="submit"
+					mt="8"
+					w="full"
+					colorScheme="primary"
+					fontSize="md"
+					fontWeight="bold"
+				>
+					Sign in
+				</Button>
+			</LightMode>
+		</form>
+	);
+};
+
+export default LoginForm;