From c5868a8ebfbd51e6a6318fa4cd215d9fd202e129 Mon Sep 17 00:00:00 2001 From: icechen Date: Mon, 28 Feb 2022 00:39:52 +0800 Subject: [PATCH] update --- src/component/homeButton/index.tsx | 13 ++- src/component/homeMenu/style.module.css | 2 +- src/component/homeSignIn/index.tsx | 111 ++++++++++++++++++---- src/component/homeSignIn/style.module.css | 3 +- src/component/signin/countriesInput.tsx | 2 +- src/index.tsx | 2 +- src/pages/home/index.tsx | 7 +- src/pages/home/style.module.css | 4 +- src/telegram/telegram.ts | 36 ++++++- 9 files changed, 149 insertions(+), 31 deletions(-) diff --git a/src/component/homeButton/index.tsx b/src/component/homeButton/index.tsx index 58072d0..9fe6c68 100644 --- a/src/component/homeButton/index.tsx +++ b/src/component/homeButton/index.tsx @@ -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={() => { - setIsReceive(true); + if (props.isSignIn) { + setIsReceive(true); + } else { + props.onNotSignIn(); + } }} > 接收文件 diff --git a/src/component/homeMenu/style.module.css b/src/component/homeMenu/style.module.css index 7c52901..4d004d7 100644 --- a/src/component/homeMenu/style.module.css +++ b/src/component/homeMenu/style.module.css @@ -1,3 +1,3 @@ .text { - color: #252525; + color: #252525 !important; } diff --git a/src/component/homeSignIn/index.tsx b/src/component/homeSignIn/index.tsx index ed450eb..8d3394f 100644 --- a/src/component/homeSignIn/index.tsx +++ b/src/component/homeSignIn/index.tsx @@ -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 (

登录 / 注册

可通过登录码验证或二维码注册/登录
-
- { - setCountry(value); - }} - /> - -
- + {codeHash === "" ? ( + <> +
+ { + setCountry(value); + }} + /> + setPhone(e.target.value)} + /> +
+ + + ) : ( + <> +
+ setPhoneCode(e.target.value)} + /> +
+
+ + +
+ + )}

重要说明

diff --git a/src/component/homeSignIn/style.module.css b/src/component/homeSignIn/style.module.css index 59efc35..0c60bde 100644 --- a/src/component/homeSignIn/style.module.css +++ b/src/component/homeSignIn/style.module.css @@ -13,9 +13,10 @@ .signInInput { display: flex; - flex-direction: row; + flex-direction: column; margin-top: 30px; margin-bottom: 30px; + width: 300px; } .phone { diff --git a/src/component/signin/countriesInput.tsx b/src/component/signin/countriesInput.tsx index ce0af56..2f15d5c 100644 --- a/src/component/signin/countriesInput.tsx +++ b/src/component/signin/countriesInput.tsx @@ -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); }} diff --git a/src/index.tsx b/src/index.tsx index dc9dda2..953cb31 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -10,7 +10,7 @@ ReactDOM.render( } /> - } /> + } /> , diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 71448b0..5dd8faf 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -27,7 +27,12 @@ function Home() { return (
- + { + setIsOpenSignIn(true); + }} + />
{ + 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, +};