Skip to content

Commit

Permalink
Merge pull request #18 from beclab/fix/ui
Browse files Browse the repository at this point in the history 
fix: fixed ui bug
  • Loading branch information
@wushuangs
wushuangs authored Nov 12, 2024
2 parents d3ce617 + 796545b commit 06493e3
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 158 deletions.
163 changes: 53 additions & 110 deletions packages/frontend/src/components/InputAni.vue
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,25 @@
<template>
<div class="password-input">
<q-input
dense
stack-label
class="item-margin q_field_password"
:class="passwordErr ? 'shake' : ''"
v-model="password"
<div class="item-margin" :class="passwordErr ? 'shake' : ''">
<input
class="text-white"
:class="loading ? 'disable' : ''"
type="password"
id="password"
v-model="password"
ref="passwordInput"
:inputStyle="{
color: 'transparent',
caretColor: 'rgba(0, 0, 0, 0)',
fontSize: '1.8rem',
textIndent: '2px'
}"
@focus="focus"
@blur="blur"
:disabled="loading"
@keydown="onkeydown"
@update:model-value="updateInput"
>
</q-input>
<div class="password-display">
<span v-for="(char, index) in characters" :key="index" class="animate">
</span>
<i class="caret" v-if="isFocus"></i>
</div>
/>
<label v-if="!password" class="placeholder-label">{{
t('login_hint_password')
}}</label>
</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
defineProps({
loading: {
Expand All @@ -40,14 +30,12 @@ defineProps({
});
const emits = defineEmits(['updatePwd', 'onLogin']);
const { t } = useI18n();
const password = ref('');
const characters = ref<string[]>([]);
// const animatedIndices = ref<number[]>([]);
const passwordInput = ref<any>(null);
const passwordErr = ref(false);
const isFocus = ref(false);
const updateInput = () => {
emits('updatePwd', password.value);
Expand All @@ -61,14 +49,6 @@ const shakeInput = () => {
}, 1000);
};
const focus = () => {
isFocus.value = true;
};
const blur = () => {
isFocus.value = false;
};
const onkeydown = async (e: any) => {
if (e.keyCode !== 13) return false;
if (e.keyCode === 13 && !password.value) {
Expand All @@ -90,90 +70,53 @@ defineExpose({
handleClearInput
});
</script>

<style scoped lang="scss">
.password-input {
width: calc(100% - 60px);
height: 50px !important;
position: relative;
}
.password-display {
position: absolute;
top: 0px;
left: 0;
pointer-events: none;
width: 100%;
height: 100%;
line-height: 50px;
padding: 0 10px 0 16px;
margin-top: 4px;
overflow-x: scroll;
white-space: nowrap;
.item-margin {
margin: 5px;
width: 220px;
height: 32px !important;
background: rgba(255, 255, 255, 0.4);
border-radius: 8px;
backdrop-filter: blur(20px);
// font-size: 12px;
padding-left: 12px;
padding-right: 10px;
display: flex;
align-items: center;
justify-content: start;
.caret {
display: inline-block;
width: 1px;
height: 24px;
border-radius: 1px;
background-color: #ffffff;
animation: caretAni 1s linear infinite;
}
}
@keyframes caretAni {
0% {
opacity: 0;
}
50% {
opacity: 1;
justify-content: space-between;
box-sizing: border-box;
position: relative;
.cursor-pointer {
color: #ffffff;
}
100% {
opacity: 0;
.placeholder-label {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.5);
pointer-events: none;
}
}
.password-display span {
display: inline-block;
width: 1.2rem;
height: 1.2rem;
border-radius: 6px;
background-color: #ffffff;
margin-right: 6px;
}
.password-display span.animate {
animation-duration: 0.3s;
animation-name: fontAni;
animation-fill-mode: forwards;
animation-direction: normal;
}
@keyframes fontAni {
0% {
width: 0px;
height: 0px;
}
100% {
width: 12px;
height: 12px;
input {
width: 100%;
height: 24px;
line-height: 24px;
background-color: transparent;
border: none;
padding: 0;
margin: 0;
font-size: 20px !important;
caret-color: #ffffff;
letter-spacing: 2px;
&.disable {
pointer-events: none;
}
&:focus {
outline: none;
box-shadow: none;
}
}
}
.item-margin {
margin-top: 4px;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.4);
border-radius: 8px;
backdrop-filter: blur(20px);
padding-left: 12px;
padding-right: 10px;
overflow: hidden;
}
</style>
121 changes: 77 additions & 44 deletions packages/frontend/src/pages/FirstLogin.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,28 +14,28 @@
<p class="login-conter">
{{ t('login_title') }}
</p>
<q-input
dense
:disable="loading"
stack-label
class="item-margin q_field_password"
:class="passwordErr ? 'shake' : ''"
v-model="pwd"
@keydown="onkeydown"
:placeholder="t('login_hint_password')"
type="password"
ref="loginRef"
autofocus
>
<template v-slot:append>
<q-icon
v-if="pwd"
class="cursor-pointer animated fadeIn"
name="sym_r_arrow_circle_right"
@click="onLogin"
/>
</template>
</q-input>
<div class="item-margin" :class="passwordErr ? 'shake' : ''">
<input
class="text-white"
:class="loading ? 'disable' : ''"
type="password"
id="password"
v-model="pwd"
ref="loginRef"
:disabled="loading"
@keydown="onkeydown"
/>
<label v-if="!pwd" class="placeholder-label">{{
t('login_hint_password')
}}</label>
<q-icon
v-if="pwd"
class="cursor-pointer animated fadeIn"
name="sym_r_arrow_circle_right"
@click="onLogin"
size="20px"
/>
</div>
<div class="refush row items-center justify-center" v-if="loading">
<q-img
src="../assets/progress_activity.svg"
Expand All @@ -56,7 +56,7 @@ import { BtNotify, NotifyDefinedType } from '@bytetrade/ui';
const { t } = useI18n();
const tokenStore = useTokenStore();
const pwd = ref('');
const pwd = ref();
const loginRef = ref();
const loading = ref(false);
const passwordErr = ref(false);
Expand All @@ -75,8 +75,6 @@ const onLogin = async () => {
pwd.value
);
console.log('firstfactor', firstfactor);
if (firstfactor.fa2) {
// redirect('/secondFactorForm');
tokenStore.currentView = CurrentView.MOBILEVERIFICATION;
Expand Down Expand Up @@ -133,24 +131,31 @@ const onkeydown = async (e: any) => {
};
</script>

<style lang="scss">
.q_field_password {
.q-field__native {
font-size: 14px;
font-family: Roboto-Medium, Roboto;
font-weight: 500;
color: #ffffff;
}
.q-field__control {
height: 100% !important;
padding-left: 24px;
}
.q-field__marginal {
height: 32px;
}
<!-- <style lang="scss">
input[type='password'] {
font-size: 28px !important;
caret-color: #ffffff;
letter-spacing: 1px;
line-height: 16px;
height: 16px;
}
</style>
input[type='password']::placeholder {
font-size: 12px;
line-height: 20px;
}
</style> -->
<style lang="scss" scoped>
input[type='password'] {
font-size: 28px !important;
caret-color: #ffffff;
letter-spacing: 1px;
line-height: 16px;
height: 16px;
}
input[type='password']::placeholder {
font-size: 12px;
line-height: 20px;
}
.login-box {
width: 100%;
height: 100%;
Expand Down Expand Up @@ -204,16 +209,44 @@ const onkeydown = async (e: any) => {
background: rgba(255, 255, 255, 0.4);
border-radius: 8px;
backdrop-filter: blur(20px);
font-size: 12px;
// font-size: 12px;
padding-left: 12px;
padding-right: 10px;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
position: relative;
.cursor-pointer {
color: #ffffff;
}

.placeholder-label {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.5);
pointer-events: none;
}

input {
width: 180px;
background-color: transparent;
border: none;
padding: 0;
margin: 0;
&.disable {
pointer-events: none;
}
&:focus {
outline: none;
box-shadow: none;
}
}
}
}
:global(.q-field__control) {
}

:global(.text-white) {
font-size: 16px;
font-family: Roboto-Medium, Roboto;
Expand Down
2 changes: 1 addition & 1 deletion packages/frontend/src/pages/SecondFactor/SecondFactorFormMobile.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ export default defineComponent({
.refush {
width: 56px;
height: 56px;
border-radius: 28px;
border-radius: 28px !important;
background: rgba(31, 24, 20, 0.3);
margin: 0 auto;
animation: rotate 1s linear infinite;
Expand Down
Loading

0 comments on commit 06493e3

Please sign in to comment.