mirror of https://github.com/sunface/rust-course
sunface
4 years ago
parent
0d9dff4d27
commit
d4bb937778
@ -0,0 +1,44 @@
|
||||
import { useRouter } from "next/router"
|
||||
import React, { useEffect, useState } from "react"
|
||||
import { requestApi } from "utils/axios/request"
|
||||
import { saveToken } from "utils/axios/getToken"
|
||||
import storage from "utils/localStorage"
|
||||
|
||||
const LoginCodePage = () => {
|
||||
const router = useRouter()
|
||||
const code = router.query.code
|
||||
useEffect(() => {
|
||||
if (code) {
|
||||
login(code)
|
||||
}
|
||||
}, [code])
|
||||
|
||||
const login = async (code) => {
|
||||
const res = await requestApi.post("/user/login/code", { code: code })
|
||||
if (res.data) {
|
||||
//已经注册过
|
||||
saveToken(res.data.token)
|
||||
storage.set('session', res.data)
|
||||
const oldPage = storage.get('current-page')
|
||||
if (oldPage) {
|
||||
storage.remove('current-page')
|
||||
router.push(oldPage)
|
||||
} else {
|
||||
router.push('/')
|
||||
}
|
||||
} else {
|
||||
// 进入注册流程
|
||||
router.push(`/login/onboard?code=${code}`)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default LoginCodePage
|
||||
|
||||
|
||||
@ -0,0 +1,124 @@
|
||||
import { useRouter } from "next/router"
|
||||
import React, { useEffect, useState } from "react"
|
||||
import { requestApi } from "utils/axios/request"
|
||||
import { saveToken } from "utils/axios/getToken"
|
||||
import storage from "utils/localStorage"
|
||||
import { Avatar, Box, Button, Center, Flex, Heading, HStack, Input, Text, useToast, VStack, Wrap } from "@chakra-ui/react"
|
||||
import Card from "components/card"
|
||||
import { config } from "configs/config"
|
||||
import Link from "next/link"
|
||||
import { ReserveUrls } from "src/data/reserve-urls"
|
||||
import { Tag } from "src/types/tag"
|
||||
import Follow from "components/interaction/follow"
|
||||
|
||||
const OnboardPage = () => {
|
||||
const [step,setStep] = useState(1)
|
||||
const [email,setEmail] = useState('')
|
||||
const [nickname,setNickname] = useState('')
|
||||
const [username,setUsername] = useState('')
|
||||
const [tags,setTags]:[Tag[],any] = useState([])
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
const code = router.query.code
|
||||
useEffect(() => {
|
||||
if (code) {
|
||||
getEmailByCode(code)
|
||||
}
|
||||
}, [code])
|
||||
|
||||
const getEmailByCode = async (code) => {
|
||||
const res = await requestApi.get(`/user/email/byCode?code=${code}`)
|
||||
if (!res.data) {
|
||||
toast({
|
||||
description: "code不存在或者已失效",
|
||||
status: "error",
|
||||
duration: 2000,
|
||||
isClosable: true,
|
||||
})
|
||||
setTimeout(() => router.push('/login'),2000)
|
||||
}
|
||||
setEmail(res.data)
|
||||
}
|
||||
|
||||
const register = async () => {
|
||||
if (nickname === "" || username === "") {
|
||||
toast({
|
||||
description: "nickname or username can't be empty",
|
||||
status: "error",
|
||||
duration: 2000,
|
||||
isClosable: true,
|
||||
})
|
||||
return
|
||||
}
|
||||
const res = await requestApi.post("/user/register", { code: code, nickname: nickname,username: username })
|
||||
saveToken(res.data.token)
|
||||
storage.set('session', res.data)
|
||||
|
||||
setStep(2)
|
||||
const res1 = await requestApi.get(`/tag/all`)
|
||||
setTags(res1.data)
|
||||
}
|
||||
|
||||
const finish = async () => {
|
||||
const oldPage = storage.get('current-page')
|
||||
if (oldPage) {
|
||||
storage.remove('current-page')
|
||||
router.push(oldPage)
|
||||
} else {
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Center h="100vh" mt="-8">
|
||||
<Card p="6" width="600px">
|
||||
{step === 1 ? <>
|
||||
<Text layerStyle="textSecondary" fontWeight="bold">CREATE YOUR ACCOUNT</Text>
|
||||
<Heading size="md" mt="2">🤘 Let's start your {config.appName} journey</Heading>
|
||||
|
||||
<VStack alignItems="left" mt="8" spacing="4">
|
||||
<HStack>
|
||||
<Text width="150px">Nick name</Text>
|
||||
<Input value={nickname} onChange={e => setNickname(e.currentTarget.value)} size="lg" width="auto" placeholder="enter your nick name" _focus={null}></Input>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Text width="150px">User name</Text>
|
||||
<Input value={username} onChange={e => setUsername(e.currentTarget.value)} size="lg" width="auto" placeholder="user name is unique, and cant be changed anymore" _focus={null}></Input>
|
||||
</HStack>
|
||||
<HStack>
|
||||
<Text width="150px">Email address</Text>
|
||||
<Input size="lg" width="auto" value={email} _focus={null} disabled></Input>
|
||||
</HStack>
|
||||
</VStack>
|
||||
|
||||
<Button colorScheme="teal" size="lg" mt="6" float="right" onClick={register}>Next</Button>
|
||||
</> :
|
||||
<>
|
||||
<Text layerStyle="textSecondary" fontWeight="bold">(OPTIONAL) PERSONALIZE YOUR HASHNODE FEED</Text>
|
||||
<Heading size="md" mt="2">Follow technologies you care about.</Heading>
|
||||
<Text mt="2" layerStyle="textSecondary" fontSize=".9rem">Hashnode is a platform for independent bloggers. By following the right tags you can personalize your feed and discover content you care about.</Text>
|
||||
<Wrap mt="4" p="1">
|
||||
{
|
||||
tags.map(tag =>
|
||||
<HStack key={tag.id} mr="4" mb="4">
|
||||
<HStack spacing="1" mr="3" cursor="pointer" width="120px">
|
||||
<Avatar src={tag.icon} size="sm" />
|
||||
<Text>{tag.title}</Text>
|
||||
</HStack>
|
||||
|
||||
<Follow targetID={tag.id} followed={false} buttonIcon={false}/>
|
||||
</HStack>)
|
||||
}
|
||||
</Wrap>
|
||||
|
||||
<Button colorScheme="teal" size="lg" mt="6" float="right" onClick={finish}>Finish</Button>
|
||||
</>
|
||||
}
|
||||
</Card>
|
||||
</Center>
|
||||
)
|
||||
}
|
||||
|
||||
export default OnboardPage
|
||||
|
||||
|
||||
Loading…
Reference in new issue