Skip to content

Commit 74efe58

Browse files
nivedinnivedin
authored
chore: add i18n for onboarding flow and cleanup (hoppscotch#5285)
1 parent 0b7d31a commit 74efe58

File tree

8 files changed

+179
-68
lines changed

8 files changed

+179
-68
lines changed

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"save": "Save"
1010
},
1111
"app": {
12+
"back": "Back",
1213
"collapse_sidebar": "Collapse Sidebar",
1314
"continue_to_dashboard": "Continue to Dashboard",
1415
"expand_sidebar": "Expand Sidebar",
@@ -173,6 +174,53 @@
173174
"toggle_description": "Get updates about the latest at Hoppscotch",
174175
"unsubscribe": "Unsubscribe"
175176
},
177+
"onboarding": {
178+
"add_atleast_one_auth_provider": "Please add at least one authentication provider to continue.",
179+
"add_configurations": "Please add the configurations for the selected authentication methods.",
180+
"add_oauth_config": "Add Auth Configurations",
181+
"auth_setup": "Authentication Setup",
182+
"auth_successfully_configured": "authentication has been successfully configured.",
183+
"complete": "Complete",
184+
"complete_description": "You have completed the onboarding process. You can now start using Hoppscotch.",
185+
"complete_title": "Onboarding Complete",
186+
"configurations": "Configurations",
187+
"configurations_added_successfully": "Onboarding Configurations added successfully.",
188+
"configurations_adding_failed": "Failed to add onboarding configs, please try again.",
189+
"configurations_description": "Configure your Hoppscotch instance settings.",
190+
"configuration_error": "Failed to add configurations",
191+
"configurations_title": "Server Configurations",
192+
"configuration_summary": "Configuration Summary",
193+
"oauth": {
194+
"description": "Set up OAuth providers like Google, GitHub, Microsoft, etc.",
195+
"description_accordian": "Select the OAuth providers you want to enable and provide the necessary configurations.",
196+
"title": "OAuth"
197+
},
198+
"onboarding_incomplete": {
199+
"description": "You have not completed the onboarding process. Please set up at least one authentication provider to continue.",
200+
"title": "Onboarding Incomplete"
201+
},
202+
"onboarding_fail_help": "If you are facing issues with the onboarding process, please contact support or check",
203+
"please_fill_configurations": "Please fill the required field {fieldName}",
204+
"save_auth_config": "Save Auth Config",
205+
"setup_complete": {
206+
"title": "Setup Complete",
207+
"description": "You have successfully completed the onboarding process for your Hoppscotch instance.",
208+
"description_sub": "The page will automatically redirect to the dashboard in a few seconds or you can reload once the server is restarted."
209+
},
210+
"server_restarting": "Server is restarting in {time} seconds...",
211+
"smtp": {
212+
"description": "Set up SMTP for email authentication.",
213+
"description_accordian": "Configure the SMTP settings for sending emails.",
214+
"title": "SMTP"
215+
},
216+
"smtp_advanced_config_enable": "Enable to configure your own SMTP credentials",
217+
"select_auth_provider": "Please select the authentication methods you want to set up.",
218+
"select_atleast_one": "Please select at least one authentication provider to continue.",
219+
"start_onboarding": "Start Onboarding",
220+
"welcome": "Welcome",
221+
"welcome_screen_description": "Welcome to Hoppscotch! Let's get started with the setup.",
222+
"welcome_screen_sub_description": "Please set up either SMTP or OAuth for authentication."
223+
},
176224
"settings": {
177225
"settings": "Settings"
178226
},

