update

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();
+              }
             }}
           >
             接收文件

src/component/homeMenu/style.module.css

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

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 (
     <Paper
@@ -21,26 +50,66 @@ export function HomeSignIn() {
     >
       <h1 className={style.h1}>登录 / 注册</h1>
       <div className={style.describe}>可通过登录码验证或二维码注册/登录</div>
-      <div className={style.signInInput}>
-        <CountriesInput
-          onChange={(value) => {
-            setCountry(value);
-          }}
-        />
-        <TextField
-          label="Phone Number"
-          className={style.phone}
-          variant="standard"
-          placeholder={"手机号码"}
-        />
-      </div>
-      <Button
-        size={"large"}
-        style={{ alignSelf: "flex-end", marginRight: "50px" }}
-        variant="contained"
-      >
-        下一步
-      </Button>
+      {codeHash === "" ? (
+        <>
+          <div className={style.signInInput}>
+            <CountriesInput
+              onChange={(value) => {
+                setCountry(value);
+              }}
+            />
+            <TextField
+              style={{ marginTop: "10px" }}
+              label="Phone Number"
+              className={style.phone}
+              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>

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 {

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);
       }}

src/index.tsx

@@ -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>,

src/pages/home/index.tsx

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

src/pages/home/style.module.css

@@ -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 {

src/telegram/telegram.ts

@@ -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,
+};