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

feat: introducing a new smart input hoppscotch ui component (#3089)

Browse Source 
Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>
This commit is contained in:
Joel Jacob Stephen
2023-08-05 23:45:02 +05:30
committed by GitHub
parent 01cf59c663
commit 81fbb22c51
33 changed files with 543 additions and 639 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
packages/hoppscotch-common/src/pages/profile.vue
View File

@@ -100,55 +100,45 @@
<label for="displayName">
{{ t("settings.profile_name") }}
</label>
<form
class="flex mt-2 md:max-w-sm"
@submit.prevent="updateDisplayName"
<HoppSmartInput
v-model="displayName"
styles="mt-2 md:max-w-sm"
:placeholder="`${t('settings.profile_name')}`"
>
<input
id="displayName"
v-model="displayName"
class="input"
:placeholder="`${t('settings.profile_name')}`"
type="text"
autocomplete="off"
required
/>
<HoppButtonSecondary
filled
outline
:label="t('action.save')"
class="ml-2 min-w-16"
type="submit"
:loading="updatingDisplayName"
/>
</form>
<template #button>
<HoppButtonSecondary
filled
outline
:label="t('action.save')"
class="ml-2 min-w-16"
type="submit"
:loading="updatingDisplayName"
@click="updateDisplayName"
/>
</template>
</HoppSmartInput>
</div>
<div class="py-4">
<label for="emailAddress">
{{ t("settings.profile_email") }}
</label>
<form
class="flex mt-2 md:max-w-sm"
@submit.prevent="updateEmailAddress"
<HoppSmartInput
v-model="emailAddress"
styles="flex mt-2 md:max-w-sm"
:placeholder="`${t('settings.profile_name')}`"
>
<input
id="emailAddress"
v-model="emailAddress"
class="input"
:placeholder="`${t('settings.profile_name')}`"
type="email"
autocomplete="off"
required
/>
<HoppButtonSecondary
filled
outline
:label="t('action.save')"
class="ml-2 min-w-16"
type="submit"
:loading="updatingEmailAddress"
/>
</form>
<template #button>
<HoppButtonSecondary
filled
outline
:label="t('action.save')"
class="ml-2 min-w-16"
type="submit"
:loading="updatingEmailAddress"
@click="updateEmailAddress"
/>
</template>
</HoppSmartInput>
</div>
</section>
@@ -208,7 +198,6 @@ import { ref, watchEffect, computed } from "vue"
import { platform } from "~/platform"
import { invokeAction } from "~/helpers/actions"
import { useReadonlyStream } from "@composables/stream"
import { useI18n } from "@composables/i18n"
import { useToast } from "@composables/toast"
@@ -251,9 +240,9 @@ const loadingCurrentUser = computed(() => {
else return false
})
const displayName = ref(currentUser.value?.displayName)
const displayName = ref(currentUser.value?.displayName || "")
const updatingDisplayName = ref(false)
watchEffect(() => (displayName.value = currentUser.value?.displayName))
watchEffect(() => (displayName.value = currentUser.value?.displayName || ""))
const updateDisplayName = () => {
updatingDisplayName.value = true
@@ -270,9 +259,9 @@ const updateDisplayName = () => {
})
}
const emailAddress = ref(currentUser.value?.email)
const emailAddress = ref(currentUser.value?.email || "")
const updatingEmailAddress = ref(false)
watchEffect(() => (emailAddress.value = currentUser.value?.email))
watchEffect(() => (emailAddress.value = currentUser.value?.email || ""))
const updateEmailAddress = () => {
updatingEmailAddress.value = true