SSJS: Password-Protected Page

<!doctype html>

<html>

  <head>

    <title>Password Protected Page</title>

    <style>

      body {

        font-family: Arial, sans-serif;

        background: #f7f9fb;

        padding: 2rem;

        text-align: center;

      }

      .box {

        max-width: 400px;

        margin: auto;

        background: #fff;

        padding: 2rem;

        border-radius: 10px;

        box-shadow: 0 0 15px rgba(0,0,0,0.1);

      }

      input[type="password"], input[type="submit"] {

        padding: 10px;

        width: 90%;

        margin: 10px 0;

        border-radius: 5px;

        border: 1px solid #ccc;

      }

      .error { color: red; }

    </style>

  </head>

  <body>

<div class="box">

  <script runat="server">

    Platform.Load("Core", "1.1.1");

    var expectedPassword = "MySecret123";

    var showForm = "true";

    var errorMessage = "";

    // Check if the method is POST

    var requestMethod = Platform.Request.Method;

    var enteredPassword = "";

    if (requestMethod == "POST") {

      enteredPassword = Request.GetFormField("password");

      if (enteredPassword == expectedPassword) {

        showForm = "false"; // show protected content

      } else {

        errorMessage = "Incorrect password. Please try again.";

      }

    }

    Variable.SetValue("@showForm", showForm);

    Variable.SetValue("@errorMessage", errorMessage);

  </script>

  %%[ IF @showForm == "true" THEN ]%%

    <h2>Enter Password</h2>

    <form method="post">

      <input

        type="password"

        name="password"

        placeholder="Enter password"

        required

      />

      <input type="submit" value="Submit" />

    </form>

    <p class="error">%%=v(@errorMessage)=%%</p>

  %%[ ELSE ]%%

    <h2>🔓 Welcome to the Protected Page!</h2>

    <p>

      You have successfully entered the correct password. This is your secret content 🎉.

    </p>

  %%[ ENDIF ]%%

</div>

  </body>

</html>