feat: ability to conditionally enable auth providers in dashboard (#3225)
This commit is contained in:
Joel Jacob Stephen
committed by
GitHub
GitHub
parent
2d6282cf8b
commit
74ad2e43a4
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" data-font-size="large">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
"viewer": "VIEWER"
|
||||
},
|
||||
"state": {
|
||||
"and": "and",
|
||||
"add_user_failure": "Failed to add user to the team!!",
|
||||
"add_user_success": "User is now a member of the team!!",
|
||||
"admin_failure": "Failed to make user an admin!!",
|
||||
@@ -27,20 +28,32 @@
|
||||
"confirm_logout": "Confirm Logout",
|
||||
"create_team_failure": "Failed to create team!!",
|
||||
"create_team_success": "Team created successfully!!",
|
||||
"configure_auth": "Check out the documentation to configure auth providers.",
|
||||
"delete_team_failure": "Team deletion failed!!",
|
||||
"delete_team_success": "Team deleted successfully!!",
|
||||
"delete_user_failure": "User deletion failed!!",
|
||||
"delete_user_success": "User deleted successfully!!",
|
||||
"email":"Email",
|
||||
"email_failure": "Failed to send invitation",
|
||||
"email_success": "Email invitation sent successfully",
|
||||
"enter_team_email": "Please enter email of team owner!!",
|
||||
"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",
|
||||
"google_signin_failure": "Failed to login with Google",
|
||||
"invalid_email": "Please enter a valid email address",
|
||||
"login_as_admin":"and login with an admin account.",
|
||||
"logged_out": "Logged out",
|
||||
"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_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_success": "Admin status removed!!",
|
||||
"remove_admin_to_delete_user": "Remove admin privilege to delete the user!!",
|
||||
@@ -50,8 +63,14 @@
|
||||
"remove_member_success": "Member removed successfully!!",
|
||||
"rename_team_failure": "Failed to rename team!!",
|
||||
"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_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!!",
|
||||
"user_not_found": "User not found in the infra!!"
|
||||
},
|
||||
|
||||
69
packages/hoppscotch-sh-admin/src/components.d.ts
vendored
69
packages/hoppscotch-sh-admin/src/components.d.ts
vendored
@@ -1,44 +1,43 @@
|
||||
// generated by unplugin-vue-components
|
||||
// We suggest you to commit this file into source control
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
import '@vue/runtime-core'
|
||||
import '@vue/runtime-core';
|
||||
|
||||
export {}
|
||||
export {};
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
export interface GlobalComponents {
|
||||
AppHeader: typeof import('./components/app/Header.vue')['default']
|
||||
AppLogin: typeof import('./components/app/Login.vue')['default']
|
||||
AppLogout: typeof import('./components/app/Logout.vue')['default']
|
||||
AppModal: typeof import('./components/app/Modal.vue')['default']
|
||||
AppSidebar: typeof import('./components/app/Sidebar.vue')['default']
|
||||
AppToast: typeof import('./components/app/Toast.vue')['default']
|
||||
DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default']
|
||||
HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
|
||||
HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
|
||||
HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
|
||||
HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
|
||||
HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
|
||||
HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']
|
||||
HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
|
||||
HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
|
||||
HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
|
||||
HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
|
||||
HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
|
||||
IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
|
||||
IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
|
||||
IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
|
||||
IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
|
||||
IconLucideUser: typeof import('~icons/lucide/user')['default']
|
||||
TeamsAdd: typeof import('./components/teams/Add.vue')['default']
|
||||
TeamsDetails: typeof import('./components/teams/Details.vue')['default']
|
||||
TeamsInvite: typeof import('./components/teams/Invite.vue')['default']
|
||||
TeamsMembers: typeof import('./components/teams/Members.vue')['default']
|
||||
TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default']
|
||||
TeamsTable: typeof import('./components/teams/Table.vue')['default']
|
||||
Tippy: typeof import('vue-tippy')['Tippy']
|
||||
UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default']
|
||||
UsersTable: typeof import('./components/users/Table.vue')['default']
|
||||
AppHeader: typeof import('./components/app/Header.vue')['default'];
|
||||
AppLogin: typeof import('./components/app/Login.vue')['default'];
|
||||
AppLogout: typeof import('./components/app/Logout.vue')['default'];
|
||||
AppModal: typeof import('./components/app/Modal.vue')['default'];
|
||||
AppSidebar: typeof import('./components/app/Sidebar.vue')['default'];
|
||||
AppToast: typeof import('./components/app/Toast.vue')['default'];
|
||||
DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default'];
|
||||
HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary'];
|
||||
HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary'];
|
||||
HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor'];
|
||||
HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete'];
|
||||
HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal'];
|
||||
HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput'];
|
||||
HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem'];
|
||||
HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal'];
|
||||
HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture'];
|
||||
HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner'];
|
||||
HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab'];
|
||||
IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default'];
|
||||
IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default'];
|
||||
IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default'];
|
||||
IconLucideInbox: typeof import('~icons/lucide/inbox')['default'];
|
||||
IconLucideUser: typeof import('~icons/lucide/user')['default'];
|
||||
TeamsAdd: typeof import('./components/teams/Add.vue')['default'];
|
||||
TeamsDetails: typeof import('./components/teams/Details.vue')['default'];
|
||||
TeamsInvite: typeof import('./components/teams/Invite.vue')['default'];
|
||||
TeamsMembers: typeof import('./components/teams/Members.vue')['default'];
|
||||
TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default'];
|
||||
TeamsTable: typeof import('./components/teams/Table.vue')['default'];
|
||||
Tippy: typeof import('vue-tippy')['Tippy'];
|
||||
UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default'];
|
||||
UsersTable: typeof import('./components/users/Table.vue')['default'];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,43 +1,50 @@
|
||||
<template>
|
||||
<div v-if="nonAdminUser" class="text-center">
|
||||
Logged in as non admin user. Please
|
||||
<span @click="logout()" class="text-red-500 cursor-pointer underline"
|
||||
>sign out</span
|
||||
>
|
||||
and login with an admin account.
|
||||
{{ t('state.non_admin_logged_in') }}
|
||||
<span @click="logout()" class="text-red-500 cursor-pointer underline">{{
|
||||
t('state.sign_out')
|
||||
}}</span>
|
||||
{{ t('state.login_as_admin') }}
|
||||
</div>
|
||||
<div v-else class="flex flex-1 flex-col">
|
||||
<div
|
||||
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
|
||||
v-if="allowedAuthProviders.includes('GITHUB')"
|
||||
:loading="signingInWithGitHub"
|
||||
:icon="IconGithub"
|
||||
:label="`Continue with GitHub`"
|
||||
:label="t('state.continue_github')"
|
||||
class="!items-center"
|
||||
@click="signInWithGithub"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
v-if="allowedAuthProviders.includes('GOOGLE')"
|
||||
:loading="signingInWithGoogle"
|
||||
:icon="IconGoogle"
|
||||
:label="`Continue with Google`"
|
||||
:label="t('state.continue_google')"
|
||||
@click="signInWithGoogle"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
v-if="allowedAuthProviders.includes('MICROSOFT')"
|
||||
:loading="signingInWithMicrosoft"
|
||||
:icon="IconMicrosoft"
|
||||
:label="`Continue with Microsoft`"
|
||||
:label="t('state.continue_microsoft')"
|
||||
@click="signInWithMicrosoft"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
v-if="allowedAuthProviders.includes('EMAIL')"
|
||||
:icon="IconEmail"
|
||||
:label="`Continue with Email`"
|
||||
:label="t('state.continue_email')"
|
||||
@click="mode = 'email'"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
v-if="mode === 'email'"
|
||||
v-if="mode === 'email' && allowedAuthProviders"
|
||||
class="flex flex-col space-y-4"
|
||||
@submit.prevent="signInWithEmail"
|
||||
>
|
||||
@@ -52,18 +59,35 @@
|
||||
<HoppButtonPrimary
|
||||
:loading="signingInWithEmail"
|
||||
type="submit"
|
||||
:label="`Send magic link`"
|
||||
:label="t('state.send_magic_link')"
|
||||
/>
|
||||
</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 class="flex flex-col items-center justify-center max-w-md">
|
||||
<icon-lucide-inbox class="w-6 h-6 text-accent" />
|
||||
<h3 class="my-2 text-lg text-center">
|
||||
We sent a magic link to {{ form.email }}
|
||||
{{ t('state.magic_link_success') }} {{ form.email }}
|
||||
</h3>
|
||||
<p class="text-center">
|
||||
We sent a magic link to {{ form.email }}. Click on the link to sign
|
||||
in.
|
||||
{{ t('state.magic_link_success') }} {{ form.email }}.
|
||||
{{ t('state.magic_link_sign_in') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -71,27 +95,32 @@
|
||||
|
||||
<section class="mt-15">
|
||||
<div
|
||||
v-if="mode === 'sign-in' && tosLink && privacyPolicyLink"
|
||||
v-if="
|
||||
mode === 'sign-in' &&
|
||||
tosLink &&
|
||||
privacyPolicyLink &&
|
||||
allowedAuthProviders
|
||||
"
|
||||
class="text-secondaryLight text-tiny"
|
||||
>
|
||||
By signing in, you are agreeing to our
|
||||
{{ t('state.sign_in_agreement') }}
|
||||
<HoppSmartAnchor
|
||||
class="link"
|
||||
:to="tosLink"
|
||||
blank
|
||||
label="Terms of Service"
|
||||
/>
|
||||
and
|
||||
{{ t('state.and') }}
|
||||
<HoppSmartAnchor
|
||||
class="link"
|
||||
:to="privacyPolicyLink"
|
||||
blank
|
||||
label="Privacy Policy"
|
||||
:label="t('state.privacy_policy')"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="mode === 'email'">
|
||||
<HoppButtonSecondary
|
||||
:label="'All sign in option'"
|
||||
:label="t('state.sign_in_options')"
|
||||
:icon="IconArrowLeft"
|
||||
class="!p-0"
|
||||
@click="mode = 'sign-in'"
|
||||
@@ -103,7 +132,7 @@
|
||||
>
|
||||
<HoppSmartAnchor
|
||||
class="link"
|
||||
:label="'Re enter email'"
|
||||
:label="t('state.reenter_email')"
|
||||
:icon="IconArrowLeft"
|
||||
@click="mode = 'email'"
|
||||
/>
|
||||
@@ -119,20 +148,22 @@ import IconGoogle from '~icons/auth/google';
|
||||
import IconEmail from '~icons/auth/email';
|
||||
import IconMicrosoft from '~icons/auth/microsoft';
|
||||
import IconArrowLeft from '~icons/lucide/arrow-left';
|
||||
import IconFileText from '~icons/lucide/file-text';
|
||||
import { setLocalConfig } from '~/helpers/localpersistence';
|
||||
import { useStreamSubscriber } from '~/composables/stream';
|
||||
import { useToast } from '~/composables/toast';
|
||||
import { auth } from '~/helpers/auth';
|
||||
import { HoppButtonPrimary, HoppButtonSecondary } from '@hoppscotch/ui';
|
||||
import { useI18n } from '~/composables/i18n';
|
||||
|
||||
const t = useI18n();
|
||||
|
||||
const { subscribeToStream } = useStreamSubscriber();
|
||||
|
||||
const t = useI18n();
|
||||
const toast = useToast();
|
||||
|
||||
const tosLink = import.meta.env.VITE_APP_TOS_LINK;
|
||||
const privacyPolicyLink = import.meta.env.VITE_APP_PRIVACY_POLICY_LINK;
|
||||
const allowedAuthProviders = import.meta.env.VITE_ALLOWED_AUTH_PROVIDERS;
|
||||
|
||||
// DATA
|
||||
|
||||
|
||||
Reference in New Issue
Block a user