From 6e30379004e2fbfe809f59ec1ec10ed5b6e42338 Mon Sep 17 00:00:00 2001
From: Henriette Darge <h.darge@openproject.com>
Date: Mon, 11 Mar 2024 13:28:02 +0100
Subject: [PATCH 1/2] Make announcement box responsive

---
 frontend/src/global_styles/openproject/_announcements.sass | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/global_styles/openproject/_announcements.sass b/frontend/src/global_styles/openproject/_announcements.sass
index 07fe3a4ca73a..8a42ffdcbbcf 100644
--- a/frontend/src/global_styles/openproject/_announcements.sass
+++ b/frontend/src/global_styles/openproject/_announcements.sass
@@ -4,3 +4,5 @@
   margin-top: 1rem
   width: 511px
 
+  @media screen and (max-width: $breakpoint-sm)
+    width: 100%

From 413f76b72c9e0b15c7212512f701348f0e13b958 Mon Sep 17 00:00:00 2001
From: Henriette Darge <h.darge@openproject.com>
Date: Mon, 11 Mar 2024 13:27:28 +0100
Subject: [PATCH 2/2] Cleanup login page styles (move away from floating
 layouts)

---
 app/views/account/_login.html.erb             |  2 +-
 .../account/_password_login_form.html.erb     | 36 ++++++------
 .../src/global_styles/content/_accounts.sass  | 31 ++---------
 .../content/_accounts_mobile.sass             | 26 +++------
 .../global_styles/content/modules/_2fa.sass   | 28 ----------
 .../authentication/enter_backup_code.html.erb |  4 +-
 .../authentication/request_otp.html.erb       | 55 +++++++++++--------
 .../two_factor_devices/confirm.html.erb       |  4 +-
 8 files changed, 72 insertions(+), 114 deletions(-)

diff --git a/app/views/account/_login.html.erb b/app/views/account/_login.html.erb
index 84f726cba1bd..05d3b052839b 100644
--- a/app/views/account/_login.html.erb
+++ b/app/views/account/_login.html.erb
@@ -77,7 +77,7 @@ See COPYRIGHT and LICENSE files for more details.
           &nbsp;
         </label>
         <input type="submit" name="login" id="login-pulldown"
-          value="<%=t(:button_login)%>" class="button -highlight" tabindex="1" />
+          value="<%=t(:button_login)%>" class="button -highlight button_no-margin" tabindex="1" />
       </div>
     </div>
 
diff --git a/app/views/account/_password_login_form.html.erb b/app/views/account/_password_login_form.html.erb
index ee1ef844a6b8..53e6283775ef 100644
--- a/app/views/account/_password_login_form.html.erb
+++ b/app/views/account/_password_login_form.html.erb
@@ -55,23 +55,27 @@ See COPYRIGHT and LICENSE files for more details.
     </div>
   <% end %>
 
-  <%= submit_tag t(:button_login),
-                 name: :login,
-                 class: 'button -highlight',
-                 data: { disable_with: t(:label_loading) } %>
+  <div class="login-form--footer">
+    <%= submit_tag t(:button_login),
+                   name: :login,
+                   class: 'button -highlight button_no-margin',
+                   data: { disable_with: t(:label_loading) } %>
 
-  <div class="login-options-container">
-    <div class="login-links">
-      <% if Setting.lost_password? %>
-        <%= link_to t(:label_password_lost), { controller: '/account', action: 'lost_password' } %>
-        <br>
-      <% end %>
-      <% if Setting::SelfRegistration.enabled? %>
-        <%= link_to t(:label_register),
-          '',
-          title: t(:label_register),
-          class: 'registration-modal--activation-link' %>
-      <% end %>
+    <div class="login-options-container">
+      <div class="login-links">
+        <% if Setting.lost_password? %>
+          <%= link_to t(:label_password_lost),
+                      { controller: '/account', action: 'lost_password' },
+                      class: 'login-form--footer-link' %>
+          <br>
+        <% end %>
+        <% if Setting::SelfRegistration.enabled? %>
+          <%= link_to t(:label_register),
+                      '',
+                      title: t(:label_register),
+                      class: 'login-form--footer-link registration-modal--activation-link' %>
+        <% end %>
+      </div>
     </div>
   </div>
 <% end %>
diff --git a/frontend/src/global_styles/content/_accounts.sass b/frontend/src/global_styles/content/_accounts.sass
index d6e0635ab884..e25743fcc01b 100644
--- a/frontend/src/global_styles/content/_accounts.sass
+++ b/frontend/src/global_styles/content/_accounts.sass
@@ -28,16 +28,14 @@
 
 #login-form
   margin: 50px auto 0
