From 8dcaadf35ec3d7e0dcdec56564537f7678f878f9 Mon Sep 17 00:00:00 2001 From: jawelu1998 Date: Fri, 23 Jun 2023 20:51:47 -0700 Subject: [PATCH] signIn component --- next-env.d.ts | 5 +++ next.config.js | 4 ++ package.json | 32 ++++++++++++++++ pages/index.tsx | 95 ++++++++++++++++++++++++++++++++++++++++++++++ postcss.config.js | 6 +++ tailwind.config.js | 18 +++++++++ tsconfig.json | 29 ++++++++++++++ 7 files changed, 189 insertions(+) create mode 100644 next-env.d.ts create mode 100644 next.config.js create mode 100644 package.json create mode 100644 pages/index.tsx create mode 100644 postcss.config.js create mode 100644 tailwind.config.js create mode 100644 tsconfig.json diff --git a/next-env.d.ts b/next-env.d.ts new file mode 100644 index 00000000..4f11a03d --- /dev/null +++ b/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/next.config.js b/next.config.js new file mode 100644 index 00000000..767719fc --- /dev/null +++ b/next.config.js @@ -0,0 +1,4 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = {} + +module.exports = nextConfig diff --git a/package.json b/package.json new file mode 100644 index 00000000..b2fcdfd7 --- /dev/null +++ b/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" + } +} diff --git a/pages/index.tsx b/pages/index.tsx new file mode 100644 index 00000000..e9f259c0 --- /dev/null +++ b/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({ + mode: 'onSubmit', + resolver: yupResolver(SignupSchema) + }); + + const onSubmit = (data: IFormInputs) => { + if (data) { + toast.success('Congrats! SignIn Successfully') + } + }; + + + return ( +
+ + + + + + + + + + + + + + + + + + +
+ ) +} + +export default Contact diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 00000000..33ad091d --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 00000000..d53b2eaa --- /dev/null +++ b/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: [], +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 00000000..bac7e3ea --- /dev/null +++ b/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"] +}