feat: add super-admin registration and authentication flow

- Implement register form with password generation and validation
- Add authentication status query to dynamically render login or register form
- Update backend contract to version 0.2.2
- Add localization support for registration form
- Enhance form error handling with more detailed error messages
- Add generate-password-ts package for secure password generation

Author: kastov

package-lock.json

@@ -2,7 +2,7 @@
   "name": "@remnawave/frontend",
   "private": false,
   "type": "module",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "license": "AGPL-3.0-only",
   "author": "REMNAWAVE <github.com/remnawave>",
   "homepage": "https://github.com/remnawave",
@@ -45,7 +45,7 @@
     "@mantine/nprogress": "^7.17.0",
     "@monaco-editor/react": "^4.7.0",
     "@paralleldrive/cuid2": "2.2.2",
-    "@remnawave/backend-contract": "0.1.14",
+    "@remnawave/backend-contract": "0.2.2",
     "@stablelib/base64": "^2.0.1",
     "@stablelib/x25519": "^2.0.1",
     "@tabler/icons-react": "^3.30.0",
@@ -58,6 +58,7 @@
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.13",
     "dotenv": "^16.4.5",
+    "generate-password-ts": "^1.6.5",
     "i18next": "^24.2.2",
     "i18next-browser-languagedetector": "^8.0.4",
     "i18next-http-backend": "^3.0.2",

package.json

@@ -380,5 +380,21 @@
             "user-deletion-description": "Delete all users with selected status. If you will delete users with \"Active\" status, you should restart all nodes to apply changes.",
             "select-status": "Delete by status"
         }
+    },
+    "register-form": {
+        "feature": {
+            "username": "Username",
+            "password": "Password",
+            "generate": "Generate & Copy",
+            "confirm-password": "Confirm password",
+            "sign-up": "Sign up",
+            "password-copied": "Password copied",
+            "password-copied-message": "Password copied to clipboard",
+            "password-copied-error": "Failed to copy password to clipboard",
+            "error": "Error",
+            "passwords-do-not-match": "Passwords do not match",
+            "password-too-short": "Minimum 12 characters",
+            "register-description": "Create a super-admin account to get started"
+        }
     }
 }

public/locales/en/remnawave.json

@@ -380,5 +380,21 @@
             "user-deletion-description": "حذف تمامی کاربران با وضعیت انتخاب شده. اگر کاربران با وضعیت \"Active\" را حذف می‌کنید، باید تمامی گره‌ها را برای اعمال تغییرات مجدداً راه‌اندازی کنید.",
             "select-status": "حذف بر اساس وضعیت"
         }
+    },
+    "register-form": {
+        "feature": {
+            "username": "Username",
+            "password": "Password",
+            "generate": "Generate & Copy",
+            "confirm-password": "Confirm password",
+            "sign-up": "Sign up",
+            "password-copied": "Password copied",
+            "password-copied-message": "Password copied to clipboard",
+            "password-copied-error": "Failed to copy password to clipboard",
+            "error": "Error",
+            "passwords-do-not-match": "Passwords do not match",
+            "password-too-short": "Minimum 12 characters",
+            "register-description": "Create a super-admin account to get started"
+        }
     }
 }

public/locales/fa/remnawave.json

@@ -380,5 +380,21 @@
             "select-status": "Удалить по статусу",
             "user-deletion-description": "Удалить всех пользователей с выбранным статусом. \nЕсли вы удалите пользователей со статусом «ACTIVE», вы должны перезапустить все ноды, чтобы применить изменения."
         }
+    },
+    "register-form": {
+        "feature": {
+            "confirm-password": "Подтвердите пароль",
+            "error": "Ошибка",
+            "generate": "Сгенерировать и скопировать",
+            "password": "Пароль",
+            "password-copied": "Пароль скопирован",
+            "password-copied-error": "Не удалось скопировать пароль в буфер обмена",
+            "password-copied-message": "Пароль скопирован в буфер обмена",
+            "password-too-short": "Минимум 12 символов",
+            "passwords-do-not-match": "Пароли не совпадают",
+            "register-description": "Создайте аккаунт супер-админа, чтобы начать",
+            "sign-up": "Зарегистрироваться",
+            "username": "Имя пользователя"
+        }
     }
 }

public/locales/ru/remnawave.json

@@ -3,13 +3,12 @@ import { LoginCommand } from '@remnawave/backend-contract'
 import { useForm, zodResolver } from '@mantine/form'
 import { PiSignInDuotone } from 'react-icons/pi'
 import { useTranslation } from 'react-i18next'
-import MD5 from 'crypto-js/md5'
 
 import { handleFormErrors } from '@shared/utils/misc'
 import { useAuth } from '@shared/hooks/use-auth'
 import { useLogin } from '@shared/api/hooks'
 
