Skip to content

Commit 485ac8c

Browse files
joeljstephenjoeljstephen
authored
refactor(sh-admin): dashboard settings page redesign (hoppscotch#5014)
1 parent a208125 commit 485ac8c

File tree

7 files changed

+160
-43
lines changed

7 files changed

+160
-43
lines changed

‎packages/hoppscotch-sh-admin/locales/en.json‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,31 @@
1717
"open_navigation": "Open Navigation",
1818
"read_documentation": "Read Documentation"
1919
},
20+
"auth": {
21+
"email_auth": "Email Authentication",
22+
"email_auth_description": "Enable or disable email-based authentication for your users.",
23+
"email_auth_enabled": "Email authentication is enabled and ready to use.",
24+
"email_auth_smtp_note": "To use email-based authentication, you need to enable and configure SMTP in the SMTP tab first.",
25+
"enable_email_auth": "Enable Email Authentication",
26+
"smtp_required": "SMTP must be enabled and configured to use email based authentication."
27+
},
2028
"configs": {
2129
"auth_providers": {
30+
"auth_provider_config": "Authentication Configurations",
31+
"auth_provider_description": "Set up authentication methods for your Hoppscotch instance using OAuth or Email.",
2232
"callback_url": "CALLBACK URL",
2333
"client_id": "CLIENT ID",
2434
"client_secret": "CLIENT SECRET",
2535
"description": "Configure authentication providers for your server",
36+
"email": "Email",
37+
"github_enterprise": "Enable Github Enterprise",
38+
"oauth": "OAuth",
39+
"oauth_providers": "OAuth Providers",
2640
"provider_not_specified": "Please enable at least one authentication provider",
2741
"scope": "SCOPE",
42+
"sso": "SSO",
2843
"tenant": "TENANT",
29-
"title": "Authentication Providers",
44+
"title": "OAuth Providers",
3045
"update_failure": "Failed to update authentication provider configurations!!"
3146
},
3247
"confirm_changes": "Hoppscotch server must restart to reflect the new changes. Confirm changes made to the server configurations?",
@@ -83,6 +98,14 @@
8398
"title": "Server is restarting"
8499
},
85100
"save_changes": "Save Changes",
101+
"tabs": {
102+
"auth": "Authentication",
103+
"activity": "Activity",
104+
"infra_tokens": "Infra Tokens",
105+
"smtp": "SMTP",
106+
"miscellaneous": "Miscellaneous",
107+
"reset": "Reset Configurations"
108+
},
86109
"title": "Configurations",
87110
"update_failure": "Failed to update server configurations"
88111
},

