Skip to content

Commit

Permalink
- Remove password input wrapper
Browse files Browse the repository at this point in the history 
- Create prepend inner icon for inputs with type password
- Fix show/hide icon selection when press tab
- Fix the order of dialog actions tabindex
  • Loading branch information
@samaradel
samaradel committed Jun 26, 2024
1 parent 62ff834 commit d957cee
Show file tree
Hide file tree
Showing 5 changed files with 145 additions and 156 deletions.
15 changes: 0 additions & 15 deletions packages/playground/src/components/password_input_wrapper.vue
View file

This file was deleted.

2 changes: 0 additions & 2 deletions packages/playground/src/config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,10 @@ import InputValidator from "./components/input_validator.vue";
import TfSelectCountry from "./components/node_selector/select_location_internals/TfSelectCountry.vue";
import TfSelectRegion from "./components/node_selector/select_location_internals/TfSelectRegion.vue";
import TfSelectionDetails from "./components/node_selector/TfSelectionDetails.vue";
import PasswordInputWrapper from "./components/password_input_wrapper.vue";
import ViewLayout from "./components/view_layout.vue";
import WebletLayout from "./components/weblet_layout.vue";
import * as validators from "./utils/validators";
const GLOBAL_COMPONENTS: { [key: string]: Component } = {
PasswordInputWrapper,
WebletLayout,
CopyInputWrapper,
DTabs,
Expand Down
2 changes: 0 additions & 2 deletions packages/playground/src/global-components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,11 @@ import InputValidator from "./components/input_validator.vue";
import TfSelectCountry from "./components/node_selector/select_location_internals/TfSelectCountry.vue";
import TfSelectRegion from "./components/node_selector/select_location_internals/TfSelectRegion.vue";
import TfSelectionDetails from "./components/node_selector/TfSelectionDetails.vue";
import PasswordInputWrapper from "./components/password_input_wrapper.vue";
import ViewLayout from "./components/view_layout.vue";
import WebletLayout from "./components/weblet_layout.vue";
import type * as validators from "./utils/validators";
declare module "@vue/runtime-core" {
export interface GlobalComponents {
PasswordInputWrapper: typeof PasswordInputWrapper;
WebletLayout: typeof WebletLayout;
CopyInputWrapper: typeof CopyInputWrapper;
DTabs: typeof DTabs;
Expand Down
11 changes: 0 additions & 11 deletions packages/playground/src/hooks/use_password_input.ts
View file

This file was deleted.

271 changes: 145 additions & 126 deletions packages/playground/src/weblets/profile_manager.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,87 +117,90 @@
>
<!-- Mnemonic Input -->
<template #activator="{ props: tooltipProps }">
<PasswordInputWrapper #="{ props: passwordInputProps }">
<InputValidator
:value="mnemonic"
:rules="[
validators.required('Mnemonic or Hex Seed is required.'),
v => {
clearError();
if (
validateMnemonic(v) ||
((v.length === 64 || v.length === 66) && isAddress(v.length === 66 ? v : `0x${v}`))
) {
return;
}
return {
message: 'Mnemonic or Hex Seed doesn\'t seem to be valid.',
};
},
]"
valid-message="Mnemonic or Hex Seed is valid."
#="{ props: validationProps }"
ref="mnemonicInput"
>
<v-row>
<v-col cols="12" md="9">
<div v-bind="tooltipProps">
<VTextField
:append-icon="!enableReload && !activatingAccount && mnemonic !== '' ? 'mdi-reload' : ''"
label="Mnemonic or Hex Seed"
placeholder="Please insert your Mnemonic or Hex Seed"
v-model="mnemonic"
v-bind="{
...passwordInputProps,
...validationProps,
}"
:disabled="creatingAccount || activatingAccount || activating"
@click:append="reloadValidation"
autocomplete="off"
>
<template v-slot:prepend-inner v-if="validationProps.hint || validationProps.error">
<v-icon :color="validationProps.error ? 'red' : 'green'">
{{ validationProps.error ? "mdi-close" : "mdi-check" }}
</v-icon>
</template></VTextField
>
</div>
</v-col>
<v-col cols="12" md="3">
<v-tooltip
location="top"
text="Using different keypair types will lead to a completely different account."
<InputValidator
:value="mnemonic"
:rules="[
validators.required('Mnemonic or Hex Seed is required.'),
v => {
clearError();
if (
validateMnemonic(v) ||
((v.length === 64 || v.length === 66) && isAddress(v.length === 66 ? v : `0x${v}`))
) {
return;
}
return {
message: 'Mnemonic or Hex Seed doesn\'t seem to be valid.',
};
},
]"
valid-message="Mnemonic or Hex Seed is valid."
#="{ props: validationProps }"
ref="mnemonicInput"
>
<v-row>
<v-col cols="12" md="9">
<div v-bind="tooltipProps">
<VTextField
:type="showMnemonic ? 'text' : 'password'"
:append-icon="!enableReload && !activatingAccount && mnemonic !== '' ? 'mdi-reload' : ''"
label="Mnemonic or Hex Seed"
placeholder="Please insert your Mnemonic or Hex Seed"
v-model="mnemonic"
v-bind="{
...validationProps,
}"
:disabled="creatingAccount || activatingAccount || activating"
@click:append="reloadValidation"
autocomplete="off"
>
<template #activator="{ props }">
<v-autocomplete
label="Keypair Type"
v-bind="props"
:items="[...keyType]"
item-title="name"
v-model="keypairType"
v-if="activeTab === 1"
/>
<template v-slot:prepend-inner v-if="validationProps.hint || validationProps.error">
<v-icon :color="validationProps.error ? 'red' : 'green'">
{{ validationProps.error ? "mdi-close" : "mdi-check" }}
</v-icon>
</template>
<template v-slot:append-inner>
<v-icon tabindex="-1" @click="showMnemonic = !showMnemonic">
{{ showMnemonic ? "mdi-eye-outline" : "mdi-eye-off-outline" }}
</v-icon>
</template>
</v-tooltip>
</v-col>
</v-row>

