icechen
/
kun-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

master
icechen 2022-02-23 19:50:27 +08:00
parent a7bd08ec79
commit 5a1c0cfffb
9 changed files with 215 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
src/App.tsx
View File

@ -8,7 +8,7 @@ import {
Paper,
TextField,
} from "@mui/material";
import CountriesInput, { Country } from "./component/countriesInput";
import CountriesInput, { Country } from "./component/signin/countriesInput";
import Telegram, {
inputFile,
uploadBigFile,
@ -20,175 +20,7 @@ import { User } from "./user";
import { Download, Upload } from "@mui/icons-material";
function App() {
let [phone, setPhone] = useState("");
let [code, setCode] = useState("");
let [phoneCodeHash, setPhoneCodeHash] = useState("");
let [country, setCountry] = useState({} as Country | null);
let [user, setUser] = useState({} as User);
let [fileDocument, setFileDocument] = useState({} as any);
const [fileList, setFileList] = useState([]);
let sendCode = () => {
console.log("phone:", phone);
Telegram.call("auth.sendCode", {
phone_number: (country ? country.country_code : "") + phone,
settings: {
_: "codeSettings",
},
})
.then((result: any) => {
console.log("auth.sendCode:", result);
setPhoneCodeHash(result.phone_code_hash);
})
.catch((error: any) => {
console.log("auth.sendCode:", error);
});
};
let login = () => {
console.log("auth code:", code);
console.log("auth hash code:", phoneCodeHash);
Telegram.call("auth.signIn", {
phone_number: (country ? country.country_code : "") + phone,
phone_code_hash: phoneCodeHash,
phone_code: code,
})
.then((result: any) => {
console.log("auth.signIn:", result);
setUser(result.user);
SendMessage();
})
.catch((error: any) => {
console.log("auth.signIn:", error);
});
};
let SendMessage = () => {
Telegram.call("messages.sendMessage", {
peer: {
_: "inputPeerSelf",
},
message: "ice",
random_id: (10000 + Math.random() * (100000 - 10000))
.toFixed()
.toString(),
})
.then((result: any) => {
console.log("messages.sendMessage:", result);
})
.catch((error: any) => {
console.log("messages.sendMessage:", error);
});
};
let uploadFile = () => {
console.log("uploadFile:", fileList);
// @ts-ignore
uploadBigFile(fileList[0]?.bytes)
.then((file) => {
console.log("uploadFile ret:", file);
sendFile(
// @ts-ignore
inputFile(file.file_id, file.total_part, fileList[0].name),
// @ts-ignore
fileList[0].type
).then((result) => {
console.log("sendFile ret:", result);
setFileDocument(result.updates[1].message.media);
});
})
.catch((error) => {
console.log("uploadFile error:", error);
alert(error);
});
};
let changeFile = (e: any) => {
console.log(e.target.files);
const reader = new FileReader();
reader.onload = function (event) {
if (event.target && event.target.result) {
let bytes = event.target.result;
console.log(bytes);
e.target.files[0].bytes = bytes;
setFileList(e.target.files);
}
};
reader.readAsArrayBuffer(e.target.files[0]);
};
let download = () => {
console.log("download:", fileDocument);
downloadFile(fileDocument).catch((error) => {
console.log("download error:", error);
alert(error);
});
};
return (
<Container maxWidth="sm">
<Paper
elevation={3}
sx={{
padding: "150px 50px",
position: "absolute",
display: "flex",
flexDirection: "column",
justifyContent: "space-around",
height: "40%",
}}
>
<CountriesInput
onChange={(country) => {
console.log(country);
setCountry(country);
}}
/>
<TextField
label={"Phone Number"}
InputProps={{
startAdornment: (
<InputAdornment position="start">
{country && country.country_code
? "+" + country.country_code
: ""}
</InputAdornment>
),
}}
value={phone}
onChange={(e) => {
console.log(e.target.value);
setPhone(e.target.value);
}}
/>
<TextField
label={"Auth Code"}
value={code}
onChange={(e) => {
console.log(e.target.value);
setCode(e.target.value);
}}
/>
{phoneCodeHash === "" ? (
<Button variant={"contained"} onClick={sendCode}>
发送验证码
</Button>
) : (
<Button variant={"contained"} onClick={login} endIcon={<SendIcon />}>
登录
</Button>
)}
<Input type="file" onChange={changeFile} />
<Button variant={"contained"} onClick={uploadFile} endIcon={<Upload />}>
上传
</Button>
<Button variant={"contained"} onClick={download} endIcon={<Download />}>
下载
</Button>
</Paper>
</Container>
);
return <div>App</div>;
}
export default App;

2
src/component/countriesInput.tsx → src/component/signin/countriesInput.tsx
View File

@ -1,6 +1,6 @@
import { Autocomplete, Box, TextField } from "@mui/material";
import React, { useEffect, useState } from "react";
import Telegram from "../telegram/telegram";
import Telegram from "../../telegram/telegram";
export interface Country {
default_name: string;

184
src/component/signin/index.tsx 100644
View File

@ -0,0 +1,184 @@
import CountriesInput, { Country } from "./countriesInput";
import { Button, Input, InputAdornment, Paper, TextField } from "@mui/material";
import SendIcon from "@mui/icons-material/Send";
import { Download, Upload } from "@mui/icons-material";
import React, { useState } from "react";
import { User } from "../../user";
import Telegram, {
downloadFile,
inputFile,
sendFile,
uploadBigFile,
} from "../../telegram/telegram";
function Signin() {
let [phone, setPhone] = useState("");
let [code, setCode] = useState("");
let [phoneCodeHash, setPhoneCodeHash] = useState("");
let [country, setCountry] = useState({} as Country | null);
let [user, setUser] = useState({} as User);
let [fileDocument, setFileDocument] = useState({} as any);
const [fileList, setFileList] = useState([]);
let sendCode = () => {
console.log("phone:", phone);
Telegram.call("auth.sendCode", {
phone_number: (country ? country.country_code : "") + phone,
settings: {
_: "codeSettings",
},
})
.then((result: any) => {
console.log("auth.sendCode:", result);
setPhoneCodeHash(result.phone_code_hash);
})
.catch((error: any) => {
console.log("auth.sendCode:", error);
});
};
let login = () => {
console.log("auth code:", code);
console.log("auth hash code:", phoneCodeHash);
Telegram.call("auth.signIn", {
phone_number: (country ? country.country_code : "") + phone,
phone_code_hash: phoneCodeHash,
phone_code: code,
})
.then((result: any) => {
console.log("auth.signIn:", result);
setUser(result.user);
SendMessage();
})
.catch((error: any) => {
console.log("auth.signIn:", error);
});
};
let SendMessage = () => {
Telegram.call("messages.sendMessage", {
peer: {
_: "inputPeerSelf",
},
message: "ice",
random_id: (10000 + Math.random() * (100000 - 10000))
.toFixed()
.toString(),
})
.then((result: any) => {
console.log("messages.sendMessage:", result);
})
.catch((error: any) => {
console.log("messages.sendMessage:", error);
});
};
let uploadFile = () => {
console.log("uploadFile:", fileList);
// @ts-ignore
uploadBigFile(fileList[0]?.bytes)
.then((file) => {
console.log("uploadFile ret:", file);
sendFile(
// @ts-ignore
inputFile(file.file_id, file.total_part, fileList[0].name),
// @ts-ignore
fileList[0].type
).then((result) => {
console.log("sendFile ret:", result);
setFileDocument(result.updates[1].message.media);
});
})
.catch((error) => {
console.log("uploadFile error:", error);
alert(error);
});
};
let changeFile = (e: any) => {
console.log(e.target.files);
const reader = new FileReader();
reader.onload = function (event) {
if (event.target && event.target.result) {
let bytes = event.target.result;
console.log(bytes);
e.target.files[0].bytes = bytes;
setFileList(e.target.files);
}
};
reader.readAsArrayBuffer(e.target.files[0]);
};
let download = () => {
console.log("download:", fileDocument);
downloadFile(fileDocument).catch((error) => {
console.log("download error:", error);
alert(error);
});
};
return (
<Paper
elevation={3}
sx={{
padding: "150px 50px",
position: "absolute",
display: "flex",
flexDirection: "column",
justifyContent: "space-around",
height: "40%",
}}
>
<CountriesInput
onChange={(country) => {
console.log(country);
setCountry(country);
}}
/>
<TextField
label={"Phone Number"}
InputProps={{
startAdornment: (
<InputAdornment position="start">
{country && country.country_code
? "+" + country.country_code
: ""}
</InputAdornment>
),
}}
value={phone}
onChange={(e) => {
console.log(e.target.value);
setPhone(e.target.value);
}}
/>
<TextField
label={"Auth Code"}
value={code}
onChange={(e) => {
console.log(e.target.value);
setCode(e.target.value);
}}
/>
{phoneCodeHash === "" ? (
<Button variant={"contained"} onClick={sendCode}>
发送验证码
</Button>
) : (
<Button variant={"contained"} onClick={login} endIcon={<SendIcon />}>
登录
</Button>
)}
<Input type="file" onChange={changeFile} />
<Button variant={"contained"} onClick={uploadFile} endIcon={<Upload />}>
上传
</Button>
{/*<Button variant={"contained"} onClick={download} endIcon={<Download />}>*/}
{/* 下载*/}
{/*</Button>*/}
</Paper>
);
}
export default Signin;

5
src/index.tsx
View File

@ -2,7 +2,7 @@ import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import Login from "./pages/login";
import Dashboard from "./pages/dashboard";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/home";
@ -11,8 +11,7 @@ ReactDOM.render(
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/home" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/login" element={<Dashboard />} />
</Routes>
</BrowserRouter>
</React.StrictMode>,

5
src/pages/dashboard/index.tsx 100644
View File

@ -0,0 +1,5 @@
function Login() {
return <div>文件目录</div>;
}
export default Login;

25
src/pages/home/index.tsx
View File

@ -1,13 +1,26 @@
import Telegram from "../../telegram/telegram";
import { useEffect, useState } from "react";
import { getMe } from "../../telegram/user";
import SignIn from "component/signin";
function Home() {
Telegram.call("sendMessage", {
chat_id: "",
text: "Hello World",
});
let [isSignIn, setIsSignIn] = useState(false);
useEffect(function () {
getMe()
.then(function (user) {
console.log(user);
})
.catch(function (error) {
if (error.code === 401) {
// Unauthorized
}
console.log(error);
});
}, []);
return (
<div>
<h1>Hello Next.js</h1>
<div>{!isSignIn ? <SignIn /> : <div>Home</div>}</div>
</div>
);
}

21
src/pages/login/index.tsx
View File

@ -1,21 +0,0 @@
import { useEffect } from "react";
import { getMe } from "../../telegram/user";
function Login() {
useEffect(function () {
getMe()
.then(function (user) {
console.log(user);
})
.catch(function (error) {
if (error.code === 401) {
// Unauthorized
}
console.log(error);
});
}, []);
return <div>登录</div>;
}
export default Login;

2
src/telegram/telegram.ts
View File

@ -7,7 +7,7 @@ class TelegramHelper {
this.client = new Client({
api_id: appID,
api_hash: appHash,
test: false,
test: true,
});
this.client.setDefaultDc(1);
}

1
tsconfig.json
View File

@ -1,5 +1,6 @@
{
"compilerOptions": {
"baseUrl": "src",
"target": "es5",
"lib": [
"dom",