feat: Support dark mode in login pages (#7420)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/v3/components/GoogleOauth/Button.spec.js

@@ -0,0 +1,52 @@
+import { shallowMount } from '@vue/test-utils';
+import GoogleOAuthButton from './Button.vue';
+
+function getWrapper(showSeparator) {
+  return shallowMount(GoogleOAuthButton, {
+    propsData: { showSeparator: showSeparator },
+    methods: {
+      $t(text) {
+        return text;
+      },
+    },
+  });
+}
+
+describe('GoogleOAuthButton.vue', () => {
+  beforeEach(() => {
+    window.chatwootConfig = {
+      googleOAuthClientId: 'clientId',
+      googleOAuthCallbackUrl: 'http://localhost:3000/test-callback',
+    };
+  });
+
+  afterEach(() => {
+    window.chatwootConfig = {};
+  });
+
+  it('renders the OR separator if showSeparator is true', () => {
+    const wrapper = getWrapper(true);
+    expect(wrapper.findComponent({ ref: 'divider' }).exists()).toBe(true);
+  });
+
+  it('does not render the OR separator if showSeparator is false', () => {
+    const wrapper = getWrapper(false);
+    expect(wrapper.findComponent({ ref: 'divider' }).exists()).toBe(false);
+  });
+
+  it('generates the correct Google Auth URL', () => {
+    const wrapper = getWrapper();
+    const googleAuthUrl = new URL(wrapper.vm.getGoogleAuthUrl());
+    const params = googleAuthUrl.searchParams;
+    expect(googleAuthUrl.origin).toBe('https://accounts.google.com');
+    expect(googleAuthUrl.pathname).toBe('/o/oauth2/auth/oauthchooseaccount');
+    expect(params.get('client_id')).toBe('clientId');
+    expect(params.get('redirect_uri')).toBe(
+      'http://localhost:3000/test-callback'
+    );
+    expect(params.get('response_type')).toBe('code');
+    expect(params.get('scope')).toBe('email profile');
+
+    expect(wrapper.findComponent({ ref: 'divider' }).exists()).toBe(true);
+  });
+});

app/javascript/v3/components/GoogleOauth/Button.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="flex flex-col">
+    <a
+      :href="getGoogleAuthUrl()"
+      class="inline-flex w-full justify-center rounded-md bg-white py-3 px-4 shadow-sm ring-1 ring-inset ring-slate-200 dark:ring-slate-600 hover:bg-slate-50 focus:outline-offset-0 dark:bg-slate-700 dark:hover:bg-slate-700"
+    >
+      <img src="/assets/images/auth/google.svg" alt="Google Logo" class="h-6" />
+      <span class="text-base font-medium ml-2 text-slate-600 dark:text-white">
+        {{ $t('LOGIN.OAUTH.GOOGLE_LOGIN') }}
+      </span>
+    </a>
+    <simple-divider
+      v-if="showSeparator"
+      ref="divider"
+      :label="$t('COMMON.OR')"
+      class="uppercase"
+    />
+  </div>
+</template>
+
+<script>
+import SimpleDivider from '../Divider/SimpleDivider.vue';
+
+export default {
+  components: {
+    SimpleDivider,
+  },
+  props: {
+    showSeparator: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  methods: {
+    getGoogleAuthUrl() {
+      // Ideally a request to /auth/google_oauth2 should be made
+      // Creating the URL manually because the devise-token-auth with
+      // omniauth has a standing issue on redirecting the post request
+      // https://github.com/lynndylanhurley/devise_token_auth/issues/1466
+      const baseUrl =
+        'https://accounts.google.com/o/oauth2/auth/oauthchooseaccount';
+      const clientId = window.chatwootConfig.googleOAuthClientId;
+      const redirectUri = window.chatwootConfig.googleOAuthCallbackUrl;
+      const responseType = 'code';
+      const scope = 'email profile';
+
+      // Build the query string
+      const queryString = new URLSearchParams({
+        client_id: clientId,
+        redirect_uri: redirectUri,
+        response_type: responseType,
+        scope: scope,
+      }).toString();
+
+      // Construct the full URL
+      return `${baseUrl}?${queryString}`;
+    },
+  },
+};
+</script>