VistaPanel-SB - A SiteBuilder Addon For VistaPanel

[MeTooIDK]

This is a VistaPanel Add-on. It serves as a replacement to the original Site Builder - this is using the Site.Pro Site Builder.

You just need fill out the form to use it - very easy.

You don't need an API key or anything else because my API powers this.

It has been tested on my local PC before, and it worked fine. I am not sure about the "Render" option, though. However, the Node Express Host will work.

 

GitHub Repo: https://github.com/ImLoadingUuU/VistaPanel-SB/

Implementation code:

Quote

<script src="https://cdn.jsdelivr.net/gh/ImLoadingUuU/VistaPanel-SB@main/index.js" type="text/javascript"></script>

Installation: You may introduce it into your control panel by adding it as an advertisement banner. (e.g., in the footer section)

 

The main page should look like this:

 

Error pages look like this:

 

[MeTooIDK]

10 minutes ago, Chronos said:

Please try making your post a bit more detailed.

🤔

[Anyx]

You might want to update the license on your repo or the license on your notice... you mention MIT Attribution, but your repo has MIT's license.

Going to test it and edit/reply with a new post.

[TinkerMan]

@MeTooIDK, it's a good start, but it requires information that the client does not have memorized. Such as the username, password, and root folder.

 

And the worst thing is, even if they enter the wrong information, they won't know until they attempt to publish the website, and it fails.

 

Also, it is impossible for you to validate that info, or to check if the domain is on an active account, etc.

[Anyx]

2 minutes ago, TinkerMan said:

@MeTooIDK, it's a good start, but it requires information that the client does not have memorized. Such as the username, password, and root folder.

 

And the worst thing is, even if they enter the wrong information, they won't know until they attempt to publish the website, and it fails.

 

Also, it is impossible for you to validate that info, or to check if the domain is on an active account, etc.

Interesting; were you able to get the script to work? Inserting it on my panel logged me out on every attempt, which is strange and shouldn't really happen, so if it worked for you is this something that's only happening to me?

[MeTooIDK]

20 minutes ago, Anyx said:

Interesting; were you able to get the script to work? Inserting it on my panel logged me out on every attempt, which is strange and shouldn't really happen, so if it worked for you is this something that's only happening to me?

wdym 🤔can u give me screenshot or what...?

Edited September 23, 2022 by MeTooIDK

[Anyx]

1 minute ago, MeTooIDK said:

wdym 🤔can u give me screenshot or what...?

I was able to fix it by loading the script asynchronously... the only issue I'm facing now is getting SiteBuilder to be actually modified. 

[MeTooIDK]

3 minutes ago, Anyx said:

I was able to fix it by loading the script asynchronously... the only issue I'm facing now is getting SiteBuilder to be actually modified. 

yes it got modified,it got replace to a modal.

[Anyx]

4 minutes ago, MeTooIDK said:

yes it got modified,it got replace to a modal.

It doesn't get modified when I load it on my panel... does it do that on yours? Could you make me a test account or something similar?

[MeTooIDK]

1 minute ago, Anyx said:

It doesn't get modified when I load it on my panel... does it do that on yours? Could you make me a test account or something similar?

🤔maybe it need wait vP fully loaded?because im running it on Browser Console..is theres a way to detect that?

[Anyx]

3 minutes ago, MeTooIDK said:

🤔maybe it need wait vP fully loaded?because im running it on Browser Console..is theres a way to detect that?

Adding a 1000ms delay did the trick for me, not sure if it will work on every vPanel though.

Let me test something else and I'll make a PR when ready.

[Wizacr]

19 minutes ago, Anyx said:

Adding a 1000ms delay did the trick for me, not sure if it will work on every vPanel though.

Let me test something else and I'll make a PR when ready.

The site builder element is rendered after the page is loaded from the PAGE.appGroups array.
This means that you can not modify any element until after the page has been completely loaded since it simply doesn't exist yet.

This is why your delay works.

My suggested method to have scripts run as expected is to run them after the page has been loaded.

Below is an example.

 

