126 lines
3.3 KiB
TypeScript
126 lines
3.3 KiB
TypeScript
import type { AFormRef } from '@/components/common/ao'
|
|
import { useRouter } from 'expo-router'
|
|
import { Lock, UserRound } from 'lucide-react-native'
|
|
import { useRef, useState } from 'react'
|
|
|
|
import { Image, ScrollView, View } from 'react-native'
|
|
import { AButton, AForm, AFormItem, AInput } from '@/components/common/ao'
|
|
import { registerDefaultApi } from '@/request/api/auth'
|
|
import { toast } from '@/utils/toast'
|
|
|
|
interface RegisterForm {
|
|
username: string
|
|
password: string
|
|
confirmPassword: string
|
|
}
|
|
|
|
export default function AuthRegister() {
|
|
const router = useRouter()
|
|
const scrollRef = useRef<ScrollView>(null)
|
|
|
|
const [form, setForm] = useState<RegisterForm>({
|
|
username: '',
|
|
password: '',
|
|
confirmPassword: '',
|
|
})
|
|
const [loading, setLoading] = useState(false)
|
|
const formRef = useRef<AFormRef>(null)
|
|
|
|
const handleInputChange = (field: keyof RegisterForm, value: string) => {
|
|
setForm(prev => ({ ...prev, [field]: value }))
|
|
}
|
|
|
|
const handleRegister = async () => {
|
|
if (formRef.current?.validate()) {
|
|
setLoading(true)
|
|
|
|
await registerDefaultApi({
|
|
account: form.username,
|
|
password: form.password,
|
|
}).then((res) => {
|
|
if (res.isSuccess) {
|
|
console.log(res)
|
|
toast.show({
|
|
title: '注册成功',
|
|
})
|
|
// router.replace('/auth/login')
|
|
}
|
|
else {
|
|
toast.show({
|
|
title: res.message || '注册失败',
|
|
})
|
|
}
|
|
}).catch((_err) => {
|
|
}).finally(() => {
|
|
setLoading(false)
|
|
})
|
|
}
|
|
}
|
|
|
|
return (
|
|
<ScrollView ref={scrollRef} style={{ flex: 1 }}>
|
|
<View className="flex flex-col items-center px-6 bg-white ">
|
|
<Image
|
|
source={require('@/static/images/logo.png')}
|
|
style={{ width: 120, height: 120 }}
|
|
className="my-12"
|
|
/>
|
|
|
|
<AForm ref={formRef} form={form} scrollRef={scrollRef}>
|
|
<AFormItem
|
|
name="username"
|
|
label="账号"
|
|
isRequired
|
|
>
|
|
<AInput
|
|
placeholder="请输入账号"
|
|
leftIcon={UserRound}
|
|
value={form.username}
|
|
onChange={text => handleInputChange('username', text)}
|
|
/>
|
|
</AFormItem>
|
|
|
|
<AFormItem
|
|
name="password"
|
|
label="密码"
|
|
isRequired
|
|
>
|
|
<AInput
|
|
placeholder="请输入密码"
|
|
leftIcon={Lock}
|
|
isPassword
|
|
value={form.password}
|
|
onChange={text => handleInputChange('password', text)}
|
|
/>
|
|
</AFormItem>
|
|
|
|
<AFormItem
|
|
name="confirmPassword"
|
|
label="确认密码"
|
|
isRequired
|
|
rules={[
|
|
{
|
|
validator: val => val === form.password,
|
|
message: '两次密码不一致',
|
|
},
|
|
]}
|
|
>
|
|
<AInput
|
|
placeholder="请再次输入密码"
|
|
leftIcon={Lock}
|
|
isPassword
|
|
value={form.confirmPassword}
|
|
onChange={text => handleInputChange('confirmPassword', text)}
|
|
/>
|
|
</AFormItem>
|
|
</AForm>
|
|
|
|
<AButton className="w-full mb-4" onPress={handleRegister} loading={loading}>
|
|
|
|
注册
|
|
</AButton>
|
|
</View>
|
|
</ScrollView>
|
|
)
|
|
}
|