From 0b5be6f28343e6de75c963c16076b6a3f5050210 Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Mon, 28 Aug 2023 08:40:39 +0200
Subject: [PATCH 1/2] wip(shared): Started on UX for Oauth signup

---
 sites/org/pages/index.mjs                |  2 +-
 sites/shared/components/icons.mjs        |  6 ++++++
 sites/shared/components/susi/sign-up.mjs | 21 +++++++++++++++++----
 sites/shared/i18n/signup/en.yaml         |  1 +
 sites/shared/themes/dark.mjs             |  2 +-
 5 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/sites/org/pages/index.mjs b/sites/org/pages/index.mjs
index 5142d202dc1..687337f7a02 100644
--- a/sites/org/pages/index.mjs
+++ b/sites/org/pages/index.mjs
@@ -89,7 +89,7 @@ const HomePage = ({ page }) => {
       </div>
 
       <div className="max-w-7xl m-auto px-0 -mt-12 mb-24 md:my-24">
-        <div className="p-1 bg-gradient-to-tr from-neutral to-accent mt-12 rounded-none md:rounded-lg lg:rounded-xl md:shadow text-neutral-content md:mx-4 p-8 lg:px-12 md:py-0">
+        <div className="p-1 bg-primary bg-opacity-10 mt-12 rounded-none md:rounded-lg lg:rounded-xl md:shadow-lg md:mx-4 p-8 lg:px-12 md:py-0">
           <div className="flex flex-col md:gap-8 lg:gap-12 md:flex md:flex-row m-auto">
             <div className="md:pt-8 pb-8 lg:py-12 grow m-auto max-w-prose">
               <SignUp />
diff --git a/sites/shared/components/icons.mjs b/sites/shared/components/icons.mjs
index fa0133407ef..9af2f853ce8 100644
--- a/sites/shared/components/icons.mjs
+++ b/sites/shared/components/icons.mjs
@@ -281,6 +281,12 @@ export const GuideIcon = (props) => (
   </IconWrapper>
 )
 
+export const GoogleIcon = (props) => (
+  <IconWrapper {...props} fill>
+    <path d="M 12.25009,0 C 7.5567085,0 3.5033589,2.69334 1.530043,6.613315 0.71674427,8.240005 0.25,10.06676 0.25,12.00009 c 0,1.93333 0.46674427,3.759905 1.280043,5.386595 C 3.5033589,21.30666 7.5567085,24 12.25009,24 c 3.239959,0 5.959944,-1.066635 7.94668,-2.906575 2.266629,-2.093365 3.573349,-5.173415 3.573349,-8.826735 0,-0.98666 -0.08023,-1.70661 -0.253496,-2.453265 l -11.266533,0 0,4.45322 6.613137,0 c -0.133283,1.106705 -0.853233,2.77333 -2.453266,3.89327 -1.013315,0.706675 -2.373243,1.199975 -4.159871,1.199975 -3.173318,0 -5.8666835,-2.09327 -6.826777,-4.986605 -0.2533286,-0.746655 -0.399991,-1.54657 -0.399991,-2.373195 0,-0.82672 0.1467055,-1.62672 0.386706,-2.373375 C 6.3834495,6.73338 9.076772,4.63993 12.25009,4.63993 c 2.253301,0 3.773228,0.973465 4.639932,1.786855 L 20.27666,3.12004 C 18.196718,1.186705 15.490049,0 12.25009,0 Z" />
+  </IconWrapper>
+)
+
 export const HeartIcon = (props) => (
   <IconWrapper {...props}>
     <path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
diff --git a/sites/shared/components/susi/sign-up.mjs b/sites/shared/components/susi/sign-up.mjs
index fa4e660a1a9..c5d2631dfd2 100644
--- a/sites/shared/components/susi/sign-up.mjs
+++ b/sites/shared/components/susi/sign-up.mjs
@@ -5,12 +5,12 @@ import { useTranslation } from 'next-i18next'
 // Context
 import { ModalContext } from 'shared/context/modal-context.mjs'
 // Dependencies
-import { validateEmail, validateTld } from 'shared/utils.mjs'
+import { validateEmail, validateTld, horFlexClasses } from 'shared/utils.mjs'
 // Components
 import Link from 'next/link'
 import { Robot } from 'shared/components/robot/index.mjs'
 import { EmailValidButton } from 'shared/components/buttons/email-valid-button.mjs'
-import { LeftIcon, HelpIcon } from 'shared/components/icons.mjs'
+import { LeftIcon, HelpIcon, GoogleIcon, GitHubIcon } from 'shared/components/icons.mjs'
 import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
 import { EmailInput } from 'shared/components/inputs.mjs'
 
@@ -23,6 +23,9 @@ const DarkLink = ({ href, txt }) => (
   </Link>
 )
 
+// FIXME: Hiding this now as it does nothing yet
+const OAUTH = false
+
 export const SignUp = () => {
   // Context
   const { setModal } = useContext(ModalContext)
@@ -132,7 +135,7 @@ export const SignUp = () => {
       ) : (
         <>
           <p className={`text-inherit ${loadingClasses}`}>{t('toReceiveSignupLink')}:</p>
-          <form onSubmit={signupHandler} className="text-accent-content">
+          <form onSubmit={signupHandler}>
             <EmailInput
               id="signup-email"
               label={t('emailAddress')}
@@ -147,7 +150,17 @@ export const SignUp = () => {
               btnProps={{ type: 'submit' }}
             />
           </form>
-          <p className={`text-inherit text-sm mt-4 opacity-80 text-center ${loadingClasses}`}>
+          {OAUTH && (
+            <div className="grid grid-cols-2 gap-2 items-center mt-4">
+              {['Google', 'Github'].map((provider) => (
+                <button id={provider} className={`${horFlexClasses} btn btn-neutral btn-outline`}>
+                  {provider === 'Google' ? <GoogleIcon stroke={0} /> : <GitHubIcon />}
+                  <span>{t('signUpWithProvider', { provider })}</span>
+                </button>
+              ))}
+            </div>
+          )}
+          <p className={`text-inherit text-sm mt-0 opacity-80 text-center ${loadingClasses}`}>
             <span className="block md:inline mb-2 md:mb-0">
               {t('alreadyHaveAnAccount')} <DarkLink href="/signin" txt={t('signInHere')} />
             </span>
diff --git a/sites/shared/i18n/signup/en.yaml b/sites/shared/i18n/signup/en.yaml
index caf1244e172..76600d34f6e 100644
--- a/sites/shared/i18n/signup/en.yaml
+++ b/sites/shared/i18n/signup/en.yaml
@@ -31,3 +31,4 @@ welcomeMigrateName: Welcome to FreeSewing v3 {name}. Please note that this is st
 v3UserAlreadyExists: Cannot migrate over an existing v3 account. Perhaps just sign in instead?
 tryAgain: Try again
 noWorkie: Unable to migrate this account. Typically that means your credentials are invalid.
+signUpWithProvider: Sign up with {provider}
diff --git a/sites/shared/themes/dark.mjs b/sites/shared/themes/dark.mjs
index c4f5f360280..4a751f57c7e 100644
--- a/sites/shared/themes/dark.mjs
+++ b/sites/shared/themes/dark.mjs
@@ -23,7 +23,7 @@ export const theme = {
 
   accent: colors.fuchsia['400'],
   'accent-focus': colors.fuchsia['300'],
-  'accent-content': colors.fuchsia['900'],
+  'accent-content': colors.neutral['900'],
 
   neutral: colors.neutral['900'],
   'neutral-focus': colors.neutral['700'],

From fc1ca11560fd4474a7845ffbfe7553d4d34e6b79 Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Mon, 28 Aug 2023 08:43:00 +0200
Subject: [PATCH 2/2] fix(org): Fix SSR config for docs

---
 sites/org/pages/docs/[...slug].mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sites/org/pages/docs/[...slug].mjs b/sites/org/pages/docs/[...slug].mjs
index 453e54dbef2..c4a69dd90e3 100644
--- a/sites/org/pages/docs/[...slug].mjs
+++ b/sites/org/pages/docs/[...slug].mjs
@@ -84,6 +84,6 @@ export async function getStaticPaths() {
       ...somePaths.map((key) => `/nl/${key}`),
       ...somePaths.map((key) => `/uk/${key}`),
     ],
-    fallback: true,
+    fallback: false,
   }
 }