From d5f527ee37d3b3cfd302b7ed6999630c0022490b Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Mon, 15 Jan 2024 17:36:00 +0200
Subject: [PATCH] UX: show the SSO options when creating an account on mobile
 (#25260)

---
 .../app/components/modal/create-account.hbs   |  6 ++++-
 .../stylesheets/mobile/login-modal.scss       | 23 +++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/discourse/app/components/modal/create-account.hbs b/app/assets/javascripts/discourse/app/components/modal/create-account.hbs
index 8d172440c32..9cf8fb4fdbd 100644
--- a/app/assets/javascripts/discourse/app/components/modal/create-account.hbs
+++ b/app/assets/javascripts/discourse/app/components/modal/create-account.hbs
@@ -281,7 +281,11 @@
         {{loading-spinner size="large"}}
       {{/if}}
     </div>
-    {{#if (and this.hasAtLeastOneLoginButton this.site.desktopView)}}
+
+    {{#if this.hasAtLeastOneLoginButton}}
+      {{#if this.site.mobileView}}
+        <div class="login-or-separator"><span>
+            {{i18n "login.or"}}</span></div>{{/if}}
       <div class="login-right-side">
         <LoginButtons
           @externalLogin={{this.externalLogin}}
diff --git a/app/assets/stylesheets/mobile/login-modal.scss b/app/assets/stylesheets/mobile/login-modal.scss
index 68769ee8d09..e4c503cf363 100644
--- a/app/assets/stylesheets/mobile/login-modal.scss
+++ b/app/assets/stylesheets/mobile/login-modal.scss
@@ -25,6 +25,29 @@
       padding: 1rem;
     }
 
+    .login-right-side {
+      padding: 1rem 0 0;
+      background: unset;
+    }
+
+    .login-or-separator {
+      border-top: 1px solid var(--primary-low);
+      position: relative;
+      margin-block: 1rem;
+
+      span {
+        transform: translate(-50%, -50%);
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        background: var(--secondary);
+        padding-inline: 0.5rem;
+        color: var(--primary-medium);
+        font-size: var(--font-down-1-rem);
+        text-transform: uppercase;
+      }
+    }
+
     #login-buttons {
       flex-direction: row;
       flex-wrap: wrap;