-  padding-top: 20px
+  padding: 20px
   width: 511px
   word-break: break-word
 
-  .login-options-container
+  .login-form--footer
+    display: flex
+    justify-content: space-between
     margin-bottom: 10px
-    .login-links
-      float: right
-      text-align: right
-      margin-top: -3rem
 
 #content .login-auth-providers.wide
   width: auto
@@ -63,13 +61,9 @@
   margin-top: 25px
 
   h3
-    border: none
-    margin-top: 20px
     font-weight: normal
     font-size: 1rem
-    text-decoration: none
     text-align: center
-
     position: relative
     z-index: 1
 
@@ -101,24 +95,11 @@
     @include prevent-float-collapse
     margin-top: 1em
 
-  a.auth-provider
-    float: left
-    margin-left: 10px
-    background-color: light-grey
-    font-weight: normal
-    color: var(--body-font-color)
-
-    &:hover
-      text-decoration: none
-
-    .auth-provider-name
-      line-height: normal
-      white-space: normal
+  a.auth-provider:hover
+    text-decoration: none
 
 #nav-login-content .login-auth-providers
   h3
-    &:before
-      width: 100%
     span
       background: var(--header-drop-down-bg-color)
   .login-auth-provider-list
diff --git a/frontend/src/global_styles/content/_accounts_mobile.sass b/frontend/src/global_styles/content/_accounts_mobile.sass
index 98a4a4ae8e40..0d3f10e4b074 100644
--- a/frontend/src/global_styles/content/_accounts_mobile.sass
+++ b/frontend/src/global_styles/content/_accounts_mobile.sass
@@ -32,31 +32,23 @@
   #nav-login-content .login-auth-providers
     width: 100%
 
-  #content .login-auth-providers
-    margin-top: 114px
-
-    h3:before
-      top: -14px
-
   #login-form
     .form--field-container
       @include grid-content(12)
       padding: 0
+      margin: 0
 
-    .login-options-container
-      position: relative
-
-      .login-links
-        float: none
-        position: absolute
-        text-align: center
-        width: 100%
-        margin-top: 0
+    .login-form--footer
+      flex-direction: column
+      align-items: center
 
-        a
-          display: block
+      .login-form--footer-link
+        display: inline-block
+        margin-top: 15px
 
     .button
+      margin-right: 0
+      margin-left: 0
       width: 100%
 
   #new_user
diff --git a/frontend/src/global_styles/content/modules/_2fa.sass b/frontend/src/global_styles/content/modules/_2fa.sass
index 552cc8a8b0c3..bc015422b9ba 100644
--- a/frontend/src/global_styles/content/modules/_2fa.sass
+++ b/frontend/src/global_styles/content/modules/_2fa.sass
@@ -54,42 +54,14 @@
 .mobile-otp-new-device--body
   flex: 1
 
-#login-form input[type=radio]
-  float: left
-
 #resend_otp_container
   margin-top: 30px
 
-#resend_otp_container input[type=radio]
-  margin-right: 8px
-
-#resend_otp_container label
-  margin-right: 10px
-
 #resend_otp_container .resend-header
   font-size: 14px
   font-weight: var(--base-text-weight-bold)
   margin-bottom: 10px
 
-#resend_otp_container .radios-wrapper
-  padding-top: 7px
-  float: left
-  border: none
-  overflow: hidden
-  clear: none
-
-
-#resend_otp_container .radios-wrapper label
-  float: left
-  clear: none
-  display: block
-  padding: 2px 1em 0 0
-
-
-#resend_otp_container .radios-wrapper input[type=radio]
-  float: left
-  clear: none
-  margin: 2px 0 15px 2px
 
 // Add some paddings to action links
 .mobile-otp--two-factor-device-row td.buttons
diff --git a/modules/two_factor_authentication/app/views/two_factor_authentication/authentication/enter_backup_code.html.erb b/modules/two_factor_authentication/app/views/two_factor_authentication/authentication/enter_backup_code.html.erb
index 53deeccebc63..bbcb4b808abe 100644
--- a/modules/two_factor_authentication/app/views/two_factor_authentication/authentication/enter_backup_code.html.erb
+++ b/modules/two_factor_authentication/app/views/two_factor_authentication/authentication/enter_backup_code.html.erb
@@ -11,7 +11,9 @@
         <%= styled_text_field_tag 'backup_code', nil, required: true, autocomplete: 'off', size: 20, maxlength: 20, tabindex: 1, autofocus: true  %>
       </div>
     </div>
-      <input type="submit" name="login" value="<%=t(:button_submit)%>" class="button -highlight" tabindex="2" />
+    <div class="login-form--footer">
+      <input type="submit" name="login" value="<%=t(:button_submit)%>" class="button -highlight button_no-margin" tabindex="2" />
+    </div>
   <% end %>
   </div>
 </div>
