master
icechen 2022-02-28 00:39:52 +08:00
parent 1d44a7eca4
commit c5868a8ebf
9 changed files with 149 additions and 31 deletions

View File

@ -9,7 +9,12 @@ enum Status {
receive, receive,
} }
export function HomeButton() { interface Props {
isSignIn: boolean;
onNotSignIn: () => void;
}
export function HomeButton(props: Props) {
let [status, setStatus] = useState(Status.normal); let [status, setStatus] = useState(Status.normal);
let [boxStyle, setBoxStyle] = useState([style.box]); let [boxStyle, setBoxStyle] = useState([style.box]);
let [isReceive, setIsReceive] = useState(false); let [isReceive, setIsReceive] = useState(false);
@ -54,7 +59,11 @@ export function HomeButton() {
onMouseEnter={onReceive} onMouseEnter={onReceive}
onMouseLeave={onNormal} onMouseLeave={onNormal}
onClick={() => { onClick={() => {
if (props.isSignIn) {
setIsReceive(true); setIsReceive(true);
} else {
props.onNotSignIn();
}
}} }}
> >

View File

@ -1,3 +1,3 @@
.text { .text {
color: #252525; color: #252525 !important;
} }

View File

@ -1,10 +1,39 @@
import { Button, Paper, TextField } from "@mui/material"; import { Button, Paper, TextField } from "@mui/material";
import style from "./style.module.css"; import style from "./style.module.css";
import CountriesInput, { Country } from "../signin/countriesInput"; import CountriesInput, { Country } from "../signin/countriesInput";
import { useState } from "react"; import { useMemo, useState } from "react";
import telegram, { sendSignInCode, signIn } from "../../telegram/telegram";
export function HomeSignIn() { export function HomeSignIn() {
let [country, setCountry] = useState({} as Country | null); let [country, setCountry] = useState({} as Country | null);
let [phone, setPhone] = useState("");
let [phoneCode, setPhoneCode] = useState("");
const phoneNumber = useMemo(
() => (country ? country.country_code : "") + phone,
[country, phone]
);
let [codeHash, setCodeHash] = useState("");
let onSendCode = () => {
sendSignInCode(phoneNumber)
.then((phone_code_hash: string) => {
setCodeHash(phone_code_hash);
})
.catch((error: any) => {
console.log("error", error);
});
};
let onSignIn = () => {
signIn(phoneNumber, phoneCode, codeHash)
.then((user: any) => {
console.log("user", user);
})
.catch((error: any) => {
console.log("error", error);
});
};
return ( return (
<Paper <Paper
@ -21,6 +50,8 @@ export function HomeSignIn() {
> >
<h1 className={style.h1}> / </h1> <h1 className={style.h1}> / </h1>
<div className={style.describe}>/</div> <div className={style.describe}>/</div>
{codeHash === "" ? (
<>
<div className={style.signInInput}> <div className={style.signInInput}>
<CountriesInput <CountriesInput
onChange={(value) => { onChange={(value) => {
@ -28,19 +59,57 @@ export function HomeSignIn() {
}} }}
/> />
<TextField <TextField
style={{ marginTop: "10px" }}
label="Phone Number" label="Phone Number"
className={style.phone} className={style.phone}
variant="standard"
placeholder={"手机号码"} placeholder={"手机号码"}
value={phone}
onChange={(e) => setPhone(e.target.value)}
/> />
</div> </div>
<Button <Button
size={"large"} size={"large"}
style={{ alignSelf: "flex-end", marginRight: "50px" }} style={{ alignSelf: "flex-end", marginRight: "50px" }}
variant="contained" variant="contained"
onClick={onSendCode}
> >
</Button> </Button>
</>
) : (
<>
<div className={style.signInInput}>
<TextField
style={{ marginTop: "10px" }}
label="Auth Code"
className={style.phone}
placeholder={"验证码"}
value={phoneCode}
onChange={(e) => setPhoneCode(e.target.value)}
/>
</div>
<div style={{ display: "flex", flexDirection: "row" }}>
<Button
size={"large"}
style={{ alignSelf: "flex-end", marginRight: "50px" }}
variant="contained"
onClick={() => {
setCodeHash("");
}}
>
</Button>
<Button
size={"large"}
style={{ alignSelf: "flex-end", marginRight: "50px" }}
variant="contained"
onClick={onSignIn}
>
</Button>
</div>
</>
)}
<div className={style.explain}> <div className={style.explain}>
<h1 className={style.h1}></h1> <h1 className={style.h1}></h1>

View File

@ -13,9 +13,10 @@
.signInInput { .signInInput {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
margin-top: 30px; margin-top: 30px;
margin-bottom: 30px; margin-bottom: 30px;
width: 300px;
} }
.phone { .phone {

View File

@ -52,7 +52,7 @@ function CountriesInput(props: {
// names must be equal // names must be equal
return 0; return 0;
})} })}
sx={{ width: 200 }} sx={{ width: 300 }}
onChange={(_event, value) => { onChange={(_event, value) => {
props.onChange(value as Country); props.onChange(value as Country);
}} }}

View File

@ -10,7 +10,7 @@ ReactDOM.render(
<BrowserRouter> <BrowserRouter>
<Routes> <Routes>
<Route path="/" element={<Home />} /> <Route path="/" element={<Home />} />
<Route path="/login" element={<Dashboard />} /> <Route path="/dashboard" element={<Dashboard />} />
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>
</React.StrictMode>, </React.StrictMode>,

View File

@ -27,7 +27,12 @@ function Home() {
return ( return (
<div className={style.box}> <div className={style.box}>
<div className={style.homeButton}> <div className={style.homeButton}>
<HomeButton /> <HomeButton
isSignIn={isSignIn}
onNotSignIn={() => {
setIsOpenSignIn(true);
}}
/>
</div> </div>
<HomeMenu <HomeMenu

View File

@ -17,9 +17,9 @@
right: 0; right: 0;
margin-top: 20px; margin-top: 20px;
margin-right: 50px; margin-right: 50px;
padding: 10px 20px; padding: 5px 10px;
background-color: white; background-color: white;
color: black; border-radius: 5px;
} }
body { body {

View File

@ -167,9 +167,43 @@ async function downloadFile(fileDocument: any) {
return Promise.resolve(true); return Promise.resolve(true);
} }
async function sendSignInCode(phone: string): Promise<string> {
try {
let result = await Telegram.call("auth.sendCode", {
phone_number: phone,
settings: {
_: "codeSettings",
},
});
return Promise.resolve(result.phone_code_hash);
} catch (error: any) {
return Promise.reject(error);
}
}
async function signIn(phone: string, code: string, phone_code_hash: string) {
try {
let result = await Telegram.call("auth.signIn", {
phone_number: phone,
phone_code_hash: phone_code_hash,
phone_code: code,
});
return Promise.resolve(result);
} catch (error: any) {
return Promise.reject(error);
}
}
const appID = 18987971; const appID = 18987971;
const appHash = "fcfd9e6ed3f9e48a360bb57cc0d59d98"; const appHash = "fcfd9e6ed3f9e48a360bb57cc0d59d98";
let Telegram = new TelegramHelper(appID, appHash); let Telegram = new TelegramHelper(appID, appHash);
export default Telegram; export default Telegram;
export { uploadBigFile, inputFile, sendFile, downloadFile }; export {
uploadBigFile,
inputFile,
sendFile,
downloadFile,
sendSignInCode,
signIn,
};