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

61
packages/hoppscotch-common/src/pages/realtime/websocket.vue
View File

@@ -4,38 +4,35 @@
<div
class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
>
<div class="inline-flex flex-1 space-x-2">
<input
id="websocket-url"
v-model="url"
class="w-full px-4 py-2 border rounded bg-primaryLight border-divider text-secondaryDark"
type="url"
autocomplete="off"
spellcheck="false"
:class="{ error: !isUrlValid }"
:placeholder="`${t('websocket.url')}`"
:disabled="
connectionState === 'CONNECTED' ||
connectionState === 'CONNECTING'
"
@keyup.enter="isUrlValid ? toggleConnection() : null"
/>
<HoppButtonPrimary
id="connect"
:disabled="!isUrlValid"
class="w-32"
name="connect"
:label="
connectionState === 'CONNECTING'
? t('action.connecting')
: connectionState === 'DISCONNECTED'
? t('action.connect')
: t('action.disconnect')
"
:loading="connectionState === 'CONNECTING'"
@click="toggleConnection"
/>
</div>
<HoppSmartInput
v-model="url"
type="url"
styles="!inline-flex flex-1 space-x-2"
input-styles="w-full px-4 py-2 border rounded !bg-primaryLight border-divider text-secondaryDark"
:placeholder="`${t('websocket.url')}`"
:disabled="
connectionState === 'CONNECTED' || connectionState === 'CONNECTING'
"
@submit="isUrlValid ? toggleConnection() : null"
>
<template #button>
<HoppButtonPrimary
id="connect"
:disabled="!isUrlValid"
class="w-32"
name="connect"
:label="
connectionState === 'CONNECTING'
? t('action.connecting')
: connectionState === 'DISCONNECTED'
? t('action.connect')
: t('action.disconnect')
"
:loading="connectionState === 'CONNECTING'"
@click="toggleConnection"
/>
</template>
</HoppSmartInput>
</div>
<HoppSmartTabs
v-model="selectedTab"

27
packages/hoppscotch-common/src/pages/settings.vue
View File

@@ -193,20 +193,19 @@
</div>
</div>
<div class="flex items-center py-4 space-x-2">
<div class="relative flex flex-col flex-1">
<input
id="url"
v-model="PROXY_URL"
class="input floating-input"
placeholder=" "
type="url"
autocomplete="off"
:disabled="!PROXY_ENABLED"
/>
<label for="url">
{{ t("settings.proxy_url") }}
</label>
</div>
<HoppSmartInput
v-model="PROXY_URL"
styles="flex-1"
placeholder=" "
input-styles="input floating-input"
:disabled="!PROXY_ENABLED"
>
<template #label>
<label for="url">
{{ t("settings.proxy_url") }}
</label>
</template>
</HoppSmartInput>
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('settings.reset_default')"