diff --git a/modules/two_factor_authentication/app/views/two_factor_authentication/authentication/request_otp.html.erb b/modules/two_factor_authentication/app/views/two_factor_authentication/authentication/request_otp.html.erb
index 9dcbe71a5677..55a88d9159b3 100644
--- a/modules/two_factor_authentication/app/views/two_factor_authentication/authentication/request_otp.html.erb
+++ b/modules/two_factor_authentication/app/views/two_factor_authentication/authentication/request_otp.html.erb
@@ -43,20 +43,24 @@
         </label>
       </div>
     <% end %>
-    <input type="submit" name="login" value="<%= t(:button_login) %>" class="button -highlight" tabindex="2"/>
-    <% if resend_supported || has_other_devices || has_backup_codes %>
-      <div class="login-options-container">
-        <div class="login-links">
-          <%= link_to(
-                t(:text_otp_not_receive),
-                '#',
-                id: 'toggle_resend_form',
-                tabindex: 3,
-                data: { action: 'two-factor-authentication#toggleResendOptions' }
-              ) %>
+    <div class="login-form--footer">
+      <input type="submit" name="login" value="<%= t(:button_login) %>" class="button -highlight button_no-margin" tabindex="2"/>
+      <% if resend_supported || has_other_devices || has_backup_codes %>
+        <div class="login-options-container">
+          <div class="login-links">
+            <%= link_to(
+                  t(:text_otp_not_receive),
+                  '#',
+                  id: 'toggle_resend_form',
+                  tabindex: 3,
+                  data: { action: 'two-factor-authentication#toggleResendOptions' },
+                  class: 'login-form--footer-link'
+                ) %>
+          </div>
         </div>
-      </div>
-    <% end %>
+      <% end %>
+    </div>
+
   <% end %>
   <div
     id="resend_otp_container"
@@ -68,14 +72,16 @@
         <%= hidden_field_tag 'use_device', @service.device.id %>
         <hr/>
         <div class="resend-header"><%= t(:text_send_otp_again) %></div>
-        <div class="radios-wrapper">
-          <% default_channel = @service.device.channel %>
-          <% supported_channels = @used_device.class.supported_channels & @strategy.class.supported_channels %>
-          <% supported_channels.each do |channel| %>
+
+        <% default_channel = @service.device.channel %>
+        <% supported_channels = @used_device.class.supported_channels & @strategy.class.supported_channels %>
+        <% supported_channels.each do |channel| %>
+          <div class="form--field">
             <%= radio_button_tag 'use_channel', channel, default_channel == channel %>
             <label for="channel_<%= channel %>"><%= t("button_otp_by_#{channel}") %></label>
-          <% end %>
-        </div>
+          </div>
+        <% end %>
+
         <input type="submit" value="<%= t(:button_resend_otp_form) %>" id="submit_resend_form" class="button -highlight"/>
       <% end %>
     <% end %>
@@ -95,12 +101,13 @@
       </ul>
     <% end %>
     <% if has_backup_codes %>
+      <hr/>
+      <div class="resend-header"><%= t('two_factor_authentication.login.enter_backup_code_title') %></div>
       <ul>
         <li>
           <%= link_to(t('two_factor_authentication.login.enter_backup_code_title'), { action: :enter_backup_code }) %>
-        </a>
-      </li>
-    </ul>
-  <% end %>
-</div>
+        </li>
+      </ul>
+    <% end %>
+  </div>
 </div>
diff --git a/modules/two_factor_authentication/app/views/two_factor_authentication/two_factor_devices/confirm.html.erb b/modules/two_factor_authentication/app/views/two_factor_authentication/two_factor_devices/confirm.html.erb
index e763712635c0..3b1fcb07c865 100644
--- a/modules/two_factor_authentication/app/views/two_factor_authentication/two_factor_devices/confirm.html.erb
+++ b/modules/two_factor_authentication/app/views/two_factor_authentication/two_factor_devices/confirm.html.erb
@@ -13,7 +13,7 @@
       <%= styled_text_field_tag 'otp', nil, required: true, autocomplete: 'off', size: 6, maxlength: 6, tabindex: 1, autofocus: true  %>
     </div>
   </div>
-  <div>
-    <input type="submit" name="login" value="<%= t 'button_continue' %>" class="button -highlight" tabindex="2" />
+  <div  class="login-form--footer">
+    <input type="submit" name="login" value="<%= t 'button_continue' %>" class="button -highlight button_no-margin" tabindex="2" />
   </div>
 <% end %>