btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

feat: ability to conditionally enable auth providers in dashboard (#3225)

Browse Source
This commit is contained in:
Joel Jacob Stephen
2023-08-17 21:53:34 +05:30
committed by GitHub
parent 2d6282cf8b
commit 74ad2e43a4
4 changed files with 108 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/hoppscotch-sh-admin/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-font-size="large">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">

19
packages/hoppscotch-sh-admin/locales/en.json
View File

@@ -20,6 +20,7 @@
"viewer": "VIEWER" "viewer": "VIEWER"
}, },
"state": { "state": {
"and": "and",
"add_user_failure": "Failed to add user to the team!!", "add_user_failure": "Failed to add user to the team!!",
"add_user_success": "User is now a member of the team!!", "add_user_success": "User is now a member of the team!!",
"admin_failure": "Failed to make user an admin!!", "admin_failure": "Failed to make user an admin!!",
@@ -27,20 +28,32 @@
"confirm_logout": "Confirm Logout", "confirm_logout": "Confirm Logout",
"create_team_failure": "Failed to create team!!", "create_team_failure": "Failed to create team!!",
"create_team_success": "Team created successfully!!", "create_team_success": "Team created successfully!!",
"configure_auth": "Check out the documentation to configure auth providers.",
"delete_team_failure": "Team deletion failed!!", "delete_team_failure": "Team deletion failed!!",
"delete_team_success": "Team deleted successfully!!", "delete_team_success": "Team deleted successfully!!",
"delete_user_failure": "User deletion failed!!", "delete_user_failure": "User deletion failed!!",
"delete_user_success": "User deleted successfully!!", "delete_user_success": "User deleted successfully!!",
"email":"Email",
"email_failure": "Failed to send invitation", "email_failure": "Failed to send invitation",
"email_success": "Email invitation sent successfully", "email_success": "Email invitation sent successfully",
"enter_team_email": "Please enter email of team owner!!", "enter_team_email": "Please enter email of team owner!!",
"error": "Something went wrong", "error": "Something went wrong",
"continue_github": "Continue with Github",
"continue_google": "Continue with Google",
"continue_microsoft": "Continue with Microsoft",
"continue_email": "Continue with Email",
"github_signin_failure": "Failed to login with Github", "github_signin_failure": "Failed to login with Github",
"google_signin_failure": "Failed to login with Google", "google_signin_failure": "Failed to login with Google",
"invalid_email": "Please enter a valid email address", "invalid_email": "Please enter a valid email address",
"login_as_admin":"and login with an admin account.",
"logged_out": "Logged out", "logged_out": "Logged out",
"logout": "Logout", "logout": "Logout",
"magic_link_success": "We sent a magic link to",
"magic_link_sign_in":"Click on the link to sign in.",
"non_admin_login": "You are logged in. But you're not an admin", "non_admin_login": "You are logged in. But you're not an admin",
"non_admin_logged_in": "Logged in as non admin user.",
"privacy_policy": "Privacy Policy",
"reenter_email":"Re-enter email",
"remove_admin_failure": "Failed to remove admin status!!", "remove_admin_failure": "Failed to remove admin status!!",
"remove_admin_success": "Admin status removed!!", "remove_admin_success": "Admin status removed!!",
"remove_admin_to_delete_user": "Remove admin privilege to delete the user!!", "remove_admin_to_delete_user": "Remove admin privilege to delete the user!!",
@@ -50,8 +63,14 @@
"remove_member_success": "Member removed successfully!!", "remove_member_success": "Member removed successfully!!",
"rename_team_failure": "Failed to rename team!!", "rename_team_failure": "Failed to rename team!!",
"rename_team_success": "Team renamed successfully!", "rename_team_success": "Team renamed successfully!",
"require_auth_provider": "You need to set atleast one authentication provider to log in.",
"role_update_failed": "Roles updation has failed!!", "role_update_failed": "Roles updation has failed!!",
"role_update_success": "Roles updated successfully!!", "role_update_success": "Roles updated successfully!!",
"send_magic_link": "Send magic link",
"sign_in_agreement": "By signing in, you are agreeing to our",
"sign_in_options": "All sign in option",
"sign_out": "sign out",
"self_host_docs": "Self Host Documentation",
"team_name_long": "Team name should be atleast 6 characters long!!", "team_name_long": "Team name should be atleast 6 characters long!!",
"user_not_found": "User not found in the infra!!" "user_not_found": "User not found in the infra!!"
}, },

