From 03509c1e99f6007e92bd795ee1d4e911404d2304 Mon Sep 17 00:00:00 2001
From: gopienkonikita <nikita.gopienko@onlyoffice.com>
Date: Wed, 7 Aug 2024 12:23:07 +0300
Subject: [PATCH] Fix Bug 69590 - Rooms.Public. Fixed file-password styles

---
 .../file-password/FilePassword.styled.ts      |  12 ++
 .../src/components/file-password/index.tsx    | 158 +++++++++---------
 2 files changed, 92 insertions(+), 78 deletions(-)

diff --git a/packages/doceditor/src/components/file-password/FilePassword.styled.ts b/packages/doceditor/src/components/file-password/FilePassword.styled.ts
index 9173ea5248..5c714e4962 100644
--- a/packages/doceditor/src/components/file-password/FilePassword.styled.ts
+++ b/packages/doceditor/src/components/file-password/FilePassword.styled.ts
@@ -43,6 +43,7 @@ export const StyledPage = styled.div`
 
   .logo-wrapper {
     display: block;
+    padding-bottom: 64px;
   }
 
   @media ${mobile} {
@@ -85,6 +86,17 @@ export const StyledPage = styled.div`
     margin-bottom: 32px;
   }
 
+  .public-room_content-wrapper {
+    display: flex;
+    flex-direction: column;
+    -webkit-box-align: center;
+    align-items: center;
+    margin: 0px auto;
+    max-width: 960px;
+    box-sizing: border-box;
+    height: 100%;
+  }
+
   .public-room-content {
     padding-top: 9%;
     justify-content: unset;
diff --git a/packages/doceditor/src/components/file-password/index.tsx b/packages/doceditor/src/components/file-password/index.tsx
index 231ae0d68b..275ed417f2 100644
--- a/packages/doceditor/src/components/file-password/index.tsx
+++ b/packages/doceditor/src/components/file-password/index.tsx
@@ -111,7 +111,7 @@ const FilesPassword = ({ shareKey, title, entryTitle }: FilePasswordProps) => {
 
   return (
     <>
-      <StyledSimpleNav id="login-header">
+      <StyledSimpleNav id="public-room-password-header">
         <Image
           className="logo"
           src={logoUrl}
@@ -122,87 +122,89 @@ const FilesPassword = ({ shareKey, title, entryTitle }: FilePasswordProps) => {
         />
       </StyledSimpleNav>
       <StyledPage>
-        <StyledContent className="public-room-content">
-          <StyledBody>
-            <Image
-              priority
-              src={logoUrl}
-              className="logo-wrapper"
-              alt="icon"
-              width={416}
-              height={200}
-            />
+        <div className="public-room_content-wrapper">
+          <StyledContent className="public-room-content">
+            <StyledBody>
+              <Image
+                priority
+                src={logoUrl}
+                className="logo-wrapper"
+                alt="icon"
+                width={386}
+                height={44}
+              />
 
-            <FormWrapper>
-              <div className="password-form">
-                <Text fontSize="16px" fontWeight="600">
-                  {t("Common:PasswordRequired")}
-                </Text>
-
-                <Text
-                  fontSize="13px"
-                  fontWeight="400"
-                  className="public-room-text"
-                >
-                  <Trans
-                    t={t}
-                    ns="Common"
-                    i18nKey="EnterPasswordDescription"
-                    values={{ fileName: entryTitle }}
-                    components={{ 1: <span className="bold" /> }}
-                  />
-                </Text>
-                <div className="public-room-name">
-                  <PublicRoomIcon className="public-room-icon" />
-                  <Text
-                    className="public-room-text"
-                    fontSize="15px"
-                    fontWeight="600"
-                  >
-                    {title}
+              <FormWrapper>
+                <div className="password-form">
+                  <Text fontSize="16px" fontWeight="600">
+                    {t("Common:PasswordRequired")}
                   </Text>
+
+                  <Text
+                    fontSize="13px"
+                    fontWeight="400"
+                    className="public-room-text"
+                  >
+                    <Trans
+                      t={t}
+                      ns="Common"
+                      i18nKey="EnterPasswordDescription"
+                      values={{ fileName: entryTitle }}
+                      components={{ 1: <span className="bold" /> }}
+                    />
+                  </Text>
+                  <div className="public-room-name">
+                    <PublicRoomIcon className="public-room-icon" />
+                    <Text
+                      className="public-room-text"
+                      fontSize="15px"
+                      fontWeight="600"
+                    >
+                      {title}
+                    </Text>
+                  </div>
+
+                  <FieldContainer
+                    isVertical={true}
+                    labelVisible={false}
+                    hasError={!!errorMessage}
+                    errorMessage={errorMessage}
+                  >
+                    <PasswordInput
+                      simpleView
+                      id="password"
+                      inputName="password"
+                      placeholder={t("Common:Password")}
+                      type={InputType.password}
+                      inputValue={password}
+                      hasError={!!errorMessage}
+                      size={InputSize.large}
+                      scale
+                      tabIndex={1}
+                      autoComplete="current-password"
+                      onChange={onChangePassword}
+                      onKeyDown={onKeyPress}
+                      isDisabled={isLoading}
+                      isDisableTooltip
+                      isAutoFocussed
+                      // forwardedRef={inputRef}
+                    />
+                  </FieldContainer>
                 </div>
 
-                <FieldContainer
-                  isVertical={true}
-                  labelVisible={false}
-                  hasError={!!errorMessage}
-                  errorMessage={errorMessage}
-                >
-                  <PasswordInput
-                    simpleView
-                    id="password"
-                    inputName="password"
-                    placeholder={t("Common:Password")}
-                    type={InputType.password}
-                    inputValue={password}
-                    hasError={!!errorMessage}
-                    size={InputSize.large}
-                    scale
-                    tabIndex={1}
-                    autoComplete="current-password"
-                    onChange={onChangePassword}
-                    onKeyDown={onKeyPress}
-                    isDisabled={isLoading}
-                    isDisableTooltip
-                    isAutoFocussed
-                    // forwardedRef={inputRef}
-                  />
-                </FieldContainer>
-              </div>
-
-              <Button
-                primary
-                size={ButtonSize.medium}
-                scale
-                label={t("Common:ContinueButton")}
-                tabIndex={5}
-                onClick={onSubmit}
-                isDisabled={isLoading}
-              />
-            </FormWrapper>
-          </StyledBody>
-        </StyledContent>
+                <Button
+                  primary
+                  size={ButtonSize.medium}
+                  scale
+                  label={t("Common:ContinueButton")}
+                  tabIndex={5}
+                  onClick={onSubmit}
+                  isDisabled={isLoading}
+                />
+              </FormWrapper>
+            </StyledBody>
+          </StyledContent>
+        </div>
       </StyledPage>
     </>
   );