Skip to main content

Yêu Cầu Chỉnh Sửa: Điều Chỉnh Vị Trí Nút Đăng Nhập Trên Màn Hình PIN & OTP

Ngày cập nhật: 08/07/2026
Loại: UI/UX Layout Adjustment — Keyboard Avoidance & Input Flow

Ảnh feedback:

1. Vấn Đề Hiện Tại​

Trên màn hình xác thực tài khoản hiện tại:

  • Nút Đăng nhập (màu vàng) đang được đặt ở góc dưới của màn hình (nằm dưới cả ô nhập mã PIN/OTP và các nút chuyển đổi hình thức đăng nhập khác).
  • Khi người dùng chạm vào các ô nhập mã (PIN hoặc OTP), bàn phím số (soft keyboard) của hệ thống sẽ tự động bật lên từ phía dưới màn hình.
  • Bàn phím này che khuất hoàn toàn nút Đăng nhập, hoặc đẩy toàn bộ giao diện lên khiến màn hình bị tràn, bị che khuất và cản trở thao tác của người dùng. Người dùng gặp khó khăn khi muốn bấm "Đăng nhập" sau khi điền mã PIN/OTP mà không thu gọn bàn phím.

2. Chi Tiết Yêu Cầu Thay Đổi Thiết Kế​

Để giải quyết triệt để lỗi giao diện khi bàn phím ảo xuất hiện, nút Đăng nhập sẽ được di chuyển lên phía trên các ô nhập liệu.

2.1 Vị trí mới đề xuất​

  • Di chuyển nút Đăng nhập lên trên phần nhập mật khẩu (mã PIN) và phần nhập mã OTP.
  • Thứ tự hiển thị từ trên xuống dưới:
    1. Card thông tin tài khoản đang đăng nhập (ví dụ: Vanminh1203 - vanminh1203@gmail.com).
    2. Dòng chữ hướng dẫn: "Vui lòng nhập mã PIN để tiếp tục sử dụng" hoặc "Vui lòng nhập mã OTP...".
    3. Nút "Đăng nhập" (màu vàng, đã di chuyển lên đây).
    4. Các ô nhập mã PIN (6 ô) / mã OTP (6 ô).
    5. Các liên kết/nút phụ: "Quên mã PIN", "Đăng nhập bằng OTP".
    6. Dòng chữ "hoặc" và nút "Đăng nhập bằng Touch ID".

2.2 Áp dụng đồng bộ​

Yêu cầu chỉnh sửa này cần được áp dụng đồng bộ trên cả 2 màn hình:

  • Màn hình nhập PIN (Passcode Login Screen).
  • Màn hình nhập mã OTP (OTP Verification Screen).

3. Gợi Ý Cấu Trúc Layout (React Native)​

Dưới đây là gợi ý cấu trúc phân cấp Layout sử dụng React Native nhằm đảm bảo tính thẩm mỹ và hiển thị tốt kể cả khi bàn phím xuất hiện:

import React from 'react';
import { View, Text, TouchableOpacity, ScrollView, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native';

const LoginScreen = () => {
  return (
    <KeyboardAvoidingView 
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={styles.keyboardContainer}
    >
      <ScrollView contentContainerStyle={styles.scrollContainer}>
        {/* 1. Thông tin tài khoản */}
        <View style={styles.accountCard}>
          <View style={styles.avatarPlaceholder} />
          <View>
            <Text style={styles.username}>Vanminh1203</Text>
            <Text style={styles.email}>vanminh1203@gmail.com</Text>
          </View>
          <TouchableOpacity style={styles.changeAccountBtn}>
            <Text style={styles.changeAccountText}>Đổi tài khoản</Text>
          </TouchableOpacity>
        </View>

        {/* 2. Dòng chữ hướng dẫn */}
        <Text style={styles.instructionText}>
          Vui lòng nhập mã PIN để tiếp tục sử dụng
        </Text>

        {/* 3. Nút Đăng nhập (Được đưa lên trên) */}
        <TouchableOpacity style={styles.primaryButton} onPress={handleLogin}>
          <Text style={styles.primaryButtonText}>Đăng nhập</Text>
        </TouchableOpacity>

        {/* 4. Ô nhập mật khẩu / PIN / OTP (Dưới nút Đăng nhập) */}
        <View style={styles.pinInputContainer}>
          {/* Component render 6 ô nhập mã */}
          <PINInputFields length={6} />
        </View>

        {/* 5. Các liên kết phụ */}
        <View style={styles.linkRow}>
          <TouchableOpacity onPress={handleForgotPin}>
            <Text style={styles.linkText}>Quên mã PIN</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.otpButtonBorder} onPress={handleOtpLogin}>
            <Text style={styles.otpButtonText}>Đăng nhập bằng OTP</Text>
          </TouchableOpacity>
        </View>

        {/* 6. Hoặc & Đăng nhập bằng Touch ID */}
        <Text style={styles.orText}>hoặc</Text>
        <TouchableOpacity style={styles.biometricButton} onPress={handleTouchId}>
          <Text style={styles.biometricButtonText}>Đăng nhập bằng Touch ID</Text>
        </TouchableOpacity>
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

Checklist Kỹ Thuật​

  • Di chuyển nút Đăng nhập lên phía dưới dòng chữ hướng dẫn và phía trên các ô nhập mã PIN tại file màn hình nhập PIN.
  • Di chuyển nút Đăng nhập lên phía dưới dòng chữ hướng dẫn và phía trên các ô nhập mã OTP tại file màn hình nhập OTP.
  • Kiểm tra cơ chế tự động submit (auto-submit) khi người dùng nhập đủ 6 ký tự để đảm bảo tính năng này hoạt động ổn định song song với nút Đăng nhập.
  • Sử dụng KeyboardAvoidingView và ScrollView đúng cách để tránh giao diện bị méo, co cụm hoặc tràn viền khi bàn phím ảo được bật.
  • Chạy thử nghiệm trên cả hai nền tảng Android và iOS để kiểm tra hiển thị trực quan.