signIn component

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "^3.1.0",
+    "@mui/material": "^5.13.5",
+    "@types/node": "20.3.1",
+    "@types/react": "18.2.13",
+    "@types/react-dom": "18.2.6",
+    "autoprefixer": "10.4.14",
+    "eslint": "8.43.0",
+    "eslint-config-next": "13.4.6",
+    "next": "13.4.6",
+    "postcss": "8.4.24",
+    "react": "^18.2.0",
+    "react-dom": "18.2.0",
+    "react-hook-form": "^7.45.0",
+    "react-toastify": "^9.1.3",
+    "tailwindcss": "3.3.2",
+    "typescript": "5.1.3",
+    "yup": "^1.2.0"
+  }
+}

pages/index.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import {Box, Button, createTheme, Grid, TextField, ThemeProvider} from "@mui/material";
+import {useForm} from "react-hook-form";
+import * as yup from "yup";
+import {yupResolver} from "@hookform/resolvers/yup";
+import {ToastContainer, toast} from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+
+const theme = createTheme({
+    palette: {
+        primary: {
+            main: '#FF0000',
+            contrastText: '#fff',
+        },
+    },
+});
+
+const themeDefault = createTheme({
+    palette: {
+        primary: {
+            main: '#5ba1ec',
+            contrastText: '#fff',
+        },
+    },
+});
+
+
+interface IFormInputs {
+    email: string;
+    password: string;
+}
+
+const email =
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+
+
+const SignupSchema = yup.object({
+    email: yup.string().email().required().trim().lowercase().matches(new RegExp(email), 'email must be a valid email'),
+    password: yup.string().defined().required().typeError('Please input a valid password')
+});
+
+const Contact = () => {
+
+    const {
+        register,
+        handleSubmit,
+        formState: {errors}
+    } = useForm<IFormInputs>({
+        mode: 'onSubmit',
+        resolver: yupResolver(SignupSchema)
+    });
+
+    const onSubmit = (data: IFormInputs) => {
+        if (data) {
+            toast.success('Congrats! SignIn Successfully')
+        }
+    };
+
+
+    return (
+        <div className="container" style={{textAlign: "center", width: "30vw", margin: '30vh auto 0'}}>
+            <Box component='form' onSubmit={handleSubmit(onSubmit)}>
+                <Grid container spacing={4}>
+                    <ThemeProvider theme={errors.email?.message ? theme : themeDefault}>
+                        <Grid item xs={12}>
+                            <TextField fullWidth
+                                       label='Email address'
+                                       size='small'
+                                       {...register("email")}
+                                       helperText={errors.email?.message}
+                            />
+                        </Grid>
+                    </ThemeProvider>
+
+                    <Grid item xs={12}>
+                        <TextField fullWidth
+                                   label='Enter your password'
+                                   size='small'
+                                   {...register("password")}
+                                   helperText={errors.password?.message}
+                        />
+                    </Grid>
+
+                    <Grid item xs={12}>
+                        <Button type='submit' fullWidth variant="contained">Sign In</Button>
+                    </Grid>
+                </Grid>
+                <ToastContainer/>
+            </Box>
+        </div>
+    )
+}
+
+export default Contact

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

tailwind.config.js

@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+    },
+  },
+  plugins: [],
+}

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}