From 796545ba5170dce85639a96ac94239796942b0d8 Mon Sep 17 00:00:00 2001
From: huaiyuan <1029848564@qq.com>
Date: Tue, 12 Nov 2024 13:41:30 +0800
Subject: [PATCH] fix: fixed ui bug

---
 packages/frontend/src/components/InputAni.vue | 163 ++++++------------
 packages/frontend/src/pages/FirstLogin.vue    | 121 ++++++++-----
 .../SecondFactor/SecondFactorFormMobile.vue   |   2 +-
 .../frontend/src/pages/mobile/FirstLogin.vue  |  12 +-
 4 files changed, 140 insertions(+), 158 deletions(-)

diff --git a/packages/frontend/src/components/InputAni.vue b/packages/frontend/src/components/InputAni.vue
index 7fa4002..a0dd053 100644
--- a/packages/frontend/src/components/InputAni.vue
+++ b/packages/frontend/src/components/InputAni.vue
@@ -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: {
@@ -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);
@@ -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) {
@@ -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>
diff --git a/packages/frontend/src/pages/FirstLogin.vue b/packages/frontend/src/pages/FirstLogin.vue
index b9a4ea5..46ac84f 100644
--- a/packages/frontend/src/pages/FirstLogin.vue
+++ b/packages/frontend/src/pages/FirstLogin.vue
@@ -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"
@@ -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);
@@ -75,8 +75,6 @@ const onLogin = async () => {
 			pwd.value
 		);
 
-		console.log('firstfactor', firstfactor);
-
 		if (firstfactor.fa2) {
 			// redirect('/secondFactorForm');
 			tokenStore.currentView = CurrentView.MOBILEVERIFICATION;
@@ -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%;
@@ -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;
diff --git a/packages/frontend/src/pages/SecondFactor/SecondFactorFormMobile.vue b/packages/frontend/src/pages/SecondFactor/SecondFactorFormMobile.vue
index c003ee4..f423646 100644
--- a/packages/frontend/src/pages/SecondFactor/SecondFactorFormMobile.vue
+++ b/packages/frontend/src/pages/SecondFactor/SecondFactorFormMobile.vue
@@ -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;
diff --git a/packages/frontend/src/pages/mobile/FirstLogin.vue b/packages/frontend/src/pages/mobile/FirstLogin.vue
index 1c4f63f..832fff0 100644
--- a/packages/frontend/src/pages/mobile/FirstLogin.vue
+++ b/packages/frontend/src/pages/mobile/FirstLogin.vue
@@ -45,6 +45,7 @@ import { useI18n } from 'vue-i18n';
 import { useTokenStore } from 'src/stores/token';
 import { CurrentView } from 'src/constants/index';
 import InputAni from './../../components/InputAni.vue';
+import { BtNotify, NotifyDefinedType } from '@bytetrade/ui';
 
 const { t } = useI18n();
 const tokenStore = useTokenStore();
@@ -83,6 +84,10 @@ const onLogin = async () => {
 			}
 		}
 	} catch (err) {
+		BtNotify.show({
+			type: NotifyDefinedType.MESSAGE,
+			message: err.response.data.message
+		});
 		await InputAniRef.value.shakeInput();
 		await InputAniRef.value.handleClearInput();
 	} finally {
@@ -131,7 +136,7 @@ const updatePwd = (value) => {
 
 	.login-card {
 		width: 500px;
-		margin: 0 auto;
+		margin: 0 auto 50px;
 		background-color: transparent;
 		box-shadow: none;
 		padding-bottom: 56px;
@@ -152,6 +157,8 @@ const updatePwd = (value) => {
 				color: #ffffff;
 				margin-top: 30px;
 				margin-bottom: 4px;
+				text-underline-position: from-font;
+				text-decoration-skip-ink: none;
 			}
 			.login-conter {
 				font-size: 14px;
@@ -165,8 +172,7 @@ const updatePwd = (value) => {
 		}
 	}
 }
-:global(.q-field__control) {
-}
+
 :global(.text-white) {
 	font-size: 16px;
 	font-family: Roboto-Medium, Roboto;