Handle SSO Login

.env.example

@@ -24,3 +24,13 @@ GEETEST_ID_RESET=your-gee-test-id
 GEETEST_KEY_RESET=your-geetest-key
 PUSHER_API_KEY=
 PUSHER_API_CLUSTER=
+
+#SSO
+GOOGLE_CLIENT_ID=
+GOOGLE_CALLBACK_URL=http://localhost/v1/auth/google/callback
+
+FACEBOOK_APP_ID=
+FACEBOOK_CALLBACK_URL=http://localhost/v1/auth/facebook/callback
+
+GITHUB_CLIENT_ID=
+GITHUB_CALLBACK_URL=http://localhost/v1/auth/github/callback

.github/workflows/vercel-preview.yaml

@@ -0,0 +1,21 @@
+name: Vercel Preview Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches:
+      - develop
+jobs:
+  Deploy-Preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

.github/workflows/vercel-prod.yaml

@@ -0,0 +1,21 @@
+name: Vercel Production Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches:
+      - master
+jobs:
+  Deploy-Production:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

components/buttons/social-button-large.vue

@@ -0,0 +1,50 @@
+<template>
+  <button
+    class="flex items-center justify-center px-6 py-3 mt-4 bg-white text-gray-600 transition-colors duration-300 transform border rounded-lg dark:border-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600"
+    @click="handleClick"
+  >
+    <img
+      v-if="type === 'google'"
+      class="w-6 h-6 mx-2"
+      src="https://www.svgrepo.com/show/475656/google-color.svg"
+      alt=""
+    />
+
+    <img
+      v-if="type === 'facebook'"
+      class="w-6 h-6 mx-2"
+      src="https://www.svgrepo.com/show/448224/facebook.svg"
+      alt=""
+    />
+
+    <img
+      v-if="type === 'github'"
+      class="w-6 h-6 mx-2"
+      src="https://www.svgrepo.com/show/512317/github-142.svg"
+      alt=""
+    />
+
+    <span class="mx-2 capitalize">{{ $t("continue_with") }} {{ type }}</span>
+  </button>
+</template>
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      default: "google",
+    },
+  },
+  methods: {
+    handleClick() {
+      if (this.type === "google") {
+        this.$auth.loginWith("google", {
+          params: { prompt: "select_account" },
+        });
+      } else {
+        this.$auth.loginWith(this.type);
+      }
+    },
+  },
+};
+</script>

components/commons/social-sign.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="mt-6">
+    <div class="relative">
+      <div class="absolute inset-0 flex items-center">
+        <div class="w-full border-t border-gray-300"></div>
+      </div>
+      <div class="relative flex justify-center text-sm">
+        <span class="px-2 bg-gray-100 text-gray-500">
+          {{ $t("or_sign_in_with") }}
+        </span>
+      </div>
+    </div>
+
+    <div class="mt-6 grid grid-cols-3 gap-3">
+      <div>
+        <button
+          class="w-full flex items-center justify-center px-8 py-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
+          @click="facebookLogin"
+        >
+          <img
+            class="h-6 w-6"
+            src="https://www.svgrepo.com/show/448224/facebook.svg"
+            alt=""
+          />
+        </button>
+      </div>
+      <div>
+        <button
+          class="w-full flex items-center justify-center px-8 py-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
+          @click="githubLogin"
+        >
+          <img
+            class="h-6 w-6"
+            src="https://www.svgrepo.com/show/512317/github-142.svg"
+            alt=""
+          />
+        </button>
+      </div>
+      <div>
+        <button
+          class="w-full flex items-center justify-center px-8 py-3 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
+          @click="googleLogin"
+        >
+          <img
+            class="h-6 w-6"
+            src="https://www.svgrepo.com/show/475656/google-color.svg"
+            alt=""
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapMutations } from "vuex";
+
+export default {
+  methods: {
+    ...mapMutations({
+      setLoginType: "setting/SET_LOGIN_TYPE",
+    }),
+    googleLogin() {
+      this.setLoginType("google");
+      this.$auth.loginWith("google", {
+        params: { prompt: "select_account" },
+      });
+    },
+    githubLogin() {
+      this.setLoginType("github");
+      this.$auth.loginWith("github");
+    },
+    facebookLogin() {
+      this.setLoginType("facebook");
+      this.$auth.loginWith("facebook");
+    },
+  },
+};
+</script>

