From 3641ee5e2ce64ff2e3e41c8574f93ce4d0cc669f Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Mon, 17 May 2021 13:47:23 +0100
Subject: [PATCH] Work in progress, moving login form around a bit.

---
 packages/builder/assets/google-logo.png       | Bin 0 -> 1771 bytes
 .../src/components/login/GoogleButton.svelte  |  41 ++++++++++++++
 .../src/components/login/LoginForm.svelte     |  53 ++++++++++++++----
 3 files changed, 84 insertions(+), 10 deletions(-)
 create mode 100644 packages/builder/assets/google-logo.png
 create mode 100644 packages/builder/src/components/login/GoogleButton.svelte

diff --git a/packages/builder/assets/google-logo.png b/packages/builder/assets/google-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f52a66ae9619e0bb383d220a449a327560d6135
GIT binary patch
literal 1771
zcmV<H1{C>;P)<h;3K|Lk000e1NJLTq002+`002-30ssI20dr;g000KENkl<ZcmeI)
z19<F87zW^L+qUgvv$l?H+qP}i?sjY2w(V85NH)pbJICH;vf1tCwt2pX<r~dEe=_^n
zzdda01^0q`!Dt)V)S!qA={$L`ZS%_3rL)8{Y(>`k0=<EP(S3y`!$r0R;%PQ*>zBfB
zkn`M?`8j|fxCf@%+vGftwhhaK7Gne>{zi-5z}97RWX_k##(G@`1A@Tfqv4ShjOlj=
zphhI~r^tOhfI^{jV1Q#XcL$;QC}b6l2+c-HubidYT6F>pC`u8`hnFI{1d(k#Oy=nf
z2%<Z|cuoeq<uGTUM?A$+nVZ!OU_g@6%Vz{5|54w7oRR-XFP;J<p*=9!+$32%gMA4~
zBnzfeVxcy`cxEabKiM~+M`UM6RFr8Jj3vhl#tzW11R;{y695330%Ng}usqTot!Sbd
zDQwZy5mrP53r6+frWPFxOI%nyaZ`&9hBrfz)mUz7(ZPTqB#WlAbW=5I-?g#x{0W(d
zlOik-23Dh;XOFe--6Ec9#lDsqxbwsTHJy@qljZ*2WJ7&dV|%0A&%1TaB6KZ#U}bTE
zI<-{Wmeug$NBxJCC53J4mLO}@2Lk}$?2PechG(Uz^KU5&a^WvQ(5eqs1o4?^J5L<~
zIL1O3p|b;aLeRC0z?7^_XpUY#j_M=#^J253006whp=%j{s}IPIzAYI02ZDC&04y<<
zlTADTNFx4ABK&F0<z<o8&ose`@F1>sEvXhSsJ#(oz_YD$zwS~C=f)gv(~{{UAocEa
z?)X43@~=l}TUX8p0B{uyZ~+ni%za=O`K8x{#=kx6((O;w)o{2GPc>YDyoUzoJujL3
zJ<`d{0Wg_k^(ZimGW6;8HJ{$r!qx{+C^!rT6hTD224SirJAQM->O6gz+s~FjXFl}M
z3Fh{a$o3Dip^n>Ns>uanXhxYlNS!}?Ivm$@E=J>BfXT9T^uc8L26e#0cS^MoISy2U
zvrOoNDN&g2gUg#KRbV2eFMTi|rMeG}Ehbcg6TYVlj(!UP*L`5$bfrpg%m;MA3Ey)9
z?3#qD1V_9`7o0Yj6W}W`tbqq{0t^SIo^?u}i&PCx_<=4s>P=379pdqxH7t3gD0^1n
z;h&`%T(<syR$3;P6Rb@hq$vY+A6zG<*qI)d1;1|TF}kj^i7_}RTgfcb&&g<NNA8jm
zBw(Qd5FGI7AXk&WTrCb|UjA3R8%Y7919T7X_>(eqTRe)eXAbawgVY-t<~2z{VA=%d
z)R6Sg=N&wST1~vB(3hrp4u#IUb0*hCo8Z&o7=185L&>~Nn-cWiXg7oVv@reLZE89i
zwWDp50fYSrcdRM_#jp{7h5ub2S2M_aXy!$2)lMV+R2ahHwK^&T03bhVX$yURxpzOP
zQk~P9Ke6k@)R;X8hxcR{hVU>=5&J3BmIS|H<~{~`=p?8*R&!bz2Bw~sA&tPrjU>Y3
zQbF+sfB(-0ULSjCroX#wY(ttRv;cth?g}LBq|-9A=fhI0eU#5s$Uw?JZdP7pA?#{#
z0_@<SX<>NjN;ELsd@CZLfk6&tUdBkA6|JCynsZT(s<k*G#R<UVrIyK|YnYi${pY7O
z=c#!b`&UJqIyev8*?|gnPQV$ywp1W4``gu$nHgqP{QewaF)Eb;RAOV+gpidteo3E8
zn}+UgqOY|%CX?fUAsBA^GcMjSFv_IR)!yZy^_|UK70G0=r1E5rlY#H7`+mdUjx&cG
z$U$#JGXfJ7F)e(Z8sIxI<j>xibo6+(gHtg-pej1JI@YZ;@It-^+^5sS*AMWpQ}yF6
z)&r08yVS0ARj}}KsZcH%!<&vSWIz4R9~!nx@+htOVJW=Hu>gi!wy>zLyNxcG|GBzk
z=-!HlPJJ`0NH$*(hlLazX1m`E<1}H=;n@4YE{Qn%O8_G3lKQw=>x9|GqW|g3w?`~E
zsnFCSkNAcRSVHQ6`NoK~Vd(D0qrsSFm+_=F=fXyZj+pl)^3hkdpl?l50USuWmpa0G
za(rWk_Lkz26bYL<=ye!7nHsjXNha)u#g-W@1=fK}w5&axb%mhFZd*=E0g7K4d8Z!K
zWM+hK$QPCB#DZyz#2t!!M<Pt2(E`icnEEuGTM|!DM09=1%D8=Om1RS`CT>kRQ6#R=
z^$$I0!#dncgO<ha9_=%Yfz!-?{*Khs@FuJzmE8MSiw0>+aCO|l%uDdd&x+V+6SP#%
zcP5-0!J=)b*Tk{B85RKx=S6LS!b=5Suq)PzwfBB-NiVn;+zWo>_8%1)ADpoFWwrnS
N002ovPDHLkV1fkhT8IDu

literal 0
HcmV?d00001

diff --git a/packages/builder/src/components/login/GoogleButton.svelte b/packages/builder/src/components/login/GoogleButton.svelte
new file mode 100644
index 0000000000..ff04e82ebe
--- /dev/null
+++ b/packages/builder/src/components/login/GoogleButton.svelte
@@ -0,0 +1,41 @@
+<script>
+  import { Link } from "@budibase/bbui"
+  import GoogleLogo from "/assets/google-logo.png"
+</script>
+
+<div class="outer">
+  <Link target="_blank" href="/api/admin/auth/google">
+    <div class="inner">
+      <img src={GoogleLogo} alt="google icon" />
+      <p>Sign in with Google</p>
+    </div>
+  </Link>
+</div>
+
+<style>
+  .inner {
+    display: flex;
+    flex-direction: row;
+    background-color: #4285f4;
+    border-radius: 3px;
+    padding-right: 12px;
+  }
+
+  .inner img {
+    width: 24px;
+    margin: 1px 14px 1px 1px;
+    border-radius: 2px;
+    background-color: #fff;
+    padding: 8px;
+  }
+
+  .inner p {
+    margin: 12px 0 0;
+  }
+
+  .outer :global(a) {
+    text-decoration: none;
+    font-weight: bold;
+    color: #fff;
+  }
+</style>
diff --git a/packages/builder/src/components/login/LoginForm.svelte b/packages/builder/src/components/login/LoginForm.svelte
index f6f4f314c8..2eecbe3078 100644
--- a/packages/builder/src/components/login/LoginForm.svelte
+++ b/packages/builder/src/components/login/LoginForm.svelte
@@ -2,11 +2,13 @@
   import { goto } from "@roxi/routify"
   import {
     notifications,
-    Link,
     Input,
     Modal,
     ModalContent,
+    Button,
+    Divider,
   } from "@budibase/bbui"
+  import GoogleButton from "./GoogleButton.svelte"
   import { auth } from "stores/backend"
 
   let username = ""
@@ -25,35 +27,66 @@
       notifications.error("Invalid credentials")
     }
   }