69
packages/hoppscotch-sh-admin/src/components.d.ts vendored
View File

@@ -1,44 +1,43 @@
// generated by unplugin-vue-components // generated by unplugin-vue-components
// We suggest you to commit this file into source control // We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/core/pull/3399 // Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core' import '@vue/runtime-core';
export {} export {};
declare module '@vue/runtime-core' { declare module '@vue/runtime-core' {
export interface GlobalComponents { export interface GlobalComponents {
AppHeader: typeof import('./components/app/Header.vue')['default'] AppHeader: typeof import('./components/app/Header.vue')['default'];
AppLogin: typeof import('./components/app/Login.vue')['default'] AppLogin: typeof import('./components/app/Login.vue')['default'];
AppLogout: typeof import('./components/app/Logout.vue')['default'] AppLogout: typeof import('./components/app/Logout.vue')['default'];
AppModal: typeof import('./components/app/Modal.vue')['default'] AppModal: typeof import('./components/app/Modal.vue')['default'];
AppSidebar: typeof import('./components/app/Sidebar.vue')['default'] AppSidebar: typeof import('./components/app/Sidebar.vue')['default'];
AppToast: typeof import('./components/app/Toast.vue')['default'] AppToast: typeof import('./components/app/Toast.vue')['default'];
DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default'] DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default'];
HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary'] HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary'];
HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary'] HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary'];
HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor'] HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor'];
HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete'] HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete'];
HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal'] HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal'];
HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput'] HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput'];
HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem'] HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem'];
HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal'] HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal'];
HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture'] HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture'];
HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner'] HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner'];
HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab'] HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab'];
IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default'] IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default'];
IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default'] IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default'];
IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default'] IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default'];
IconLucideInbox: typeof import('~icons/lucide/inbox')['default'] IconLucideInbox: typeof import('~icons/lucide/inbox')['default'];
IconLucideUser: typeof import('~icons/lucide/user')['default'] IconLucideUser: typeof import('~icons/lucide/user')['default'];
TeamsAdd: typeof import('./components/teams/Add.vue')['default'] TeamsAdd: typeof import('./components/teams/Add.vue')['default'];
TeamsDetails: typeof import('./components/teams/Details.vue')['default'] TeamsDetails: typeof import('./components/teams/Details.vue')['default'];
TeamsInvite: typeof import('./components/teams/Invite.vue')['default'] TeamsInvite: typeof import('./components/teams/Invite.vue')['default'];
TeamsMembers: typeof import('./components/teams/Members.vue')['default'] TeamsMembers: typeof import('./components/teams/Members.vue')['default'];
TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default'] TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default'];
TeamsTable: typeof import('./components/teams/Table.vue')['default'] TeamsTable: typeof import('./components/teams/Table.vue')['default'];
Tippy: typeof import('vue-tippy')['Tippy'] Tippy: typeof import('vue-tippy')['Tippy'];
UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default'] UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default'];
UsersTable: typeof import('./components/users/Table.vue')['default'] UsersTable: typeof import('./components/users/Table.vue')['default'];
} }
} }

77
packages/hoppscotch-sh-admin/src/components/app/Login.vue
View File