components/modals/integration-info.vue

@@ -0,0 +1,91 @@
+<template>
+  <ModalTemplate id="integration-info">
+    <template #content>
+      <label
+        for="integration-info"
+        class="btn btn-sm btn-circle absolute right-2 top-2"
+        >✕</label
+      >
+      <div class="flex space-x-4">
+        <img
+          class="h-7 w-7"
+          :src="
+            getCurrent.provider === 'GOOGLE'
+              ? 'https://www.svgrepo.com/show/475656/google-color.svg'
+              : getCurrent.provider === 'FACEBOOK'
+              ? 'https://www.svgrepo.com/show/448224/facebook.svg'
+              : 'https://www.svgrepo.com/show/512317/github-142.svg'
+          "
+          alt=""
+        />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 48 48"
+        >
+          <title>app-store</title>
+          <g>
+            <rect
+              x="3"
+              y="3"
+              width="17"
+              height="17"
+              rx="3"
+              fill="#6cc4f5"
+            ></rect>
+            <path
+              d="M46.138,9.419,38.581,1.862a2.945,2.945,0,0,0-4.162,0L26.862,9.419a2.943,2.943,0,0,0,0,4.162l7.557,7.557a2.948,2.948,0,0,0,4.162,0l7.557-7.557a2.943,2.943,0,0,0,0-4.162Z"
+              fill="#c456eb"
+            ></path>
+            <rect
+              x="28"
+              y="28"
+              width="17"
+              height="17"
+              rx="3"
+              fill="#6cc4f5"
+            ></rect>
+            <rect
+              x="3"
+              y="28"
+              width="17"
+              height="17"
+              rx="3"
+              fill="#6cc4f5"
+            ></rect>
+          </g>
+        </svg>
+        <h3 class="text-lg font-bold">
+          {{ $t("integration") }}
+        </h3>
+      </div>
+      <p class="py-4 leading-loose text-sm text-center">
+        {{ getCurrent.provider }}
+        {{ $t("integration_description") }}
+      </p>
+      <p class="leading-loose text-sm text-center">
+        {{ $moment(getCurrent.createdDate).format("ll") }}
+      </p>
+      <div class="flex flex-row space-x-2 justify-center">
+        <label for="integration-info">
+          <ShadowButton text="acceptAll" color="bg-green-600" />
+        </label>
+      </div>
+    </template>
+  </ModalTemplate>
+</template>
+<script>
+import ModalTemplate from "@/components/modals/modal-template.vue";
+import ShadowButton from "@/components/buttons/shadow-button.vue";
+import { mapGetters } from "vuex";
+
+export default {
+  components: { ShadowButton, ModalTemplate },
+  computed: {
+    ...mapGetters({
+      getCurrent: "integration/getCurrent",
+    }),
+  },
+};
+</script>

components/modals/login-modal.vue

@@ -55,6 +55,7 @@
             </div>
           </form>
         </ValidationObserver>
+        <SocialSign />
         <label @click="close">
           <TosRemind />
         </label>
@@ -95,8 +96,11 @@ import GeneralLoading from "~/components/loadings/general-loading";
 import { ValidationObserver } from "vee-validate";
 import BasicInput from "~/components/inputs/basic-input";
 import { mapGetters } from "vuex";
