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