From bd27ce5f26fbac4e35d2579ddb59793cb4c8778c Mon Sep 17 00:00:00 2001
From: Krzysztof Czerwinski <34861343+kcze@users.noreply.github.com>
Date: Thu, 30 Jan 2025 13:30:59 +0100
Subject: [PATCH] fix(frontend): Center reset password page (#9377)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### Changes 🏗️

- Add `div` to recenter page elements

### Checklist 📋

#### For code changes:
- [ ] I have clearly listed my changes in the PR description
- [ ] I have made a test plan
- [ ] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [ ] ...

<details>
  <summary>Example test plan</summary>

  - [ ] Create from scratch and execute an agent with at least 3 blocks
- [ ] Import an agent from file upload, and confirm it executes
correctly
  - [ ] Upload agent to marketplace
- [ ] Import an agent from marketplace and confirm it executes correctly
  - [ ] Edit an agent from monitor, and confirm it executes correctly
</details>

#### For configuration changes:
- [ ] `.env.example` is updated or already compatible with my changes
- [ ] `docker-compose.yml` is updated or already compatible with my
changes
- [ ] I have included a list of my configuration changes in the PR
description (under **Changes**)

<details>
  <summary>Examples of configuration changes</summary>

  - Changing ports
  - Adding new services that need to communicate with each other
  - Secrets or environment variable changes
  - New or infrastructure changes such as databases
</details>
---
 .../frontend/src/app/reset_password/page.tsx  | 148 +++++++++---------
 1 file changed, 75 insertions(+), 73 deletions(-)

diff --git a/autogpt_platform/frontend/src/app/reset_password/page.tsx b/autogpt_platform/frontend/src/app/reset_password/page.tsx
index 36d1413bfe..a99fc378b0 100644
--- a/autogpt_platform/frontend/src/app/reset_password/page.tsx
+++ b/autogpt_platform/frontend/src/app/reset_password/page.tsx
@@ -109,78 +109,80 @@ export default function ResetPasswordPage() {
   }
 
   return (
-    <AuthCard>
-      <AuthHeader>Reset Password</AuthHeader>
-      {user ? (
-        <form onSubmit={changePasswordForm.handleSubmit(onChangePassword)}>
-          <Form {...changePasswordForm}>
-            <FormField
-              control={changePasswordForm.control}
-              name="password"
-              render={({ field }) => (
-                <FormItem className="mb-6">
-                  <FormLabel>Password</FormLabel>
-                  <FormControl>
-                    <PasswordInput {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={changePasswordForm.control}
-              name="confirmPassword"
-              render={({ field }) => (
-                <FormItem className="mb-6">
-                  <FormLabel>Confirm Password</FormLabel>
-                  <FormControl>
-                    <PasswordInput {...field} />
-                  </FormControl>
-                  <FormDescription className="text-sm font-normal leading-tight text-slate-500">
-                    Password needs to be at least 6 characters long
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <AuthButton
-              onClick={() => onChangePassword(changePasswordForm.getValues())}
-              isLoading={isLoading}
-              type="submit"
-            >
-              Update password
-            </AuthButton>
-            <AuthFeedback message={feedback} isError={isError} />
-          </Form>
-        </form>
-      ) : (
-        <form onSubmit={sendEmailForm.handleSubmit(onSendEmail)}>
-          <Form {...sendEmailForm}>
-            <FormField
-              control={sendEmailForm.control}
-              name="email"
-              render={({ field }) => (
-                <FormItem className="mb-6">
-                  <FormLabel>Email</FormLabel>
-                  <FormControl>
-                    <Input placeholder="m@example.com" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <AuthButton
-              onClick={() => onSendEmail(sendEmailForm.getValues())}
-              isLoading={isLoading}
-              disabled={disabled}
-              type="submit"
-            >
-              Send reset email
-            </AuthButton>
-            <AuthFeedback message={feedback} isError={isError} />
-          </Form>
-        </form>
-      )}
-    </AuthCard>
+    <div className="flex min-h-screen items-center justify-center">
+      <AuthCard>
+        <AuthHeader>Reset Password</AuthHeader>
+        {user ? (
+          <form onSubmit={changePasswordForm.handleSubmit(onChangePassword)}>
+            <Form {...changePasswordForm}>
+              <FormField
+                control={changePasswordForm.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem className="mb-6">
+                    <FormLabel>Password</FormLabel>
+                    <FormControl>
+                      <PasswordInput {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={changePasswordForm.control}
+                name="confirmPassword"
+                render={({ field }) => (
+                  <FormItem className="mb-6">
+                    <FormLabel>Confirm Password</FormLabel>
+                    <FormControl>
+                      <PasswordInput {...field} />
+                    </FormControl>
+                    <FormDescription className="text-sm font-normal leading-tight text-slate-500">
+                      Password needs to be at least 6 characters long
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <AuthButton
+                onClick={() => onChangePassword(changePasswordForm.getValues())}
+                isLoading={isLoading}
+                type="submit"
+              >
+                Update password
+              </AuthButton>
+              <AuthFeedback message={feedback} isError={isError} />
+            </Form>
+          </form>
+        ) : (
+          <form onSubmit={sendEmailForm.handleSubmit(onSendEmail)}>
+            <Form {...sendEmailForm}>
+              <FormField
+                control={sendEmailForm.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem className="mb-6">
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                      <Input placeholder="m@example.com" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <AuthButton
+                onClick={() => onSendEmail(sendEmailForm.getValues())}
+                isLoading={isLoading}
+                disabled={disabled}
+                type="submit"
+              >
+                Send reset email
+              </AuthButton>
+              <AuthFeedback message={feedback} isError={isError} />
+            </Form>
+          </form>
+        )}
+      </AuthCard>
+    </div>
   );
 }