Hank
0e8fe3bb9a
Login: fixed-length 4-digit PIN that auto-submits on the 4th digit (no submit button to scroll to on small iPhone screens) and clears on a wrong PIN. Compact, vertically-centered keypad so it fits without scrolling. Operator tracking: after PIN auth, staff enter their name (new /operator screen, persisted per device). The name is sent as X-Operator on every authed request and recorded on each check-in/undo/ice audit entry (new Operator column), so logs show who did what. Shown in the scanner header and the admin audit view. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
96 lines
3 KiB
TypeScript
96 lines
3 KiB
TypeScript
import { useState } from "react";
|
|
import { StyleSheet, View, Text, TextInput, Pressable, KeyboardAvoidingView, Platform } from "react-native";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
import { useAuth } from "../lib/auth";
|
|
import { theme } from "../lib/theme";
|
|
|
|
export default function OperatorScreen() {
|
|
const { setOperator, signOut } = useAuth();
|
|
const [name, setName] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
const submit = async () => {
|
|
const trimmed = name.trim();
|
|
if (!trimmed || busy) return;
|
|
setBusy(true);
|
|
await setOperator(trimmed);
|
|
// The auth gate navigates to the scanner once operator is set.
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView style={styles.root}>
|
|
<KeyboardAvoidingView
|
|
style={styles.flex}
|
|
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
|
>
|
|
<View style={styles.inner}>
|
|
<Text style={styles.logo}>🐻</Text>
|
|
<Text style={styles.title}>Who's scanning?</Text>
|
|
<Text style={styles.subtitle}>Your name is recorded with every check-in.</Text>
|
|
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder="Your name"
|
|
placeholderTextColor={theme.textDim}
|
|
value={name}
|
|
onChangeText={setName}
|
|
autoCapitalize="words"
|
|
autoCorrect={false}
|
|
autoFocus
|
|
returnKeyType="go"
|
|
onSubmitEditing={submit}
|
|
maxLength={60}
|
|
/>
|
|
|
|
<Pressable
|
|
style={[styles.btn, (busy || !name.trim()) && styles.btnDisabled]}
|
|
onPress={submit}
|
|
disabled={busy || !name.trim()}
|
|
>
|
|
<Text style={styles.btnText}>{busy ? "Starting…" : "Start scanning"}</Text>
|
|
</Pressable>
|
|
|
|
<Pressable style={styles.back} onPress={() => signOut()} hitSlop={10}>
|
|
<Text style={styles.backText}>Sign out</Text>
|
|
</Pressable>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
root: { flex: 1, backgroundColor: theme.bg },
|
|
flex: { flex: 1 },
|
|
inner: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 28 },
|
|
logo: { fontSize: 44 },
|
|
title: { color: theme.text, fontSize: 26, fontWeight: "800", marginTop: 6 },
|
|
subtitle: { color: theme.textDim, fontSize: 15, marginTop: 6, textAlign: "center" },
|
|
input: {
|
|
width: "100%",
|
|
maxWidth: 340,
|
|
backgroundColor: theme.card,
|
|
borderWidth: 1,
|
|
borderColor: theme.cardBorder,
|
|
borderRadius: 14,
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 16,
|
|
color: theme.text,
|
|
fontSize: 20,
|
|
marginTop: 28,
|
|
textAlign: "center",
|
|
},
|
|
btn: {
|
|
width: "100%",
|
|
maxWidth: 340,
|
|
backgroundColor: theme.successBright,
|
|
paddingVertical: 16,
|
|
borderRadius: 14,
|
|
marginTop: 18,
|
|
alignItems: "center",
|
|
},
|
|
btnDisabled: { opacity: 0.4 },
|
|
btnText: { color: "#06210f", fontSize: 20, fontWeight: "800" },
|
|
back: { marginTop: 20, padding: 8 },
|
|
backText: { color: theme.textDim, fontSize: 15 },
|
|
});
|