@@ -1,43 +1,50 @@
<template> <template>
<div v-if="nonAdminUser" class="text-center"> <div v-if="nonAdminUser" class="text-center">
Logged in as non admin user. Please {{ t('state.non_admin_logged_in') }}
<span @click="logout()" class="text-red-500 cursor-pointer underline" <span @click="logout()" class="text-red-500 cursor-pointer underline">{{
>sign out</span t('state.sign_out')
> }}</span>
and login with an admin account. {{ t('state.login_as_admin') }}
</div> </div>
<div v-else class="flex flex-1 flex-col"> <div v-else class="flex flex-1 flex-col">
<div <div
class="p-6 bg-primaryLight rounded-lg border border-primaryDark shadow" class="p-6 bg-primaryLight rounded-lg border border-primaryDark shadow"
> >
<div v-if="mode === 'sign-in'" class="flex flex-col space-y-2"> <div
v-if="mode === 'sign-in' && allowedAuthProviders"
class="flex flex-col space-y-2"
>
<HoppSmartItem <HoppSmartItem
v-if="allowedAuthProviders.includes('GITHUB')"
:loading="signingInWithGitHub" :loading="signingInWithGitHub"
:icon="IconGithub" :icon="IconGithub"
:label="`Continue with GitHub`" :label="t('state.continue_github')"
class="!items-center" class="!items-center"
@click="signInWithGithub" @click="signInWithGithub"
/> />
<HoppSmartItem <HoppSmartItem
v-if="allowedAuthProviders.includes('GOOGLE')"
:loading="signingInWithGoogle" :loading="signingInWithGoogle"
:icon="IconGoogle" :icon="IconGoogle"
:label="`Continue with Google`" :label="t('state.continue_google')"
@click="signInWithGoogle" @click="signInWithGoogle"
/> />
<HoppSmartItem <HoppSmartItem
v-if="allowedAuthProviders.includes('MICROSOFT')"
:loading="signingInWithMicrosoft" :loading="signingInWithMicrosoft"
:icon="IconMicrosoft" :icon="IconMicrosoft"
:label="`Continue with Microsoft`" :label="t('state.continue_microsoft')"
@click="signInWithMicrosoft" @click="signInWithMicrosoft"
/> />
<HoppSmartItem <HoppSmartItem
v-if="allowedAuthProviders.includes('EMAIL')"
:icon="IconEmail" :icon="IconEmail"
:label="`Continue with Email`" :label="t('state.continue_email')"
@click="mode = 'email'" @click="mode = 'email'"
/> />
</div> </div>
<form <form
v-if="mode === 'email'" v-if="mode === 'email' && allowedAuthProviders"
class="flex flex-col space-y-4" class="flex flex-col space-y-4"
@submit.prevent="signInWithEmail" @submit.prevent="signInWithEmail"
> >
@@ -52,18 +59,35 @@
<HoppButtonPrimary <HoppButtonPrimary
:loading="signingInWithEmail" :loading="signingInWithEmail"
type="submit" type="submit"
:label="`Send magic link`" :label="t('state.send_magic_link')"
/> />
</form> </form>
<div v-if="!allowedAuthProviders">
<p>{{ t('state.require_auth_provider') }}</p>
<p>{{ t('state.configure_auth') }}</p>
<div class="mt-5">
<a
href="https://docs.hoppscotch.io/documentation/self-host/getting-started"
>
<HoppButtonSecondary
outline
filled
blank
:icon="IconFileText"
:label="t('state.self_host_docs')"
/>
</a>
</div>
</div>
<div v-if="mode === 'email-sent'" class="flex flex-col px-4"> <div v-if="mode === 'email-sent'" class="flex flex-col px-4">
<div class="flex flex-col items-center justify-center max-w-md"> <div class="flex flex-col items-center justify-center max-w-md">
<icon-lucide-inbox class="w-6 h-6 text-accent" /> <icon-lucide-inbox class="w-6 h-6 text-accent" />
<h3 class="my-2 text-lg text-center"> <h3 class="my-2 text-lg text-center">
We sent a magic link to {{ form.email }} {{ t('state.magic_link_success') }} {{ form.email }}
</h3> </h3>
<p class="text-center"> <p class="text-center">
We sent a magic link to {{ form.email }}. Click on the link to sign {{ t('state.magic_link_success') }} {{ form.email }}.
in. {{ t('state.magic_link_sign_in') }}
</p> </p>
</div> </div>
</div> </div>
@@ -71,27 +95,32 @@
<section class="mt-15"> <section class="mt-15">
<div <div
v-if="mode === 'sign-in' && tosLink && privacyPolicyLink" v-if="
mode === 'sign-in' &&
tosLink &&
privacyPolicyLink &&
allowedAuthProviders
"
class="text-secondaryLight text-tiny" class="text-secondaryLight text-tiny"
> >
By signing in, you are agreeing to our {{ t('state.sign_in_agreement') }}
<HoppSmartAnchor <HoppSmartAnchor
class="link" class="link"
:to="tosLink" :to="tosLink"
blank blank
label="Terms of Service" label="Terms of Service"
/> />
and {{ t('state.and') }}
<HoppSmartAnchor <HoppSmartAnchor
class="link" class="link"
:to="privacyPolicyLink" :to="privacyPolicyLink"
blank blank
label="Privacy Policy" :label="t('state.privacy_policy')"
/> />
</div> </div>
<div v-if="mode === 'email'"> <div v-if="mode === 'email'">
<HoppButtonSecondary <HoppButtonSecondary
:label="'All sign in option'" :label="t('state.sign_in_options')"
:icon="IconArrowLeft" :icon="IconArrowLeft"
class="!p-0" class="!p-0"
@click="mode = 'sign-in'" @click="mode = 'sign-in'"
@@ -103,7 +132,7 @@
> >
<HoppSmartAnchor <HoppSmartAnchor
class="link" class="link"
:label="'Re enter email'" :label="t('state.reenter_email')"
:icon="IconArrowLeft" :icon="IconArrowLeft"
@click="mode = 'email'" @click="mode = 'email'"
/> />
@@ -119,20 +148,22 @@ import IconGoogle from '~icons/auth/google';
import IconEmail from '~icons/auth/email'; import IconEmail from '~icons/auth/email';
import IconMicrosoft from '~icons/auth/microsoft'; import IconMicrosoft from '~icons/auth/microsoft';
import IconArrowLeft from '~icons/lucide/arrow-left'; import IconArrowLeft from '~icons/lucide/arrow-left';
import IconFileText from '~icons/lucide/file-text';
import { setLocalConfig } from '~/helpers/localpersistence'; import { setLocalConfig } from '~/helpers/localpersistence';
import { useStreamSubscriber } from '~/composables/stream'; import { useStreamSubscriber } from '~/composables/stream';
import { useToast } from '~/composables/toast'; import { useToast } from '~/composables/toast';
import { auth } from '~/helpers/auth'; import { auth } from '~/helpers/auth';
import { HoppButtonPrimary, HoppButtonSecondary } from '@hoppscotch/ui';
import { useI18n } from '~/composables/i18n'; import { useI18n } from '~/composables/i18n';
const t = useI18n();
const { subscribeToStream } = useStreamSubscriber(); const { subscribeToStream } = useStreamSubscriber();
const t = useI18n();
const toast = useToast(); const toast = useToast();
const tosLink = import.meta.env.VITE_APP_TOS_LINK; const tosLink = import.meta.env.VITE_APP_TOS_LINK;
const privacyPolicyLink = import.meta.env.VITE_APP_PRIVACY_POLICY_LINK; const privacyPolicyLink = import.meta.env.VITE_APP_PRIVACY_POLICY_LINK;
const allowedAuthProviders = import.meta.env.VITE_ALLOWED_AUTH_PROVIDERS;
// DATA // DATA