‎packages/hoppscotch-sh-admin/src/components/onboarding/AuthSetup.vue‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
>
88
<div>
99
<h1 class="text-[1rem] font-normal">
10-
Please select the authentication methods you want to set up.
10+
{{ t('onboarding.select_auth_provider') }}
1111
</h1>
1212
</div>
1313
<div>
@@ -20,9 +20,11 @@
2020
}"
2121
@click="toggleSelectedOption('OAuth')"
2222
>
23-
<span class="text-[0.9rem] text-secondaryDark"> OAuth </span>
23+
<span class="text-[0.9rem] text-secondaryDark">
24+
{{ t('onboarding.oauth.title') }}
25+
</span>
2426
<span class="text-secondaryLight h-10">
25-
Set up OAuth providers like Google, GitHub, Microsoft, etc.
27+
{{ t('onboarding.oauth.description') }}
2628
</span>
2729
<div class="my-4">
2830
<div class="flex items-center -space-x-2">
@@ -52,9 +54,11 @@
5254
}"
5355
@click="toggleSelectedOption('SMTP')"
5456
>
55-
<span class="text-[0.9rem] text-secondaryDark"> SMTP </span>
57+
<span class="text-[0.9rem] text-secondaryDark">
58+
{{ t('onboarding.smtp.title') }}
59+
</span>
5660
<span class="text-secondaryLight h-10">
57-
Set up SMTP for email authentication.
61+
{{ t('onboarding.smtp.description') }}
5862
</span>
5963
<div class="my-4">
6064
<div class="flex items-center -space-x-2">
@@ -68,7 +72,7 @@
6872
</div>
6973
</div>
7074
<HoppButtonPrimary
71-
:label="'Add Auth Configs'"
75+
:label="t('onboarding.add_oauth_config')"
7276
@click="addAuthConfig"
7377
:icon="IconLucideArrowRight"
7478
:reverse="true"
@@ -87,10 +91,12 @@
8791
<span class="group-hover:opacity-80 transition-opacity">
8892
<IconLucideArrowLeft class="svg-icons" />
8993
</span>
90-
<span class="group-hover:opacity-80 transition-opacity">Back</span>
94+
<span class="group-hover:opacity-80 transition-opacity">
95+
{{ t('app.back') }}
96+
</span>
9197
</button>
9298
<h2>
93-
Please add the configurations for the selected authentication methods.
99+
{{ t('onboarding.add_configurations') }}
94100
</h2>
95101

96102
<div class="my-5 overflow-y-auto max-h-[60vh]">
@@ -107,7 +113,9 @@
107113
<template v-slot:header="{ isOpen, toggleAccordion }">
108114
<div class="w-full">
109115
<div class="flex items-center justify-between flex-1 mb-2">
110-
<span class="font-semibold text-[0.8rem]">OAuth </span>
116+
<span class="font-semibold text-[0.8rem]"
117+
>{{ t('onboarding.oauth.title') }}
118+
</span>
111119