function spro() {
document.getElementsByTagName("footer")[0].innerHTML += `
<div class="modal fade" id="sb" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Entering SiteBuilder (Site.Pro</h4>
      </div>
      <div class="modal-body">
      <div class="alert alert-warning" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Recommened:</span>
  Upgrade to Premium Hosting for more features,more faster!
</div>
 
        <form method="POST" action="https://buildall.onrender.com/main">
  <label for="ftp_user">FTP Username:</label><br>
  <input class="form-control"  type="text" id="ftp_user" name="ftp_user" ><br>
  <label for="ftp_password">FTP Password:</label><br>
  <input class="form-control"  type="text" id="ftp_password" name="ftp_password" ><br><br>
    <label for="domain">Domain Name:</label><br>
  <input class="form-control" type="text" id="domain" name="domain"><br>
  <label for="ftp_host">FTP Host:</label><br>
  <input class="form-control"  type="text" id="ftp_host" name="ftp_host" ><br><br>
    <label for="builder_upload">Domain Directroy (Example: subdomain.web.net/htdocs/):</label><br>
  <input class="form-control"  type="text" id="builder_upload" name="builder_upload" ><br><br>
      <input type="submit" value="Go!" class="btn btn-primary">
      </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    
      </div>
 
    </div>
  </div>
</div>
 `
var a = document.getElementById("icon-sitereptile")
a.setAttribute("data-toggle", "modal");
a.setAttribute("data-target", "#sb");
a.setAttribute("href", "#sb");
var b = document.getElementById("item_sitereptile")
b.setAttribute("data-toggle", "modal");
b.setAttribute("data-target", "#sb");
b.setAttribute("href", "#sb");
b.setAttribute("ng-href","#sb");
}

window.addEventListener("load", function() {
    spro();
});

I simply wrapped the entire code within a function, then called that function with an event listener that looks for the page to be fully loaded.

Edited September 23, 2022 by Wizacr

[Anyx]

12 minutes ago, Wizacr said:

The site builder element is rendered after the page is loaded from the PAGE.appGroups array.
This means that you can not modify any element until after the page has been completed loaded since it simply doesn't exist yet.

This is why your delay works.

My suggested method to have scripts run as expected is to run them after the page has been loaded.

Below is an example.

 

function spro() {
document.getElementsByTagName("footer")[0].innerHTML += `
<div class="modal fade" id="sb" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Entering SiteBuilder (Site.Pro</h4>
      </div>
      <div class="modal-body">
      <div class="alert alert-warning" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Recommened:</span>
  Upgrade to Premium Hosting for more features,more faster!
</div>
 
        <form method="POST" action="https://buildall.onrender.com/main">
  <label for="ftp_user">FTP Username:</label><br>
  <input class="form-control"  type="text" id="ftp_user" name="ftp_user" ><br>
  <label for="ftp_password">FTP Password:</label><br>
  <input class="form-control"  type="text" id="ftp_password" name="ftp_password" ><br><br>
    <label for="domain">Domain Name:</label><br>
  <input class="form-control" type="text" id="domain" name="domain"><br>
  <label for="ftp_host">FTP Host:</label><br>
  <input class="form-control"  type="text" id="ftp_host" name="ftp_host" ><br><br>
    <label for="builder_upload">Domain Directroy (Example: subdomain.web.net/htdocs/):</label><br>
  <input class="form-control"  type="text" id="builder_upload" name="builder_upload" ><br><br>
      <input type="submit" value="Go!" class="btn btn-primary">
      </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    
      </div>
 
    </div>
  </div>
</div>
 `
var a = document.getElementById("icon-sitereptile")
a.setAttribute("data-toggle", "modal");
a.setAttribute("data-target", "#sb");
a.setAttribute("href", "#sb");
var b = document.getElementById("item_sitereptile")
b.setAttribute("data-toggle", "modal");
b.setAttribute("data-target", "#sb");
b.setAttribute("href", "#sb");
b.setAttribute("ng-href","#sb");
}

window.addEventListener("load", function() {
    spro();
});