<div class="d-flex flex-column flex-md-row justify-end mb-10">
<VBtn
class="mt-2 ml-3"
color="secondary"
variant="outlined"
:disabled="
isValidForm || !!mnemonic || shouldActivateAccount || keypairType === KeypairType.ed25519
"
:loading="creatingAccount"
@click="openAcceptTerms = termsLoading = true"
</VTextField>
</div>
</v-col>
<v-col cols="12" md="3">
<v-tooltip
location="top"
text="Using different keypair types will lead to a completely different account."
>
create account
</VBtn>
</div>
</InputValidator>
</PasswordInputWrapper>
<template #activator="{ props }">
<v-autocomplete
label="Keypair Type"
v-bind="props"
:items="[...keyType]"
item-title="name"
v-model="keypairType"
v-if="activeTab === 1"
/>
</template>
</v-tooltip>
</v-col>
</v-row>

<div class="d-flex flex-column flex-md-row justify-end mb-10">
<VBtn
class="mt-2 ml-3"
color="secondary"
variant="outlined"
:disabled="
isValidForm || !!mnemonic || shouldActivateAccount || keypairType === KeypairType.ed25519
"
:loading="creatingAccount"
@click="openAcceptTerms = termsLoading = true"
>
create account
</VBtn>
</div>
</InputValidator>
</template>
</VTooltip>

Expand Down Expand Up @@ -263,67 +266,80 @@
</input-validator>

