matthew
2 years ago
48 changed files with 700 additions and 599 deletions
Binary file not shown.
@ -0,0 +1,33 @@
|
||||
import { |
||||
ServerSidePropsContext, |
||||
ContextParamsServer, |
||||
} from "app/core/contextProviders/serverSidePropsProvider" |
||||
import { ReactNode, useState } from "react" |
||||
import jsCookies from "js-cookie" |
||||
|
||||
interface Props { |
||||
children: ReactNode |
||||
contextParamsServer: ContextParamsServer |
||||
} |
||||
|
||||
type Theme = "light" | "dark" |
||||
const THEME_COOKIE_NAME = "theme" |
||||
|
||||
const ContextProviders = ({ children, contextParamsServer: { cookies } }: Props) => { |
||||
const [theme, setThemeState] = useState<Theme>((cookies[THEME_COOKIE_NAME] as Theme) || 'dark') |
||||
const setTheme = (theme: Theme) => { |
||||
jsCookies.set(THEME_COOKIE_NAME, theme) |
||||
setThemeState(theme) |
||||
} |
||||
|
||||
const context = { |
||||
theme, |
||||
setTheme, |
||||
} |
||||
|
||||
return ( |
||||
<ServerSidePropsContext.Provider value={context}>{children}</ServerSidePropsContext.Provider> |
||||
) |
||||
} |
||||
|
||||
export default ContextProviders |
||||
@ -0,0 +1 @@
|
||||
export {default} from './ContextProviders' |
||||
@ -0,0 +1,38 @@
|
||||
import { cn } from "app/core/helpers/common" |
||||
import { ReactNode } from "react" |
||||
import { AnimatePresence, HTMLMotionProps, motion } from "framer-motion" |
||||
import s from "./styles.module.css" |
||||
|
||||
import NextLink from "next/link" |
||||
import { Routes } from "@blitzjs/next" |
||||
|
||||
interface Props { |
||||
children: ReactNode |
||||
theme: "primary" | "clear" |
||||
className?: string |
||||
onClick?: () => void |
||||
href: string | ReturnType<typeof Routes.Home> |
||||
wide?: boolean |
||||
} |
||||
|
||||
const Link = ({ |
||||
children, |
||||
theme, |
||||
className, |
||||
onClick, |
||||
href, |
||||
wide, |
||||
...linkProps |
||||
}: Props & React.ComponentProps<typeof NextLink>) => { |
||||
return ( |
||||
<div className={cn(s.root, className, `theme-${theme}`)}> |
||||
<NextLink target="_blank" href={href} > |
||||
<a {...linkProps} onClick={onClick} className={cn({ [s.wide]: wide })}> |
||||
{children} |
||||
</a> |
||||
</NextLink> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default Link |
||||
@ -0,0 +1 @@
|
||||
export { default } from "./Link" |
||||
@ -0,0 +1,40 @@
|
||||
.root { |
||||
text-decoration: none; |
||||
display: inline-block; |
||||
|
||||
/* size */ |
||||
font-size: 18px; |
||||
font-weight: 500px; |
||||
} |
||||
.root a { |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.root a.wide::before { |
||||
content: ""; |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 100%; |
||||
top: 0; |
||||
left: 0; |
||||
} |
||||
|
||||
.root:active { |
||||
transform: scale(0.95); |
||||
} |
||||
|
||||
.root:global(.theme-primary) a { |
||||
color: var(--button_primary); |
||||
} |
||||
|
||||
.root:global(.theme-primary) a:hover { |
||||
color: var(--button_primary_hover); |
||||
} |
||||
|
||||
.root:global(.theme-primary) a:active { |
||||
color: var(--button_primary_pressed); |
||||
} |
||||
|
||||
.root:global(.theme-clear) a { |
||||
color: inherit; |
||||
} |
||||
@ -1,311 +1,31 @@
|
||||
.wrapper { |
||||
/* position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); */ |
||||
} |
||||
|
||||
.hideCheckbox { |
||||
opacity: 0; |
||||
height: 0; |
||||
width: 0; |
||||
} |
||||
|
||||
.toggle { |
||||
position: relative; |
||||
cursor: pointer; |
||||
display: inline-block; |
||||
width: 200px; |
||||
height: 100px; |
||||
background: #211042; |
||||
border-radius: 50px; |
||||
transition: 500ms; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.toggleButton { |
||||
position: absolute; |
||||
display: inline-block; |
||||
top: 7px; |
||||
left: 6px; |
||||
width: 86px; |
||||
height: 86px; |
||||
border-radius: 50%; |
||||
background: #faeaf1; |
||||
overflow: hidden; |
||||
box-shadow: 0 0 35px 4px rgba(255, 255, 255); |
||||
transition: all 500ms ease-out; |
||||
} |
||||
|
||||
.crater { |
||||
position: absolute; |
||||
display: inline-block; |
||||
background: #faeaf1; |
||||
border-radius: 50%; |
||||
transition: 500ms; |
||||
} |
||||
|
||||
.crater1 { |
||||
background: #fffff9; |
||||
width: 86px; |
||||
height: 86px; |
||||
left: 10px; |
||||
bottom: 10px; |
||||
} |
||||
|
||||
.crater2 { |
||||
width: 20px; |
||||
height: 20px; |
||||
top: -7px; |
||||
left: 44px; |
||||
} |
||||
|
||||
.crater3 { |
||||
width: 16px; |
||||
height: 16px; |
||||
top: 20px; |
||||
right: -4px; |
||||
} |
||||
|
||||
.crater4 { |
||||
width: 10px; |
||||
height: 10px; |
||||
top: 24px; |
||||
left: 30px; |
||||
} |
||||
|
||||
.crater5 { |
||||
width: 15px; |
||||
height: 15px; |
||||
top: 40px; |
||||
left: 48px; |
||||
} |
||||
|
||||
.crater6 { |
||||
width: 10px; |
||||
height: 10px; |
||||
top: 48px; |
||||
left: 20px; |
||||
} |
||||
|
||||
.crater7 { |
||||
width: 12px; |
||||
height: 12px; |
||||
bottom: 5px; |
||||
left: 35px; |
||||
} |
||||
|
||||
.star { |
||||
position: absolute; |
||||
display: inline-block; |
||||
border-radius: 50%; |
||||
background: #fff; |
||||
box-shadow: 1px 0 2px 2px rgba(255, 255, 255); |
||||
} |
||||
|
||||
.star1 { |
||||
width: 6px; |
||||
height: 6px; |
||||
right: 90px; |
||||
bottom: 40px; |
||||
} |
||||
|
||||
.star2 { |
||||
width: 8px; |
||||
height: 8px; |
||||
right: 70px; |
||||
top: 10px; |
||||
} |
||||
|
||||
.star3 { |
||||
width: 5px; |
||||
height: 5px; |
||||
right: 60px; |
||||
bottom: 15px; |
||||
} |
||||
|
||||
.star4 { |
||||
width: 3px; |
||||
height: 3px; |
||||
right: 40px; |
||||
bottom: 50px; |
||||
} |
||||
|
||||
.star5 { |
||||
width: 4px; |
||||
height: 4px; |
||||
right: 10px; |
||||
bottom: 35px; |
||||
} |
||||
|
||||
.star6, |
||||
.star7, |
||||
.star8 { |
||||
width: 10px; |
||||
height: 2px; |
||||
border-radius: 2px; |
||||
transform: rotate(-45deg); |
||||
box-shadow: 5px 0px 4px 1px #fff; |
||||
animation-name: travel; |
||||
animation-duration: 1.5s; |
||||
animation-timing-function: ease-out; |
||||
animation-iteration-count: infinite; |
||||
} |
||||
|
||||
.star6 { |
||||
right: 30px; |
||||
bottom: 30px; |
||||
animation-delay: -2s; |
||||
} |
||||
|
||||
.star7 { |
||||
right: 50px; |
||||
bottom: 60px; |
||||
} |
||||
|
||||
.star8 { |
||||
right: 90px; |
||||
top: 10px; |
||||
animation-delay: -4s; |
||||
} |
||||
|
||||
@keyframes travel { |
||||
0% { |
||||
transform: rotate(-45deg) translateX(70px); |
||||
} |
||||
|
||||
50% { |
||||
transform: rotate(-45deg) translateX(-20px); |
||||
box-shadow: 5px 0px 6px 1px #fff; |
||||
} |
||||
|
||||
100% { |
||||
transform: rotate(-45deg) translateX(-30px); |
||||
width: 2px; |
||||
height: 2px; |
||||
opacity: 0; |
||||
box-shadow: none; |
||||
} |
||||
} |
||||
|
||||
.hideCheckbox:checked + .toggle { |
||||
background: #24d7f7; |
||||
.root{ |
||||
flex: 1; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
} |
||||
|
||||
.hideCheckbox:checked + .toggle .toggleButton { |
||||
background: #f7ffff; |
||||
transform: translateX(102px); |
||||
box-shadow: 0 0 35px 5px rgba(255, 255, 255); |
||||
} |
||||
|
||||
.hideCheckbox:checked + .toggle .toggleButton .crater { |
||||
transform: rotate(-45deg) translateX(70px); |
||||
} |
||||
|
||||
.hideCheckbox:checked + .toggle .star { |
||||
animation: move 2s infinite; |
||||
transform: none; |
||||
box-shadow: none; |
||||
} |
||||
|
||||
.hideCheckbox:checked + .toggle .star1 { |
||||
width: 40px; |
||||
height: 10px; |
||||
.wrapper{ |
||||
width: 35px; |
||||
background: var(--background_secondary); |
||||
border-radius: 10px; |
||||
background: #fff; |
||||
left: 20px; |
||||
top: 25px; |
||||
box-shadow: none; |
||||
} |
||||
|
||||
.hideCheckbox:checked + .toggle .star2 { |
||||
width: 12px; |
||||
height: 12px; |
||||
background: #fff; |
||||
left: 26px; |
||||
top: 23px; |
||||
box-shadow: -1px 0 2px 0 rgba(0, 0, 0, 0.1); |
||||
} |
||||
|
||||
.hideCheckbox:checked + .toggle .star3 { |
||||
width: 16px; |
||||
height: 16px; |
||||
background: #fff; |
||||
left: 35px; |
||||
top: 19px; |
||||
box-shadow: -1px 0 2px 0 rgba(0, 0, 0, 0.1); |
||||
} |
||||
|
||||
.hideCheckbox:checked + .toggle .star4 { |
||||
width: 14px; |
||||
height: 14px; |
||||
background: #fff; |
||||
left: 46px; |
||||
top: 21px; |
||||
box-shadow: -1px 0 2px 0 rgba(0, 0, 0, 0.1); |
||||
} |
||||
|
||||
.hideCheckbox:checked + .toggle .star5 { |
||||
width: 60px; |
||||
height: 15px; |
||||
border-radius: 15px; |
||||
background: #fff; |
||||
left: 30px; |
||||
bottom: 20px; |
||||
box-shadow: none; |
||||
height: 20px; |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 2px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.hideCheckbox:checked + .toggle .star6 { |
||||
.content{ |
||||
width: 18px; |
||||
height: 18px; |
||||
background: #fff; |
||||
border-radius: 50%; |
||||
left: 38px; |
||||
bottom: 20px; |
||||
box-shadow: -1px 0 2px 0 rgba(0, 0, 0, 0.1); |
||||
} |
||||
|
||||
.hideCheckbox:checked + .toggle .star7 { |
||||
width: 24px; |
||||
height: 24px; |
||||
background: #fff; |
||||
border-radius: 50%; |
||||
left: 52px; |
||||
bottom: 20px; |
||||
box-shadow: -1px 0 2px 0 rgba(0, 0, 0, 0.1); |
||||
} |
||||
|
||||
.hideCheckbox:checked + .toggle .star8 { |
||||
width: 21px; |
||||
height: 21px; |
||||
background: #fff; |
||||
border-radius: 50%; |
||||
left: 70px; |
||||
top: 59px; |
||||
box-shadow: -1px 0 2px 0 rgba(0, 0, 0, 0.1); |
||||
} |
||||
|
||||
@keyframes move { |
||||
0% { |
||||
transform: none; |
||||
} |
||||
|
||||
25% { |
||||
transform: translateX(2px); |
||||
} |
||||
|
||||
100% { |
||||
transform: translateX(-2px); |
||||
} |
||||
} |
||||
|
||||
/* p { |
||||
background: var(--background_main); |
||||
font-size: 15px; |
||||
text-align: center; |
||||
letter-spacing: 15px; |
||||
background: #34495e; |
||||
color: #fff; |
||||
transition: transform .1s linear; |
||||
pointer-events: none; |
||||
} |
||||
|
||||
p.morning { |
||||
background: #e67e22; |
||||
} */ |
||||
.content.light { |
||||
transform: translateX(16px); |
||||
} |
||||
@ -1,3 +1,5 @@
|
||||
export const count = (event:string) => { |
||||
yaCounter90644479.reachGoal(event) |
||||
gtag('event', event); |
||||
console.log(event) |
||||
} |
||||
@ -1,14 +1,9 @@
|
||||
import { useContext } from "react" |
||||
import { ServerSidePropsContext } from "../contextProviders/serverSidePropsProvider" |
||||
import jsCookies from "js-cookie" |
||||
|
||||
const COOKIE_NAME = "theme" |
||||
|
||||
export const useCurrentTheme = () => { |
||||
const { cookies } = useContext(ServerSidePropsContext) |
||||
if (cookies) { |
||||
return jsCookies.get(COOKIE_NAME) || cookies[COOKIE_NAME] || "light" |
||||
} else { |
||||
return "light" |
||||
} |
||||
const { theme, setTheme } = useContext(ServerSidePropsContext) |
||||
return { theme, setTheme } |
||||
} |
||||
|
||||
|
||||
|
||||
@ -0,0 +1,51 @@
|
||||
import { Routes } from "@blitzjs/next" |
||||
import { NftDomain } from "@prisma/client" |
||||
import Button from "app/auth/components/Button" |
||||
import Link from "app/core/components/Link" |
||||
import { getDomainFromUrl } from "app/core/helpers/common" |
||||
import { count } from "app/core/helpers/metrika" |
||||
import { motion } from "framer-motion" |
||||
import s from "./styles.module.css" |
||||
|
||||
interface Props { |
||||
lastWeekNewSites: NftDomain[] |
||||
} |
||||
|
||||
const LastSitesWidget = (props: Props) => { |
||||
|
||||
return ( |
||||
<div className={s.root}> |
||||
<div className={s.heading}> |
||||
New sites{" "} |
||||
<Link onClick={()=>count('from_main_new_sites_widget_to_state_page')} className={s.link} theme="primary" href={Routes.StatePage()}> |
||||
See all |
||||
</Link> |
||||
</div> |
||||
<div className={s.sitesWrapperShadows}> |
||||
<div className={s.sitesWrapper}> |
||||
{props.lastWeekNewSites.map((i) => ( |
||||
<div className={s.sitesItem}> |
||||
<Link |
||||
className={s.siteAddress} |
||||
target="_blank" |
||||
theme="clear" |
||||
href={i.address + "?from=Searching.ton"} |
||||
onClick={()=>count('from_main_new_sites_widget_to_site')} |
||||
> |
||||
{getDomainFromUrl(i.address)} |
||||
<Button onClick={console.log} className={s.siteButton} theme="primary"> |
||||
.ton |
||||
</Button> |
||||
</Link> |
||||
</div> |
||||
))} |
||||
</div> |
||||
<Button onClick={console.log} className={s.button} theme="primary"> |
||||
.ton |
||||
</Button> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default LastSitesWidget |
||||
@ -0,0 +1 @@
|
||||
export {default} from './LastSitesWidget'; |
||||
@ -0,0 +1,170 @@
|
||||
.root { |
||||
margin-top: 100px; |
||||
|
||||
overflow: hidden; |
||||
position: relative; |
||||
padding: 10px; |
||||
} |
||||
|
||||
.link{ |
||||
margin-left: 10px; |
||||
} |
||||
|
||||
.heading { |
||||
margin-bottom: 25px; |
||||
font-size: 16px; |
||||
line-height: 20px; |
||||
|
||||
color: var(--text_secondary) |
||||
} |
||||
|
||||
.sitesWrapperShadows { |
||||
position: relative; |
||||
display: flex; |
||||
overflow: hidden; |
||||
justify-content: end; |
||||
} |
||||
.sitesWrapper { |
||||
|
||||
height: 140px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
transition: transform 1s ease-in-out; |
||||
animation: animateLastSites 40s ease-in-out 2s infinite alternate; |
||||
} |
||||
|
||||
.sitesWrapperShadows:before { |
||||
content: ""; |
||||
height: 83px; |
||||
width: 100%; |
||||
position: absolute; |
||||
bottom: 0; |
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--background_main) 89%); |
||||
z-index: 1; |
||||
pointer-events: none; |
||||
} |
||||
|
||||
.sitesWrapper { |
||||
} |
||||
|
||||
.siteButton, |
||||
.button { |
||||
width: 52px; |
||||
height: 41px; |
||||
font-size: 20px; |
||||
line-height: 25px; |
||||
border-radius: 16px; |
||||
transition: opacity 0.2s ease-in-out; |
||||
padding: 0; |
||||
} |
||||
|
||||
.button { |
||||
position: absolute; |
||||
top: 2px; |
||||
|
||||
background-color: var(--background_secondary) !important; |
||||
} |
||||
|
||||
.sitesWrapperShadows:hover .button { |
||||
opacity: 0; |
||||
pointer-events: none; |
||||
} |
||||
|
||||
.sitesItem { |
||||
height: 25px; |
||||
position: relative; |
||||
padding: 10px 0; |
||||
cursor: pointer; |
||||
display: flex; |
||||
justify-content: right; |
||||
align-items: center; |
||||
position: relative; |
||||
} |
||||
|
||||
.sitesItem:hover { |
||||
z-index: 3; |
||||
} |
||||
|
||||
.siteButton { |
||||
top: 0; |
||||
right: -62px; |
||||
opacity: 0; |
||||
pointer-events: none; |
||||
margin-left: 10px; |
||||
} |
||||
|
||||
|
||||
.sitesItem:hover .siteButton { |
||||
opacity: 1; |
||||
pointer-events: all; |
||||
} |
||||
|
||||
.siteAddress { |
||||
text-align: right; |
||||
|
||||
font-size: 16px; |
||||
|
||||
} |
||||
|
||||
@keyframes animateLastSites { |
||||
0% { |
||||
transform: translateY(0); |
||||
} |
||||
5% { |
||||
transform: translateY(0); |
||||
} |
||||
10% { |
||||
transform: translateY(-45px); |
||||
} |
||||
15% { |
||||
transform: translateY(-45px); |
||||
} |
||||
20% { |
||||
transform: translateY(-90px); |
||||
} |
||||
25% { |
||||
transform: translateY(-90px); |
||||
} |
||||
30% { |
||||
transform: translateY(-135px); |
||||
} |
||||
35% { |
||||
transform: translateY(-135px); |
||||
} |
||||
40% { |
||||
transform: translateY(-180px); |
||||
} |
||||
45% { |
||||
transform: translateY(-180px); |
||||
} |
||||
50% { |
||||
transform: translateY(-225px); |
||||
} |
||||
55% { |
||||
transform: translateY(-225px); |
||||
} |
||||
60% { |
||||
transform: translateY(-270px); |
||||
} |
||||
65% { |
||||
transform: translateY(-270px); |
||||
} |
||||
70% { |
||||
transform: translateY(-315px); |
||||
} |
||||
75% { |
||||
transform: translateY(-315px); |
||||
} |
||||
80% { |
||||
transform: translateY(-360px); |
||||
} |
||||
85% { |
||||
transform: translateY(-360px); |
||||
} |
||||
90% { |
||||
transform: translateY(-405px); |
||||
} |
||||
100% { |
||||
transform: translateY(-405px); |
||||
} |
||||
} |
||||
@ -1,9 +1,5 @@
|
||||
.root { |
||||
/* display: flex; */ |
||||
/* flex-direction: column; |
||||
justify-content: center; */ |
||||
/* align-items: center; */ |
||||
/* height: 100%; */ |
||||
width: 100%; |
||||
max-width: 604px; |
||||
max-width: 600px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
@ -0,0 +1,16 @@
|
||||
import { subDays } from "date-fns" |
||||
import db from "db" |
||||
|
||||
export default async function getLastWeekNewSites() { |
||||
const weekAgo = subDays(new Date(), 7) |
||||
|
||||
const lastWeekNewSites = await db.nftDomain.findMany({ |
||||
orderBy: { firstAvailableDate: "desc" }, |
||||
take: 10, |
||||
where: { available: true, AND: { firstAvailableDate: { gt: weekAgo } } }, |
||||
}) |
||||
console.log(lastWeekNewSites) |
||||
return { |
||||
lastWeekNewSites, |
||||
} |
||||
} |
||||
@ -1,46 +0,0 @@
|
||||
import Layout from "app/core/layouts/Layout" |
||||
import { LabeledTextField } from "app/core/components/LabeledTextField" |
||||
import { Form, FORM_ERROR } from "app/core/components/Form" |
||||
import { ForgotPassword } from "app/auth/validations" |
||||
import forgotPassword from "app/auth/mutations/forgotPassword" |
||||
import { useMutation } from "@blitzjs/rpc" |
||||
import { BlitzPage } from "@blitzjs/next" |
||||
|
||||
const ForgotPasswordPage: BlitzPage = () => { |
||||
const [forgotPasswordMutation, { isSuccess }] = useMutation(forgotPassword) |
||||
|
||||
return ( |
||||
<Layout title="Forgot Your Password?"> |
||||
<h1>Forgot your password?</h1> |
||||
|
||||
{isSuccess ? ( |
||||
<div> |
||||
<h2>Request Submitted</h2> |
||||
<p> |
||||
If your email is in our system, you will receive instructions to reset your password |
||||
shortly. |
||||
</p> |
||||
</div> |
||||
) : ( |
||||
<Form |
||||
submitText="Send Reset Password Instructions" |
||||
schema={ForgotPassword} |
||||
initialValues={{ email: "" }} |
||||
onSubmit={async (values) => { |
||||
try { |
||||
await forgotPasswordMutation(values) |
||||
} catch (error: any) { |
||||
return { |
||||
[FORM_ERROR]: "Sorry, we had an unexpected error. Please try again.", |
||||
} |
||||
} |
||||
}} |
||||
> |
||||
<LabeledTextField name="email" label="Email" placeholder="Email" /> |
||||
</Form> |
||||
)} |
||||
</Layout> |
||||
) |
||||
} |
||||
|
||||
export default ForgotPasswordPage |
||||
@ -1,21 +0,0 @@
|
||||
import { BlitzPage } from "@blitzjs/next" |
||||
import Layout from "app/core/layouts/Layout" |
||||
import { LoginForm } from "app/auth/components/LoginForm" |
||||
import { useRouter } from "next/router" |
||||
|
||||
const LoginPage: BlitzPage = () => { |
||||
const router = useRouter() |
||||
|
||||
return ( |
||||
<Layout title="Log In"> |
||||
<LoginForm |
||||
onSuccess={(_user) => { |
||||
const next = router.query.next ? decodeURIComponent(router.query.next as string) : "/" |
||||
return router.push(next) |
||||
}} |
||||
/> |
||||
</Layout> |
||||
) |
||||
} |
||||
|
||||
export default LoginPage |
||||
@ -1,66 +0,0 @@
|
||||
import Layout from "app/core/layouts/Layout" |
||||
import { LabeledTextField } from "app/core/components/LabeledTextField" |
||||
import { Form, FORM_ERROR } from "app/core/components/Form" |
||||
import { ResetPassword } from "app/auth/validations" |
||||
import resetPassword from "app/auth/mutations/resetPassword" |
||||
import { BlitzPage, Routes } from "@blitzjs/next" |
||||
import { useRouter } from "next/router" |
||||
import { useMutation } from "@blitzjs/rpc" |
||||
import Link from "next/link" |
||||
|
||||
const ResetPasswordPage: BlitzPage = () => { |
||||
const router = useRouter() |
||||
const [resetPasswordMutation, { isSuccess }] = useMutation(resetPassword) |
||||
|
||||
return ( |
||||
<div> |
||||
<h1>Set a New Password</h1> |
||||
|
||||
{isSuccess ? ( |
||||
<div> |
||||
<h2>Password Reset Successfully</h2> |
||||
<p> |
||||
Go to the <Link href={Routes.Home()}>homepage</Link> |
||||
</p> |
||||
</div> |
||||
) : ( |
||||
<Form |
||||
submitText="Reset Password" |
||||
schema={ResetPassword} |
||||
initialValues={{ |
||||
password: "", |
||||
passwordConfirmation: "", |
||||
token: router.query.token as string, |
||||
}} |
||||
onSubmit={async (values) => { |
||||
try { |
||||
await resetPasswordMutation(values) |
||||
} catch (error: any) { |
||||
if (error.name === "ResetPasswordError") { |
||||
return { |
||||
[FORM_ERROR]: error.message, |
||||
} |
||||
} else { |
||||
return { |
||||
[FORM_ERROR]: "Sorry, we had an unexpected error. Please try again.", |
||||
} |
||||
} |
||||
} |
||||
}} |
||||
> |
||||
<LabeledTextField name="password" label="New Password" type="password" /> |
||||
<LabeledTextField |
||||
name="passwordConfirmation" |
||||
label="Confirm New Password" |
||||
type="password" |
||||
/> |
||||
</Form> |
||||
)} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
ResetPasswordPage.redirectAuthenticatedTo = "/" |
||||
ResetPasswordPage.getLayout = (page) => <Layout title="Reset Your Password">{page}</Layout> |
||||
|
||||
export default ResetPasswordPage |
||||
@ -1,16 +0,0 @@
|
||||
import { useRouter } from "next/router" |
||||
import Layout from "app/core/layouts/Layout" |
||||
import { SignupForm } from "app/auth/components/SignupForm" |
||||
import { BlitzPage, Routes } from "@blitzjs/next" |
||||
|
||||
const SignupPage: BlitzPage = () => { |
||||
const router = useRouter() |
||||
|
||||
return ( |
||||
<Layout title="Sign Up"> |
||||
<SignupForm onSuccess={() => router.push(Routes.Home())} /> |
||||
</Layout> |
||||
) |
||||
} |
||||
|
||||
export default SignupPage |
||||
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 33 KiB |
Loading…
Reference in new issue