1import { Button } from "@/components/ui/button"
2import { Input } from "@/components/ui/input"
3import { Label } from "@/components/ui/label"
4import {
5 Select,
6 SelectContent,
7 SelectItem,
8 SelectTrigger,
9 SelectValue,
10} from "@/components/ui/select"
11import { network } from "@/lib/config"
12import { useState } from "react"
13import { handleHandshakeFile, handleReset, handleSSID, handleUpload, validatePassword } from "./helper"
14
15const SetupScreen = ({ networks }: { networks: network[] }) => {
16 const [selectedNetwork, setSelectedNetwork] = useState<network>()
17 const [selectedPassword, setSelectedPassword] = useState("")
18 const [networksWithHandshake, setNetworksWithHandshake] = useState<network[]>(networks.filter((network) => network.handshake))
19 return (
20 <div className="w-[300px] sm:w-[500px] md:w-[600px] p-5 border border-gray-700 rounded-lg items-center justify-center mt-3">
21 <Label htmlFor="ssid-change">SSID</Label>
22 <div className="flex flex-col w-full items-center justify-between sm:flex-row gap-2 mt-1">
23 <Input
24 className="w-full md:max-w-md"
25 type="text"
26 id="ssid-change"
27 placeholder="Change SSID"
28 />
29 <Button variant={"outline"} className="w-full sm:w-fit" onClick={handleSSID}>
30 Change
31 </Button>
32 </div>
33 <div className="mt-7">
34 <Label htmlFor="handshake-file">Handshake</Label>
35 <div className="flex flex-col w-full items-center justify-between sm:flex-row gap-2">
36 <Input
37 id="handshake-file"
38 type="file"
39 className="mt-1 w-full md:max-w-md cursor-pointer "
40 onChange={handleHandshakeFile}
41 accept=".cap,.pcap"
42 />
43 <Button variant={"outline"} className="w-full sm:w-fit" onClick={handleUpload}>
44 Upload
45 </Button>
46 </div>
47 </div>
48
49 <div className="mt-7">
50 <Label htmlFor="password-validation">Password Validation</Label>
51 <p className="text-sm text-gray-400">(Only SSID with Handshake can be validated)</p>
52 <div className="flex flex-col w-full items-center justify-between sm:flex-row gap-2 mt-3">
53 <Select disabled={networksWithHandshake.length === 0}
54 onValueChange={(value) =>
55 setSelectedNetwork(networks.find((network) => network.ssid === value)!)
56 }
57 >
58 <SelectTrigger className="mt-1 w-full md:max-w-[200px]">
59 <SelectValue placeholder={networksWithHandshake.length > 0 ? "Select SSID" : "No SSID with Handshake"} />
60 </SelectTrigger>
61 <SelectContent>
62 {networksWithHandshake.map((network) => (
63 <SelectItem key={network.ssid} value={network.ssid}>
64 {network.ssid}
65 </SelectItem>
66 ))}
67 </SelectContent>
68 </Select>
69 <Input
70 id="password-validation"
71 type="text"
72 className="mt-1 w-full md:max-w-md"
73 onChange={(e) => setSelectedPassword(e.target.value)}
74 disabled={networksWithHandshake.length === 0}
75 />
76 <Button
77 variant={"outline"}
78 className="w-full sm:w-fit"
79 onClick={() => validatePassword(selectedPassword, selectedNetwork!)}
80 disabled={networksWithHandshake.length === 0}
81 >
82 Validate
83 </Button>
84 </div>
85 </div>
86
87 <div className="flex flex-col gap-5 mt-5 border rounded-lg border-opacity-25 p-3">
88 <label className="text-white text-lg font-semibold">Danger Zone :</label>
89 <div className="flex gap-3 flex-col md:flex-row md:items-center ">
90 <span className="hidden sm:block md:w-3/5 ">
91 <label className="text-white text-md font-semibold">Reset handshakes</label>
92 <p className="text-white text-sm">
93 This will delete all the handshakes stored in the device.
94 </p>
95 </span>
96 <Button
97 variant="destructive"
98 className="w-full md:w-2/5"
99 onClick={() => { handleReset("handshake"); setNetworksWithHandshake([]) }}
100 >
101 Reset Handshakes
102 </Button>
103 </div>
104
105 <div className="flex gap-3 flex-col md:flex-row md:items-center">
106 <span className="hidden sm:block md:w-3/5">
107 <label className="text-white text-md font-semibold">Reset Passwords</label>
108 <p className="text-white text-sm">
109 This will delete all the passwords stored in the device.
110 </p>
111 </span>
112 <Button
113 variant="destructive"
114 className="w-full md:w-2/5"
115 onClick={() => handleReset("password")}
116 >
117 Reset Passwords
118 </Button>
119 </div>
120 </div>
121 </div>
122 )
123}
124
125export default SetupScreen