Skip to content

Commit

Permalink
修改登录逻辑
Browse files Browse the repository at this point in the history
  • Loading branch information
Shuaige1234567 committed Dec 9, 2023
1 parent 87e010c commit 4a1c1cf
Show file tree
Hide file tree
Showing 11 changed files with 511 additions and 405 deletions.
6 changes: 5 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,8 @@

node_modules/

frontend/node_modules
frontend/node_modules

package-lock.json

frontend/package-lock.json
80 changes: 19 additions & 61 deletions frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,21 @@
import React, { useEffect, useState } from 'react';
import React, {useEffect, useState} from 'react';
import logo from './logo.svg';
import './App.css';
import { Layout } from 'antd';
import {Layout} from 'antd';
import Sider from './components/sider';
import { Outlet, Link } from "react-router-dom";
import Post from './components/post';
import Comment from './components/comment';
import { AuthClient} from "@dfinity/auth-client";
import {Routes, Route} from "react-router-dom";
import ErrorPage from './components/errorPage';
import Explore from './routes/explore';
import Profile from './routes/profile';
import Settings from './routes/settings';
import {Home} from "./routes/home";

// const { Header, Content, Footer, Sider } = Layout;
function App() {
const [authClient, setAuthClient] = useState<AuthClient | undefined>();
const [isLogin, setIsLogin] = useState<Boolean>(false);

const handleLogIn = async () => {
const _authClient = await AuthClient.create();
_authClient.login({
maxTimeToLive: BigInt(7 * 24 * 60 * 60 * 1000 * 1000 * 1000),
onSuccess: async () => {
setAuthClient(_authClient);
setIsLogin(true);
}});
}

useEffect( () => {

}, [authClient, isLogin]);

return (
<div className="App">
<Layout
hasSider={true}
<Layout
hasSider={true}
style={{
height: '100vh',
}}
Expand All @@ -39,43 +24,16 @@ function App() {
theme='light'
width={370}
>
<Sider
authClient={authClient}
isLogIn={isLogin}
handleLogIn={handleLogIn}
/>
<Sider/>
</Layout.Sider>

<Layout.Content style={{
backgroundColor: "white",
overflowY: 'auto',
scrollbarWidth: 'thin',
width: '200px',
borderRight: '1px solid',
}}>
<Post/>
<Post/>
<Post/>
<Post/>
<Post/>
<Post/>
<Post/>
</Layout.Content>

<Layout.Content style={{
backgroundColor : 'white',
overflowY: 'auto',
scrollbarWidth: 'thin',
}}>
<Comment />
<Comment />
<Comment />
<Comment />
<Comment />
<Comment />
<Comment />
<Comment />
</Layout.Content>
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="home" element={<Home/>}/>
<Route path="explore" element={<Explore/>}/>
<Route path="profile" element={<Profile/>}/>
<Route path="settings" element={<Settings/>}/>
<Route path="*" element={<ErrorPage/>}/>
</Routes>
</Layout>
</div>
);
Expand Down
243 changes: 122 additions & 121 deletions frontend/src/components/sider.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,61 @@
import { Menu, Button, Avatar, Flex, Card, Space } from "antd";
import {Menu, Button, Avatar, Flex, Card, Space} from "antd";
import {
HomeOutlined,
SettingOutlined,
SearchOutlined,
ProfileOutlined,
UserOutlined
HomeOutlined,
SettingOutlined,
SearchOutlined,
ProfileOutlined,
UserOutlined
} from '@ant-design/icons';
import type { MenuInfo } from 'rc-menu/lib/interface'
import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
import { useNavigate } from "react-router-dom";
import { AuthClient} from "@dfinity/auth-client";
import type {MenuInfo} from 'rc-menu/lib/interface'
import type {MenuItemType} from 'antd/es/menu/hooks/useItems';
import {useNavigate} from "react-router-dom";
import {AuthClient} from "@dfinity/auth-client";
import {
getPrincipal,
checkIdentity
getPrincipal,
checkIdentity
} from '../utils/common';
import User from '../actors/user';
import { Principal } from "@dfinity/principal";
import { Identity } from "@dfinity/agent";
import {Principal} from "@dfinity/principal";
import {Identity} from "@dfinity/agent";
import {useAuth} from "../utils/useAuth";

function getItem(
label: React.ReactNode,
key: string,
icon?: React.ReactNode,
label: React.ReactNode,
key: string,
icon?: React.ReactNode,
): MenuItemType {
return {
key,
icon,
label,
} as MenuItemType;
return {
key,
icon,
label,
} as MenuItemType;
}

const items: MenuItemType[] = [

getItem("Home", '1', <HomeOutlined style={{
color: '#D3D540',
fontSize: '30px'
}}/>),
getItem("Explore", '2', <SearchOutlined style={{
color: '#D3D540',
fontSize: '30px'
}}/>),
getItem("Profile", '3', <ProfileOutlined style={{
color: '#D3D540',
fontSize: '30px'
}}/>),
getItem("Settings", '4', <SettingOutlined style={{
color: '#D3D540',
fontSize: '30px'
}}/>),
getItem("Home", '1', <HomeOutlined style={{
color: '#D3D540',
fontSize: '30px'
}}/>),
getItem("Explore", '2', <SearchOutlined style={{
color: '#D3D540',
fontSize: '30px'
}}/>),
getItem("Profile", '3', <ProfileOutlined style={{
color: '#D3D540',
fontSize: '30px'
}}/>),
getItem("Settings", '4', <SettingOutlined style={{
color: '#D3D540',
fontSize: '30px'
}}/>),

];

interface SiderProps {
authClient?: AuthClient;
isLogIn?: Boolean;
handleLogIn?: () => Promise<void>;
authClient?: AuthClient;
isLogIn?: Boolean;
handleLogIn?: Function;
}

// const getUserProfile = (
Expand All @@ -65,89 +66,89 @@ interface SiderProps {
// user.actor.getProfile(user_principal)
// }

export default function Sider(props: SiderProps) {
const navigate = useNavigate();
console.log('isLogIn : ', props.isLogIn);
const authClient = props.authClient;
// if(props.authClient != undefined) {
// console.log(props.authClient);
// getUserProfile(props.authClient.getIdentity());
// }
export default function Sider() {
const navigate = useNavigate();
const {isAuth, principal, logIn} = useAuth()
console.log('isLogIn : ', isAuth);
// if(props.authClient != undefined) {
// console.log(props.authClient);
// getUserProfile(props.authClient.getIdentity());
// }

const onClick = (info: MenuInfo) => {
if (info.key === '1') {
navigate('/');
} else if (info.key === '2') {
navigate('/explore');
} else if (info.key === '3') {
navigate('/profile');
} else if (info.key === '4') {
navigate('/settings');
}
const onClick = (info: MenuInfo) => {
if (info.key === '1') {
navigate('/');
} else if (info.key === '2') {
navigate('/explore');
} else if (info.key === '3') {
navigate('/profile');
} else if (info.key === '4') {
navigate('/settings');
}

return (
<Flex
vertical={true}
justify="space-between"
style={{
height: '100vh',
paddingLeft: '20px',
paddingBottom: '20px',
}

return (
<Flex
vertical={true}
justify="space-between"
style={{
height: '100vh',
paddingLeft: '20px',
paddingBottom: '20px',
}}>
<div>
<h1 style={{
fontSize: '40px',
paddingLeft: '20px',
}}>
<div>
<h1 style={{
fontSize: '40px',
paddingLeft: '20px',
}}>
Proton
</h1>
Proton
</h1>

<Menu
mode="vertical"
items={items}
style={{
marginTop: '50px',
}}
onClick={onClick}
/>
<Menu
mode="vertical"
items={items}
style={{
marginTop: '50px',
}}
onClick={onClick}
/>

<Button style={{
marginLeft: '23px',
width: '100px'
}}> Post
</Button>
{
props.authClient != undefined ? (
<p>{props.authClient?.getIdentity().getPrincipal().toString()}</p>
) : (
<></>
)
}
<Button style={{
marginLeft: '23px',
width: '100px'
}}> Post
</Button>
{
isAuth ? (
<p>{principal?.toString()}</p>
) : (
<></>
)
}

</div>
{
props.isLogIn ? (
<Card
bordered={false}
>
<Card.Meta
avatar={<Avatar
size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
src="https://avatars.githubusercontent.com/u/120618331?s=200&v=4"
style={{
border: '1px solid #D3D540',
}}
/>}
title="NeutronStarDAO"
description="@NeutronStarDAO"
/>
</Card>) : (
<Space onClick={props.handleLogIn}>
<Button>II LogIn </Button>
</Space>
)
}
</Flex>
)
}
</div>
{
isAuth ? (
<Card
bordered={false}
>
<Card.Meta
avatar={<Avatar
size={{xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100}}
src="https://avatars.githubusercontent.com/u/120618331?s=200&v=4"
style={{
border: '1px solid #D3D540',
}}
/>}
title="NeutronStarDAO"
description="@NeutronStarDAO"
/>
</Card>) : (
<Space onClick={() => logIn?.()}>
<Button>II LogIn </Button>
</Space>
)
}
</Flex>
)
}
Loading

0 comments on commit 4a1c1cf

Please sign in to comment.