112120
<span>
113121
<HoppSmartToggle
@@ -123,9 +131,7 @@
123131
</span>
124132
</div>
125133
<span class="text-tiny text-secondaryLight">
126-
Select the OAuth providers you want to enable and provide
127-
<br />
128-
the necessary configurations.
134+
{{ t('onboarding.oauth.description_accordian') }}
129135
</span>
130136
</div>
131137
</template>
@@ -146,7 +152,9 @@
146152
<template v-slot:header="{ isOpen, toggleAccordion }">
147153
<div class="w-full">
148154
<div class="flex items-center justify-between flex-1 mb-2">
149-
<span class="font-semibold text-[0.8rem]">SMTP</span>
155+
<span class="font-semibold text-[0.8rem]">
156+
{{ t('onboarding.smtp.title') }}
157+
</span>
150158
<span>
151159
<HoppSmartToggle
152160
:on="isOpen"
@@ -162,7 +170,7 @@
162170
</span>
163171
</div>
164172
<p class="text-secondaryLight text-tiny">
165-
Configure the SMTP settings for sending emails.
173+
{{ t('onboarding.smtp.description_accordian') }}
166174
</p>
167175
</div>
168176
</template>
@@ -176,10 +184,11 @@
176184
</div>
177185
</div>
178186
<HoppButtonPrimary
179-
:label="'Save Auth Configs'"
187+
:label="t('onboarding.save_auth_config')"
180188
@click="addOnboardingConfigs"
181189
:reverse="true"
182190
:icon="IconLucideSave"
191+
:loading="submittingConfigs"
183192
class="mt-4"
184193
/>
185194
</div>
@@ -200,7 +209,9 @@ import IconLucideArrowRight from '~icons/lucide/arrow-right';
200209
import IconLucideArrowLeft from '~icons/lucide/arrow-left';
201210
import IconLucideSave from '~icons/lucide/save';
202211
import { useToast } from '~/composables/toast';
212+
import { useI18n } from '~/composables/i18n';
203213
214+
const t = useI18n();
204215
const toast = useToast();
205216
206217
const props = withDefaults(
@@ -296,7 +307,7 @@ const toggleSelectedOption = (option: 'OAuth' | 'SMTP') => {
296307
297308
const addAuthConfig = () => {
298309
if (selectedOptions.value.length === 0) {
299-
toast.error('Please select at least one authentication method.');
310+
toast.error(t('onboarding.select_atleast_one'));
300311
return;
301312
}
302313
authConfigStep.value = 2;

‎packages/hoppscotch-sh-admin/src/components/onboarding/CompleteScreen.vue‎

Lines changed: 50 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,62 +6,82 @@
66
onBoardingSummary.configsAdded.length > 0
77
"
88
>
9-
<h1 class="text-2xl font-bold text-white">Setup Complete 🎉</h1>
9+
<h1 class="text-2xl font-bold text-white flex items-center space-x-2">
10+
<span></span>
11+
{{ t('onboarding.setup_complete.title') }}
12+
<span class="">
13+
<icon-lucide-badge-check class="svg-icons text-green-500 !h-8 !w-8" />
14+
</span>
15+
</h1>
1016
<h2>
11-
You have successfully completed the onboarding process for your
12-
Hoppscotch instance.
17+
{{ t('onboarding.setup_complete.description') }}
1318
<br />
14-
The page will automatically redirect to the dashboard in a few seconds
15-
or you can reload once the server is restarted.
19+
<span class="text-secondaryLight text-tiny">
20+
{{ t('onboarding.setup_complete.description_sub') }}
21+
</span>
1622
</h2>
1723
<div
1824
class="my-4 p-4 bg-primaryLight rounded-lg border border-primaryDark shadow"
1925
>
20-
<h3 class="text-lg mb-6">Configuration Summary</h3>
26+
<h3 class="text-lg mb-6">
27+
{{ t('onboarding.configuration_summary') }}
28+
</h3>
2129
<div v-for="config in onBoardingSummary.configsAdded" class="my-2">
2230
<div class="flex items-center space-x-2">
2331
<icon-lucide-check class="svg-icons text-green-500" />
2432
<p class="text-secondary">
2533
<span class="capitalize"> {{ config.toLocaleLowerCase() }}</span>
26-
authentication has been successfully configured.
34+
{{ t('onboarding.auth_successfully_configured') }}
2735
</p>
2836
</div>
2937
</div>
3038
</div>
3139
<HoppButtonPrimary
3240
v-if="duration"
33-
:label="`Server is restarting in ${duration} seconds...`"
41+
:label="
42+
t('onboarding.server_restarting', {
43+
time: duration,
44+
})
45+
"
3446
:disabled="duration > 0"
3547
@click="emit('finish')"
3648
class="w-min"
3749
/>
3850
<HoppButtonPrimary
3951
v-else
40-
label="Go to Dashboard"
52+
:label="t('app.continue_to_dashboard')"
4153
@click="emit('finish')"
4254
class="w-min"
4355
/>
4456
</template>
4557
<template v-else>
46-
<h1 class="text-2xl font-bold text-white">Onboarding Incomplete</h1>
47-
<h2>
48-
There was an issue completing the onboarding process. Please check the
49-
configurations and try again.
50-
</h2>
51-
<HoppButtonPrimary
52-
label="Retry Onboarding"
53-
@click="emit('back')"
54-
class="w-min"
55-
/>
56-
<p class="text-secondaryLight text-tiny mt-2">
57-
If you need help, please refer to the
58-
<a
59-
href="https://docs.hoppscotch.io/documentation/self-host/community-edition"
60-
target="_blank"
61-
class="text-secondaryLight underline"
62-
>documentation</a
63-
>.
64-
</p>
58+
<div class="flex flex-col space-y-4 p-4 max-w-screen-md mx-auto w-full">
59+
<h1 class="text-2xl font-bold text-white flex items-center space-x-2">
60+
<span>
61+
{{ t('onboarding.onboarding_incomplete.title') }}
62+
</span>
63+
<icon-lucide-alert-triangle
64+
class="svg-icons text-yellow-500 !h-8 !w-8"
65+
/>
66+
</h1>
67+
<h2>
68+
{{ t('onboarding.onboarding_incomplete.description') }}
69+
</h2>
70+
<HoppButtonPrimary
71+
label="Retry Onboarding"
72+
@click="emit('back')"
73+
class="w-min"
74+
/>
75+
<p class="text-secondaryLight text-tiny mt-2">
76+
{{ t('onboarding.onboarding_fail_help') }}
77+
<a
78+
href="https://docs.hoppscotch.io/documentation/self-host/community-edition"
79+
target="_blank"
80+
class="text-secondaryLight underline"
81+
>documentation</a
82+
>.
83+
</p>
84+
</div>
6585
</template>
6686
</div>
6787
</template>
@@ -70,8 +90,10 @@
7090
import { HoppButtonPrimary } from '@hoppscotch/ui';
7191
import { onMounted, onUnmounted, ref } from 'vue';
7292
import { useRouter } from 'vue-router';
93+
import { useI18n } from '~/composables/i18n';
7394
import { OnBoardingSummary } from '~/composables/useOnboardingConfigHandler';
7495
96+
const t = useI18n();
7597
const router = useRouter();
7698
7799
const props = defineProps<{

‎packages/hoppscotch-sh-admin/src/components/onboarding/SmtpSetup.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
{{ smtp.USE_CUSTOM_CONFIGS.text }}
5757
</HoppSmartCheckbox>
5858
<p class="text-secondaryLight text-tiny mt-2">
59-
Enable to configure your own SMTP credentials
59+
{{ t('onboarding.smtp_advanced_config_enable') }}
6060
</p>
6161
</div>
6262
</template>
@@ -69,6 +69,9 @@ import {
6969
EnabledConfig,
7070
MailerConfigKeys,
7171
} from '~/composables/useOnboardingConfigHandler';
72+
import { useI18n } from '~/composables/i18n';
73+
74+
const t = useI18n();
7275
7376
const props = defineProps<{
7477
currentConfigs: Configs;

‎packages/hoppscotch-sh-admin/src/components/onboarding/WelcomeScreen.vue‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,26 @@
33
<div class="max-w-screen-md mx-auto p-8 flex flex-col space-y-4">
44
<div class="flex flex-col space-y-2 mb-4">
55
<img src="/logo.svg" alt="hoppscotch-logo" class="w-20 mb-4" />
6-
<h1 class="text-3xl font-bold text-secondaryDark">Welcome</h1>
6+
<h1 class="text-3xl font-bold text-secondaryDark">
7+
{{ t('onboarding.welcome') }}
8+
</h1>
79
<h2 class="mt-3">
8-
This is the onboarding process for setting up your Hoppscotch
9-
instance.
10+
{{ t('onboarding.welcome_screen_description') }}
1011
</h2>
1112
<p class="text-secondaryLight">
12-
Please set up either SMTP or OAuth for authentication.
13+
{{ t('onboarding.welcome_screen_sub_description') }}
1314
</p>
1415
</div>
15-
<HoppButtonPrimary label="Start Onboarding" @click="$emit('next')" />
16+
<HoppButtonPrimary
17+
:label="t('onboarding.start_onboarding')"
18+
@click="$emit('next')"
19+
/>
1620
</div>
1721
</div>
1822
</template>
23+
24+
<script lang="ts" setup>
25+
import { useI18n } from '~/composables/i18n';
26+
27+
const t = useI18n();
28+
</script>

0 commit comments

Comments
 (0)