notification of exceeding the number of devices in the subscription, support for vless:// links with templates by @legiz-ru

src/components/profile/hwid-error-dialog.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { AlertTriangle } from "lucide-react";
+
+export const HwidErrorDialog = () => {
+  const { t } = useTranslation();
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    const handleShowHwidError = (event: Event) => {
+      const customEvent = event as CustomEvent<string>;
+      setErrorMessage(customEvent.detail);
+    };
+
+    window.addEventListener('show-hwid-error', handleShowHwidError);
+
+    return () => {
+      window.removeEventListener('show-hwid-error', handleShowHwidError);
+    };
+  }, []);
+
+  if (!errorMessage) {
+    return null;
+  }
+
+  return (
+    <Dialog open={!!errorMessage} onOpenChange={() => setErrorMessage(null)}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <AlertTriangle className="h-5 w-5 text-destructive" />
+            {t("Device Limit Reached")}
+          </DialogTitle>
+          <DialogDescription className="pt-4 text-left">
+            {errorMessage}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button onClick={() => setErrorMessage(null)}>{t("OK")}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

src/components/profile/profile-viewer.tsx

@@ -12,13 +12,14 @@ import {
   createProfile,
   patchProfile,
   importProfile,
-  enhanceProfiles,
+  enhanceProfiles, createProfileFromShareLink,
 } from "@/services/cmds";
 import { useProfiles } from "@/hooks/use-profiles";
 import { showNotice } from "@/services/noticeService";
 import { version } from "@root/package.json";
 
 import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
 import {
   Dialog,
   DialogContent,
@@ -72,6 +73,7 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
     const [isCheckingUrl, setIsCheckingUrl] = useState(false);
     const [isImporting, setIsImporting] = useState(false);
     const [loading, setLoading] = useState(false);
+    const [selectedTemplate, setSelectedTemplate] = useState("default");
 
     const form = useForm<IProfileItem>({
       defaultValues: {
@@ -136,14 +138,9 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
       setIsCheckingUrl(true);
 
       const handler = setTimeout(() => {
-        try {
-          new URL(importUrl);
-          setIsUrlValid(true);
-        } catch (error) {
-          setIsUrlValid(false);
-        } finally {
-          setIsCheckingUrl(false);
-        }
+        const isValid = /^(https?|vmess|vless|ss|socks|trojan):\/\//.test(importUrl);
+        setIsUrlValid(isValid);
+        setIsCheckingUrl(false);
       }, 500);
       return () => {
         clearTimeout(handler);
@@ -151,30 +148,40 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
     }, [importUrl]);
 
     const handleImport = useLockFn(async () => {
-      if (!importUrl) return;
+      if (!importUrl || !isUrlValid) return;
       setIsImporting(true);
+
+      const isShareLink = /^(vmess|vless|ss|socks|trojan):\/\//.test(importUrl);
+
       try {
-        await importProfile(importUrl);
-        showNotice("success", t("Profile Imported Successfully"));
+        if (isShareLink) {
+          await createProfileFromShareLink(importUrl, selectedTemplate);
+          showNotice("success", t("Profile created from link successfully"));
+        } else {
+          await importProfile(importUrl);
+          showNotice("success", t("Profile Imported Successfully"));
+        }
         props.onChange();
         await enhanceProfiles();
         setOpen(false);
-      } catch (err) {
-        showNotice("info", t("Import failed, retrying with Clash proxy..."));
-        try {
-          await importProfile(importUrl, {
-            with_proxy: false,
-            self_proxy: true,
-          });
-          showNotice("success", t("Profile Imported with Clash proxy"));
-          props.onChange();
-          await enhanceProfiles();
-          setOpen(false);
-        } catch (retryErr: any) {
-          showNotice(
-            "error",
-            `${t("Import failed even with Clash proxy")}: ${retryErr?.message || retryErr.toString()}`,
-          );
+      } catch (err: any) {
+        const errorMessage = typeof err === 'string' ? err : (err.message || String(err));
+        const lowerErrorMessage = errorMessage.toLowerCase();
+        if (lowerErrorMessage.includes('device') || lowerErrorMessage.includes('устройств')) {
+          window.dispatchEvent(new CustomEvent('show-hwid-error', { detail: errorMessage }));
+        } else if (!isShareLink && errorMessage.includes("failed to fetch")) {
+            showNotice("info", t("Import failed, retrying with Clash proxy..."));
+            try {
+              await importProfile(importUrl, { with_proxy: false, self_proxy: true });
+              showNotice("success", t("Profile Imported with Clash proxy"));
+              props.onChange();
+              await enhanceProfiles();
+              setOpen(false);
+            } catch (retryErr: any) {
+              showNotice("error", `${t("Import failed even with Clash proxy")}: ${retryErr?.message || retryErr.toString()}`);
+            }
+        } else {
+            showNotice("error", errorMessage);
         }
       } finally {
         setIsImporting(false);
@@ -294,6 +301,21 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
                 )}
               </div>
 
+              {/^(vmess|vless|ss|socks|trojan):\/\//.test(importUrl) && (
+                  <div className="space-y-2">
+                  <Label>{t("Template")}</Label>
+                  <Select value={selectedTemplate} onValueChange={setSelectedTemplate}>
+                      <SelectTrigger>
+                          <SelectValue placeholder="Select a template..." />
+                      </SelectTrigger>
+                      <SelectContent>
+                          <SelectItem value="default">{t("Default Template")}</SelectItem>
+                          <SelectItem value="without_ru">{t("Template without RU Rules")}</SelectItem>
+                      </SelectContent>
+                  </Select>
+              </div>
+          )}
+
               <Button
                 variant="outline"
                 onClick={() => setShowAdvanced(!showAdvanced)}
@@ -440,7 +462,7 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
                           <FormLabel>User Agent</FormLabel>
                           <FormControl>
                             <Input
-                              placeholder={`clash-verge/v${version}`}
+                              placeholder={`koala-clash/v${version}`}
                               {...field}
                             />
                           </FormControl>