+
+  async function forgot() {
+
+  }
 </script>
 
 <Modal fixed>
   <ModalContent
     size="M"
     title="Log In"
-    onConfirm={login}
-    confirmText="Log In"
     showCancelButton={false}
+    showConfirmButton={false}
     showCloseIcon={false}
   >
     <Input label="Email" bind:value={username} />
     <Input label="Password" type="password" on:change bind:value={password} />
-    <div class="footer" slot="footer">
-      <Link target="_blank" href="/api/admin/auth/google">
-        Sign In With Google
-      </Link>
+    <div class="login-buttons">
+      <Button secondary on:click={forgot}>Forgot Password?</Button>
+      <Button cta on:click={login}>Login</Button>
+    </div>
+    <div class="or-divide">
+      <Divider noGrid />
+      <div class="or-label">
+        OR
+      </div>
+    </div>
+    <div class="sso">
+      <GoogleButton />
     </div>
   </ModalContent>
 </Modal>
 
 <style>
-  .footer {
+  .sso {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .login-buttons {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     align-items: center;
   }
-  .footer :global(a) {
-    margin-right: var(--spectrum-global-dimension-static-size-200);
+  .login-buttons :global(>*:not(:last-child)) {
+    margin-right: var(--spacing-xl);
+  }
+  .or-divide {
+    position: relative;
+  }
+  .or-label {
+    position: absolute;
+    top: calc(50% - 2px);
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    background-color: var(--background);
+    padding: 0 var(--spacing-xl);
+    font-weight: 500;
+    font-size: var(--font-size-s);
+    color: var(--spectrum-global-color-gray-600);
   }
 </style>