I simply wrapped the entire code within a function, then called that function with an event listener that looks for the page to be fully loaded.

If I'm not mistaken however, window.load, like DOMContentLoaded, doesn't exactly fire correctly, that is, it can fire while vPanel is still showing the "loading..." message and the groups have not been loaded from PAGE.appGroups.

I wrapped the entire code around a DOMContentLoaded event, but I'll try using window.load and see if it works better. Thanks for the suggestion!

EDIT: While I was correct in window.load firing before the elements are fully loaded, it did so much later than DOMContentLoaded in my test, which allows for a maximum 5 second delay in modifying the element. This is really useful. After some more tests I was able to verify this, which is nice.

The only issue now is what to do with people with fast connections.

Edited September 23, 2022 by Anyx

[Wizacr]

12 minutes ago, Anyx said:

If I'm not mistaken however, window.load, like DOMContentLoaded, doesn't exactly fire correctly, that is, it can fire while vPanel is still showing the "loading..." message and the groups have not been loaded from PAGE.appGroups.

I wrapped the entire code around a DOMContentLoaded event, but I'll try using window.load and see if it works better. Thanks for the suggestion!

I've done very limited work within the VistaPanel so I'm making some guesses here.

Looks like the code I modified works in Chrome without issue, however to get it to act appropriately in FireFox I had to make sure the code was in the "bottom advert" portion.

Edited September 23, 2022 by Wizacr

[Anyx]

3 minutes ago, Wizacr said:

I've done very limited work within the VistaPanel.

Looks like the code I modified works in Chrome without issue, however to get it to act appropriately in FireFox I had to make sure the code was in the "bottom advert" portion.

Strange. Your code doesn't work for me in the header area (Ungoogled Chromium), and when I place it in footer it works initially, however after going to another VistaPanel page (like Addon Domains) and returning to the main one, or hard refreshing, it doesn't work.

My final version is in https://github.com/4yx/VistaPanel-SB/blob/main/index.js, and while it worked in all my tests, it is really unhelpful to people with fast connections, as it won't work if they don't wait 5 seconds before going to SiteBuilder. Currently thinking of a way to get around that (somehow detect slow connections).

/*	**************************************************************************
	*   @preserve
	*   VistaPanel Add-on
	*   Script Name:  VistaPanel-SB
	*   Version: 1.0
	*   This file is licensed under MIT Attribution
	************************************************************************** 
*/
window.addEventListener("load", function() {
  document.getElementsByTagName("footer")[0].innerHTML += `
  <div class="modal fade" id="sb" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Entering SiteBuilder (Site.Pro</h4>
        </div>
        <div class="modal-body">
        <div class="alert alert-warning" role="alert">
    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
    <span class="sr-only">Recommened:</span>
    Upgrade to Premium Hosting for more features,more faster!
  </div>
  
          <form method="POST" action="https://buildall.onrender.com/main">
    <label for="ftp_user">FTP Username:</label><br>
    <input class="form-control"  type="text" id="ftp_user" name="ftp_user" ><br>
    <label for="ftp_password">FTP Password:</label><br>
    <input class="form-control"  type="text" id="ftp_password" name="ftp_password" ><br><br>
      <label for="domain">Domain Name:</label><br>
    <input class="form-control" type="text" id="domain" name="domain"><br>
    <label for="ftp_host">FTP Host:</label><br>
    <input class="form-control"  type="text" id="ftp_host" name="ftp_host" ><br><br>
      <label for="builder_upload">Domain Directroy (Example: subdomain.web.net/htdocs/):</label><br>
    <input class="form-control"  type="text" id="builder_upload" name="builder_upload" ><br><br>
        <input type="submit" value="Go!" class="btn btn-primary">
        </form>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      
        </div>
  
      </div>
    </div>
  </div>
  `
  setTimeout(function() {
    var a = document.getElementById("icon-sitereptile")
    a.setAttribute("data-toggle", "modal");
    a.setAttribute("data-target", "#sb");
    a.setAttribute("href", "#sb");
    var b = document.getElementById("item_sitereptile")
    b.setAttribute("data-toggle", "modal");
    b.setAttribute("data-target", "#sb");
    b.setAttribute("href", "#sb");
    b.setAttribute("ng-href","#sb");
  }, 5000);
});

 