‎packages/hoppscotch-sh-admin/src/components.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,13 @@ declare module 'vue' {
4242
IconLucideInfo: typeof import('~icons/lucide/info')['default']
4343
IconLucideSearch: typeof import('~icons/lucide/search')['default']
4444
IconLucideUser: typeof import('~icons/lucide/user')['default']
45+
SettingsAuthConfiguration: typeof import('./components/settings/AuthConfiguration.vue')['default']
46+
SettingsAuthConfigurations: typeof import('./components/settings/AuthConfigurations.vue')['default']
4547
SettingsAuthProvider: typeof import('./components/settings/AuthProvider.vue')['default']
4648
SettingsConfigurations: typeof import('./components/settings/Configurations.vue')['default']
4749
SettingsDataSharing: typeof import('./components/settings/DataSharing.vue')['default']
4850
SettingsHistoryConfiguration: typeof import('./components/settings/HistoryConfiguration.vue')['default']
51+
SettingsOAuthProviderConfigurations: typeof import('./components/settings/OAuthProviderConfigurations.vue')['default']
4952
SettingsReset: typeof import('./components/settings/Reset.vue')['default']
5053
SettingsServerRestart: typeof import('./components/settings/ServerRestart.vue')['default']
5154
SettingsSmtpConfiguration: typeof import('./components/settings/SmtpConfiguration.vue')['default']

‎packages/hoppscotch-sh-admin/src/components/settings/AuthConfigurations.vue‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<template>
2+
<div class="flex flex-col pt-8">
3+
<div class="px-4 mb-4">
4+
<h3 class="heading">
5+
{{ t('configs.auth_providers.auth_provider_config') }}
6+
</h3>
7+
<p class="my-1 text-secondaryLight">
8+
{{ t('configs.auth_providers.auth_provider_description') }}
9+
</p>
10+
</div>
11+
12+
<HoppSmartTabs v-model="selectedAuthSubTab" render-inactive-tabs>
13+
<HoppSmartTab
14+
id="auth-providers"
15+
:label="t('configs.auth_providers.oauth')"
16+
>
17+
<div class="pb-8 px-4">
18+
<SettingsOAuthProviderConfigurations
19+
v-model:config="workingConfigs"
20+
/>
21+
</div>
22+
</HoppSmartTab>
23+
24+
<HoppSmartTab id="email-auth" :label="t('configs.auth_providers.email')">
25+
<div class="pb-8 px-4 grid md:grid-cols-3 gap-4 md:gap-4 pt-8">
26+
<div class="md:col-span-1">
27+
<h3 class="heading">{{ t('auth.email_auth') }}</h3>
28+
<p class="my-1 text-secondaryLight">
29+
{{ t('auth.email_auth_description') }}
30+
</p>
31+
<p class="my-1 text-secondaryLight mt-4">
32+
{{ t('auth.email_auth_smtp_note') }}
33+
</p>
34+
</div>
35+
36+
<div class="sm:px-8 md:col-span-2">
37+
<section>
38+
<h4 class="font-semibold text-secondaryDark">
39+
{{ t('auth.email_auth') }}
40+
</h4>
41+
42+
<div class="space-y-4 py-4">
43+
<div class="flex justify-between">
44+
<HoppSmartToggle
45+
:on="isEmailAuthEnabled && isSMTPEnabled && isSMTPActivated"
46+
:disabled="!isSMTPEnabled || !isSMTPActivated"
47+
@change="toggleEmailAuth"
48+
>
49+
{{ t('auth.enable_email_auth') }}
50+
</HoppSmartToggle>
51+
</div>
52+
<div
53+
v-if="!isSMTPActivated"
54+
class="flex items-center mt-5 p-3 bg-yellow-700/30 border border-yellow-900 text-secondaryDark max-w-md rounded-md"
55+
>
56+
<icon-lucide-info class="svg-icons mr-2" />
57+
<span>{{ t('auth.smtp_required') }}</span>
58+
</div>
59+
</div>
60+
</section>
61+
</div>
62+
</div>
63+
</HoppSmartTab>
64+
</HoppSmartTabs>
65+
</div>
66+
</template>
67+
68+
<script setup lang="ts">
69+
import { useVModel } from '@vueuse/core';
70+
import { computed, onMounted, ref } from 'vue';
71+
import { useI18n } from '~/composables/i18n';
72+
import { ServerConfigs } from '~/helpers/configs';
73+
74+
const t = useI18n();
75+
76+
const props = defineProps<{
77+
config: ServerConfigs;
78+
}>();
79+
80+
const emit = defineEmits<{
81+
(e: 'update:config', v: ServerConfigs): void;
82+
}>();
83+
84+
// Auth Sub Tabs
85+
type AuthSubTabs = 'auth-providers' | 'email-auth';
86+
const selectedAuthSubTab = ref<AuthSubTabs>('auth-providers');
87+
88+
const workingConfigs = useVModel(props, 'config', emit);
89+
90+
// Check if SMTP is activated but not saved yet. Used to track if SMTP was enabled after the last save.
91+
const isSMTPActivated = computed(
92+
() => workingConfigs.value?.mailConfigs.enabled ?? false
93+
);
94+
95+
// Check if Email authentication is enabled
96+
const isEmailAuthEnabled = computed(() => {
97+
return workingConfigs.value?.mailConfigs.fields.email_auth ?? false;
98+
});
99+
100+
// Toggle Email authentication
101+
const toggleEmailAuth = () => {
102+
if (isSMTPEnabled.value && isSMTPActivated.value) {
103+
workingConfigs.value.mailConfigs.fields.email_auth =
104+
!workingConfigs.value.mailConfigs.fields.email_auth;
105+
}
106+
};
107+
108+
// Check if SMTP is enabled on mount
109+
const isSMTPEnabled = ref(false);
110+
111+
onMounted(() => {
112+
isSMTPEnabled.value = workingConfigs.value?.mailConfigs.enabled ?? false;
113+
});
114+
</script>

‎packages/hoppscotch-sh-admin/src/components/settings/Configurations.vue‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

packages/hoppscotch-sh-admin/src/components/settings/AuthProvider.vue renamed to packages/hoppscotch-sh-admin/src/components/settings/OAuthProviderConfigurations.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div v-if="workingConfigs" class="grid md:grid-cols-3 gap-8 md:gap-4">
2+
<div v-if="workingConfigs" class="grid md:grid-cols-3 gap-8 md:gap-4 pt-8">
33
<div class="md:col-span-1">
44
<h3 class="heading">{{ t('configs.auth_providers.title') }}</h3>
55
<p class="my-1 text-secondaryLight">

‎packages/hoppscotch-sh-admin/src/components/settings/SmtpConfiguration.vue‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,6 @@
3535

3636
<div v-if="smtpConfigs.enabled" class="ml-12">
3737
<div class="flex flex-col items-start gap-5">
38-
<HoppSmartCheckbox
39-
:on="smtpConfigs.fields.email_auth"
40-
@change="
41-
smtpConfigs.fields.email_auth = !smtpConfigs.fields.email_auth
42-
"
43-
>
44-
{{ t('configs.mail_configs.enable_email_auth') }}
45-
</HoppSmartCheckbox>
46-
4738
<HoppSmartCheckbox
4839
:on="smtpConfigs.fields.mailer_use_custom_configs"
4940
:title="t('configs.mail_configs.custom_smtp_configs')"

‎packages/hoppscotch-sh-admin/src/pages/settings.vue‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,25 @@
1818

1919
<div v-else-if="workingConfigs" class="flex flex-col py-8">
2020
<HoppSmartTabs v-model="selectedOptionTab" render-inactive-tabs>
21-
<HoppSmartTab :id="'config'" :label="t('configs.title')">
22-
<SettingsConfigurations
23-
v-model:config="workingConfigs"
24-
class="py-8 px-4"
25-
/>
21+
<HoppSmartTab id="auth" :label="t('configs.tabs.auth')">
22+
<SettingsAuthConfigurations v-model:config="workingConfigs" />
2623
</HoppSmartTab>
27-
<HoppSmartTab :id="'token'" :label="t('infra_tokens.tab_title')">
24+
25+
<HoppSmartTab id="smtp" :label="t('configs.tabs.smtp')">
26+
<div class="pb-8 px-4 flex flex-col space-y-8 divide-y divide-divider">
27+
<SettingsSmtpConfiguration v-model:config="workingConfigs" />
28+
</div>
29+
</HoppSmartTab>
30+
31+
<HoppSmartTab :id="'token'" :label="t('configs.tabs.infra_tokens')">
2832
<Tokens />
2933
</HoppSmartTab>
34+
<HoppSmartTab id="miscellaneous" :label="t('configs.tabs.miscellaneous')">
35+
<div class="pb-8 px-4 flex flex-col space-y-8 divide-y divide-divider">
36+
<SettingsDataSharing v-model:config="workingConfigs" />
37+
<SettingsReset />
38+
</div>
39+
</HoppSmartTab>
3040
</HoppSmartTabs>
3141
</div>
3242

@@ -66,8 +76,8 @@ const showSaveChangesModal = ref(false);
6676
const initiateServerRestart = ref(false);
6777
6878
// Tabs
69-
type OptionTabs = 'config' | 'token';
70-
const selectedOptionTab = ref<OptionTabs>('config');
79+
type OptionTabs = 'auth' | 'smtp' | 'token' | 'miscellaneous';
80+
const selectedOptionTab = ref<OptionTabs>('auth');
7181
7282
// Obtain the current and working configs from the useConfigHandler composable
7383
const {

0 commit comments

Comments
 (0)