From 6fced7be27ffc4febc26a72b52fddeb9046ad2f0 Mon Sep 17 00:00:00 2001
From: jarvis2f <137974272+jarvis2f@users.noreply.github.com>
Date: Sat, 28 Dec 2024 13:39:02 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1=20fix:=20Fixed=20the=20height=20is?=
 =?UTF-8?q?sue=20of=20adding=20account=20dialog=20on=20mobile.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/account-dialog.tsx | 225 +++++++++++++-------------
 1 file changed, 115 insertions(+), 110 deletions(-)

diff --git a/web/src/components/account-dialog.tsx b/web/src/components/account-dialog.tsx
index 86ae891..a5fb37e 100644
--- a/web/src/components/account-dialog.tsx
+++ b/web/src/components/account-dialog.tsx
@@ -185,7 +185,7 @@ export function AccountDialog({
       <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent
         aria-describedby={undefined}
-        className="relative h-full w-full pb-10 md:h-auto md:min-h-40 md:min-w-[550px]"
+        className="h-full w-full pb-10 md:h-auto md:min-h-40 md:min-w-[550px]"
       >
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
@@ -195,121 +195,126 @@ export function AccountDialog({
             </p>
           </DialogTitle>
         </DialogHeader>
-        {!debounceIsCreateMutating && !initSuccessfully && (
-          <div className="flex flex-col items-center justify-center space-y-4">
-            <Button
-              className={cn(
-                "w-full",
-                debounceIsCreateMutating ? "opacity-50" : "",
-              )}
-              disabled={debounceIsCreateMutating}
-              onClick={async () => {
-                await triggerCreate().then(() => {
-                  void mutate("/telegrams");
-                  setInitSuccessfully(true);
-                });
-              }}
-            >
-              {debounceIsCreateMutating ? (
-                <LoaderCircle className="h-4 w-4 animate-spin" />
-              ) : (
-                "Start Initialization"
-              )}
-            </Button>
-          </div>
-        )}
-        {debounceIsCreateMutating && (
-          <div className="flex items-center justify-center space-x-2 text-xl">
-            <span>Initializing account, please wait</span>
-            <Ellipsis className="h-4 w-4 animate-pulse" />
-          </div>
-        )}
-        {!debounceIsCreateMutating && createError && (
-          <div className="text-center text-xl">
-            <span className="mr-3 text-3xl">😲</span>
-            Initializing account failed, please try again later.
-          </div>
-        )}
-        {!debounceIsCreateMutating && initSuccessfully && (
-          <form onSubmit={handleSubmit} className="space-y-4">
-            {authState === TelegramConstructor.WAIT_PHONE_NUMBER && (
-              <div className="space-y-2">
-                <Label htmlFor="phone">Phone Number</Label>
-                <p className="text-xs text-gray-500">
-                  Should with country code like: 8613712345678
-                </p>
-                <Input
-                  id="phone"
-                  value={phoneNumber}
-                  onChange={(e) => setPhoneNumber(e.target.value)}
-                  disabled={isMethodExecuting}
-                  required
-                />
-              </div>
-            )}
-            {authState === TelegramConstructor.WAIT_CODE && (
-              <div className="space-y-2">
-                <Label htmlFor="code">Authentication Code</Label>
-                <p className="text-xs text-gray-500">
-                  Please enter the code sent to your telegram account.
-                </p>
-                <InputOTP
-                  id="code"
-                  maxLength={5}
-                  value={code}
-                  disabled={isMethodExecuting}
-                  required
-                  onChange={(value) => setCode(value)}
-                >
-                  <InputOTPGroup>
-                    <InputOTPSlot index={0} />
-                    <InputOTPSlot index={1} />
-                    <InputOTPSlot index={2} />
-                    <InputOTPSlot index={3} />
-                    <InputOTPSlot index={4} />
-                  </InputOTPGroup>
-                </InputOTP>
-              </div>
-            )}
-            {authState === TelegramConstructor.WAIT_PASSWORD && (
-              <div className="space-y-2">
-                <Label htmlFor="password">Password</Label>
-                <p className="text-xs text-gray-500">
-                  You have enabled two-step verification, please enter your
-                  password.
-                </p>
-                <Input
-                  id="password"
-                  type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  disabled={isMethodExecuting}
-                  required
-                />
-              </div>
-            )}
-            {authState && (
+        <div className="relative h-full w-full">
+          {!debounceIsCreateMutating && !initSuccessfully && (
+            <div className="flex flex-col items-center justify-center space-y-4">
               <Button
-                type="submit"
-                className={cn("w-full", isMethodExecuting ? "opacity-50" : "")}
-                disabled={isMethodExecuting}
+                className={cn(
+                  "w-full",
+                  debounceIsCreateMutating ? "opacity-50" : "",
+                )}
+                disabled={debounceIsCreateMutating}
+                onClick={async () => {
+                  await triggerCreate().then(() => {
+                    void mutate("/telegrams");
+                    setInitSuccessfully(true);
+                  });
+                }}
               >
-                {isMethodExecuting ? (
+                {debounceIsCreateMutating ? (
                   <LoaderCircle className="h-4 w-4 animate-spin" />
                 ) : (
-                  "🚀 Submit"
+                  "Start Initialization"
                 )}
               </Button>
-            )}
-          </form>
-        )}
-        <ProxysDialog
-          telegramId={createData?.id}
-          proxyName={proxyName}
-          onProxyNameChange={setProxyName}
-          enableSelect={true}
-          className="absolute bottom-1 right-1"
-        />
+            </div>
+          )}
+          {debounceIsCreateMutating && (
+            <div className="flex items-center justify-center space-x-2 text-xl">
+              <span>Initializing account, please wait</span>
+              <Ellipsis className="h-4 w-4 animate-pulse" />
+            </div>
+          )}
+          {!debounceIsCreateMutating && createError && (
+            <div className="text-center text-xl">
+              <span className="mr-3 text-3xl">😲</span>
+              Initializing account failed, please try again later.
+            </div>
+          )}
+          {!debounceIsCreateMutating && initSuccessfully && (
+            <form onSubmit={handleSubmit} className="space-y-4">
+              {authState === TelegramConstructor.WAIT_PHONE_NUMBER && (
+                <div className="space-y-2">
+                  <Label htmlFor="phone">Phone Number</Label>
+                  <p className="text-xs text-gray-500">
+                    Should with country code like: 8613712345678
+                  </p>
+                  <Input
+                    id="phone"
+                    value={phoneNumber}
+                    onChange={(e) => setPhoneNumber(e.target.value)}
+                    disabled={isMethodExecuting}
+                    required
+                  />
+                </div>
+              )}
+              {authState === TelegramConstructor.WAIT_CODE && (
+                <div className="space-y-2">
+                  <Label htmlFor="code">Authentication Code</Label>
+                  <p className="text-xs text-gray-500">
+                    Please enter the code sent to your telegram account.
+                  </p>
+                  <InputOTP
+                    id="code"
+                    maxLength={5}
+                    value={code}
+                    disabled={isMethodExecuting}
+                    required
+                    onChange={(value) => setCode(value)}
+                  >
+                    <InputOTPGroup>
+                      <InputOTPSlot index={0} />
+                      <InputOTPSlot index={1} />
+                      <InputOTPSlot index={2} />
+                      <InputOTPSlot index={3} />
+                      <InputOTPSlot index={4} />
+                    </InputOTPGroup>
+                  </InputOTP>
+                </div>
+              )}
+              {authState === TelegramConstructor.WAIT_PASSWORD && (
+                <div className="space-y-2">
+                  <Label htmlFor="password">Password</Label>
+                  <p className="text-xs text-gray-500">
+                    You have enabled two-step verification, please enter your
+                    password.
+                  </p>
+                  <Input
+                    id="password"
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    disabled={isMethodExecuting}
+                    required
+                  />
+                </div>
+              )}
+              {authState && (
+                <Button
+                  type="submit"
+                  className={cn(
+                    "w-full",
+                    isMethodExecuting ? "opacity-50" : "",
+                  )}
+                  disabled={isMethodExecuting}
+                >
+                  {isMethodExecuting ? (
+                    <LoaderCircle className="h-4 w-4 animate-spin" />
+                  ) : (
+                    "🚀 Submit"
+                  )}
+                </Button>
+              )}
+            </form>
+          )}
+          <ProxysDialog
+            telegramId={createData?.id}
+            proxyName={proxyName}
+            onProxyNameChange={setProxyName}
+            enableSelect={true}
+            className="absolute bottom-1 right-1"
+          />
+        </div>
       </DialogContent>
     </Dialog>
   );