Edited September 23, 2022 by Anyx

[Wizacr]

22 minutes ago, Anyx said:

Strange. Your code doesn't work for me in the header area (Ungoogled Chromium), and when I place it in footer it works initially, however after going to another VistaPanel page (like Addon Domains) and returning to the main one, or hard refreshing, it doesn't work.

My final version is in https://github.com/4yx/VistaPanel-SB/blob/main/index.js, and while it worked in all my tests, it is really unhelpful to people with fast connections, as it won't work if they don't wait 5 seconds before going to SiteBuilder. Currently thinking of a way to get around that (somehow detect slow connections).

This is interesting, I'll definitely have to dive into this problem more and see what causes this to happen when I have the time.

If I come up with a solution to negate a time delay I'll be sure to provide it here.

[Anyx]

Just now, Wizacr said:

This is interesting, I'll definitely have to dive into this problem more and see what causes this to happen when I have the time.

If I come up with a solution to negate a time delay I'll be sure to provide it here.

Awesome, thank you!

[SpookyKipper]

8 hours ago, Anyx said:

My final version is in https://github.com/4yx/VistaPanel-SB/blob/main/index.js, and while it worked in all my tests, it is really unhelpful to people with fast connections, as it won't work if they don't wait 5 seconds before going to SiteBuilder. Currently thinking of a way to get around that (somehow detect slow connections)

Maybe you can do something like this?

const urlParams = new URLSearchParams(window.location.search);
const page = urlParams.get("option");

function sitebuilder() {
    if (document.getElementById("item_sitereptile") != null) { //checks if the icon exists/panel is loaded
      // Code
    } else { 
      setTimeout(sitebuilder, 100); //if not, re check every 100ms
    }
}

//page null = homepage
if (page == null) {
  setTimeout(sitebuilder, 100); //Check after 100ms. People rarely can load the panel instantly.
}

People will barely need to wait because it checks every 100ms.

[MeTooIDK]

24 minutes ago, SpookyKipper said:

Maybe you can do something like this?

const urlParams = new URLSearchParams(window.location.search);
const page = urlParams.get("option");

function sitebuilder() {
    if (document.getElementById("item_sitereptile") != null) { //checks if the icon exists/panel is loaded
      // Code
    } else { 
      setTimeout(sitebuilder, 100); //if not, re check every 100ms
    }
}

//page null = homepage
if (page == null) {
  setTimeout(sitebuilder, 100); //Check after 100ms. People rarely can load the panel instantly.
}

People will barely need to wait because it checks every 100ms.

nice,i will add it to my repo

[MeTooIDK]

12 hours ago, TinkerMan said:

@MeTooIDK, it's a good start, but it requires information that the client does not have memorized. Such as the username, password, and root folder.

 

And the worst thing is, even if they enter the wrong information, they won't know until they attempt to publish the website, and it fails.

 

Also, it is impossible for you to validate that info, or to check if the domain is on an active account, etc.

Ummm,its possible? Connect That Info FTP if failed.return a error?and currently im working on Setup Wizard. but i think it will use Alot Resource

Edited September 24, 2022 by MeTooIDK

[Anyx]

On 9/24/2022 at 3:43 AM, SpookyKipper said:

Maybe you can do something like this?

const urlParams = new URLSearchParams(window.location.search);
const page = urlParams.get("option");

function sitebuilder() {
    if (document.getElementById("item_sitereptile") != null) { //checks if the icon exists/panel is loaded
      // Code
    } else { 
      setTimeout(sitebuilder, 100); //if not, re check every 100ms
    }
}

//page null = homepage
if (page == null) {
  setTimeout(sitebuilder, 100); //Check after 100ms. People rarely can load the panel instantly.
}

People will barely need to wait because it checks every 100ms.

Yes, I believe that should do what I was looking for. Thanks!