<!-- Password Input -->
<PasswordInputWrapper #="{ props: passwordInputProps }">
<InputValidator
:value="password"
:rules="[
validators.required('Password is required.'),
validators.minLength('Password must be at least 6 characters.', 6),
validatePassword,
]"
#="{ props: validationProps }"
ref="passwordInput"
<InputValidator
:value="password"
:rules="[
validators.required('Password is required.'),
validators.minLength('Password must be at least 6 characters.', 6),
validatePassword,
]"
#="{ props: validationProps }"
ref="passwordInput"
>
<v-tooltip
location="top right"
text="Used to encrypt your mnemonic on your local system, and is used to login from the same device."
>
<v-tooltip
location="top right"
text="Used to encrypt your mnemonic on your local system, and is used to login from the same device."
>
<template #activator="{ props: tooltipProps }">
<div v-bind="tooltipProps">
<VTextField
label="Password"
v-model="password"
v-bind="{ ...passwordInputProps, ...validationProps }"
:disabled="creatingAccount || activatingAccount || activating"
autocomplete="off"
/>
</div>
</template>
</v-tooltip>
</InputValidator>
</PasswordInputWrapper>

<PasswordInputWrapper #="{ props: confirmPasswordInputProps }" v-if="activeTab === 1">
<InputValidator
:value="confirmPassword"
:rules="[validators.required('A confirmation password is required.'), validateConfirmPassword]"
#="{ props: validationProps }"
ref="confirmPasswordInput"
<template #activator="{ props: tooltipProps }">
<div v-bind="tooltipProps">
<VTextField
:type="showPassword ? 'text' : 'password'"
label="Password"
v-model="password"
v-bind="{ ...validationProps }"
:disabled="creatingAccount || activatingAccount || activating"
autocomplete="off"
>
<template v-slot:append-inner>
<v-icon tabindex="-1" @click="showPassword = !showPassword">
{{ showPassword ? "mdi-eye-outline" : "mdi-eye-off-outline" }}
</v-icon>
</template></VTextField
>
</div>
</template>
</v-tooltip>
</InputValidator>

<InputValidator
v-if="activeTab === 1"
:value="confirmPassword"
:rules="[validators.required('A confirmation password is required.'), validateConfirmPassword]"
#="{ props: validationProps }"
ref="confirmPasswordInput"
>
<VTextField
:type="showConfirmPassword ? 'text' : 'password'"
label="Confirm Password"
v-model="confirmPassword"
v-bind="{
...validationProps,
}"
:disabled="creatingAccount || activatingAccount || activating"
autocomplete="off"
>
<VTextField
label="Confirm Password"
v-model="confirmPassword"
v-bind="{
...confirmPasswordInputProps,
...validationProps,
}"
:disabled="creatingAccount || activatingAccount || activating"
autocomplete="off"
/>
</InputValidator>
</PasswordInputWrapper>
<template v-slot:append-inner>
<v-icon tabindex="-1" @click="showConfirmPassword = !showConfirmPassword">
{{ showConfirmPassword ? "mdi-eye-outline" : "mdi-eye-off-outline" }}
</v-icon>
</template>
</VTextField>
</InputValidator>

<v-alert type="error" variant="tonal" class="mt-2 mb-4" v-if="loginError">
{{ loginError }}
</v-alert>
</FormValidator>

<div class="d-flex justify-center mt-2">
<VBtn color="anchor" variant="outlined" @click="$emit('update:modelValue', false)"> Close </VBtn>
<VBtn tabindex="2" color="anchor" variant="outlined" @click="$emit('update:modelValue', false)">
Close
</VBtn>
<VBtn
class="ml-2"
type="submit"
color="secondary"
tabindex="1"
:loading="activating"
:disabled="
!isValidForm ||
Expand Down Expand Up @@ -451,6 +467,9 @@ const keypairType = ref(KeypairType.sr25519);
const enableReload = ref(true);
const theme = useTheme();
const qrCodeText = ref("");
const showMnemonic = ref(false);
const showPassword = ref(false);
const showConfirmPassword = ref(false);
const props = defineProps({
modelValue: {
required: false,
Expand Down

0 comments on commit d957cee

Please sign in to comment.