-export const LoginForm = () => {
+export const LoginFormFeature = () => {
     const { t } = useTranslation()
 
     const { setIsAuthenticated } = useAuth()
@@ -27,7 +26,7 @@ export const LoginForm = () => {
             {
                 variables: {
                     username: variables.username,
-                    password: MD5(variables.password).toString()
+                    password: variables.password
                 }
             },
             {

src/features/auth/index.ts renamed to src/features/auth/login-form/index.ts

@@ -0,0 +1 @@
+export * from './register-form.feature'

src/features/auth/login-form.feature.tsx renamed to src/features/auth/login-form/login-form.feature.tsx

@@ -0,0 +1,165 @@
+import {
+    Button,
+    Container,
+    Group,
+    Paper,
+    PasswordInput,
+    Text,
+    TextInput,
+    Title
+} from '@mantine/core'
+import { PiShuffleDuotone, PiSignpostDuotone } from 'react-icons/pi'
+import { RegisterCommand } from '@remnawave/backend-contract'
+import { notifications } from '@mantine/notifications'
+import { useForm, zodResolver } from '@mantine/form'
+import { generate } from 'generate-password-ts'
+import { useTranslation } from 'react-i18next'
+import { useClipboard } from '@mantine/hooks'
+import { useEffect } from 'react'
+
+import { handleFormErrors } from '@shared/utils/misc'
+import { useAuth } from '@shared/hooks/use-auth'
+import { useRegister } from '@shared/api/hooks'
+
+export const RegisterFormFeature = () => {
+    const { t } = useTranslation()
+
+    const { setIsAuthenticated } = useAuth()
+
+    const { copy, copied, error } = useClipboard()
+
+    const form = useForm({
+        validate: {
+            ...zodResolver(RegisterCommand.RequestSchema),
+            confirmPassword: (value, values) =>
+                value !== values.password
+                    ? t('register-form.feature.passwords-do-not-match')
+                    : null,
+            password: (value) =>
+                value.length < 12 ? t('register-form.feature.password-too-short') : null
+        },
+        initialValues: {
+            username: '',
+            password: '',
+            confirmPassword: ''
+        }
+    })
+
+    const { mutate: register, isPending: isLoading } = useRegister({
+        mutationFns: {
+            onSuccess: () => setIsAuthenticated(true),
+            onError: (error) => {
+                handleFormErrors(form, error)
+            }
+        }
+    })
+
+    const handleGeneratePassword = () => {
+        const newPassword = generate({
+            length: 32,
+            numbers: true,
+            symbols: false,
+            uppercase: true,
+            lowercase: true,
+            strict: true
+        })
+
+        form.setValues({
+            ...form.values,
+            password: newPassword,
+            confirmPassword: newPassword
+        })
+
+        copy(newPassword)
+    }
+
+    useEffect(() => {
+        if (error) {
+            notifications.show({
+                title: t('register-form.feature.error'),
+                message: t('register-form.feature.password-copied-error')
+            })
+        }
+
+        if (copied) {
+            notifications.show({
+                title: t('register-form.feature.password-copied'),
+                message: t('register-form.feature.password-copied-message')
+            })
+        }
+    }, [error, copied])
+
+    const handleSubmit = form.onSubmit((variables) => {
+        register({
+            variables: {
+                username: variables.username,
+                password: variables.password
+            }
+        })
+    })
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <Container my={40} size={'100%'}>
+                <Paper mt={30} p={30} radius="md">
+                    <Title mb="xs" order={2} ta="center">
+                        {t('register-form.feature.sign-up')}
+                    </Title>
+                    <Text c="dimmed" mb="md" size="sm" ta="center">
+                        {t('register-form.feature.register-description')}
+                    </Text>
+
+                    <TextInput
+                        label={t('register-form.feature.username')}
+                        placeholder="IamSuperAdmin"
+                        required
+                        size="md"
+                        {...form.getInputProps('username')}
+                    />
+
+                    <Group align="flex-end" mt="md">
+                        <PasswordInput
+                            label={t('register-form.feature.password')}
+                            placeholder="soy_t5Px5`Gm4j0@Hf&Dd7iU"
+                            required
+                            size="md"
+                            style={{ flex: 1 }}
+                            {...form.getInputProps('password')}
+                        />
+                    </Group>
+
+                    <PasswordInput
+                        label={t('register-form.feature.confirm-password')}
+                        mt="md"
+                        placeholder="soy_t5Px5`Gm4j0@Hf&Dd7iU"
+                        required
+                        size="md"
+                        {...form.getInputProps('confirmPassword')}
+                    />
+
+                    <Button
+                        fullWidth
+                        leftSection={<PiShuffleDuotone size="1rem" />}
+                        mt="xl"
+                        onClick={handleGeneratePassword}
+                        size="md"
+                        variant="light"
+                    >
+                        {t('register-form.feature.generate')}
+                    </Button>
+
+                    <Button
+                        fullWidth
+                        leftSection={<PiSignpostDuotone size="1rem" />}
+                        loading={isLoading}
+                        mt="xl"
+                        size="md"
+                        type="submit"
+                    >
+                        {t('register-form.feature.sign-up')}
+                    </Button>
+                </Paper>
+            </Container>
+        </form>
+    )
+}