Add google login, and small UI fixes for login and register page

src/lib/profiles.ts

@@ -1,3 +1,5 @@
+import { OAuthProvider } from '@appwrite.io/console';
+
 type Profile = {
     hasChatLayout: boolean;
     hasAuth: boolean;
@@ -10,6 +12,9 @@ type Profile = {
     hasFullPageSignup: boolean;
     defaultProjectName: string;
     hasChat: boolean;
+    hasGithubLogin: boolean;
+    githubLoginProvider?: string;
+    hasGoogleLogin: boolean;
 };
 
 export const ConsoleCloudProfile: Profile = {
@@ -23,7 +28,10 @@ export const ConsoleCloudProfile: Profile = {
     hasProjectProgressBars: true,
     hasFullPageSignup: false,
     defaultProjectName: 'Appwrite project',
-    hasChat: false
+    hasChat: false,
+    hasGithubLogin: true,
+    githubLoginProvider: OAuthProvider.Github,
+    hasGoogleLogin: false
 };
 
 export const ConsoleSelfhostedProfile: Profile = {
@@ -37,7 +45,9 @@ export const ConsoleSelfhostedProfile: Profile = {
     hasProjectProgressBars: true,
     hasFullPageSignup: false,
     defaultProjectName: 'Appwrite project',
-    hasChat: false
+    hasChat: false,
+    hasGithubLogin: false,
+    hasGoogleLogin: false
 };
 
 export const StudioProfile: Profile = {
@@ -51,5 +61,8 @@ export const StudioProfile: Profile = {
     hasProjectProgressBars: false,
     hasFullPageSignup: true,
     defaultProjectName: 'Imagine project',
-    hasChat: true
+    hasChat: true,
+    hasGithubLogin: true,
+    githubLoginProvider: 'github2',
+    hasGoogleLogin: true
 };

src/routes/(public)/(guest)/login/+page.svelte

@@ -70,12 +70,36 @@
             }
         }
         sdk.forConsole.account.createOAuth2Session(
-            OAuthProvider.Github,
+            consoleProfile.githubLoginProvider as OAuthProvider,
             window.location.origin + url,
             window.location.origin,
             ['read:user', 'user:email']
         );
     }
+
+    function onGoogleLogin() {
+        let url = window.location.origin;
+
+        if (page.url.searchParams) {
+            const redirect = page.url.searchParams.get('redirect');
+            page.url.searchParams.delete('redirect');
+            if (redirect) {
+                url = `${redirect}${page.url.search}`;
+            } else {
+                url = `${base}${page.url.search ?? ''}`;
+            }
+        }
+        sdk.forConsole.account.createOAuth2Session(
+            OAuthProvider.Google,
+            window.location.origin + url,
+            window.location.origin,
+            [
+                'https://www.googleapis.com/auth/userinfo.email',
+                'https://www.googleapis.com/auth/userinfo.profile',
+                'openid'
+            ]
+        );
+    }
 </script>
 
 <svelte:head>
@@ -100,20 +124,29 @@
                     required={true}
                     bind:value={pass} />
                 <Button fullWidth submit {disabled}>Sign in</Button>
-                {#if isCloud}
+                {#if isCloud && (consoleProfile.hasGithubLogin || consoleProfile.hasGoogleLogin)}
                     <span class="with-separators eyebrow-heading-3">or</span>
+                {/if}
+                {#if isCloud && consoleProfile.hasGoogleLogin}
+                    <Button secondary fullWidth on:click={onGoogleLogin} {disabled}>
+                        <span class="icon-google" aria-hidden="true"></span>
+                        <span class="text">Sign in with Google</span>
+                    </Button>
+                {/if}
+                {#if isCloud && consoleProfile.hasGithubLogin}
                     <Button secondary fullWidth on:click={onGithubLogin} {disabled}>
                         <span class="icon-github" aria-hidden="true"></span>
                         <span class="text">Sign in with GitHub</span>
                     </Button>
                 {/if}
+
                 <div></div>
                 <Layout.Stack direction="row" justifyContent="center">
                     <a href={`${base}/recover`}
                         ><Typography.Text variant="m-500" color="--neutral-750"
-                            >Forgot Password?</Typography.Text
+                            >Forgot password?</Typography.Text
                         ></a>
-                    <span>-</span>
+                    <span>&bull;</span>
                     <a href={`${base}/register${page?.url?.search ?? ''}`}>
                         <Typography.Text variant="m-500" color="--neutral-750"
                             >Sign up</Typography.Text>

src/routes/(public)/(guest)/register/+page.svelte

@@ -73,12 +73,25 @@
 
     function onGithubLogin() {
         sdk.forConsole.account.createOAuth2Session(
-            OAuthProvider.Github,
+            consoleProfile.githubLoginProvider as OAuthProvider,
             window.location.origin,
             window.location.origin,
             ['read:user', 'user:email']
         );
     }
+
+    function onGoogleLogin() {
+        sdk.forConsole.account.createOAuth2Session(
+            OAuthProvider.Google,
+            window.location.origin,
+            window.location.origin,
+            [
+                'https://www.googleapis.com/auth/userinfo.email',
+                'https://www.googleapis.com/auth/userinfo.profile',
+                'openid'
+            ]
+        );
+    }
 </script>
 
 <svelte:head>
@@ -121,9 +134,18 @@
                         target="_blank"
                         rel="noopener noreferrer">General Terms of Use</Link.Anchor
                     >.</InputChoice>
+                <div></div>
                 <Button fullWidth submit {disabled}>Sign up</Button>
-                {#if isCloud}
+                {#if isCloud && (consoleProfile.hasGithubLogin || consoleProfile.hasGoogleLogin)}
                     <span class="with-separators eyebrow-heading-3">or</span>
+                {/if}
+                {#if isCloud && consoleProfile.hasGoogleLogin}
+                    <Button fullWidth on:click={onGoogleLogin} {disabled}>
+                        <span class="icon-google" aria-hidden="true"></span>
+                        <span class="text">Sign in with Google</span>
+                    </Button>
+                {/if}
+                {#if isCloud && consoleProfile.hasGithubLogin}
                     <Button fullWidth on:click={onGithubLogin} {disabled}>
                         <span class="icon-github" aria-hidden="true"></span>
                         <span class="text">Sign up with GitHub</span>