112 lines
3.0 KiB
TypeScript
112 lines
3.0 KiB
TypeScript
import {
|
|
View,
|
|
Text,
|
|
TextInput,
|
|
SafeAreaView,
|
|
TextInputProps,
|
|
TouchableHighlight,
|
|
} from "react-native";
|
|
import React, { useState } from "react";
|
|
import tw from "twrnc";
|
|
import useAuthStore from "../../stores/useAuthStore";
|
|
import { useTicketMut } from "../../hooks/useTicket";
|
|
import {
|
|
DEFAUL_PVE_URL,
|
|
DEFAUL_PVE_USER,
|
|
DEFAUL_PVE_PASSWORD,
|
|
} from "react-native-dotenv";
|
|
|
|
interface FormFieldProps extends TextInputProps {
|
|
label: string;
|
|
}
|
|
|
|
export function FormField({
|
|
label,
|
|
value,
|
|
onChangeText,
|
|
placeholder,
|
|
secureTextEntry,
|
|
inputMode,
|
|
}: FormFieldProps) {
|
|
return (
|
|
<>
|
|
<Text style={tw.style("ml-2 mb-2 text-slate-500")}>{label}</Text>
|
|
<TextInput
|
|
style={tw.style(
|
|
"border rounded-md border-slate-200 bg-slate-100 px-4 py-2 text-base"
|
|
)}
|
|
value={value}
|
|
onChangeText={onChangeText}
|
|
placeholder={placeholder}
|
|
secureTextEntry={secureTextEntry}
|
|
inputMode={inputMode}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default function Login() {
|
|
const [domain, setDomain] = useState(DEFAUL_PVE_URL ?? "");
|
|
const [username, setUsername] = useState(DEFAUL_PVE_USER ?? "");
|
|
const [password, setPassword] = useState(DEFAUL_PVE_PASSWORD ?? "");
|
|
|
|
const authStore = useAuthStore();
|
|
const ticketMut = useTicketMut({
|
|
onSuccess: ({ data: ticketData }) => {
|
|
console.log({ ticketData });
|
|
authStore.update({ domain, username, ticketData });
|
|
},
|
|
});
|
|
|
|
return (
|
|
<View style={tw.style("flex-1 justify-center")}>
|
|
<SafeAreaView style={tw.style("mx-4")}>
|
|
<View style={tw.style("ml-2 mb-8")}>
|
|
<Text style={tw.style("text-3xl font-semibold text-slate-700 mb-2")}>
|
|
PVERN
|
|
</Text>
|
|
<Text style={tw.style("text-xl font-semibold text-slate-600")}>
|
|
Sign In
|
|
</Text>
|
|
</View>
|
|
<View style={tw.style("mb-5")}>
|
|
<FormField
|
|
inputMode="url"
|
|
label="Server URL"
|
|
placeholder="https://pve.example.com"
|
|
value={domain}
|
|
onChangeText={setDomain}
|
|
/>
|
|
</View>
|
|
<View style={tw.style("mb-5")}>
|
|
<FormField
|
|
autoComplete="username"
|
|
label="Username"
|
|
placeholder="root@pam"
|
|
value={username}
|
|
onChangeText={setUsername}
|
|
/>
|
|
</View>
|
|
<View style={tw.style("mb-10")}>
|
|
<FormField
|
|
autoComplete="password"
|
|
label="Password"
|
|
placeholder="Strong and complicated password"
|
|
value={password}
|
|
onChangeText={setPassword}
|
|
secureTextEntry
|
|
/>
|
|
</View>
|
|
<TouchableHighlight
|
|
style={tw.style(
|
|
"flex bg-slate-700 rounded-md flex flex-row items-center justify-center"
|
|
)}
|
|
onPress={() => ticketMut.mutate({ domain, username, password })}
|
|
>
|
|
<Text style={tw.style("text-white font-semibold py-3")}>Sign In</Text>
|
|
</TouchableHighlight>
|
|
</SafeAreaView>
|
|
</View>
|
|
);
|
|
}
|