+import SocialSign from "~/components/commons/social-sign.vue";
+
 export default {
   components: {
+    SocialSign,
     BasicInput,
     ValidationObserver,
     GeneralLoading,

components/modals/user-registration-modal.vue

@@ -72,6 +72,7 @@
               <ShadowButton text="sign_up" color="bg-green-700" />
             </button>
           </div>
+          <SocialSign />
           <label @click="close">
             <TosRemind />
           </label>
@@ -96,7 +97,8 @@
       </div>
       <div v-if="submitted" class="flex flex-row mx-auto py-24">
         <p class="text-center leading-relaxed items-center">
-          <DoneIcon class="inline" /> {{ $t("registration_done") }}<br />
+          <DoneIcon class="inline" />
+          {{ $t("registration_done") }}<br />
           {{ $t("please_check_email_inbox") }}
         </p>
       </div>
@@ -111,8 +113,11 @@ import TosRemind from "~/components/commons/tos-remind";
 import { ValidationObserver } from "vee-validate";
 import BasicInput from "~/components/inputs/basic-input";
 import GeneralContentLoading from "~/components/loadings/general-content-loading";
+import SocialSign from "@/components/commons/social-sign.vue";
+
 export default {
   components: {
+    SocialSign,
     GeneralContentLoading,
     BasicInput,
     ValidationObserver,

layouts/default.vue

@@ -17,6 +17,7 @@
     <PurchaseModal />
     <UserRegistrationModal v-if="isGeeTestLoaded" />
     <ForgotPasswordModal v-if="isGeeTestLoaded" />
+    <IntegrationInfo />
     <Footer />
   </div>
 </template>
@@ -31,9 +32,11 @@ import ForgotPasswordModal from "../components/modals/forgot-password-modal";
 import PurchaseModal from "../components/modals/purchase-modal";
 import { mapGetters } from "vuex";
 import VerifyEmail from "@/components/announcements/verify-email";
+import IntegrationInfo from "@/components/modals/integration-info.vue";
 
 export default {
   components: {
+    IntegrationInfo,
     VerifyEmail,
     PurchaseModal,
     ForgotPasswordModal,

locales/en-US.js

@@ -1,4 +1,5 @@
 import en from "vee-validate/dist/locale/en.json";
+
 const messages = {
   name: "Name",
   firstname: "First name",
@@ -136,6 +137,16 @@ const messages = {
     "Your email is not verified! Please go to your email inbox or check in Spam folder to verify",
   thanks_for_purchase: "Thanks For Your Purchase",
   purchase_confirmation_done: "Purchase is Confirmed",
+  or_sign_in_with: "or sign in with",
+  continue_with: "Continue with",
+  hey: "Hey",
+  we_found_that_your_email: "We found that your email address",
+  already_registered_using: "is already registered using",
+  please_sign_using: "Please sign in using",
+  then_you_can_link: "then you can link to account with other social services.",
+  integration: "Integration",
+  integration_description:
+    "account was integrated and can be used for Single Sign-On",
   fields: {
     firstname: "Firstname",
     lastname: "Lastname",

locales/kh-KH.js

@@ -1,4 +1,5 @@
 import kh from "../static/json/kh.json";
+
 const messages = {
   name: "ឈ្មោះ",
   firstname: "ឈ្មោះ",
@@ -138,6 +139,17 @@ const messages = {
     "អ៊ីមែលរបស់អ្នកមិនត្រូវបានផ្ទៀងផ្ទាត់ទេ! សូមចូលទៅកាន់ប្រអប់សំបុត្រអ៊ីមែលរបស់អ្នក ឬពិនិត្យមើលក្នុងថតសារ Spam ដើម្បីផ្ទៀងផ្ទាត់",
   thanks_for_purchase: "សូមអរគុណសំរាប់ការជាវ",
   purchase_confirmation_done: "ការបញ្ជាក់រួចរាល់",
+  or_sign_in_with: "រឺ ចូលជាមួយ",
+  continue_with: "បន្តជាមួយ",
+  hey: "សួស្តី",
+  we_found_that_your_email: "យើងរកឃើញថាអ៉ីមែលរបស់អ្នក",
+  already_registered_using: "ត្រូវបានយកទៅចុះឈ្មោះម្តងហើយដោយប្រើ",
+  please_sign_using: "សូមចូលដោយប្រើ",
+  then_you_can_link:
+    "បន្ទាប់មកអ្នកអាចភ្ជាប់គណនីរបស់អ្នកទៅកាន់សេវាផ្សេងៗទៀតតាមក្រោយ។",
+  integration: "ការភ្ជាប់ជាមួយបណ្តាញផ្សេងៗ",
+  integration_description:
+    "ត្រូវបានភ្ជាប់ដើម្បីចូលគណនីនេះដោយមិនបាច់ប្រើប្រាស់លេខសំងាត់",
   fields: {
     firstname: "ឈ្មោះ",
     lastname: "ត្រកូល",