|
|
import React from "react"
|
|
|
import {
|
|
|
Text,
|
|
|
Box,
|
|
|
VStack,
|
|
|
Button,
|
|
|
Image,
|
|
|
useColorModeValue,
|
|
|
Link,
|
|
|
Center
|
|
|
} from "@chakra-ui/react"
|
|
|
import Logo from "components/logo"
|
|
|
import { FaGithub } from "react-icons/fa"
|
|
|
import { requestApi } from "utils/axios/request"
|
|
|
import { saveToken } from "utils/axios/getToken"
|
|
|
import storage from "utils/localStorage"
|
|
|
import { useRouter } from "next/router"
|
|
|
|
|
|
|
|
|
const LoginPage = () => {
|
|
|
const router = useRouter()
|
|
|
const login = async () => {
|
|
|
const res = await requestApi.post("/login")
|
|
|
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('/')
|
|
|
}
|
|
|
}
|
|
|
|
|
|
return (
|
|
|
<Box height="100vh" width="100%" display="flex" alignItems="center" justifyContent="center">
|
|
|
<Image src="/login-bg.svg" height="100%" position="absolute" />
|
|
|
<Box textAlign="center" display="flex" alignItems="center" flexDirection="column">
|
|
|
<Logo width="12rem" />
|
|
|
<Text mt="8" fontSize="1.1rem" fontWeight="500">欢迎加入im.dev，一起打造全世界最好的开发者社区</Text>
|
|
|
<VStack mt="2" p="5" align="left" spacing="2" fontSize="15px">
|
|
|
<Box display="flex" flexDirection="row" alignItems="center">
|
|
|
<svg width="48px" height="48px" fill={useColorModeValue("teal", "white")} version="1.1" viewBox="0 0 24 24"><path d="M7.036 14.836a1.003 1.003 0 01-1.418 0l-.709-.709a6.518 6.518 0 119.218-9.218l.71.71a1.003 1.003 0 010 1.417l-.71.71a1.003 1.003 0 01-1.418 0L12 7.035A3.51 3.51 0 007.036 12l.71.71a1.003 1.003 0 010 1.417l-.71.71zm2.128 3.546a1.003 1.003 0 010-1.418l.709-.71a1.003 1.003 0 011.418 0l.709.71A3.51 3.51 0 0016.964 12l-.71-.71a1.003 1.003 0 010-1.417l.71-.71a1.003 1.003 0 011.418 0l.709.71a6.518 6.518 0 11-9.218 9.218l-.71-.71zm0-9.218a1.504 1.504 0 012.127 0l3.545 3.545a1.504 1.504 0 01-2.127 2.127l-3.545-3.545a1.504 1.504 0 010-2.127z" fillRule="evenodd"></path></svg>
|
|
|
<Text ml="4" layerStyle="textSecondary">从世界各地精选最优秀的内容</Text>
|
|
|
</Box>
|
|
|
<Box display="flex" flexDirection="row" alignItems="center">
|
|
|
<svg width="48px" height="48px" fill={useColorModeValue("teal", "white")} version="1.1" viewBox="0 0 24 24"><path d="M9 2v1a1 1 0 001 1h4a1 1 0 001-1V2h1a2 2 0 012 2v16a2 2 0 01-2 2H8a2 2 0 01-2-2V4a2 2 0 012-2h1zm1 16a1 1 0 000 2h4a1 1 0 000-2h-4z" fillRule="evenodd"></path></svg>
|
|
|
<Text ml="4" layerStyle="textSecondary">丰富的功能特性等待你的探索</Text>
|
|
|
</Box>
|
|
|
<Box display="flex" flexDirection="row" alignItems="center">
|
|
|
<svg width="48px" height="48px" fill={useColorModeValue("teal", "white")} version="1.1" viewBox="0 0 24 24"><path d="M19 21l-3-.5.786-4.321A1 1 0 0015.802 15H8.198a1 1 0 00-.984 1.179L8 20.5 5 21a1 1 0 01-1-1v-.5c0-4.142 3.582-7.5 8-7.5s8 3.358 8 7.5v.5a1 1 0 01-1 1zm-7-2a1 1 0 110-2 1 1 0 010 2zm0-8a4 4 0 110-8 4 4 0 010 8z" fillRule="evenodd"></path></svg>
|
|
|
<Text ml="4" layerStyle="textSecondary">充分展示自我并获得猎头关注</Text>
|
|
|
</Box>
|
|
|
</VStack>
|
|
|
|
|
|
<Button onClick={() => login()} layerStyle="colorButton" mt="6" fontSize=".9rem" leftIcon={<FaGithub fontSize="1.0rem" />}>使用github登录</Button>
|
|
|
<Text mt="6" fontSize=".7rem" layerStyle="textSecondary">如果继续，则表示你同意im.dev的<Link textDecoration="underline">服务条款</Link>和<Link textDecoration="underline">隐私政策</Link></Text>
|
|
|
{/* <Image src="/pokeman.svg" height="300px" /> */}
|
|
|
</Box>
|
|
|
|
|
|
</Box>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
export default LoginPage
|
|
|
|
