update
parent
1d44a7eca4
commit
c5868a8ebf
|
@ -9,7 +9,12 @@ enum Status {
|
|||
receive,
|
||||
}
|
||||
|
||||
export function HomeButton() {
|
||||
interface Props {
|
||||
isSignIn: boolean;
|
||||
onNotSignIn: () => void;
|
||||
}
|
||||
|
||||
export function HomeButton(props: Props) {
|
||||
let [status, setStatus] = useState(Status.normal);
|
||||
let [boxStyle, setBoxStyle] = useState([style.box]);
|
||||
let [isReceive, setIsReceive] = useState(false);
|
||||
|
@ -54,7 +59,11 @@ export function HomeButton() {
|
|||
onMouseEnter={onReceive}
|
||||
onMouseLeave={onNormal}
|
||||
onClick={() => {
|
||||
if (props.isSignIn) {
|
||||
setIsReceive(true);
|
||||
} else {
|
||||
props.onNotSignIn();
|
||||
}
|
||||
}}
|
||||
>
|
||||
接收文件
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
.text {
|
||||
color: #252525;
|
||||
color: #252525 !important;
|
||||
}
|
||||
|
|
|
@ -1,10 +1,39 @@
|
|||
import { Button, Paper, TextField } from "@mui/material";
|
||||
import style from "./style.module.css";
|
||||
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() {
|
||||
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 (
|
||||
<Paper
|
||||
|
@ -21,6 +50,8 @@ export function HomeSignIn() {
|
|||
>
|
||||
<h1 className={style.h1}>登录 / 注册</h1>
|
||||
<div className={style.describe}>可通过登录码验证或二维码注册/登录</div>
|
||||
{codeHash === "" ? (
|
||||
<>
|
||||
<div className={style.signInInput}>
|
||||
<CountriesInput
|
||||
onChange={(value) => {
|
||||
|
@ -28,19 +59,57 @@ export function HomeSignIn() {
|
|||
}}
|
||||
/>
|
||||
<TextField
|
||||
style={{ marginTop: "10px" }}
|
||||
label="Phone Number"
|
||||
className={style.phone}
|
||||
variant="standard"
|
||||
placeholder={"手机号码"}
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
size={"large"}
|
||||
style={{ alignSelf: "flex-end", marginRight: "50px" }}
|
||||
variant="contained"
|
||||
onClick={onSendCode}
|
||||
>
|
||||
下一步
|
||||
</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}>
|
||||
<h1 className={style.h1}>重要说明</h1>
|
||||
|
|
|
@ -13,9 +13,10 @@
|
|||
|
||||
.signInInput {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.phone {
|
||||
|
|
|
@ -52,7 +52,7 @@ function CountriesInput(props: {
|
|||
// names must be equal
|
||||
return 0;
|
||||
})}
|
||||
sx={{ width: 200 }}
|
||||
sx={{ width: 300 }}
|
||||
onChange={(_event, value) => {
|
||||
props.onChange(value as Country);
|
||||
}}
|
||||
|
|
|
@ -10,7 +10,7 @@ ReactDOM.render(
|
|||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/login" element={<Dashboard />} />
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>,
|
||||
|
|
|
@ -27,7 +27,12 @@ function Home() {
|
|||
return (
|
||||
<div className={style.box}>
|
||||
<div className={style.homeButton}>
|
||||
<HomeButton />
|
||||
<HomeButton
|
||||
isSignIn={isSignIn}
|
||||
onNotSignIn={() => {
|
||||
setIsOpenSignIn(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<HomeMenu
|
||||
|
|
|
@ -17,9 +17,9 @@
|
|||
right: 0;
|
||||
margin-top: 20px;
|
||||
margin-right: 50px;
|
||||
padding: 10px 20px;
|
||||
padding: 5px 10px;
|
||||
background-color: white;
|
||||
color: black;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
|
@ -167,9 +167,43 @@ async function downloadFile(fileDocument: any) {
|
|||
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 appHash = "fcfd9e6ed3f9e48a360bb57cc0d59d98";
|
||||
let Telegram = new TelegramHelper(appID, appHash);
|
||||
|
||||
export default Telegram;
|
||||
export { uploadBigFile, inputFile, sendFile, downloadFile };
|
||||
export {
|
||||
uploadBigFile,
|
||||
inputFile,
|
||||
sendFile,
|
||||
downloadFile,
|
||||
sendSignInCode,
|
||||
signIn,
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue