fix(LoginPage):优化LoginPage登录页面组件

Author: hy

packages/core/src/LoginPage/index.tsx

@@ -7,25 +7,30 @@ import { useTheme } from '@shopify/restyle';
 import { logSvg, cEyes, oEyes } from './svg';
 
 interface LoginPageProps {
-  showPassword?: boolean;
   usernamePlaceholder?: string;
   inputContainerStyle?: object;
   buttonStyle?: object;
   containerStyle?: object;
   buttonText?: string;
+  customContent?: React.ReactNode;
   onLogin?: (username: string, password: string) => void;
+  onForgetPassword?: () => void;
 }
 
 const LoginPage: React.FC<LoginPageProps> = ({
-  showPassword = true,
-  usernamePlaceholder = '请输入用户名',
+  usernamePlaceholder,
   inputContainerStyle = {},
   containerStyle = {},
   buttonStyle = {},
   buttonText = 'Login',
+  customContent,
   onLogin,
+  onForgetPassword,
 }) => {
-  const [isShowPassword, setIsShowPassword] = useState(false);
+  const [showPsd, setShowPsd] = useState(false);
+  const [showCode, setShowCode] = useState(false); // added state
+  console.log('showCode', showCode);
+
   const theme = useTheme<Theme>();
   const styles = createStyles({
     border: theme.colors.border || '#CCC',
@@ -57,43 +62,48 @@ const LoginPage: React.FC<LoginPageProps> = ({
           <Icon xml={logSvg(theme)} size={30} />
           <Text style={styles.title}>Login</Text>
         </View>
-        <View style={[styles.inputContainer, inputContainerStyle]}>
+        <View style={[styles.inputContainer, { paddingHorizontal: 15 }, inputContainerStyle]}>
           <TextInput
-            placeholder={usernamePlaceholder}
-            placeholderTextColor={theme.colors.icon}
+            placeholder={usernamePlaceholder ? usernamePlaceholder : `请输入${showCode ? '手机号码' : '用户名'}`}
+            placeholderTextColor={theme.colors.border}
             style={styles.input}
+            keyboardType={showCode ? 'numeric' : 'default'}
             onChangeText={onChangeUsername}
           />
         </View>
-        {showPassword ? (
-          <View style={[styles.inputContainers, inputContainerStyle]}>
+        {!showCode ? (
+          <View style={[styles.inputContainer, styles.inputC, { paddingHorizontal: 15 }, inputContainerStyle]}>
             <TextInput
               placeholder="请输入密码"
-              placeholderTextColor={theme.colors.icon}
-              secureTextEntry={!isShowPassword}
+              placeholderTextColor={theme.colors.border}
+              secureTextEntry={!showPsd}
               style={[styles.input, { width: '92%' }]}
               onChangeText={onChangePassword}
             />
-            <TouchableOpacity onPress={() => setIsShowPassword(!isShowPassword)}>
-              <Icon xml={isShowPassword ? cEyes : oEyes} size={20} />
+            <TouchableOpacity onPress={() => setShowPsd(!showPsd)}>
+              <Icon xml={showPsd ? cEyes : oEyes} size={20} />
             </TouchableOpacity>
           </View>
         ) : (
           <VerificationCode
             value={password}
             count={60}
             onChange={onChangePassword}
-            outerStyle={[styles.inputContainer, inputContainerStyle]}
+            outerStyle={[styles.inputContainer, styles.inputC, inputContainerStyle]}
           />
         )}
-        <View style={styles.textSty1}>
-          <TouchableOpacity>
-            <Text style={styles.textSty}>忘记密码</Text>
-          </TouchableOpacity>
-          <TouchableOpacity>
-            <Text style={styles.textSty}>验证码登录</Text>
-          </TouchableOpacity>
-        </View>
+        {customContent ? (
+          customContent
+        ) : (
+          <View style={styles.textSty1}>
+            <TouchableOpacity onPress={onForgetPassword}>
+              <Text style={styles.textSty}>忘记密码</Text>
+            </TouchableOpacity>
+            <TouchableOpacity onPress={() => setShowCode(!showCode)}>
+              <Text style={styles.textSty}>{`${showCode ? '用户名' : '验证码'}登录`}</Text>
+            </TouchableOpacity>
+          </View>
+        )}
         <TouchableOpacity style={[styles.button, buttonStyle]} onPress={handleLogin}>
           <Text style={[styles.buttonText, styles.buttonTextStyle]}>{buttonText}</Text>
         </TouchableOpacity>
@@ -126,30 +136,22 @@ function createStyles({ border, putCol }: CreStyle) {
     title: {
       fontSize: 24,
       fontWeight: 'bold',
-      marginLeft: 20,
+      marginLeft: 15,
       color: putCol,
     },
     inputContainer: {
       height: 40,
-      marginBottom: 20,
       borderColor: border,
       borderWidth: 1,
       borderRadius: 5,
       justifyContent: 'center',
-      paddingHorizontal: 15,
       flexDirection: 'row',
       alignItems: 'center',
     },
-    inputContainers: {
-      height: 40,
+    inputC: {
+      paddingHorizontal: 10,
+      marginTop: 20,
       marginBottom: 5,
-      borderColor: border,
-      borderWidth: 1,
-      borderRadius: 5,
-      justifyContent: 'center',
-      paddingHorizontal: 15,
-      flexDirection: 'row',
-      alignItems: 'center',
     },
     input: {
       flex: 1,

packages/core/src/VerificationCode/index.tsx

@@ -78,6 +78,7 @@ const VerificationCode: FC<VerificationCodeProps> = ({
       border={null}
       containerStyle={[{ height: 40 }, outerStyle]}
       placeholder={placeholder}
+      placeholderTextColor={theme.colors.border}
       value={value}
       onChangeText={(text) => onChange(text)}
       extraEnd={
@@ -86,7 +87,7 @@ const VerificationCode: FC<VerificationCodeProps> = ({
           disabled={disabled}
           onPress={handleClick}
           color={theme.colors.background || '#fff'}
-          style={buttonStyle}
+          style={[buttonStyle]}
         >
           <Text color={disabled ? 'disabled' : 'text'}>{disabled ? `${resendLabel}(${timer}s)` : label}</Text>
         </Button>