How can i do a post request with a form and a button to the Particle API without showing the results in my browser?

General
1

Hi, im trying to make a “control panel” for my device as a webserver. I want to have a login page, where if i i enter the correct password i will be taken to another page. However, im only shown the API call result in the browser.

Here is my code for this:

    TCPClient tcpClient;
    TCPServer tcpServer = TCPServer(80);
    String serverIP;
    bool signedIn = false;

    void setup() {
     Particle.function("authenticate",authenticate);
    
     serverIP = WiFi.localIP();
     tcpServer.begin();
     tcpClient = tcpServer.available();
    }

    void loop() {

      if (tcpClient.connected() && tcpClient.available()) {
        if(!signedIn) {
            showLoginPage();
        }
        
        if(signedIn) {
            showMainPage();
        }
    }
    else {
        tcpClient = tcpServer.available();
         }
    //Serial.println(serverIP);
    }

    int authenticate(String command) {
       if(command == "123") {
           Serial.println("Logged in!");
           showMainPage();
    } else {
        Serial.println("Password is wrong!");
    }
        }

     void showLoginPage() {
        tcpClient.print("<html>");
        tcpClient.print("<center><h2>Control Panel</h2></center><br>");
        tcpClient.print("<center><p>Enter password</p></center>");
        tcpClient.print("<form action='https://api.particle.io/v1/devices/myDeviceId/authenticate?access_token=myAccessToken' method='POST'>");
        tcpClient.print("<center><input type='text' name='password' value=''></center><br>");
        tcpClient.print("<center><input type='submit' value='Log in'></center>");
        tcpClient.print("</form>");
        tcpClient.print("</html>");
        tcpClient.flush();
        tcpClient.stop();
    }

    void showMainPage() {
        tcpClient.print("MAINPAGE");
    }

How can i run the showMainPage() and display its content in the browser, instead of seeing the result from the API call? Im reading it could be done with a Javascript parser? Im not too seasoned in Javascript.

Is there any other way of doing this with the Particle Cloud?

3

Maybe i could use publish() instead?

4

You could use the WebServer library and see how it’s done in the samples the WebDuino lib