Anjing Webshells

Website : rimsha.abasa.com
: / var / www / talha_silentcontent / src / components /
Filename : StandardSites.tsx
back
// @ts-nocheck

"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { toast } from "@/components/ui/use-toast";
import { useMutation } from "@tanstack/react-query";
import axios, { AxiosError } from "axios";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "./ui/card";
import {useForm} from "react-hook-form";
import dynamic from "next/dynamic";
import { useState } from "react";

const Joyride = dynamic(() => import('react-joyride'), { ssr: false });  



export default function StandardSites({isTourRunning}){


    const [{ run, steps }, setState] = useState({
        run: true,
        steps: [
          {
            content: <h2>You can manage your API Keys and WordPress Site settings from here</h2>,
            locale: { skip: <strong>SKIP</strong> },
            placement: "center",
            target: "body"
          },
          {
            content: (<>
                <p className="text-sm mb-4">Add the URL address of the WP website you want to post your articles on!</p>
                <p className="text-red-500 text-xs">Important! Make sure your wordpress website url ends with a slash {"(/)"}. Example: https://talha.abasa.com/</p>
            </>
            ),
            placement: "bottom",
            target: "#address",
            title: "WP Site URL"
          },
          {
            content: (<><h2 className="text-sm">Add your WP username here. Be sure to double-check it is correct</h2></>),
            placement: "bottom",
            target: "#wpUsername",
            title: "WP Username"
          },
          {
            content: (<><h2 className="text-sm">Add your WP application password here</h2>
            <p className="text-red-500 text-xs mt-5">Important! Make sure it is the <b>application password</b> which you get from your WP settings.</p>
            </>),
            placement: "bottom",
            target: "#wpPassword",
            title: "WP Application Password"
          },
    
        ],
      });

        const {register, handleSubmit, ...form} = useForm();


        const {mutate: onSubmit, isLoading} = useMutation({
                mutationFn: async (data) => {
                        const payload ={
                            data
                        }

                        console.log('payload is', payload)
                        const response = await axios.post("/api/sites", payload);
                        console.log(response.data.data)
                        return response.data.data.savedSite
                },
                onSuccess: (data) => {
                        toast({
                            title: "Success",
                            description: `${data.address} added successfully`,
                        }),
                        form.reset()
                },
                onError: (error: AxiosError) => {
                        toast({
                            title: "Error",
                            description: 'Site could not be added, please try again later',
                        })
                }
            })

        return (
                <>
                     <Joyride
                        continuous={true}
                        callback={() => {}}
                        run={isTourRunning}
                        steps={steps}
                        hideCloseButton
                        scrollToFirstStep
                        showSkipButton
                        showProgress
                    /> 

                    <form onSubmit={handleSubmit((e) => onSubmit(e))} className=""> 
                        <Card>
                            <CardHeader className="pb-2 mb-6 text-2xl">
                                <CardTitle>Wordpress Sites</CardTitle>
                                <CardDescription>Please enter website details below to enable auto posting:</CardDescription>
                            </CardHeader>
                            <CardContent className="flex flex-col">
                              <CardDescription className="text-xl">
                                  Enter Website URL    
                              </CardDescription>
                                <Input
                                    id="address"
                                    className=" w-full md:w-[450px] mt-[14px] inline-block mr-3 mb-6"
                                    size={32}
                                    placeholder="https://ladyevelyn.school/"
                                    {...register("address")}
                                />
                              <CardDescription className="text-xl">
                                  Enter your Wordpress Username    
                              </CardDescription>
                                <Input
                                    id="wpUsername"
                                    className="w-full md:w-[450px]  mt-[14px] inline-block mr-3 mb-6"
                                    size={32}
                                    placeholder="Enter WordPress Username"
                                    {...register("wpUsername")}
                                />
                              <CardDescription className="text-xl">
                                  Enter your App Password 
                              </CardDescription>
                              <CardDescription className="text-sm">
                                  Generate from Profile Settings
                              </CardDescription>
                                <Input
                                    id="wpPassword"
                                    type="password"
                                    className="w-full md:w-[450px]  mt-[14px] inline-block mr-3 mb-6"
                                    size={32}
                                    placeholder="78Nh o7Gj XxxX RCVA JnCE xxXx"
                                    {...register("wpPassword")}
                                />
                                <Button variant={"gradient"} type="submit" className="block mt-6 w-[160px] text-md">Add</Button>
                            </CardContent>
                        </Card>
                    </form>
                </>
        )
}