Merge pull request #14104 from snipe/feature/google_login_more_prominent

Move Google Login prompt higher, made it bigger
snipe · Jan 5, 2024 · 6ebbd2d · 6ebbd2d
2 parents 93712ec + 7c5d29c
commit 6ebbd2d
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 11 deletions.
diff --git a/public/css/build/app.css b/public/css/build/app.css
@@ -1119,4 +1119,27 @@ input[type="radio"]:checked::before {
 /** --------------------------------------- **/
 /** End checkbox styles to replace iCheck   **/
 /** --------------------------------------- **/
+/**
+/** Separator styles with text in the middle. Currently only used by the login page but
+/** could be used elsewhere.
+ */
+.separator {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  padding-top: 20px;
+  color: #959495;
+}
+.separator::before,
+.separator::after {
+  content: '';
+  flex: 1;
+  border-bottom: 1px solid #959495;
+}
+.separator:not(:empty)::before {
+  margin-right: 0.25em;
+}
+.separator:not(:empty)::after {
+  margin-left: 0.25em;
+}
 
diff --git a/public/css/build/overrides.css b/public/css/build/overrides.css
@@ -752,4 +752,27 @@ input[type="radio"]:checked::before {
 /** --------------------------------------- **/
 /** End checkbox styles to replace iCheck   **/
 /** --------------------------------------- **/
+/**
+/** Separator styles with text in the middle. Currently only used by the login page but
+/** could be used elsewhere.
+ */
+.separator {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  padding-top: 20px;
+  color: #959495;
+}
+.separator::before,
+.separator::after {
+  content: '';
+  flex: 1;
+  border-bottom: 1px solid #959495;
+}
+.separator:not(:empty)::before {
+  margin-right: 0.25em;
+}
+.separator:not(:empty)::after {
+  margin-left: 0.25em;
+}
 
diff --git a/public/css/dist/all.css b/public/css/dist/all.css
@@ -22620,6 +22620,29 @@ input[type="radio"]:checked::before {
 /** --------------------------------------- **/
 /** End checkbox styles to replace iCheck   **/
 /** --------------------------------------- **/
+/**
+/** Separator styles with text in the middle. Currently only used by the login page but
+/** could be used elsewhere.
+ */
+.separator {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  padding-top: 20px;
+  color: #959495;
+}
+.separator::before,
+.separator::after {
+  content: '';
+  flex: 1;
+  border-bottom: 1px solid #959495;
+}
+.separator:not(:empty)::before {
+  margin-right: 0.25em;
+}
+.separator:not(:empty)::after {
+  margin-left: 0.25em;
+}
 
 
 .select2-container {
@@ -23858,4 +23881,27 @@ input[type="radio"]:checked::before {
 /** --------------------------------------- **/
 /** End checkbox styles to replace iCheck   **/
 /** --------------------------------------- **/
+/**
+/** Separator styles with text in the middle. Currently only used by the login page but
+/** could be used elsewhere.
+ */
+.separator {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  padding-top: 20px;
+  color: #959495;
+}
+.separator::before,
+.separator::after {
+  content: '';
+  flex: 1;
+  border-bottom: 1px solid #959495;
+}
+.separator:not(:empty)::before {
+  margin-right: 0.25em;
+}
+.separator:not(:empty)::after {
+  margin-left: 0.25em;
+}
 
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,8 +1,8 @@
 {
     "/js/build/app.js": "/js/build/app.js?id=41293fc7aa00ece89fd524e1e0e31a68",
     "/css/dist/skins/skin-blue.css": "/css/dist/skins/skin-blue.css?id=f677207c6cf9678eb539abecb408c374",
-    "/css/build/overrides.css": "/css/build/overrides.css?id=8453824ff928a55d685947c84e6b3079",
-    "/css/build/app.css": "/css/build/app.css?id=ddf74e5777fbad72decf760fe8e57570",
+    "/css/build/overrides.css": "/css/build/overrides.css?id=9a69d65b9f2b35e6d17c6a72e76424d5",
+    "/css/build/app.css": "/css/build/app.css?id=5a516232bc9f1488514577cf3c8108eb",
     "/css/build/AdminLTE.css": "/css/build/AdminLTE.css?id=dc383f8560a8d4adb51d44fb4043e03b",
     "/css/dist/skins/skin-orange.css": "/css/dist/skins/skin-orange.css?id=6f0563e726c2fe4fab4026daaa5bfdf2",
     "/css/dist/skins/skin-orange-dark.css": "/css/dist/skins/skin-orange-dark.css?id=e6e53eef152bba01a4c666a4d8b01117",
@@ -18,7 +18,7 @@
     "/css/dist/skins/skin-green.css": "/css/dist/skins/skin-green.css?id=0a82a6ae6bb4e58fe62d162c4fb50397",
     "/css/dist/skins/skin-contrast.css": "/css/dist/skins/skin-contrast.css?id=da6c7997d9de2f8329142399f0ce50da",
     "/css/dist/skins/skin-red.css": "/css/dist/skins/skin-red.css?id=44bf834f2110504a793dadec132a5898",
-    "/css/dist/all.css": "/css/dist/all.css?id=013a453127efd85087fb38c01e99a750",
+    "/css/dist/all.css": "/css/dist/all.css?id=672c12fc9cd418d80133a246b24b828d",
     "/css/dist/signature-pad.css": "/css/dist/signature-pad.css?id=6a89d3cd901305e66ced1cf5f13147f7",
     "/css/dist/signature-pad.min.css": "/css/dist/signature-pad.min.css?id=6a89d3cd901305e66ced1cf5f13147f7",
     "/css/webfonts/fa-brands-400.ttf": "/css/webfonts/fa-brands-400.ttf?id=69e5d8e4e818f05fd882cceb758d1eba",

diff --git a/resources/assets/less/overrides.less b/resources/assets/less/overrides.less
@@ -859,4 +859,32 @@ input[type="radio"]:checked::before {
 
 /** --------------------------------------- **/
 /** End checkbox styles to replace iCheck   **/
-/** --------------------------------------- **/
+/** --------------------------------------- **/
+
+/**
+/** Separator styles with text in the middle. Currently only used by the login page but
+/** could be used elsewhere.
+ */
+
+.separator {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  padding-top: 20px;
+  color: #959495;
+}
+
+.separator::before,
+.separator::after {
+  content: '';
+  flex: 1;
+  border-bottom: 1px solid #959495;
+}
+
+.separator:not(:empty)::before {
+  margin-right: .25em;
+}
+
+.separator:not(:empty)::after {
+  margin-left: .25em;
+}
diff --git a/resources/lang/en-US/auth/general.php b/resources/lang/en-US/auth/general.php
@@ -12,7 +12,7 @@
     'remember_me'                   => 'Remember Me',
     'username_help_top'                 => 'Enter your <strong>username</strong> to be emailed a password reset link.',
     'username_help_bottom'          => 'Your username and email address <em>may</em> be the same, but may not be, depending on your configuration. If you cannot remember your username, contact your administrator. <br><br><strong>Usernames without an associated email address will not be emailed a password reset link.</strong> ',
-    'google_login'                  => 'Or login with Google Workspace',
+    'google_login'                  => 'Login with Google Workspace',
     'google_login_failed'           => 'Google Login failed, please try again.',
 
 ];

diff --git a/resources/lang/en-US/general.php b/resources/lang/en-US/general.php
@@ -499,5 +499,6 @@
     'action_permission_generic' => 'You do not have permission to :action this :item_type',
     'edit' => 'edit',
     'action_source' => 'Action Source',
+    'or' => 'or',
 
 ];
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
@@ -17,6 +17,18 @@
 
                 <div class="col-md-4 col-md-offset-4">
 
+                    @if (($snipeSettings->google_login=='1') && ($snipeSettings->google_client_id!='') && ($snipeSettings->google_client_secret!=''))
+
+                        <br><br>
+                        <a href="{{ route('google.redirect')  }}" class="btn btn-block btn-social btn-google btn-lg">
+                            <i class="fa-brands fa-google"></i>
+                            {{ trans('auth/general.google_login') }}
+                        </a>
+
+                        <div class="separator">{{ strtoupper(trans('general.or')) }}</div>
+                    @endif
+
+
                     <div class="box login-box">
                         <div class="box-header with-border">
                             <h1 class="box-title"> {{ trans('auth/general.login_prompt')  }}</h1>
@@ -93,12 +105,6 @@
 
                     </div> <!-- end login box -->
 
-                    @if (($snipeSettings->google_login=='1') && ($snipeSettings->google_client_id!='') && ($snipeSettings->google_client_secret!=''))
-
-                        <a href="{{ route('google.redirect')  }}" class="btn btn-block btn-social btn-google">
-                            <i class="fa-brands fa-google"></i> {{ trans('auth/general.google_login') }}
-                        </a>
-                    @endif
 
                 </div> <!-- col-md-4 -->