From 0ec50b5cd7dc53faf189c16c411d86315acc8d5d Mon Sep 17 00:00:00 2001 From: ronak1603 Date: Fri, 2 Sep 2022 16:57:45 +0530 Subject: [PATCH 1/3] Styled Components --- package-lock.json | 38 ++++++++++++++- package.json | 4 +- src/routes/Home/index.tsx | 14 ++++++ src/routes/Signup/index.tsx | 86 ++++++++++++++++++++++++--------- src/routes/Signup/style.css | 18 ------- src/routes/index.tsx | 55 +++++++++++++++++++-- src/routes/login/index.tsx | 22 ++++++--- src/store/actionTypes/index.tsx | 1 - src/utils/paths.tsx | 4 +- 9 files changed, 184 insertions(+), 58 deletions(-) create mode 100644 src/routes/Home/index.tsx delete mode 100644 src/routes/Signup/style.css diff --git a/package-lock.json b/package-lock.json index f2ffaed..8b8ad92 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,7 +29,9 @@ "web-vitals": "^2.1.4" }, "devDependencies": { - "@types/redux-logger": "^3.0.9" + "@types/redux-logger": "^3.0.9", + "@types/styled-components": "^5.1.26", + "@types/uuid": "^8.3.4" } }, "node_modules/@adobe/css-tools": { @@ -3958,6 +3960,17 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==" }, + "node_modules/@types/styled-components": { + "version": "5.1.26", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.26.tgz", + "integrity": "sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==", + "dev": true, + "dependencies": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/testing-library__jest-dom": { "version": "5.14.5", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.5.tgz", @@ -3976,6 +3989,12 @@ "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" }, + "node_modules/@types/uuid": { + "version": "8.3.4", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz", + "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==", + "dev": true + }, "node_modules/@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -19538,6 +19557,17 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==" }, + "@types/styled-components": { + "version": "5.1.26", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.26.tgz", + "integrity": "sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==", + "dev": true, + "requires": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "csstype": "^3.0.2" + } + }, "@types/testing-library__jest-dom": { "version": "5.14.5", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.5.tgz", @@ -19556,6 +19586,12 @@ "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" }, + "@types/uuid": { + "version": "8.3.4", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz", + "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==", + "dev": true + }, "@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", diff --git a/package.json b/package.json index 1b418e0..b89b91b 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,8 @@ ] }, "devDependencies": { - "@types/redux-logger": "^3.0.9" + "@types/redux-logger": "^3.0.9", + "@types/styled-components": "^5.1.26", + "@types/uuid": "^8.3.4" } } diff --git a/src/routes/Home/index.tsx b/src/routes/Home/index.tsx new file mode 100644 index 0000000..048879e --- /dev/null +++ b/src/routes/Home/index.tsx @@ -0,0 +1,14 @@ +import React from 'react' + +function Home() { + const logoutHandler = ():void=>{ + localStorage.clear(); +} + return (<> +
Home Page
+ + + ) +} + +export default Home \ No newline at end of file diff --git a/src/routes/Signup/index.tsx b/src/routes/Signup/index.tsx index b7faa4b..b0de30e 100644 --- a/src/routes/Signup/index.tsx +++ b/src/routes/Signup/index.tsx @@ -1,12 +1,13 @@ import { Dispatch } from "redux"; -import React, { useState } from "react"; +import React, { Fragment, useState } from "react"; import { connect } from "react-redux"; -import "./style.css"; -import {signUp} from "./../../store/actions/index"; +import { signUp } from "./../../store/actions/index"; + +import styled from "styled-components"; interface propsType { - signUp: (name: string,id:string,pass:string) => void; + signUp: (name: string, id: string, pass: string) => void; } const Signup = (props: propsType) => { const [name, setName] = useState(""); @@ -14,6 +15,7 @@ const Signup = (props: propsType) => { const [password, setPassword] = useState(""); const inputNameHandler = (e: React.ChangeEvent): void => { + console.log(e.target.value); setName(e.target.value); }; @@ -25,43 +27,81 @@ const Signup = (props: propsType) => { setPassword(e.target.value); }; - const inputSubmit = ():void=>{ - - props.signUp(name, userId, password); - setPassword("....."); + const inputSubmit = (): void => { + + props.signUp(name, userId, password); + setPassword("....."); } - return ( +// const StyledInputDiv = styled.div` +// background-color:blue;` + +const StyledInput = styled.input` + width:400px; + ;` + + // const StyledCheckInput = styled.input` + + // margin-left: 819px; + // margin-top: 10px; + // background-color: blue;` + + const StyledButton = styled.button` + padding: 8px 16px; + width: 445px; + height: 50px; + margin-left: 819px; + margin-top: 40px; + background: blue; + color:white; + border: 1px solid #F1F1FA; + border-radius: 16px;` + + // const Styleddiv = styled.div` + // background-color:pink; + // width:400px;` + + + // width: 400px; + // height: 40px; + // margin-left: 819px; + // margin-top: 40px; + // background: #FFFFFF; + // border: 1px solid #F1F1FA; + // border-radius: 16px + + return ( +

Welcome,

Get Started

- - + - + - + > + + +
+ ); }; const mapDispatchToProps = (dispatch: Dispatch) => { return { - signUp: (name:string,id:string,pass:string) => dispatch(signUp(name,id,pass)), + signUp: (name: string, id: string, pass: string) => dispatch(signUp(name, id, pass)), }; }; diff --git a/src/routes/Signup/style.css b/src/routes/Signup/style.css deleted file mode 100644 index 0ab60b7..0000000 --- a/src/routes/Signup/style.css +++ /dev/null @@ -1,18 +0,0 @@ -#signup_name_input{ - margin-top: 200px; - width:300px; - height:30px; - font-size: x-large; -} -#signup_id_input{ - margin-top: 200px; - width:300px; - height:30px; - font-size: x-large; -} -#signup_pass_input{ - margin-top: 200px; - width:300px; - height:30px; - font-size: x-large; -} \ No newline at end of file diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 9ef2af5..857cc60 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,11 +1,56 @@ -import { useRoutes } from "react-router-dom"; +import { ReactNode } from "react"; +import { Routes, Route, Navigate } from "react-router-dom"; -import { HOMEPAGE } from "../utils/paths"; +import {v4 as uuid} from "uuid"; + +import { ROOT_ROUTE, HOME_ROUTE, LOGIN_ROUTE } from "../utils/paths"; + +import Login from "./Login/index"; import Signup from "./Signup/index"; +import Home from "./Home"; + +const routesConfig = [ + { + path: ROOT_ROUTE, + component: , + privateRoute: false, + }, + { + path: LOGIN_ROUTE, + component: , + privateRoute: false, + }, + { + path: HOME_ROUTE, + component: , + privateRoute: true, + }, +]; + +const elements = (component: ReactNode, privateRoute: boolean) => { + const isUserPresent = localStorage.getItem("Login"); + const isValidRoute = + (privateRoute && isUserPresent) || !(privateRoute || isUserPresent); + if(isValidRoute) + return component; + return +}; const AppRoutes = () => { - const routes = useRoutes([{ path: HOMEPAGE, element: }]); - return routes; + return ( + + {routesConfig.map((route) => { + const obj = { ...route }; + return ( + + ); + })} + + ); }; -export default AppRoutes; \ No newline at end of file +export default AppRoutes; diff --git a/src/routes/login/index.tsx b/src/routes/login/index.tsx index bd9e220..a844a29 100644 --- a/src/routes/login/index.tsx +++ b/src/routes/login/index.tsx @@ -1,11 +1,17 @@ -import { Dispatch } from "redux"; -import React from "react"; -import { connect } from "react-redux"; +import React from 'react' +import { useNavigate } from 'react-router-dom'; -function Home(){ - return( -

Home Page

- ); +function Login() { + const navigate = useNavigate(); + const loginHandler = ():void => { + localStorage.setItem("Login","true"); + navigate('/home'); + } + return (<> +
Login Page
+ + + ) } -export default Home; \ No newline at end of file +export default Login \ No newline at end of file diff --git a/src/store/actionTypes/index.tsx b/src/store/actionTypes/index.tsx index 823b935..8e96d59 100644 --- a/src/store/actionTypes/index.tsx +++ b/src/store/actionTypes/index.tsx @@ -1,2 +1 @@ export const SIGNUP = "SIGNUP"; -export const LOGIN="LOGIN"; \ No newline at end of file diff --git a/src/utils/paths.tsx b/src/utils/paths.tsx index 20d453c..02ab642 100644 --- a/src/utils/paths.tsx +++ b/src/utils/paths.tsx @@ -1 +1,3 @@ -export const HOMEPAGE = "/"; \ No newline at end of file +export const ROOT_ROUTE = "/"; +export const LOGIN_ROUTE = "/login"; +export const HOME_ROUTE = "/home"; \ No newline at end of file From db630cbc06a430a18b110a726f538032fc2e3593 Mon Sep 17 00:00:00 2001 From: ronak1603 Date: Wed, 14 Sep 2022 09:40:51 +0530 Subject: [PATCH 2/3] Styled Components --- package-lock.json | 15 + package.json | 1 + src/assests/foto.svg | 9 + src/custom.d.ts | 4 + src/index.css | 16 +- src/index.tsx | 1 + src/routes/Signup/index.tsx | 601 ++++++++++++++++++++++++++++++++---- src/routes/login/index.tsx | 342 +++++++++++++++++++- tsconfig.json | 5 +- 9 files changed, 906 insertions(+), 88 deletions(-) create mode 100644 src/assests/foto.svg create mode 100644 src/custom.d.ts diff --git a/package-lock.json b/package-lock.json index 8b8ad92..2d2b7a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@types/react-dom": "^18.0.6", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^4.4.0", "react-redux": "^8.0.2", "react-router": "^6.3.0", "react-router-dom": "^6.3.0", @@ -13904,6 +13905,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-icons": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz", + "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -26589,6 +26598,12 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "react-icons": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz", + "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index b89b91b..17f9fa0 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@types/react-dom": "^18.0.6", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^4.4.0", "react-redux": "^8.0.2", "react-router": "^6.3.0", "react-router-dom": "^6.3.0", diff --git a/src/assests/foto.svg b/src/assests/foto.svg new file mode 100644 index 0000000..a131336 --- /dev/null +++ b/src/assests/foto.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/custom.d.ts b/src/custom.d.ts new file mode 100644 index 0000000..1f58936 --- /dev/null +++ b/src/custom.d.ts @@ -0,0 +1,4 @@ +declare module '*.svg' { + const content: any; + export default content; + } \ No newline at end of file diff --git a/src/index.css b/src/index.css index ec2585e..fb5c348 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,7 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; +*{ + padding:0; + margin:0; } + + diff --git a/src/index.tsx b/src/index.tsx index 4f8db96..96cc81a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,6 +3,7 @@ import { Provider } from 'react-redux'; import ReactDOM from 'react-dom/client'; import App from './App'; import store from './store/index'; +import "./index.css"; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement diff --git a/src/routes/Signup/index.tsx b/src/routes/Signup/index.tsx index b0de30e..fc9d502 100644 --- a/src/routes/Signup/index.tsx +++ b/src/routes/Signup/index.tsx @@ -6,6 +6,11 @@ import { signUp } from "./../../store/actions/index"; import styled from "styled-components"; +import { FcGoogle } from "react-icons/fc"; +import { AiOutlineEye } from "react-icons/ai"; + +import foto from "./../../assests/foto.svg"; + interface propsType { signUp: (name: string, id: string, pass: string) => void; } @@ -14,87 +19,554 @@ const Signup = (props: propsType) => { const [userId, setUserId] = useState(""); const [password, setPassword] = useState(""); - const inputNameHandler = (e: React.ChangeEvent): void => { - console.log(e.target.value); - setName(e.target.value); - }; + // const inputNameHandler = (e: React.ChangeEvent): void => { + // console.log(e.target.value); + // setName(e.target.value); + // }; - const inputIdHandler = (e: React.ChangeEvent): void => { - setUserId(e.target.value); - }; + // const inputIdHandler = (e: React.ChangeEvent): void => { + // setUserId(e.target.value); + // }; - const inputPassHandler = (e: React.ChangeEvent): void => { - setPassword(e.target.value); - }; + // const inputPassHandler = (e: React.ChangeEvent): void => { + // setPassword(e.target.value); + // }; + + // const inputSubmit = (): void => { - const inputSubmit = (): void => { + // props.signUp(name, userId, password); + // setPassword("....."); + // } - props.signUp(name, userId, password); - setPassword("....."); + const StyleMainDiv = styled.div` + display:flex; + flex-direction:row;` + + const LeftDiv = styled.div` + height:97vh; + width:55vw; + background:linear-gradient(to right,#5352ed 65%,#ffffff 65%); + // background-color:#5352ed; + display:flex; + flex-direction:column; + + @media only screen and (max-width: 600px) { + display:none; + } + ` + + const HeadingDiv = styled.div` + height:5%; + width:70%; + // border: 1px solid black; + margin-top:50px; + padding-left:15%; + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + @media only screen and (max-width: 600px) { + display:none; } + font-size: 30.1818px; + line-height: 51px; + letter-spacing: 0.03em; + color: #FFFFFF; + ` -// const StyledInputDiv = styled.div` -// background-color:blue;` + const Rightdiv = styled.div` + // background-color:whitesmoke; + height:96vh; + width:45vw; + display:flex; + // border: 1px solid black; + font-family: 'Inter', sans-serif; + justify-content:center; + @media screen and (max-width:300px){ + width:97vw; + } + @media screen and (min-width:301px) and (max-width:600px){ + width:97.5vw; + } + @media screen and (min-width:601px) and (max-width:1200px){ + width:45vw; + } + ` -const StyledInput = styled.input` - width:400px; - ;` + const StyledDiv = styled.div` + display:flex; + flex-direction:column; + width:70%; + justify-content:center; + align-items:center; + // border: 1px solid black; + padding-top:15%; + @media screen and (max-width:300px){ + width:95%; + } + @media screen and (min-width:301px) and (max-width:500px){ + width:90%; + } + @media screen and (min-width:501px) and (max-width:600px) { + width:90%; + } + @media screen and (min-width:601px) and (max-width:700px) { + width:85%; + } + @media screen and (min-width:701px) and (max-width:1050px) { + width:80%; + } + @media screen and (min-width:1050px) and (max-width:1200px) { + width:80%; + } + @media screen and (min-width:1201px) and (max-width:1500px) { + width:80%; + } + ` + + const StyledInput = styled.input` + background: #FFFFFF; + border: 1px solid #F1F1FA; + border-radius: 16px; + margin-top:5%; + width: 70.5%; + height: 8%; + font-family: 'Inter', sans-serif; + &::-webkit-input-placeholder{ + padding-left:3%; + } + @media screen and (max-width:300px){ + height:8%; + width:90%; + } + @media screen and (min-width:301px) and (max-width:500px){ + height:9%; + width:90%; + } + @media screen and (min-width:501px) and (max-width:600px){ + height:10%; + width:90%; + } + @media screen and (min-width:601px) and (max-width:900px){ + height:8%; + width:80%; + } + @media screen and (min-width:901px) and (max-width:1050px){ + height:9%; + width:80%; + } + @media screen and (min-width:1051px) and (max-width:1200px){ + height:10%; + width:80%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:20%; + width:80%; + } + ` + const PasswordDiv = styled.div` + display:flex; + flex-direction:row; + align-items:center; + background: #FFFFFF; + border: 2px solid #F1F1FA; + border-radius: 16px; + margin-top:5%; + width: 71%; + height: 8%; + font-family: 'Inter', sans-serif; + @media screen and (max-width:300px){ + height:8%; + width:90%; + } + @media screen and (min-width:301px) and (max-width:500px){ + height:9%; + width:90%; + } + @media screen and (min-width:501px) and (max-width:600px){ + height:10%; + width:90%; + } + @media screen and (min-width:601px) and (max-width:900px){ + height:8%; + width:80%; + } + @media screen and (min-width:901px) and (max-width:1050px){ + height:9%; + width:80%; + } + @media screen and (min-width:1051px) and (max-width:1200px){ + height:10%; + width:80%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:20%; + width:80%; + } + ` + const PassInput = styled.input` + width:95%; + border:none; + height:100%; + border-radius: 16px; + font-family: 'Inter', sans-serif; + &::-webkit-input-placeholder{ + padding-left:3%; + } + @media screen and (max-width:1200px){ + height:100%; + } + ` + const EyeDiv = styled.div` + padding-right:2%; + ` - // const StyledCheckInput = styled.input` + const CheckDiv = styled.div` + display:flex; + flex-direction:row; + width:75%; + justify-content:flex-start; + margin-top:5%; + font-style: normal; + font-weight: 350; + font-size: 79.59%; + line-height: 20px; + @media screen and (max-width:300px){ + height:5%; + width:90%; + padding-top:3%; + } + @media screen and (min-width:301px) and (max-width:500px){ + height:7%; + width:90%; + margin-top:5%; + } + @media screen and (min-width:501px) and (max-width:600px){ + height:7%; + width:90%; + margin-top:5%; + } + @media screen and (min-width:601px) and (max-width:900px){ + height:7%; + width:80%; + margin-top:7%; + } + @media screen and (min-width:901px) and (max-width:1050px){ + height:9%; + width:80%; + margin-top:5%; + } + @media screen and (min-width:1051px) and (max-width:1200px){ + height:10%; + width:80%; + margin-top:5%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:10%; + width:80%; + margin-top:5%; + } + ` - // margin-left: 819px; - // margin-top: 10px; - // background-color: blue;` + const CheckInput = styled.input` + width: 10%; + height: 50%; + padding: 0px 0px 8px 16px; + border-radius:2px; + border-color:red; + @media screen and (max-width:300px){ + height:60%; + width:7%; + } + @media screen and (min-width:301px) and (max-width:500px) { + height:60%; + width:7%; + } + @media screen and (min-width:501px) and (max-width:600px) { + height:60%; + width:5%; + } + @media screen and (min-width:601px) and (max-width:900px) { + height:50%; + width:7%; + } + @media screen and (min-width:901px) and (max-width:1200px) { + height:50%; + width:5%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:50%; + width:7%; + + } + ` + + const CheckText = styled.p` + width:100%; + height:60%; + font-family: 'Inter', sans-serif; + font-weight: 300; + font-size: 14.7959px; + line-height: 20px; + padding-left:1%; + @media screen and (max-width:1200px){ + width:100%; + } + // @media screen and (min-width:1200px) and (max-width:){ + // width:100%; + // } + ` const StyledButton = styled.button` - padding: 8px 16px; - width: 445px; - height: 50px; - margin-left: 819px; - margin-top: 40px; - background: blue; + // padding: 8px 16px; + width: 73%; + height: 8%; + margin-top: 2%; + background:#5352ED; color:white; border: 1px solid #F1F1FA; - border-radius: 16px;` + border-radius: 16px; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 90%; + line-height: 22px; + @media screen and (max-width:300px){ + height:9%; + width:90%; + margin-top:15%; + } + @media screen and (min-width:301px) and (max-width:400px){ + height:10%; + width:90%; + margin-top:10%; + } + @media screen and (min-width:401px) and (max-width:500px){ + height:10%; + width:90%; + margin-top:5%; + } + @media screen and (min-width:501px) and (max-width:600px){ + height:10%; + width:93%; + margin-top:5%; + } + @media screen and (min-width:601px) and (max-width:900px){ + height:8%; + width:80%; + margin-top:10%; + } + @media screen and (min-width:901px) and (max-width:1050px){ + height:9%; + width:80%; + margin-top:4%; + } + @media screen and (min-width:1051px) and (max-width:1200px){ + height:10%; + width:80%; + margin-top:4%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:20%; + width:80%; + margin-top:5%; + } + ` + + + const StyledText = styled.div` + display:flex; + justify-content:center; + width:73%; + margin-top:2%; + font-family: 'Inter', sans-serif; + @media screen and (max-width:600px){ + margin-top:3%; + width:100%; + } + @media screen and (min-width:601px) and (max-width:1200px){ + margin-top:3%; + width:100%; + } + ` + const GoogleButton = styled.button` + // padding: 8px 16px; + width: 73%; + height: 8%; + margin-top: 1%; + border: 1px solid #F1F1FA; + border-radius: 16px; + background: #FFFFFF; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 90%; + line-height: 50%; + display:flex; + flex-direction:row; + align-items:center; + justify-content:center; + @media screen and (max-width:300px){ + height:10%; + width:90%; + } + @media screen and (min-width:301px) and (max-width:500px){ + height:10%; + width:90%; + } + @media screen and (min-width:501px) and (max-width:600px){ + height:10%; + width:90%; + } + @media screen and (min-width:601px) and (max-width:900px){ + height:9%; + width:80%; + } + @media screen and (min-width:901px) and (max-width:1050px){ + height:9%; + width:80%; + } + @media screen and (min-width:1051px) and (max-width:1200px){ + height:10%; + width:80%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:20%; + width:80%; + }` - // const Styleddiv = styled.div` - // background-color:pink; - // width:400px;` + const StyleIconDiv = styled.div` + display:flex; + justify-content:center; + width:10%; + margin-top:2%; + @media screen and (max-width:300px){ + width:15%; + margin-top:1%; + margin-left:15%; + } + @media screen and (min-width:301px) and (max-width:500px){ + width:15%; + // padding-top:1%; + padding-left:25%; + } + @media screen and (min-width:501px) and (max-width:600px){ + width:10%; + // paadding-top:0.3%; + padding-left:25%; + } + @media screen and (min-width:601px) and (max-width:900px){ + width:15%; + // margin-top:0.3%; + padding-left:10%; + } + @media screen and (min-width:901px) and (max-width:1200px){ + width:15%; + margin-top:0.3%; + padding-left:20%; + } + ` + const StyleIconText = styled.div` + display:flex; + margin-top:2%; + @media screen and (max-width:400px){ + width:80%; + margin-top:3%; + } + @media screen and (min-width:401px) and (max-width:500px){ + width:80%; + margin-top:2%; + } + @media screen and (min-width:501px) and (max-width:600px){ + width:80%; + margin-top:1.5%; + } + @media screen and (min-width:601px) and (max-width:700px){ + width:100%; + margin-top:1.5%; + } + @media screen and (min-width:701px) and (max-width:1200px){ + width:100%; + margin-top:0.7%; + } + ` - // width: 400px; - // height: 40px; - // margin-left: 819px; - // margin-top: 40px; - // background: #FFFFFF; - // border: 1px solid #F1F1FA; - // border-radius: 16px + const LoginText = styled.h4` + display:flex; + justify-content:center; + width:73%; + margin-top:6%; + color:#91919F; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 300; + font-size: 90.6239%; + line-height: 3%; + @media screen and (max-width:1200px){ + width:90%; + } + ` + + const Styleimg = styled.img` + height:85%; + width:85%; + margin-left:12%; + @media screen and (min-width:600px) and (max-width:900px) { + width:85%; + height:85%; + } + @media screen and (min-width:900px) and (max-width:1200px) { + width:90%; + height:85%; + } + ` + const StyledLink = styled.a` + text-decoration:none;` + + const SignUpLink = styled.a` + color: #5352ED;` return ( -

Welcome,

Get Started

-
- - - - - - -
+ + + Welcome,
Get Started + + + + + + + + + + + + + + By signing up, you agree to the Terms of Service and Privacy Policy + + Sign Up + Or with + Sign Up with Google + Already have an account?   Login + + + ); }; @@ -105,4 +577,5 @@ const mapDispatchToProps = (dispatch: Dispatch) => { }; }; -export default connect(null, mapDispatchToProps)(Signup); \ No newline at end of file + +export default connect(null, mapDispatchToProps)(Signup); diff --git a/src/routes/login/index.tsx b/src/routes/login/index.tsx index a844a29..8a098ab 100644 --- a/src/routes/login/index.tsx +++ b/src/routes/login/index.tsx @@ -1,16 +1,338 @@ -import React from 'react' +import React, { Fragment } from 'react' import { useNavigate } from 'react-router-dom'; +import { AiOutlineEye } from "react-icons/ai"; +import styled from "styled-components"; +import { FcGoogle } from "react-icons/fc"; +import foto from "./../../assests/foto.svg"; function Login() { - const navigate = useNavigate(); - const loginHandler = ():void => { - localStorage.setItem("Login","true"); - navigate('/home'); - } - return (<> -
Login Page
- - + // const navigate = useNavigate(); + // const loginHandler = (): void => { + // localStorage.setItem("Login", "true"); + // navigate('/home'); + // } + + + const StyleMainDiv = styled.div` + display:flex; + flex-direction:row;` + + const LeftDiv = styled.div` + height:97vh; + width:55vw; + background:linear-gradient(to right,#5352ed 65%,#ffffff 65%); + // background-color:#5352ed; + display:flex; + flex-direction:column; + + @media only screen and (max-width: 600px) { + display:none; + } + ` + + const HeadingDiv = styled.div` + height:5%; + width:70%; + // border: 1px solid black; + margin-top:50px; + padding-left:15%; + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + @media only screen and (max-width: 600px) { + display:none; + } + font-size: 30.1818px; + line-height: 51px; + letter-spacing: 0.03em; + color: #FFFFFF; + ` + + const Rightdiv = styled.div` + // background-color:whitesmoke; + height:96vh; + width:45vw; + display:flex; + // border: 1px solid black; + font-family: 'Inter', sans-serif; + justify-content:center; + @media screen and (max-width:300px){ + width:97vw; + } + @media screen and (min-width:301px) and (max-width:600px){ + width:97.5vw; + } + @media screen and (min-width:601px) and (max-width:1200px){ + width:45vw; + } + ` + + const StyledDiv = styled.div` + display:flex; + flex-direction:column; + width:70%; + justify-content:center; + align-items:center; + // border: 1px solid black; + padding-top:15%; + @media screen and (max-width:300px){ + width:95%; + } + @media screen and (min-width:301px) and (max-width:500px){ + width:90%; + } + @media screen and (min-width:501px) and (max-width:600px) { + width:90%; + } + @media screen and (min-width:601px) and (max-width:700px) { + width:87%; + } + @media screen and (min-width:701px) and (max-width:1050px) { + width:80%; + } + @media screen and (min-width:1050px) and (max-width:1200px) { + width:80%; + } + @media screen and (min-width:1201px) and (max-width:1500px) { + width:80%; + } + ` + + const StyledInput = styled.input` + background: #FFFFFF; + border: 1px solid #F1F1FA; + border-radius: 16px; + margin-top:5%; + width: 70.5%; + height: 8%; + font-family: 'Inter', sans-serif; + &::-webkit-input-placeholder{ + padding-left:3%; + } + @media screen and (max-width:300px){ + height:8%; + width:90%; + } + @media screen and (min-width:301px) and (max-width:500px){ + height:9%; + width:90%; + } + @media screen and (min-width:501px) and (max-width:600px){ + height:10%; + width:90%; + } + @media screen and (min-width:601px) and (max-width:900px){ + height:8%; + width:80%; + } + @media screen and (min-width:901px) and (max-width:1050px){ + height:9%; + width:80%; + } + @media screen and (min-width:1051px) and (max-width:1200px){ + height:10%; + width:80%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:10%; + width:80%; + } + ` + const PasswordDiv = styled.div` + display:flex; + flex-direction:row; + align-items:center; + background: #FFFFFF; + border: 2px solid #F1F1FA; + border-radius: 16px; + margin-top:5%; + width: 71%; + height: 8%; + font-family: 'Inter', sans-serif; + @media screen and (max-width:300px){ + height:8%; + width:90%; + } + @media screen and (min-width:301px) and (max-width:500px){ + height:9%; + width:90%; + } + @media screen and (min-width:501px) and (max-width:600px){ + height:10%; + width:90%; + } + @media screen and (min-width:601px) and (max-width:900px){ + height:8%; + width:80%; + } + @media screen and (min-width:901px) and (max-width:1050px){ + height:9%; + width:80%; + } + @media screen and (min-width:1051px) and (max-width:1200px){ + height:10%; + width:80%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:10%; + width:80%; + } + ` + const PassInput = styled.input` + width:95%; + border:none; + height:100%; + border-radius: 16px; + font-family: 'Inter', sans-serif; + &::-webkit-input-placeholder{ + padding-left:3%; + } + @media screen and (max-width:1200px){ + height:100%; + } + ` + const EyeDiv = styled.div` + padding-right:2%; + ` + + const StyledButton = styled.button` + // padding: 8px 16px; + width: 73%; + height: 8%; + margin-top: 2%; + background:#5352ED; + color:white; + border: 1px solid #F1F1FA; + border-radius: 16px; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 90%; + line-height: 22px; + @media screen and (max-width:300px){ + height:9%; + width:90%; + margin-top:5%; + } + @media screen and (min-width:301px) and (max-width:400px){ + height:10%; + width:90%; + margin-top:5%; + } + @media screen and (min-width:401px) and (max-width:500px){ + height:10%; + width:90%; + margin-top:5%; + } + @media screen and (min-width:501px) and (max-width:600px){ + height:10%; + width:90%; + margin-top:5%; + } + @media screen and (min-width:601px) and (max-width:900px){ + height:8%; + width:80%; + margin-top:5%; + } + @media screen and (min-width:901px) and (max-width:1050px){ + height:9%; + width:80%; + margin-top:5%; + } + @media screen and (min-width:1051px) and (max-width:1200px){ + height:10%; + width:80%; + margin-top:5%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:10%; + width:80%; + margin-top:5%; + } + ` + const StyledText = styled.div` + display:flex; + justify-content:center; + width:73%; + margin-top:5%; + font-family: 'Inter', sans-serif; + @media screen and (max-width:600px){ + margin-top:3%; + width:100%; + } + @media screen and (min-width:601px) and (max-width:1200px){ + margin-top:3%; + width:100%; + } + ` + + const LoginText = styled.h4` + display:flex; + justify-content:center; + width:73%; + margin-top:6%; + color:#91919F; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 500; + font-size: 13px; + line-height: 10%; + @media screen and (max-width:1200px){ + width:90%; + } + ` + + const Styleimg = styled.img` + height:85%; + width:85%; + margin-left:12%; + @media screen and (min-width:600px) and (max-width:900px) { + width:85%; + height:85%; + } + @media screen and (min-width:900px) and (max-width:1200px) { + width:90%; + height:85%; + } + ` + const StyledLink = styled.a` + text-decoration:none; + color: #5352ED;` + + const SignUpLink = styled.a` + color: #5352ED;` + + + return ( + + + Welcome,
Get Started + + + + + + + + + + Login + Forgot Password? + Don't have an account yet?   Sign Up + + + + ) } diff --git a/tsconfig.json b/tsconfig.json index a273b0c..c9a9828 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -20,7 +20,6 @@ "noEmit": true, "jsx": "react-jsx" }, - "include": [ - "src" - ] + "include": + ["src/assests", "src/custom.d.ts","src"] } From d9371777b9b1affdb2a23167faf6e3f529292d71 Mon Sep 17 00:00:00 2001 From: ronak1603 Date: Mon, 19 Sep 2022 22:07:40 +0530 Subject: [PATCH 3/3] Implemented Saga --- package-lock.json | 232 +++++++++++ package.json | 3 + src/assests/services/index.tsx | 5 + src/routes/Profile/index.tsx | 100 +++++ src/routes/Signup/index.tsx | 579 +++------------------------ src/routes/Signup/style.tsx | 489 ++++++++++++++++++++++ src/routes/index.tsx | 8 +- src/routes/login/index.tsx | 26 +- src/store/actionTypes/index.tsx | 5 + src/store/actions/index.tsx | 22 +- src/store/index.ts | 17 +- src/store/reducer/index.ts | 49 ++- src/store/reducer/types.ts | 48 ++- src/store/reducer/userAuth/index.tsx | 1 + src/store/reducer/userAuth/type.tsx | 1 + src/store/saga/index.tsx | 21 + src/utils/paths.tsx | 3 +- 17 files changed, 1033 insertions(+), 576 deletions(-) create mode 100644 src/assests/services/index.tsx create mode 100644 src/routes/Profile/index.tsx create mode 100644 src/routes/Signup/style.tsx create mode 100644 src/store/reducer/userAuth/index.tsx create mode 100644 src/store/reducer/userAuth/type.tsx create mode 100644 src/store/saga/index.tsx diff --git a/package-lock.json b/package-lock.json index 2d2b7a4..150212c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "bookmark", "version": "0.1.0", "dependencies": { + "@reduxjs/toolkit": "^1.8.5", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", @@ -22,8 +23,10 @@ "react-router": "^6.3.0", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", + "react-spinners": "^0.13.4", "redux": "^4.2.0", "redux-logger": "^3.0.6", + "redux-saga": "^1.2.1", "styled-components": "^5.3.5", "typescript": "^4.8.2", "uuid": "^8.3.2", @@ -3110,6 +3113,80 @@ } } }, + "node_modules/@redux-saga/core": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@redux-saga/core/-/core-1.2.1.tgz", + "integrity": "sha512-ABCxsZy9DwmNoYNo54ZlfuTvh77RXx8ODKpxOHeWam2dOaLGQ7vAktpfOtqSeTdYrKEORtTeWnxkGJMmPOoukg==", + "dependencies": { + "@babel/runtime": "^7.6.3", + "@redux-saga/deferred": "^1.2.1", + "@redux-saga/delay-p": "^1.2.1", + "@redux-saga/is": "^1.1.3", + "@redux-saga/symbols": "^1.1.3", + "@redux-saga/types": "^1.2.1", + "redux": "^4.0.4", + "typescript-tuple": "^2.2.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/redux-saga" + } + }, + "node_modules/@redux-saga/deferred": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@redux-saga/deferred/-/deferred-1.2.1.tgz", + "integrity": "sha512-cmin3IuuzMdfQjA0lG4B+jX+9HdTgHZZ+6u3jRAOwGUxy77GSlTi4Qp2d6PM1PUoTmQUR5aijlA39scWWPF31g==" + }, + "node_modules/@redux-saga/delay-p": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@redux-saga/delay-p/-/delay-p-1.2.1.tgz", + "integrity": "sha512-MdiDxZdvb1m+Y0s4/hgdcAXntpUytr9g0hpcOO1XFVyyzkrDu3SKPgBFOtHn7lhu7n24ZKIAT1qtKyQjHqRd+w==", + "dependencies": { + "@redux-saga/symbols": "^1.1.3" + } + }, + "node_modules/@redux-saga/is": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@redux-saga/is/-/is-1.1.3.tgz", + "integrity": "sha512-naXrkETG1jLRfVfhOx/ZdLj0EyAzHYbgJWkXbB3qFliPcHKiWbv/ULQryOAEKyjrhiclmr6AMdgsXFyx7/yE6Q==", + "dependencies": { + "@redux-saga/symbols": "^1.1.3", + "@redux-saga/types": "^1.2.1" + } + }, + "node_modules/@redux-saga/symbols": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@redux-saga/symbols/-/symbols-1.1.3.tgz", + "integrity": "sha512-hCx6ZvU4QAEUojETnX8EVg4ubNLBFl1Lps4j2tX7o45x/2qg37m3c6v+kSp8xjDJY+2tJw4QB3j8o8dsl1FDXg==" + }, + "node_modules/@redux-saga/types": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@redux-saga/types/-/types-1.2.1.tgz", + "integrity": "sha512-1dgmkh+3so0+LlBWRhGA33ua4MYr7tUOj+a9Si28vUi0IUFNbff1T3sgpeDJI/LaC75bBYnQ0A3wXjn0OrRNBA==" + }, + "node_modules/@reduxjs/toolkit": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.5.tgz", + "integrity": "sha512-f4D5EXO7A7Xq35T0zRbWq5kJQyXzzscnHKmjnu2+37B3rwHU6mX9PYlbfXdnxcY6P/7zfmjhgan0Z+yuOfeBmA==", + "dependencies": { + "immer": "^9.0.7", + "redux": "^4.1.2", + "redux-thunk": "^2.4.1", + "reselect": "^4.1.5" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.0 || ^18", + "react-redux": "^7.2.1 || ^8.0.2" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-redux": { + "optional": true + } + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -14065,6 +14142,15 @@ } } }, + "node_modules/react-spinners": { + "version": "0.13.4", + "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.4.tgz", + "integrity": "sha512-V6IURjYOwomhdngMfuVxBp4utCF6v21sjQ6r4K2JoKl8fwXZp1UeHMBLf+2SU+cts8hAVj9rHOJ8kdT5UqqaJw==", + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -14147,6 +14233,22 @@ "deep-diff": "^0.3.5" } }, + "node_modules/redux-saga": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/redux-saga/-/redux-saga-1.2.1.tgz", + "integrity": "sha512-fVCicLlf4hLP+KB6H7RHfZlZ8LdYckhaemXBB3wh//a2ESyz/z/l8ygxlm0OqPjS/PARdsQ2hIdAltxEB+NgvA==", + "dependencies": { + "@redux-saga/core": "^1.2.1" + } + }, + "node_modules/redux-thunk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz", + "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==", + "peerDependencies": { + "redux": "^4" + } + }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -14289,6 +14391,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" }, + "node_modules/reselect": { + "version": "4.1.6", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz", + "integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ==" + }, "node_modules/resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -15725,6 +15832,27 @@ "node": ">=4.2.0" } }, + "node_modules/typescript-compare": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/typescript-compare/-/typescript-compare-0.0.2.tgz", + "integrity": "sha512-8ja4j7pMHkfLJQO2/8tut7ub+J3Lw2S3061eJLFQcvs3tsmJKp8KG5NtpLn7KcY2w08edF74BSVN7qJS0U6oHA==", + "dependencies": { + "typescript-logic": "^0.0.0" + } + }, + "node_modules/typescript-logic": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/typescript-logic/-/typescript-logic-0.0.0.tgz", + "integrity": "sha512-zXFars5LUkI3zP492ls0VskH3TtdeHCqu0i7/duGt60i5IGPIpAHE/DWo5FqJ6EjQ15YKXrt+AETjv60Dat34Q==" + }, + "node_modules/typescript-tuple": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/typescript-tuple/-/typescript-tuple-2.2.1.tgz", + "integrity": "sha512-Zcr0lbt8z5ZdEzERHAMAniTiIKerFCMgd7yjq1fPnDJ43et/k9twIFQMUYff9k5oXcsQ0WpvFcgzK2ZKASoW6Q==", + "dependencies": { + "typescript-compare": "^0.0.2" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -18908,6 +19036,64 @@ "source-map": "^0.7.3" } }, + "@redux-saga/core": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@redux-saga/core/-/core-1.2.1.tgz", + "integrity": "sha512-ABCxsZy9DwmNoYNo54ZlfuTvh77RXx8ODKpxOHeWam2dOaLGQ7vAktpfOtqSeTdYrKEORtTeWnxkGJMmPOoukg==", + "requires": { + "@babel/runtime": "^7.6.3", + "@redux-saga/deferred": "^1.2.1", + "@redux-saga/delay-p": "^1.2.1", + "@redux-saga/is": "^1.1.3", + "@redux-saga/symbols": "^1.1.3", + "@redux-saga/types": "^1.2.1", + "redux": "^4.0.4", + "typescript-tuple": "^2.2.1" + } + }, + "@redux-saga/deferred": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@redux-saga/deferred/-/deferred-1.2.1.tgz", + "integrity": "sha512-cmin3IuuzMdfQjA0lG4B+jX+9HdTgHZZ+6u3jRAOwGUxy77GSlTi4Qp2d6PM1PUoTmQUR5aijlA39scWWPF31g==" + }, + "@redux-saga/delay-p": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@redux-saga/delay-p/-/delay-p-1.2.1.tgz", + "integrity": "sha512-MdiDxZdvb1m+Y0s4/hgdcAXntpUytr9g0hpcOO1XFVyyzkrDu3SKPgBFOtHn7lhu7n24ZKIAT1qtKyQjHqRd+w==", + "requires": { + "@redux-saga/symbols": "^1.1.3" + } + }, + "@redux-saga/is": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@redux-saga/is/-/is-1.1.3.tgz", + "integrity": "sha512-naXrkETG1jLRfVfhOx/ZdLj0EyAzHYbgJWkXbB3qFliPcHKiWbv/ULQryOAEKyjrhiclmr6AMdgsXFyx7/yE6Q==", + "requires": { + "@redux-saga/symbols": "^1.1.3", + "@redux-saga/types": "^1.2.1" + } + }, + "@redux-saga/symbols": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@redux-saga/symbols/-/symbols-1.1.3.tgz", + "integrity": "sha512-hCx6ZvU4QAEUojETnX8EVg4ubNLBFl1Lps4j2tX7o45x/2qg37m3c6v+kSp8xjDJY+2tJw4QB3j8o8dsl1FDXg==" + }, + "@redux-saga/types": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@redux-saga/types/-/types-1.2.1.tgz", + "integrity": "sha512-1dgmkh+3so0+LlBWRhGA33ua4MYr7tUOj+a9Si28vUi0IUFNbff1T3sgpeDJI/LaC75bBYnQ0A3wXjn0OrRNBA==" + }, + "@reduxjs/toolkit": { + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.5.tgz", + "integrity": "sha512-f4D5EXO7A7Xq35T0zRbWq5kJQyXzzscnHKmjnu2+37B3rwHU6mX9PYlbfXdnxcY6P/7zfmjhgan0Z+yuOfeBmA==", + "requires": { + "immer": "^9.0.7", + "redux": "^4.1.2", + "redux-thunk": "^2.4.1", + "reselect": "^4.1.5" + } + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -26706,6 +26892,12 @@ "workbox-webpack-plugin": "^6.4.1" } }, + "react-spinners": { + "version": "0.13.4", + "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.4.tgz", + "integrity": "sha512-V6IURjYOwomhdngMfuVxBp4utCF6v21sjQ6r4K2JoKl8fwXZp1UeHMBLf+2SU+cts8hAVj9rHOJ8kdT5UqqaJw==", + "requires": {} + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -26775,6 +26967,20 @@ "deep-diff": "^0.3.5" } }, + "redux-saga": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/redux-saga/-/redux-saga-1.2.1.tgz", + "integrity": "sha512-fVCicLlf4hLP+KB6H7RHfZlZ8LdYckhaemXBB3wh//a2ESyz/z/l8ygxlm0OqPjS/PARdsQ2hIdAltxEB+NgvA==", + "requires": { + "@redux-saga/core": "^1.2.1" + } + }, + "redux-thunk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz", + "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==", + "requires": {} + }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -26886,6 +27092,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" }, + "reselect": { + "version": "4.1.6", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz", + "integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ==" + }, "resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -27936,6 +28147,27 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.2.tgz", "integrity": "sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw==" }, + "typescript-compare": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/typescript-compare/-/typescript-compare-0.0.2.tgz", + "integrity": "sha512-8ja4j7pMHkfLJQO2/8tut7ub+J3Lw2S3061eJLFQcvs3tsmJKp8KG5NtpLn7KcY2w08edF74BSVN7qJS0U6oHA==", + "requires": { + "typescript-logic": "^0.0.0" + } + }, + "typescript-logic": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/typescript-logic/-/typescript-logic-0.0.0.tgz", + "integrity": "sha512-zXFars5LUkI3zP492ls0VskH3TtdeHCqu0i7/duGt60i5IGPIpAHE/DWo5FqJ6EjQ15YKXrt+AETjv60Dat34Q==" + }, + "typescript-tuple": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/typescript-tuple/-/typescript-tuple-2.2.1.tgz", + "integrity": "sha512-Zcr0lbt8z5ZdEzERHAMAniTiIKerFCMgd7yjq1fPnDJ43et/k9twIFQMUYff9k5oXcsQ0WpvFcgzK2ZKASoW6Q==", + "requires": { + "typescript-compare": "^0.0.2" + } + }, "unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/package.json b/package.json index 17f9fa0..d21c1fd 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@reduxjs/toolkit": "^1.8.5", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", @@ -17,8 +18,10 @@ "react-router": "^6.3.0", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", + "react-spinners": "^0.13.4", "redux": "^4.2.0", "redux-logger": "^3.0.6", + "redux-saga": "^1.2.1", "styled-components": "^5.3.5", "typescript": "^4.8.2", "uuid": "^8.3.2", diff --git a/src/assests/services/index.tsx b/src/assests/services/index.tsx new file mode 100644 index 0000000..cc9a2ed --- /dev/null +++ b/src/assests/services/index.tsx @@ -0,0 +1,5 @@ +export const URL = async () => { + const response = await fetch("https://api.github.com/users"); + const data = await response.json(); + return data; +} \ No newline at end of file diff --git a/src/routes/Profile/index.tsx b/src/routes/Profile/index.tsx new file mode 100644 index 0000000..e75f3f6 --- /dev/null +++ b/src/routes/Profile/index.tsx @@ -0,0 +1,100 @@ +import React, { useEffect, useState } from 'react' +import { userProfile } from '../../store/actions/index'; +import { Dispatch } from "redux"; +import { connect } from "react-redux"; +import { useSelector } from 'react-redux' +import FaSpinner from 'react-icons'; +import styled from 'styled-components'; +import { BarLoader } from "react-spinners"; +import { profileReducer } from "../../store/reducer/index" + +interface profileProps { + requestData: () => void, + users: any, + isLoading: boolean +} + + +const Container = styled.div` +display: flex; +flex-wrap: wrap; +width:100%; +height:100%; +justify-content:center; +` +const ProfileImage = styled.img` +height:80%; +width:80%; +margin-top:5%; +border-radius: 10px; +` + +const ProfileItem = styled.div` +// border:1px solid black; +width:20%; +height:100%; +display:flex; +flex-direction:column; +align-items:center; +margin-top:25px; +margin-right:35px; +border-radius: 15px; +` + +const UserDetailes = styled.div` +display:flex; +margin-top:3%; +justify-content:center; +` + +const UserName = styled.div` +width:100%; +font-size:20px; +font-weight:bold; +font-family: 'Inter', sans-serif;` + +const Profile = (props: profileProps) => { + + useEffect(() => { + props.requestData() + }, []) + + const userProfile = (url: string) => { + return window.open(url) + } + + return ( + {props.isLoading ? : (props.users.map((obj: any) => { + return ( + <> + userProfile(obj.url)}> + + + + {obj.login} + + + + + ) + })) + + } + + ) +} + +const mapStateToProps = (state: profileProps) => { + return { + users: state.users, + isLoading: state.isLoading, + } +} +const mapDispatchToProps = (dispatch: Dispatch) => { + return { + requestData: () => dispatch(userProfile()), + + } +} +export default connect(mapStateToProps, mapDispatchToProps)(Profile); + diff --git a/src/routes/Signup/index.tsx b/src/routes/Signup/index.tsx index fc9d502..d697618 100644 --- a/src/routes/Signup/index.tsx +++ b/src/routes/Signup/index.tsx @@ -5,6 +5,7 @@ import { connect } from "react-redux"; import { signUp } from "./../../store/actions/index"; import styled from "styled-components"; +import * as style from "./style"; import { FcGoogle } from "react-icons/fc"; import { AiOutlineEye } from "react-icons/ai"; @@ -19,554 +20,66 @@ const Signup = (props: propsType) => { const [userId, setUserId] = useState(""); const [password, setPassword] = useState(""); - // const inputNameHandler = (e: React.ChangeEvent): void => { - // console.log(e.target.value); - // setName(e.target.value); - // }; - - // const inputIdHandler = (e: React.ChangeEvent): void => { - // setUserId(e.target.value); - // }; - - // const inputPassHandler = (e: React.ChangeEvent): void => { - // setPassword(e.target.value); - // }; - - // const inputSubmit = (): void => { - - // props.signUp(name, userId, password); - // setPassword("....."); - // } - - const StyleMainDiv = styled.div` - display:flex; - flex-direction:row;` - - const LeftDiv = styled.div` - height:97vh; - width:55vw; - background:linear-gradient(to right,#5352ed 65%,#ffffff 65%); - // background-color:#5352ed; - display:flex; - flex-direction:column; - - @media only screen and (max-width: 600px) { - display:none; - } - ` - - const HeadingDiv = styled.div` - height:5%; - width:70%; - // border: 1px solid black; - margin-top:50px; - padding-left:15%; - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - @media only screen and (max-width: 600px) { - display:none; - } - font-size: 30.1818px; - line-height: 51px; - letter-spacing: 0.03em; - color: #FFFFFF; - ` - - const Rightdiv = styled.div` - // background-color:whitesmoke; - height:96vh; - width:45vw; - display:flex; - // border: 1px solid black; - font-family: 'Inter', sans-serif; - justify-content:center; - @media screen and (max-width:300px){ - width:97vw; - } - @media screen and (min-width:301px) and (max-width:600px){ - width:97.5vw; - } - @media screen and (min-width:601px) and (max-width:1200px){ - width:45vw; - } - ` - - const StyledDiv = styled.div` - display:flex; - flex-direction:column; - width:70%; - justify-content:center; - align-items:center; - // border: 1px solid black; - padding-top:15%; - @media screen and (max-width:300px){ - width:95%; - } - @media screen and (min-width:301px) and (max-width:500px){ - width:90%; - } - @media screen and (min-width:501px) and (max-width:600px) { - width:90%; - } - @media screen and (min-width:601px) and (max-width:700px) { - width:85%; - } - @media screen and (min-width:701px) and (max-width:1050px) { - width:80%; - } - @media screen and (min-width:1050px) and (max-width:1200px) { - width:80%; - } - @media screen and (min-width:1201px) and (max-width:1500px) { - width:80%; - } - ` - - const StyledInput = styled.input` - background: #FFFFFF; - border: 1px solid #F1F1FA; - border-radius: 16px; - margin-top:5%; - width: 70.5%; - height: 8%; - font-family: 'Inter', sans-serif; - &::-webkit-input-placeholder{ - padding-left:3%; - } - @media screen and (max-width:300px){ - height:8%; - width:90%; - } - @media screen and (min-width:301px) and (max-width:500px){ - height:9%; - width:90%; - } - @media screen and (min-width:501px) and (max-width:600px){ - height:10%; - width:90%; - } - @media screen and (min-width:601px) and (max-width:900px){ - height:8%; - width:80%; - } - @media screen and (min-width:901px) and (max-width:1050px){ - height:9%; - width:80%; - } - @media screen and (min-width:1051px) and (max-width:1200px){ - height:10%; - width:80%; - } - @media screen and (min-width:1201px) and (max-width:1500px){ - height:20%; - width:80%; - } - ` - const PasswordDiv = styled.div` - display:flex; - flex-direction:row; - align-items:center; - background: #FFFFFF; - border: 2px solid #F1F1FA; - border-radius: 16px; - margin-top:5%; - width: 71%; - height: 8%; - font-family: 'Inter', sans-serif; - @media screen and (max-width:300px){ - height:8%; - width:90%; - } - @media screen and (min-width:301px) and (max-width:500px){ - height:9%; - width:90%; - } - @media screen and (min-width:501px) and (max-width:600px){ - height:10%; - width:90%; - } - @media screen and (min-width:601px) and (max-width:900px){ - height:8%; - width:80%; - } - @media screen and (min-width:901px) and (max-width:1050px){ - height:9%; - width:80%; - } - @media screen and (min-width:1051px) and (max-width:1200px){ - height:10%; - width:80%; - } - @media screen and (min-width:1201px) and (max-width:1500px){ - height:20%; - width:80%; - } - ` - const PassInput = styled.input` - width:95%; - border:none; - height:100%; - border-radius: 16px; - font-family: 'Inter', sans-serif; - &::-webkit-input-placeholder{ - padding-left:3%; - } - @media screen and (max-width:1200px){ - height:100%; - } - ` - const EyeDiv = styled.div` - padding-right:2%; - ` - - const CheckDiv = styled.div` - display:flex; - flex-direction:row; - width:75%; - justify-content:flex-start; - margin-top:5%; - font-style: normal; - font-weight: 350; - font-size: 79.59%; - line-height: 20px; - @media screen and (max-width:300px){ - height:5%; - width:90%; - padding-top:3%; - } - @media screen and (min-width:301px) and (max-width:500px){ - height:7%; - width:90%; - margin-top:5%; - } - @media screen and (min-width:501px) and (max-width:600px){ - height:7%; - width:90%; - margin-top:5%; - } - @media screen and (min-width:601px) and (max-width:900px){ - height:7%; - width:80%; - margin-top:7%; - } - @media screen and (min-width:901px) and (max-width:1050px){ - height:9%; - width:80%; - margin-top:5%; - } - @media screen and (min-width:1051px) and (max-width:1200px){ - height:10%; - width:80%; - margin-top:5%; - } - @media screen and (min-width:1201px) and (max-width:1500px){ - height:10%; - width:80%; - margin-top:5%; - } - ` - - const CheckInput = styled.input` - width: 10%; - height: 50%; - padding: 0px 0px 8px 16px; - border-radius:2px; - border-color:red; - @media screen and (max-width:300px){ - height:60%; - width:7%; - } - @media screen and (min-width:301px) and (max-width:500px) { - height:60%; - width:7%; - } - @media screen and (min-width:501px) and (max-width:600px) { - height:60%; - width:5%; - } - @media screen and (min-width:601px) and (max-width:900px) { - height:50%; - width:7%; - } - @media screen and (min-width:901px) and (max-width:1200px) { - height:50%; - width:5%; - } - @media screen and (min-width:1201px) and (max-width:1500px){ - height:50%; - width:7%; - - } - ` - - const CheckText = styled.p` - width:100%; - height:60%; - font-family: 'Inter', sans-serif; - font-weight: 300; - font-size: 14.7959px; - line-height: 20px; - padding-left:1%; - @media screen and (max-width:1200px){ - width:100%; - } - // @media screen and (min-width:1200px) and (max-width:){ - // width:100%; - // } - ` - - const StyledButton = styled.button` - // padding: 8px 16px; - width: 73%; - height: 8%; - margin-top: 2%; - background:#5352ED; - color:white; - border: 1px solid #F1F1FA; - border-radius: 16px; - font-family: 'Inter', sans-serif; - font-style: normal; - font-weight: 600; - font-size: 90%; - line-height: 22px; - @media screen and (max-width:300px){ - height:9%; - width:90%; - margin-top:15%; - } - @media screen and (min-width:301px) and (max-width:400px){ - height:10%; - width:90%; - margin-top:10%; - } - @media screen and (min-width:401px) and (max-width:500px){ - height:10%; - width:90%; - margin-top:5%; - } - @media screen and (min-width:501px) and (max-width:600px){ - height:10%; - width:93%; - margin-top:5%; - } - @media screen and (min-width:601px) and (max-width:900px){ - height:8%; - width:80%; - margin-top:10%; - } - @media screen and (min-width:901px) and (max-width:1050px){ - height:9%; - width:80%; - margin-top:4%; - } - @media screen and (min-width:1051px) and (max-width:1200px){ - height:10%; - width:80%; - margin-top:4%; - } - @media screen and (min-width:1201px) and (max-width:1500px){ - height:20%; - width:80%; - margin-top:5%; - } - ` - - - const StyledText = styled.div` - display:flex; - justify-content:center; - width:73%; - margin-top:2%; - font-family: 'Inter', sans-serif; - @media screen and (max-width:600px){ - margin-top:3%; - width:100%; - } - @media screen and (min-width:601px) and (max-width:1200px){ - margin-top:3%; - width:100%; - } - ` - const GoogleButton = styled.button` - // padding: 8px 16px; - width: 73%; - height: 8%; - margin-top: 1%; - border: 1px solid #F1F1FA; - border-radius: 16px; - background: #FFFFFF; - font-family: 'Inter', sans-serif; - font-style: normal; - font-weight: 600; - font-size: 90%; - line-height: 50%; - display:flex; - flex-direction:row; - align-items:center; - justify-content:center; - @media screen and (max-width:300px){ - height:10%; - width:90%; - } - @media screen and (min-width:301px) and (max-width:500px){ - height:10%; - width:90%; - } - @media screen and (min-width:501px) and (max-width:600px){ - height:10%; - width:90%; - } - @media screen and (min-width:601px) and (max-width:900px){ - height:9%; - width:80%; - } - @media screen and (min-width:901px) and (max-width:1050px){ - height:9%; - width:80%; - } - @media screen and (min-width:1051px) and (max-width:1200px){ - height:10%; - width:80%; - } - @media screen and (min-width:1201px) and (max-width:1500px){ - height:20%; - width:80%; - }` + const inputNameHandler = (e: React.ChangeEvent): void => { + // console.log(e.target.value); + setName(e.target.value); + }; - const StyleIconDiv = styled.div` - display:flex; - justify-content:center; - width:10%; - margin-top:2%; - @media screen and (max-width:300px){ - width:15%; - margin-top:1%; - margin-left:15%; - } - @media screen and (min-width:301px) and (max-width:500px){ - width:15%; - // padding-top:1%; - padding-left:25%; - } - @media screen and (min-width:501px) and (max-width:600px){ - width:10%; - // paadding-top:0.3%; - padding-left:25%; - } - @media screen and (min-width:601px) and (max-width:900px){ - width:15%; - // margin-top:0.3%; - padding-left:10%; - } - @media screen and (min-width:901px) and (max-width:1200px){ - width:15%; - margin-top:0.3%; - padding-left:20%; - } - ` + const inputIdHandler = (e: React.ChangeEvent): void => { + setUserId(e.target.value); + }; - const StyleIconText = styled.div` - display:flex; - margin-top:2%; - @media screen and (max-width:400px){ - width:80%; - margin-top:3%; - } - @media screen and (min-width:401px) and (max-width:500px){ - width:80%; - margin-top:2%; - } - @media screen and (min-width:501px) and (max-width:600px){ - width:80%; - margin-top:1.5%; - } - @media screen and (min-width:601px) and (max-width:700px){ - width:100%; - margin-top:1.5%; - } - @media screen and (min-width:701px) and (max-width:1200px){ - width:100%; - margin-top:0.7%; - } - ` + const inputPassHandler = (e: React.ChangeEvent): void => { + setPassword(e.target.value); + }; - const LoginText = styled.h4` - display:flex; - justify-content:center; - width:73%; - margin-top:6%; - color:#91919F; - font-family: 'Inter', sans-serif; - font-style: normal; - font-weight: 300; - font-size: 90.6239%; - line-height: 3%; - @media screen and (max-width:1200px){ - width:90%; - } - ` + const inputSubmit = (): void => { - const Styleimg = styled.img` - height:85%; - width:85%; - margin-left:12%; - @media screen and (min-width:600px) and (max-width:900px) { - width:85%; - height:85%; - } - @media screen and (min-width:900px) and (max-width:1200px) { - width:90%; - height:85%; + props.signUp(name, userId, password); + setPassword("....."); } - ` - const StyledLink = styled.a` - text-decoration:none;` - - const SignUpLink = styled.a` - color: #5352ED;` return ( - - - Welcome,
Get Started - - + + + Welcome,
Get Started + + - - - + + - - - + + - - - - - By signing up, you agree to the Terms of Service and Privacy Policy - - Sign Up - Or with - Sign Up with Google - Already have an account?   Login - - - + value={password} + onChange={inputPassHandler} + > + + + + + By signing up, you agree to the Terms of Service and Privacy Policy + + Sign Up + Or with + Sign Up with Google + Already have an account?   Login + + + ); }; diff --git a/src/routes/Signup/style.tsx b/src/routes/Signup/style.tsx new file mode 100644 index 0000000..22a68ef --- /dev/null +++ b/src/routes/Signup/style.tsx @@ -0,0 +1,489 @@ +import styled from "styled-components"; + + export const StyleMainDiv = styled.div` + display:flex; + flex-direction:row;` + + export const LeftDiv = styled.div` + height:97vh; + width:55vw; + background:linear-gradient(to right,#5352ed 65%,#ffffff 65%); + // background-color:#5352ed; + display:flex; + flex-direction:column; + + @media only screen and (max-width: 600px) { + display:none; + } + ` + + export const HeadingDiv = styled.div` + height:5%; + width:70%; + // border: 1px solid black; + margin-top:50px; + padding-left:15%; + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + @media only screen and (max-width: 600px) { + display:none; + } + font-size: 30.1818px; + line-height: 51px; + letter-spacing: 0.03em; + color: #FFFFFF; + ` + + export const Rightdiv = styled.div` + // background-color:whitesmoke; + height:96vh; + width:45vw; + display:flex; + // border: 1px solid black; + font-family: 'Inter', sans-serif; + justify-content:center; + @media screen and (max-width:300px){ + width:97vw; + } + @media screen and (min-width:301px) and (max-width:600px){ + width:97.5vw; + } + @media screen and (min-width:601px) and (max-width:1200px){ + width:45vw; + } + ` + + export const StyledDiv = styled.div` + display:flex; + flex-direction:column; + width:70%; + justify-content:center; + align-items:center; + // border: 1px solid black; + padding-top:15%; + @media screen and (max-width:300px){ + width:95%; + } + @media screen and (min-width:301px) and (max-width:500px){ + width:90%; + } + @media screen and (min-width:501px) and (max-width:600px) { + width:90%; + } + @media screen and (min-width:601px) and (max-width:700px) { + width:85%; + } + @media screen and (min-width:701px) and (max-width:1050px) { + width:80%; + } + @media screen and (min-width:1050px) and (max-width:1200px) { + width:80%; + } + @media screen and (min-width:1201px) and (max-width:1500px) { + width:80%; + } + ` + + export const StyledInput = styled.input` + background: #FFFFFF; + border: 1px solid #F1F1FA; + border-radius: 16px; + margin-top:5%; + width: 70.5%; + height: 8%; + font-family: 'Inter', sans-serif; + &::-webkit-input-placeholder{ + padding-left:3%; + } + @media screen and (max-width:300px){ + height:8%; + width:90%; + } + @media screen and (min-width:301px) and (max-width:500px){ + height:9%; + width:90%; + } + @media screen and (min-width:501px) and (max-width:600px){ + height:10%; + width:90%; + } + @media screen and (min-width:601px) and (max-width:900px){ + height:8%; + width:80%; + } + @media screen and (min-width:901px) and (max-width:1050px){ + height:9%; + width:80%; + } + @media screen and (min-width:1051px) and (max-width:1200px){ + height:10%; + width:80%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:20%; + width:80%; + } + ` + export const PasswordDiv = styled.div` + display:flex; + flex-direction:row; + align-items:center; + background: #FFFFFF; + border: 2px solid #F1F1FA; + border-radius: 16px; + margin-top:5%; + width: 71%; + height: 8%; + font-family: 'Inter', sans-serif; + @media screen and (max-width:300px){ + height:8%; + width:90%; + } + @media screen and (min-width:301px) and (max-width:500px){ + height:9%; + width:90%; + } + @media screen and (min-width:501px) and (max-width:600px){ + height:10%; + width:90%; + } + @media screen and (min-width:601px) and (max-width:900px){ + height:8%; + width:80%; + } + @media screen and (min-width:901px) and (max-width:1050px){ + height:9%; + width:80%; + } + @media screen and (min-width:1051px) and (max-width:1200px){ + height:10%; + width:80%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:20%; + width:80%; + } + ` + export const PassInput = styled.input` + width:95%; + border:none; + height:100%; + border-radius: 16px; + font-family: 'Inter', sans-serif; + &::-webkit-input-placeholder{ + padding-left:3%; + } + @media screen and (max-width:1200px){ + height:100%; + } + ` + export const EyeDiv = styled.div` + padding-right:2%; + ` + + export const CheckDiv = styled.div` + display:flex; + flex-direction:row; + width:75%; + justify-content:flex-start; + margin-top:5%; + font-style: normal; + font-weight: 350; + font-size: 79.59%; + line-height: 20px; + @media screen and (max-width:300px){ + height:5%; + width:90%; + padding-top:3%; + } + @media screen and (min-width:301px) and (max-width:500px){ + height:7%; + width:90%; + margin-top:5%; + } + @media screen and (min-width:501px) and (max-width:600px){ + height:7%; + width:90%; + margin-top:5%; + } + @media screen and (min-width:601px) and (max-width:900px){ + height:7%; + width:80%; + margin-top:7%; + } + @media screen and (min-width:901px) and (max-width:1050px){ + height:9%; + width:80%; + margin-top:5%; + } + @media screen and (min-width:1051px) and (max-width:1200px){ + height:10%; + width:80%; + margin-top:5%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:10%; + width:80%; + margin-top:5%; + } + ` + + export const CheckInput = styled.input` + width: 10%; + height: 50%; + padding: 0px 0px 8px 16px; + border-radius:2px; + border-color:red; + @media screen and (max-width:300px){ + height:60%; + width:7%; + } + @media screen and (min-width:301px) and (max-width:500px) { + height:60%; + width:7%; + } + @media screen and (min-width:501px) and (max-width:600px) { + height:60%; + width:5%; + } + @media screen and (min-width:601px) and (max-width:900px) { + height:50%; + width:7%; + } + @media screen and (min-width:901px) and (max-width:1200px) { + height:50%; + width:5%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:50%; + width:7%; + + } + ` + + export const CheckText = styled.p` + width:100%; + height:60%; + font-family: 'Inter', sans-serif; + font-weight: 300; + font-size: 14.7959px; + line-height: 20px; + padding-left:1%; + @media screen and (max-width:1200px){ + width:100%; + } + // @media screen and (min-width:1200px) and (max-width:){ + // width:100%; + // } + ` + + export const StyledButton = styled.button` + // padding: 8px 16px; + width: 73%; + height: 8%; + margin-top: 2%; + background:#5352ED; + color:white; + border: 1px solid #F1F1FA; + border-radius: 16px; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 90%; + line-height: 22px; + @media screen and (max-width:300px){ + height:9%; + width:90%; + margin-top:15%; + } + @media screen and (min-width:301px) and (max-width:400px){ + height:10%; + width:90%; + margin-top:10%; + } + @media screen and (min-width:401px) and (max-width:500px){ + height:10%; + width:90%; + margin-top:5%; + } + @media screen and (min-width:501px) and (max-width:600px){ + height:10%; + width:93%; + margin-top:5%; + } + @media screen and (min-width:601px) and (max-width:900px){ + height:8%; + width:80%; + margin-top:10%; + } + @media screen and (min-width:901px) and (max-width:1050px){ + height:9%; + width:80%; + margin-top:4%; + } + @media screen and (min-width:1051px) and (max-width:1200px){ + height:10%; + width:80%; + margin-top:4%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:20%; + width:80%; + margin-top:5%; + } + ` + + + export const StyledText = styled.div` + display:flex; + justify-content:center; + width:73%; + margin-top:2%; + font-family: 'Inter', sans-serif; + @media screen and (max-width:600px){ + margin-top:3%; + width:100%; + } + @media screen and (min-width:601px) and (max-width:1200px){ + margin-top:3%; + width:100%; + } + ` + export const GoogleButton = styled.button` + // padding: 8px 16px; + width: 73%; + height: 8%; + margin-top: 1%; + border: 1px solid #F1F1FA; + border-radius: 16px; + background: #FFFFFF; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 90%; + line-height: 50%; + display:flex; + flex-direction:row; + align-items:center; + justify-content:center; + @media screen and (max-width:300px){ + height:10%; + width:90%; + } + @media screen and (min-width:301px) and (max-width:500px){ + height:10%; + width:90%; + } + @media screen and (min-width:501px) and (max-width:600px){ + height:10%; + width:90%; + } + @media screen and (min-width:601px) and (max-width:900px){ + height:9%; + width:80%; + } + @media screen and (min-width:901px) and (max-width:1050px){ + height:9%; + width:80%; + } + @media screen and (min-width:1051px) and (max-width:1200px){ + height:10%; + width:80%; + } + @media screen and (min-width:1201px) and (max-width:1500px){ + height:20%; + width:80%; + }` + + export const StyleIconDiv = styled.div` + display:flex; + justify-content:center; + width:10%; + margin-top:2%; + @media screen and (max-width:300px){ + width:15%; + margin-top:1%; + margin-left:15%; + } + @media screen and (min-width:301px) and (max-width:500px){ + width:15%; + // padding-top:1%; + padding-left:25%; + } + @media screen and (min-width:501px) and (max-width:600px){ + width:10%; + // paadding-top:0.3%; + padding-left:25%; + } + @media screen and (min-width:601px) and (max-width:900px){ + width:15%; + // margin-top:0.3%; + padding-left:10%; + } + @media screen and (min-width:901px) and (max-width:1200px){ + width:15%; + margin-top:0.3%; + padding-left:20%; + } + ` + + export const StyleIconText = styled.div` + display:flex; + margin-top:2%; + @media screen and (max-width:400px){ + width:80%; + margin-top:3%; + } + @media screen and (min-width:401px) and (max-width:500px){ + width:80%; + margin-top:2%; + } + @media screen and (min-width:501px) and (max-width:600px){ + width:80%; + margin-top:1.5%; + } + @media screen and (min-width:601px) and (max-width:700px){ + width:100%; + margin-top:1.5%; + } + @media screen and (min-width:701px) and (max-width:1200px){ + width:100%; + margin-top:0.7%; + } + ` + + export const LoginText = styled.h4` + display:flex; + justify-content:center; + width:73%; + margin-top:6%; + color:#91919F; + font-family: 'Inter', sans-serif; + font-style: normal; + font-weight: 300; + font-size: 90.6239%; + line-height: 3%; + @media screen and (max-width:1200px){ + width:90%; + } + ` + + export const Styleimg = styled.img` + height:85%; + width:85%; + margin-left:12%; + @media screen and (min-width:600px) and (max-width:900px) { + width:85%; + height:85%; + } + @media screen and (min-width:900px) and (max-width:1200px) { + width:90%; + height:85%; + } + ` + export const StyledLink = styled.a` + text-decoration:none;` + + export const SignUpLink = styled.a` + color: #5352ED;` \ No newline at end of file diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 857cc60..874b664 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -3,11 +3,12 @@ import { Routes, Route, Navigate } from "react-router-dom"; import {v4 as uuid} from "uuid"; -import { ROOT_ROUTE, HOME_ROUTE, LOGIN_ROUTE } from "../utils/paths"; +import { ROOT_ROUTE, HOME_ROUTE, LOGIN_ROUTE, PROFILE_ROUTE } from "../utils/paths"; import Login from "./Login/index"; import Signup from "./Signup/index"; import Home from "./Home"; +import Profile from "./Profile"; const routesConfig = [ { @@ -25,6 +26,11 @@ const routesConfig = [ component: , privateRoute: true, }, + { + path: PROFILE_ROUTE, + component: , + privateRoute: false, + } ]; const elements = (component: ReactNode, privateRoute: boolean) => { diff --git a/src/routes/login/index.tsx b/src/routes/login/index.tsx index 8a098ab..0d40e69 100644 --- a/src/routes/login/index.tsx +++ b/src/routes/login/index.tsx @@ -198,8 +198,8 @@ function Login() { const StyledButton = styled.button` // padding: 8px 16px; width: 73%; - height: 8%; - margin-top: 2%; + height: 9%; + margin-top: 4%; background:#5352ED; color:white; border: 1px solid #F1F1FA; @@ -212,42 +212,42 @@ function Login() { @media screen and (max-width:300px){ height:9%; width:90%; - margin-top:5%; + margin-top:6%; } @media screen and (min-width:301px) and (max-width:400px){ height:10%; width:90%; - margin-top:5%; + margin-top:6%; } @media screen and (min-width:401px) and (max-width:500px){ height:10%; width:90%; - margin-top:5%; + margin-top:6%; } @media screen and (min-width:501px) and (max-width:600px){ height:10%; width:90%; - margin-top:5%; + margin-top:6%; } @media screen and (min-width:601px) and (max-width:900px){ - height:8%; + height:9%; width:80%; margin-top:5%; } @media screen and (min-width:901px) and (max-width:1050px){ - height:9%; + height:10%; width:80%; - margin-top:5%; + margin-top:6%; } @media screen and (min-width:1051px) and (max-width:1200px){ - height:10%; + height:11%; width:80%; - margin-top:5%; + margin-top:6%; } @media screen and (min-width:1201px) and (max-width:1500px){ - height:10%; + height:11%; width:80%; - margin-top:5%; + margin-top:6%; } ` const StyledText = styled.div` diff --git a/src/store/actionTypes/index.tsx b/src/store/actionTypes/index.tsx index 8e96d59..6273a0b 100644 --- a/src/store/actionTypes/index.tsx +++ b/src/store/actionTypes/index.tsx @@ -1 +1,6 @@ export const SIGNUP = "SIGNUP"; +export const types = { + USER_PROFILE_REQUEST:"USER_PROFILE_REQUEST", + USER_PROFILE_SUCCESS:"USER_PROFILE_SUCCESS", + USER_PROFILE_FAILURE:"USER_PROFILE_FAILURE", +} \ No newline at end of file diff --git a/src/store/actions/index.tsx b/src/store/actions/index.tsx index dfe121a..019f651 100644 --- a/src/store/actions/index.tsx +++ b/src/store/actions/index.tsx @@ -1,4 +1,4 @@ -import { SIGNUP } from "../actionTypes"; +import { SIGNUP, types } from "../actionTypes"; export interface signUpTypes{ name:string, userId:string, @@ -11,4 +11,24 @@ export const signUp = (name:string,id:string,pass:string) => { userId:id, password:pass, }} +} + +export const userProfile = () => { + return { + type: types.USER_PROFILE_REQUEST, + payload:{ + data:"apple", + } + } +} +export const userProfileSuccess = (data:any) => { + return { + type: types.USER_PROFILE_SUCCESS, + data:data, + } +} +export const userProfileFailure = () => { + return { + type: types.USER_PROFILE_FAILURE, + } } \ No newline at end of file diff --git a/src/store/index.ts b/src/store/index.ts index f0f46bb..22e0164 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,8 +1,19 @@ import {createStore,applyMiddleware} from 'redux'; +// import { configureStore } from '@reduxjs/toolkit' import {logger} from 'redux-logger'; -import {reducer} from './reducer/index'; +import {profileReducer} from './reducer/index'; +import profileSaga from './saga'; + +import createSagaMiddleware from "redux-saga"; + +const sagaMiddleware = createSagaMiddleware(); + +// const store = configureStore({ reducer: profileReducer , middleware : (applyMiddleware) => applyMiddleware(logger, sagaMiddleware)}) +const store = createStore(profileReducer, applyMiddleware(logger, sagaMiddleware)); + +sagaMiddleware.run(profileSaga); + +export default store; -const store = createStore(reducer,applyMiddleware(logger)); -export default store; \ No newline at end of file diff --git a/src/store/reducer/index.ts b/src/store/reducer/index.ts index b810363..dec5478 100644 --- a/src/store/reducer/index.ts +++ b/src/store/reducer/index.ts @@ -1,16 +1,47 @@ -import { SIGNUP } from '../actionTypes'; -import {signUpType,stateType} from './types'; +import { SIGNUP, types} from '../actionTypes'; +import { stateType, userProfileType } from './types'; -const initialState:stateType = { - users : [], +const initialState: stateType = { + users: [], + error: "errors in call", + isLoading:true, } -export const reducer = (state = initialState, action:signUpType) => { - switch(action.type){ - case SIGNUP: + +// export const reducer = (state = initialState, action:signUpType) => { +// switch(action.type){ +// case SIGNUP: +// return { +// ...state, +// users:[...state.users,{name:action.payload.name, userId:action.payload.userId, password:action.payload.password}] +// } +// default: return state; +// } +// } + +export const profileReducer = (state = initialState, action: userProfileType) => { + + switch (action.type) { + // case types.USER_PROFILE_REQUEST: + // return{ + // ...state, + // } + case types.USER_PROFILE_SUCCESS: + return { + ...state, + users: [ + ...action.data, + ], + isLoading:false, + } + case types.USER_PROFILE_FAILURE: + return { + ...state, + error: action.data, + isLoading:false, + } + default: return { ...state, - users:[...state.users,{name:action.payload.name, userId:action.payload.userId, password:action.payload.password}] } - default: return state; } } \ No newline at end of file diff --git a/src/store/reducer/types.ts b/src/store/reducer/types.ts index ce08bd8..b789c7c 100644 --- a/src/store/reducer/types.ts +++ b/src/store/reducer/types.ts @@ -1,16 +1,34 @@ -export interface signUpType { - type: "SIGNUP"; - payload: { - name: string; - userId:string, - password:string, - }; - } - +// export interface signUpType { +// type: "SIGNUP"; +// payload: { +// name: string; +// userId:string, +// password:string, +// }; +// } + export interface stateType { - users: { - name: string, - userId:string, - password:string, - }[]; - } \ No newline at end of file + users: { + name: string, + userId: string, + password: string, + }[]; + error:string, + isLoading:boolean +} + + +type a = { + type: "USER_PROFILE_SUCCESS", + data: any, +} +type b = { + type: "USER_PROFILE_FAILURE", + data: string, +} + +export type userProfileType = a | b; + + + + diff --git a/src/store/reducer/userAuth/index.tsx b/src/store/reducer/userAuth/index.tsx new file mode 100644 index 0000000..6638c4f --- /dev/null +++ b/src/store/reducer/userAuth/index.tsx @@ -0,0 +1 @@ +export{} \ No newline at end of file diff --git a/src/store/reducer/userAuth/type.tsx b/src/store/reducer/userAuth/type.tsx new file mode 100644 index 0000000..6638c4f --- /dev/null +++ b/src/store/reducer/userAuth/type.tsx @@ -0,0 +1 @@ +export{} \ No newline at end of file diff --git a/src/store/saga/index.tsx b/src/store/saga/index.tsx new file mode 100644 index 0000000..d49bbee --- /dev/null +++ b/src/store/saga/index.tsx @@ -0,0 +1,21 @@ +import {takeEvery, put} from "redux-saga/effects"; +import {types } from "../actionTypes"; +import * as actions from '../actions/index'; +import { URL } from "../../assests/services/index"; + + +function* getProfile() : any { + try{ + let data = yield URL(); + yield put(actions.userProfileSuccess(data)); + } + catch(error) + { + yield put(actions.userProfileFailure()); + } +} +function* profileSaga() { + yield takeEvery(types.USER_PROFILE_REQUEST, getProfile) +} + +export default profileSaga; \ No newline at end of file diff --git a/src/utils/paths.tsx b/src/utils/paths.tsx index 02ab642..0cea7b2 100644 --- a/src/utils/paths.tsx +++ b/src/utils/paths.tsx @@ -1,3 +1,4 @@ export const ROOT_ROUTE = "/"; export const LOGIN_ROUTE = "/login"; -export const HOME_ROUTE = "/home"; \ No newline at end of file +export const HOME_ROUTE = "/home"; +export const PROFILE_ROUTE="/profile"; \ No newline at end of file