116 lines
3.0 KiB
TypeScript
116 lines
3.0 KiB
TypeScript
import { Lock, UserRound } from 'lucide-react-native'
|
|
import { useState } from 'react'
|
|
import { Image, Text, View } from 'react-native'
|
|
import { AForm, AFormItem, AInput } from '@/components/common/ao'
|
|
import { IconQq, IconWeixin, IconZhiwen } from '@/components/iconfont'
|
|
import { Button, ButtonText } from '@/components/ui/button'
|
|
import {
|
|
Checkbox,
|
|
CheckboxIcon,
|
|
CheckboxIndicator,
|
|
CheckboxLabel,
|
|
} from '@/components/ui/checkbox'
|
|
import { Divider } from '@/components/ui/divider'
|
|
|
|
import { CheckIcon } from '@/components/ui/icon'
|
|
|
|
import alovaInstance from '@/request'
|
|
import { useToast } from '@/utils/toast'
|
|
|
|
interface LoginForm {
|
|
username: string
|
|
password: string
|
|
rememberMe?: boolean
|
|
socialType?: 'qq' | 'weixin' | 'fingerprint'
|
|
}
|
|
|
|
export default function AuthLogin() {
|
|
const toast = useToast()
|
|
|
|
const [form, setForm] = useState<LoginForm>({
|
|
username: '',
|
|
password: '',
|
|
rememberMe: true,
|
|
})
|
|
const handleInputChange = (field: keyof LoginForm, value: string) => {
|
|
setForm(prev => ({ ...prev, [field]: value }))
|
|
}
|
|
const defaultLogin = () => {
|
|
alovaInstance.Post('/auth/login/default', {
|
|
title: 'foo',
|
|
body: 'bar',
|
|
userId: 1,
|
|
}).then((res) => {
|
|
console.log(res)
|
|
})
|
|
}
|
|
|
|
return (
|
|
|
|
<View className="flex flex-col items-center px-6 h-full">
|
|
<Image
|
|
source={require('@/static/images/logo.png')}
|
|
style={{ width: 120, height: 120 }}
|
|
className="my-12"
|
|
/>
|
|
|
|
<AForm form={form}>
|
|
<AFormItem label="账号">
|
|
<AInput
|
|
value={form.username}
|
|
onChange={text => handleInputChange('username', text)}
|
|
/>
|
|
</AFormItem>
|
|
<AFormItem label="密码">
|
|
<AInput
|
|
isPassword
|
|
value={form.password}
|
|
onChange={text => handleInputChange('password', text)}
|
|
/>
|
|
</AFormItem>
|
|
</AForm>
|
|
|
|
<View className="w-full flex-row justify-between items-center mb-6">
|
|
<Checkbox
|
|
value="rememberMe"
|
|
isChecked={form.rememberMe}
|
|
onChange={checked =>
|
|
setForm(prev => ({ ...prev, rememberMe: checked }))}
|
|
>
|
|
<CheckboxIndicator>
|
|
<CheckboxIcon as={CheckIcon} />
|
|
</CheckboxIndicator>
|
|
<CheckboxLabel>记住我</CheckboxLabel>
|
|
</Checkbox>
|
|
|
|
<Text className="text-blue-500">
|
|
忘记密码?
|
|
</Text>
|
|
</View>
|
|
|
|
<Button className="w-full" onPress={() => defaultLogin()}>
|
|
<ButtonText>登录</ButtonText>
|
|
</Button>
|
|
|
|
<View className="flex-row items-center my-8 w-full">
|
|
<View className="flex-1">
|
|
<Divider />
|
|
</View>
|
|
|
|
<Text className="mx-3 text-gray-500 text-sm">社交账号</Text>
|
|
|
|
<View className="flex-1">
|
|
<Divider />
|
|
</View>
|
|
</View>
|
|
|
|
<View className="w-full flex-row justify-between items-center">
|
|
<IconQq size={32} />
|
|
<IconWeixin size={32} />
|
|
<IconZhiwen size={32} />
|
|
</View>
|
|
|
|
</View>
|
|
)
|
|
}
|