User Role (#69)

* fix: window.DisableAnimatedMan as boolean

* chore: auto-fix linting and formatting issues

* feat: user role

* feat: use user agent_secret

* feat: hide setting when user role is not admin

* feat: new waf api

* chore: auto-fix linting and formatting issues

* fix: admin settings page

* feat: online-user setting

* fix: pagination

---------

Co-authored-by: hamster1963 <hamster1963@users.noreply.github.com>

src/components/user.tsx

@@ -20,6 +20,13 @@ import {
 } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
 import { ScrollArea } from "@/components/ui/scroll-area"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
 import { IconButton } from "@/components/xui/icon-button"
 import { ModelUser } from "@/types"
 import { zodResolver } from "@hookform/resolvers/zod"
@@ -35,6 +42,7 @@ interface UserCardProps {
 
 const userFormSchema = z.object({
     username: z.string().min(1),
+    role: z.number().int().min(0).max(1),
     password: z.string().min(8).max(72),
 })
 
@@ -44,6 +52,7 @@ export const UserCard: React.FC<UserCardProps> = ({ mutate }) => {
         resolver: zodResolver(userFormSchema),
         defaultValues: {
             username: "",
+            role: 1,
             password: "",
         },
         resetOptions: {
@@ -100,6 +109,34 @@ export const UserCard: React.FC<UserCardProps> = ({ mutate }) => {
                                         </FormItem>
                                     )}
                                 />
+                                <FormField
+                                    control={form.control}
+                                    name="role"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>{t("Role")}</FormLabel>
+                                            <Select
+                                                onValueChange={(value) =>
+                                                    field.onChange(parseInt(value))
+                                                }
+                                                defaultValue={field.value.toString()}
+                                            >
+                                                <FormControl>
+                                                    <SelectTrigger>
+                                                        <SelectValue
+                                                            placeholder={t("SelectRole")}
+                                                        />
+                                                    </SelectTrigger>
+                                                </FormControl>
+                                                <SelectContent>
+                                                    <SelectItem value="0">{t("Admin")}</SelectItem>
+                                                    <SelectItem value="1">{t("User")}</SelectItem>
+                                                </SelectContent>
+                                            </Select>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
                                 <DialogFooter className="justify-end">
                                     <DialogClose asChild>
                                         <Button type="button" className="my-2" variant="secondary">