1st push
This commit is contained in:
Rahul
parent
501d8a8d8e
commit
3226975910
76 changed files with 48623 additions and 3401 deletions
|
|
@ -1,31 +0,0 @@
|
|||
import type { Meta, StoryObj } from "@storybook/react"
|
||||
import { Button } from "./Button"
|
||||
|
||||
const meta: Meta<typeof Button> = {
|
||||
title: "Button",
|
||||
component: Button,
|
||||
args: {
|
||||
intent: "primary",
|
||||
underline: false,
|
||||
children: "Button",
|
||||
size: "lg",
|
||||
},
|
||||
argTypes: {
|
||||
intent: {
|
||||
options: ["primary", "secondary"],
|
||||
control: { type: "select" },
|
||||
},
|
||||
size: {
|
||||
options: ["sm", "lg"],
|
||||
control: { type: "select" },
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
type Story = StoryObj<typeof Button>
|
||||
|
||||
export const Default: Story = {
|
||||
render: (args) => <Button {...args} />,
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
const button = cva(
|
||||
[
|
||||
"justify-center",
|
||||
"inline-flex",
|
||||
"items-center",
|
||||
"rounded-xl",
|
||||
"text-center",
|
||||
"border",
|
||||
"border-blue-400",
|
||||
"transition-colors",
|
||||
"delay-50",
|
||||
],
|
||||
{
|
||||
variants: {
|
||||
intent: {
|
||||
primary: ["bg-blue-400", "text-white", "hover:enabled:bg-blue-700"],
|
||||
secondary: ["bg-transparent", "text-blue-400", "hover:enabled:bg-blue-400", "hover:enabled:text-white"],
|
||||
},
|
||||
size: {
|
||||
sm: ["min-w-20", "h-full", "min-h-10", "text-sm", "py-1.5", "px-4"],
|
||||
lg: ["min-w-32", "h-full", "min-h-12", "text-lg", "py-2.5", "px-6"],
|
||||
},
|
||||
underline: { true: ["underline"], false: [] },
|
||||
},
|
||||
defaultVariants: {
|
||||
intent: "primary",
|
||||
size: "lg",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLAnchorElement>, VariantProps<typeof button> {
|
||||
underline?: boolean
|
||||
href: string
|
||||
}
|
||||
|
||||
export function Button({ className, intent, size, underline, ...props }: ButtonProps) {
|
||||
return (
|
||||
<a className={twMerge(button({ intent, size, className, underline }))} {...props}>
|
||||
{props.children}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
import * as RadixTooltip from "@radix-ui/react-tooltip"
|
||||
import { cva, VariantProps } from "class-variance-authority"
|
||||
import React from "react"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
const tooltipContent = cva([], {
|
||||
variants: {
|
||||
intent: {
|
||||
primary: ["rounded-0.5md", "bg-zinc-700", "font-open-sans", "text-white"],
|
||||
},
|
||||
size: {
|
||||
md: ["px-4", "py-2.5", "text-2xs"],
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
intent: "primary",
|
||||
size: "md",
|
||||
},
|
||||
})
|
||||
|
||||
const tooltipArrow = cva([], {
|
||||
variants: {
|
||||
intent: {
|
||||
primary: ["fill-zinc-700"],
|
||||
},
|
||||
size: {
|
||||
md: ["w-4", "h-2"],
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
intent: "primary",
|
||||
size: "md",
|
||||
},
|
||||
})
|
||||
|
||||
export interface TooltipProps extends VariantProps<typeof tooltipContent>, RadixTooltip.TooltipProps {
|
||||
explainer: React.ReactElement | string
|
||||
children: React.ReactElement
|
||||
className?: string
|
||||
withArrow?: boolean
|
||||
side?: "top" | "right" | "bottom" | "left"
|
||||
}
|
||||
|
||||
export function Tooltip({
|
||||
children,
|
||||
explainer,
|
||||
open,
|
||||
defaultOpen,
|
||||
onOpenChange,
|
||||
intent,
|
||||
size,
|
||||
side = "top",
|
||||
className,
|
||||
withArrow,
|
||||
}: TooltipProps) {
|
||||
return (
|
||||
<RadixTooltip.Provider>
|
||||
<RadixTooltip.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} delayDuration={200}>
|
||||
<RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
|
||||
<RadixTooltip.Portal>
|
||||
<RadixTooltip.Content
|
||||
side={side}
|
||||
sideOffset={5}
|
||||
className={twMerge(tooltipContent({ intent, size, className }))}
|
||||
>
|
||||
{explainer}
|
||||
{withArrow ? <RadixTooltip.Arrow className={twMerge(tooltipArrow({ intent, size, className }))} /> : null}
|
||||
</RadixTooltip.Content>
|
||||
</RadixTooltip.Portal>
|
||||
</RadixTooltip.Root>
|
||||
</RadixTooltip.Provider>
|
||||
)
|
||||
}
|
||||
9
components/button.js
Normal file
9
components/button.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import { Button } from "@chakra-ui/react"
|
||||
|
||||
export default function MyButton(props) {
|
||||
return (
|
||||
<Button href="/about" color="green.500" _hover={{ color: "blue.500" }} align="center">
|
||||
About
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
44
components/formlabelinput.js
Normal file
44
components/formlabelinput.js
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import { Box, Flex, FormLabel, Input, Spacer } from "@chakra-ui/react"
|
||||
import { Hide, Show } from "@chakra-ui/react"
|
||||
import React, { useEffect, useState } from "react"
|
||||
/**
|
||||
* Component used to generate a form input
|
||||
* props -
|
||||
* label
|
||||
* inputtype
|
||||
* placeholder
|
||||
* onChange = the handler function to get the changed data
|
||||
*/
|
||||
export default function FormLabelInput(props) {
|
||||
const [data, setData] = React.useState("")
|
||||
|
||||
const handlepassChange = (data) => {
|
||||
props.onChange(data)
|
||||
}
|
||||
useEffect(() => {
|
||||
handlepassChange(data)
|
||||
})
|
||||
return (
|
||||
<Flex direction={["column", "column", "row", "row"]} alignItems="center" marginY={5}>
|
||||
<Box flexBasis={0} flexGrow={1}>
|
||||
<Hide below="md">
|
||||
<FormLabel margin={"auto"} whiteSpace={"nowrap"} textAlign={"left"}>
|
||||
{props.label}
|
||||
</FormLabel>
|
||||
</Hide>
|
||||
</Box>
|
||||
|
||||
<Box flexBasis={0} flexGrow={1}>
|
||||
<Input
|
||||
type={props.inputtype}
|
||||
placeholder={props.placeholder}
|
||||
bgColor={"white"}
|
||||
value={data}
|
||||
onChange={(e) => {
|
||||
setData(e.target.value)
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
157
components/headbar.js
Normal file
157
components/headbar.js
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
import { Box, Button, Flex, Link, Stack, Text } from "@chakra-ui/react"
|
||||
import { useDisclosure } from "@chakra-ui/react"
|
||||
import {
|
||||
Drawer,
|
||||
DrawerBody,
|
||||
DrawerCloseButton,
|
||||
DrawerContent,
|
||||
DrawerFooter,
|
||||
DrawerHeader,
|
||||
DrawerOverlay,
|
||||
Input,
|
||||
} from "@chakra-ui/react"
|
||||
import { Icon } from "@radix-ui/react-select"
|
||||
import React from "react"
|
||||
import Logo from "./logo"
|
||||
|
||||
function DrawerExample() {
|
||||
const { isOpen, onOpen, onClose } = useDisclosure()
|
||||
const btnRef = React.useRef()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button ref={btnRef} colorScheme="teal" onClick={onOpen}>
|
||||
<Icon />
|
||||
</Button>
|
||||
<Drawer isOpen={isOpen} placement="left" onClose={onClose} finalFocusRef={btnRef}>
|
||||
<DrawerOverlay />
|
||||
<DrawerContent>
|
||||
<DrawerCloseButton />
|
||||
<DrawerHeader>Create your account</DrawerHeader>
|
||||
|
||||
<DrawerBody>
|
||||
<Input placeholder="Type here..." />
|
||||
</DrawerBody>
|
||||
|
||||
<DrawerFooter>
|
||||
<Button variant="outline" mr={3} onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button colorScheme="blue">Save</Button>
|
||||
</DrawerFooter>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const NavBar = (props) => {
|
||||
const [isOpen, setIsOpen] = React.useState(false)
|
||||
|
||||
const toggle = () => setIsOpen(!isOpen)
|
||||
|
||||
return (
|
||||
<NavBarContainer {...props} h={["10%", "100%", "10%", "100%"]}>
|
||||
<DrawerExample />
|
||||
<LogoItem />
|
||||
<Button
|
||||
size="sm"
|
||||
rounded="md"
|
||||
color={["primary.500", "primary.500", "white", "white"]}
|
||||
bg={["white", "white", "primary.500", "primary.500"]}
|
||||
_hover={{
|
||||
bg: ["primary.100", "primary.100", "primary.600", "primary.600"],
|
||||
}}
|
||||
>
|
||||
Create Account
|
||||
</Button>
|
||||
<MenuToggle toggle={toggle} isOpen={isOpen} />
|
||||
<MenuLinks isOpen={isOpen} />
|
||||
</NavBarContainer>
|
||||
)
|
||||
}
|
||||
|
||||
const CloseIcon = () => (
|
||||
<svg width="24" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Close</title>
|
||||
<path
|
||||
fill="white"
|
||||
d="M9.00023 7.58599L13.9502 2.63599L15.3642 4.04999L10.4142 8.99999L15.3642 13.95L13.9502 15.364L9.00023 10.414L4.05023 15.364L2.63623 13.95L7.58623 8.99999L2.63623 4.04999L4.05023 2.63599L9.00023 7.58599Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
const MenuIcon = () => (
|
||||
<svg width="24px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="white">
|
||||
<title>Menu</title>
|
||||
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const MenuToggle = ({ toggle, isOpen }) => {
|
||||
return (
|
||||
<Box display={{ base: "block", md: "none" }} onClick={toggle}>
|
||||
{isOpen ? <CloseIcon /> : <MenuIcon />}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
const LogoItem = () => {
|
||||
return (
|
||||
<Link href={"/home"}>
|
||||
<Logo w="100px" color={["white", "white", "primary.500", "primary.500"]}></Logo>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
const MenuItem = ({ children, isLast, to = "/", ...rest }) => {
|
||||
return (
|
||||
<Link href={to}>
|
||||
<Text display="block" {...rest} align={"center"} paddingTop={["15px", "15px", "10px", "10px"]}>
|
||||
{children}
|
||||
</Text>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
const MenuLinks = ({ isOpen }) => {
|
||||
return (
|
||||
<Box display={{ base: isOpen ? "block" : "none", md: "block" }} flexBasis={{ base: "100%", md: "auto" }}>
|
||||
<Stack
|
||||
spacing={[6, 8, 10]}
|
||||
align="center"
|
||||
justify={["flex-end", "flex-end", "center", "center"]}
|
||||
direction={["column", "column", "row", "row"]}
|
||||
pt={[0, 0, 0, 0]}
|
||||
>
|
||||
<MenuItem to="/home">Home</MenuItem>
|
||||
<MenuItem to="/how">How It works </MenuItem>
|
||||
<MenuItem to="/pricing">Pricing </MenuItem>
|
||||
</Stack>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
const NavBarContainer = ({ children, ...props }) => {
|
||||
return (
|
||||
<Flex
|
||||
as="nav"
|
||||
align="center"
|
||||
justify="space-between"
|
||||
wrap="wrap"
|
||||
w="100%"
|
||||
mb={8}
|
||||
p={[4, 6, 6, 6]}
|
||||
top={0}
|
||||
position="sticky"
|
||||
zIndex={10}
|
||||
bgGradient="linear(to-b, green.200, green.100)"
|
||||
color={["white", "white", "primary.700", "primary.700"]}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
export default NavBar
|
||||
14
components/layout.js
Normal file
14
components/layout.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import Head from "next/head"
|
||||
import Header from "../components/headbar"
|
||||
export default function Layout({ children }) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Learning bee</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<Header />
|
||||
<main>{children}</main>
|
||||
</>
|
||||
)
|
||||
}
|
||||
252
components/logincomponent.js
Normal file
252
components/logincomponent.js
Normal file
|
|
@ -0,0 +1,252 @@
|
|||
import {
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormHelperText,
|
||||
FormLabel,
|
||||
Input,
|
||||
Link,
|
||||
Stack,
|
||||
} from "@chakra-ui/react"
|
||||
import { getAuth, isSignInWithEmailLink, sendSignInLinkToEmail, signInWithEmailLink } from "firebase/auth"
|
||||
import { useRouter } from "next/router"
|
||||
import React, { Component, useContext, useState } from "react"
|
||||
import FormLabelInput from "./formlabelinput"
|
||||
import { geturlFormdata } from "../constants"
|
||||
import { AuthContext } from "../context"
|
||||
|
||||
// import Login from "../googlelogin";
|
||||
|
||||
export default function Logincomponent(props) {
|
||||
const auth = getAuth()
|
||||
|
||||
//for emaillink auth
|
||||
const [email, setEmail] = useState("")
|
||||
const [linksent, setLinksent] = useState(false)
|
||||
|
||||
//for email password auth
|
||||
const [password, setPassword] = useState("")
|
||||
|
||||
const authContext = useContext(AuthContext)
|
||||
const router = useRouter()
|
||||
|
||||
const [isloaded, setIsloaded] = useState(false)
|
||||
const [emailselect, setEmailselect] = useState(false)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!isloaded) {
|
||||
setIsloaded(true)
|
||||
}
|
||||
})
|
||||
|
||||
// function validateForm() {
|
||||
// return email.length > 0 && password.length > 0
|
||||
// }
|
||||
|
||||
// //for email password authentication
|
||||
// async function handleSubmit(event) {
|
||||
// event.preventDefault()
|
||||
|
||||
// var urlForm = geturlFormdata("user", "login")
|
||||
// console.log(email, password)
|
||||
// await getTokens(urlForm.url, email, password).then((value) => {
|
||||
// var idtype = null
|
||||
// if (email.includes("@")) {
|
||||
// idtype = "email"
|
||||
// } else {
|
||||
// idtype = "phone"
|
||||
// }
|
||||
|
||||
// // getuserdata(idtype , email).then((value)=>{
|
||||
// // router.push(`/home`)
|
||||
// // })
|
||||
// })
|
||||
// }
|
||||
|
||||
const onSignInSubmit = () => {}
|
||||
|
||||
const onEmailSubmit = () => {
|
||||
setEmailselect(true)
|
||||
}
|
||||
|
||||
/////////////////////////////
|
||||
//email link auth
|
||||
|
||||
const actionCodeSettings = {
|
||||
// URL you want to redirect back to. The domain (www.example.com) for this
|
||||
// URL must be in the authorized domains list in the Firebase Console.
|
||||
// url: `${siterooturl}login`,
|
||||
|
||||
url: `http://localhost:3000/login`,
|
||||
|
||||
// // This must be true.
|
||||
handleCodeInApp: true,
|
||||
// iOS: {
|
||||
// bundleId: 'com.example.ios'
|
||||
// },
|
||||
// android: {
|
||||
// packageName: 'com.example.android',
|
||||
// installApp: true,
|
||||
// minimumVersion: '12'
|
||||
// },
|
||||
// dynamicLinkDomain: 'example.page.link'
|
||||
}
|
||||
|
||||
const sighinWithCreds = async (email, password) => {
|
||||
const response = await fetch("/api/login", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ email, password }),
|
||||
})
|
||||
console.log(response.ok)
|
||||
if (response.ok) {
|
||||
router.push("/home")
|
||||
} else {
|
||||
// Handle errors
|
||||
}
|
||||
}
|
||||
|
||||
const signinWithLink = async () => {
|
||||
console.log(auth, email, actionCodeSettings)
|
||||
await sendSignInLinkToEmail(auth, email, actionCodeSettings)
|
||||
.then(() => {
|
||||
// The link was successfully sent. Inform the user.
|
||||
// Save the email locally so you don't need to ask the user for it again
|
||||
// if they open the link on the same device.
|
||||
|
||||
setLinksent(true)
|
||||
|
||||
// ...
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
console.log("error sending link")
|
||||
const errorCode = error.code
|
||||
const errorMessage = error.message
|
||||
// ...
|
||||
})
|
||||
}
|
||||
|
||||
if (isloaded && isSignInWithEmailLink(auth, window.location.href)) {
|
||||
// Additional state parameters can also be passed via URL.
|
||||
// This can be used to continue the user's intended action before triggering
|
||||
// the sign-in operation.
|
||||
// Get the email if available. This should be available if the user completes
|
||||
// the flow on the same device where they started it.
|
||||
|
||||
console.log(email)
|
||||
if (!email) {
|
||||
// User opened the link on a different device. To prevent session fixation
|
||||
// attacks, ask the user to provide the associated email again. For example:
|
||||
// email = window.prompt('Please provide your email for confirmation');
|
||||
}
|
||||
// The client SDK will parse the code from the link for you.
|
||||
signInWithEmailLink(auth, email, window.location.href)
|
||||
.then((result) => {
|
||||
// Clear email from storage.
|
||||
console.log("logged in")
|
||||
|
||||
// result.user.providerData
|
||||
onSuccess(result)
|
||||
// window.localStorage.removeItem('emailForSignIn');
|
||||
|
||||
//router.push('/home')
|
||||
// You can access the new user via result.user
|
||||
|
||||
// Additional user info profile not available via:
|
||||
// result.additionalUserInfo.profile == null
|
||||
// You can check if the user is new or existing:
|
||||
// result.additionalUserInfo.isNewUser
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
onFailure()
|
||||
// Some error occurred, you can inspect the code: error.code
|
||||
// Common errors could be invalid email and invalid or expired OTPs.
|
||||
})
|
||||
}
|
||||
|
||||
const onSuccess = (res) => {
|
||||
console.log(res)
|
||||
// verifyonServer(res._tokenResponse.idToken, "email", res.user.email, res)
|
||||
}
|
||||
|
||||
const onFailure = () => {
|
||||
alert(`Something went Wrong. Try again `)
|
||||
}
|
||||
const confirmCode = (code) => {
|
||||
// confirmationResult.confirm(code).then((result) => {
|
||||
// // User signed in successfully.
|
||||
// const user = result.user;
|
||||
// // ...
|
||||
// }).catch((error) => {
|
||||
// // User couldn't sign in (bad verification code?)
|
||||
// // ...
|
||||
// });
|
||||
}
|
||||
|
||||
const handleEmailChange = (val) => {
|
||||
setEmail(val)
|
||||
}
|
||||
const handlePasswordChange = (val) => {
|
||||
setPassword(val)
|
||||
}
|
||||
|
||||
console.log(password)
|
||||
return (
|
||||
<Box
|
||||
w={["80%", "60%", "40%"]}
|
||||
align="center"
|
||||
bgGradient="linear(to-b, blue.200, blue.500)"
|
||||
padding={10}
|
||||
borderRadius={10}
|
||||
margin="auto"
|
||||
>
|
||||
{!linksent && (
|
||||
<>
|
||||
<FormLabel margin={"auto"} padding={"auto"} textAlign={"center"}>
|
||||
Log in
|
||||
</FormLabel>
|
||||
<FormControl className={"form-group"}>
|
||||
<FormLabelInput
|
||||
inputtype="email"
|
||||
label="Email*"
|
||||
placeholder="abc@xyz.uvw"
|
||||
onChange={(e) => handleEmailChange(e)}
|
||||
/>
|
||||
|
||||
<FormLabelInput
|
||||
inputtype="password"
|
||||
label="Password"
|
||||
placeholder="type your password"
|
||||
onChange={(e) => handlePasswordChange(e)}
|
||||
/>
|
||||
</FormControl>
|
||||
<Button className="btn" onClick={() => sighinWithCreds(email, password)}>
|
||||
Log in
|
||||
</Button>
|
||||
|
||||
<p>--- or ---</p>
|
||||
<Button className="btn" onClick={signinWithLink}>
|
||||
Continue with signin link
|
||||
</Button>
|
||||
|
||||
{/* <p >Sign in with</p> */}
|
||||
{/* <Login /> */}
|
||||
</>
|
||||
)}
|
||||
|
||||
{linksent && (
|
||||
<>
|
||||
<h4>Signin Link sent</h4>
|
||||
<div className={"form-group"}>
|
||||
<div style={{ marginBlock: "10%" }}>Check your provided email , And Click on the Link to verify </div>
|
||||
<h3>WE are already waiting for you</h3>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
12
components/logo.js
Normal file
12
components/logo.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import { Box, Text } from "@chakra-ui/react"
|
||||
import React from "react"
|
||||
|
||||
export default function Logo(props) {
|
||||
return (
|
||||
<Box {...props}>
|
||||
<Text fontSize="lg" fontWeight="bold">
|
||||
Logo
|
||||
</Text>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
39
components/menuitem.js
Normal file
39
components/menuitem.js
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import { Card, CardBody, CardFooter, CardHeader } from "@chakra-ui/react"
|
||||
|
||||
import { Heading, Image, Stack, Text } from "@chakra-ui/react"
|
||||
import { useRouter } from "next/router"
|
||||
import React, { useContext, useEffect, useState } from "react"
|
||||
|
||||
export default function MenuItem(props) {
|
||||
//define states here
|
||||
const [isloaded, setIsLoaded] = React.useState(false)
|
||||
|
||||
//router
|
||||
const router = useRouter()
|
||||
|
||||
useEffect(() => {
|
||||
if (!isloaded) {
|
||||
console.log("isloaded called")
|
||||
|
||||
setIsLoaded(true)
|
||||
}
|
||||
})
|
||||
|
||||
//function when clicked
|
||||
|
||||
const handleOnClick = (e) => {
|
||||
router.push(`/learningpath/${props.id}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<Card onClick={handleOnClick}>
|
||||
<CardBody>
|
||||
<Image src={props.image_url} alt={props.image_desc} borderRadius="lg" />
|
||||
<Stack mt="6" spacing="3">
|
||||
<Heading size="md">{props.title}</Heading>
|
||||
<Text>{props.summary}</Text>
|
||||
</Stack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
125
components/signupcomponent.js
Normal file
125
components/signupcomponent.js
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
import {
|
||||
Box,
|
||||
Button,
|
||||
Flex,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormHelperText,
|
||||
FormLabel,
|
||||
Input,
|
||||
Link,
|
||||
Stack,
|
||||
} from "@chakra-ui/react"
|
||||
import { useRouter } from "next/router"
|
||||
import React, { useState } from "react"
|
||||
import FormLabelInput from "./formlabelinput"
|
||||
import { geturlFormdata, siterooturl } from "../constants"
|
||||
|
||||
export default function Signupcomponent(props) {
|
||||
const [email, setEmail] = React.useState("")
|
||||
const [phone, setPhone] = React.useState("")
|
||||
const [password, setPassword] = React.useState("")
|
||||
const [confirm_password, setConfirmPassword] = React.useState("")
|
||||
const router = useRouter()
|
||||
|
||||
const [show, setShow] = useState(true)
|
||||
|
||||
const validateForm = () => {
|
||||
return email.length > 0 && (phone.length >= 10 || phone.length == 0) && password.length > 0
|
||||
}
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
console.log(email, password, confirm_password, phone)
|
||||
if (phone.length > 0 && phone.length < 10) {
|
||||
//popup
|
||||
}
|
||||
event.preventDefault()
|
||||
var urlForm
|
||||
if (email.length == 0) {
|
||||
urlForm = geturlFormdata("user", "signup", {}, { phone: phone, password: password })
|
||||
} else if (phone.length == 0) {
|
||||
urlForm = geturlFormdata("user", "signup", {}, { mail: email, password: password })
|
||||
} else {
|
||||
urlForm = geturlFormdata("user", "signup", {}, { mail: email, phone: phone, password: password })
|
||||
}
|
||||
|
||||
if (password !== confirm_password) {
|
||||
setShow(true)
|
||||
return
|
||||
}
|
||||
try {
|
||||
// postsignup(urlForm.url, urlForm.formdata).then(() => {
|
||||
// router.push("/info")
|
||||
// })
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
const handleEmailChange = (val) => {
|
||||
setEmail(val)
|
||||
}
|
||||
const handlePhoneChange = (val) => {
|
||||
setPhone(val)
|
||||
}
|
||||
const handlePasswordChange = (val) => {
|
||||
setPassword(val)
|
||||
}
|
||||
const handleConfirmPasswordChange = (val) => {
|
||||
setConfirmPassword(val)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
w="50%"
|
||||
align="center"
|
||||
bgGradient="linear(to-b, blue.200, blue.500)"
|
||||
padding={10}
|
||||
borderRadius={10}
|
||||
margin="auto"
|
||||
>
|
||||
<FormControl onSubmit={handleSubmit} align="center">
|
||||
<FormLabel margin={"auto"} padding={"auto"} textAlign={"center"}>
|
||||
Register
|
||||
</FormLabel>
|
||||
|
||||
<FormLabelInput
|
||||
inputtype="email"
|
||||
label="Email*"
|
||||
placeholder="abc@xyz.uvw"
|
||||
onChange={(e) => handleEmailChange(e)}
|
||||
/>
|
||||
|
||||
<FormLabelInput
|
||||
inputtype="number"
|
||||
label="Phone"
|
||||
placeholder="XXXXXXXXXX"
|
||||
onChange={(e) => handlePhoneChange(e)}
|
||||
/>
|
||||
|
||||
<FormLabelInput
|
||||
inputtype="password"
|
||||
label="Password"
|
||||
placeholder="type your password"
|
||||
onChange={(e) => handlePasswordChange(e)}
|
||||
/>
|
||||
|
||||
<FormLabelInput
|
||||
inputtype="password"
|
||||
label="Confirm Password"
|
||||
placeholder="type your password again"
|
||||
onChange={(e) => handleConfirmPasswordChange(e)}
|
||||
/>
|
||||
|
||||
<Button type="submit" margin="auto" marginY="10px" disabled={!validateForm()} onClick={handleSubmit}>
|
||||
Register
|
||||
</Button>
|
||||
|
||||
<FormLabel margin={"auto"} align="center" textAlign={"center"}>
|
||||
Already registered?{" "}
|
||||
<Link href={`${siterooturl}login`} color="black.500" _hover={{ color: "blue.800", fontSize: "130%" }}>
|
||||
log in
|
||||
</Link>
|
||||
</FormLabel>
|
||||
</FormControl>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue