diff options
Diffstat (limited to 'front-end/src/views/Login/social')
-rw-r--r-- | front-end/src/views/Login/social/[type].vue | 127 |
1 files changed, 127 insertions, 0 deletions
diff --git a/front-end/src/views/Login/social/[type].vue b/front-end/src/views/Login/social/[type].vue new file mode 100644 index 0000000..5a803bd --- /dev/null +++ b/front-end/src/views/Login/social/[type].vue @@ -0,0 +1,127 @@ +<template> + <div id="social-login-template" class="app-component-entry"> + <div class="container flex flex-col m-auto my-16"> + <div id="social-final-template" class="flex justify-center"> + <div class="entry-container"> + <h3>Finalizing login</h3> + <div class="mt-6 mb-4"> + <div v-if="message?.length > 0" class="text-lg text-red-500 dark:text-rose-500"> + <p>{{ message }}</p> + <div class="flex justify-center mt-5"> + <router-link to="/login"> + <button type="submit" class="btn primary" :disabled="waiting"> + <fa-icon icon="sign-in-alt" /> + Try again + </button> + </router-link> + </div> + </div> + <div v-else> + <div class="flex justify-center"> + <div class="m-auto"> + <fa-icon class="animate-spin" icon="spinner" size="2x"/> + </div> + </div> + <p>Please wait while we log you in.</p> + </div> + </div> + </div> + </div> + </div> + </div> +</template> + +<script setup lang="ts"> +import { isEqual } from 'lodash' +import { useRouteParams, useRouteQuery } from '@vueuse/router' +import { useSession, useWait, useUser, useTitle, configureApiCall } from '@vnuge/vnlib.browser' +import { useRouter } from 'vue-router'; +import { ref } from 'vue' + +useTitle('Social Login') + +const { loggedIn } = useSession() +const { prepareLogin } = useUser() +const { waiting } = useWait() + +const type = useRouteParams('type') +const result = useRouteQuery('result', ''); +const nonce = useRouteQuery('nonce', ''); +const router = useRouter() + +const message = ref('') + +//Override the message handler to capture the error message and display it +const { apiCall } = configureApiCall(m => message.value = m) + +//If logged-in redirect to login page +if (loggedIn.value) { + router.push({ name: 'Login' }) +} + + +const run = async () => { + if (isEqual(result.value, 'authorized')) { + + let loginUrl : string = '' + + switch (type.value) { + case 'github': + loginUrl = '/login/social/github'; + break; + case 'discord': + loginUrl = '/login/social/discord'; + break; + case 'auth0': + loginUrl = '/login/social/auth0'; + break; + default: + router.push('/login') + break; + } + + // If nonce is set, then we can proceed with finalization + await apiCall(async ({ axios }) => { + const preppedLogin = prepareLogin() + // Send the login request + const response = await axios.post(loginUrl, { nonce: nonce.value }) + if (response.data.success === true) { + // Finalize the login + await preppedLogin.finalize(response) + // If the login was successful, then we can redirect to the login page + router.push({ name: 'Login' }) + return + } + // Otherwise, we can show an error + throw { response } + }) + } else { + switch (result.value) { + case 'invalid': + message.value = 'The request was invalid, and you could not be logged in. Please try again.' + break + case 'expired': + message.value = 'The request has expired. Please try again.' + break + default: + message.value = 'There was an error processing the request. Please try again.' + break + } + } +} + +//Run without awaiting +run() + +</script> + +<style lang="scss"> + +#social-login-template{ + .entry-container{ + @apply w-full max-w-[28rem] p-6 text-center sm:border rounded-sm sm:shadow-sm; + @apply sm:bg-white bg-transparent sm:dark:bg-dark-700 dark:border-dark-400; + } +} + +</style> |