Custom reset password page javascript

Hello, I’m trying to use a custom reset password page using the Auth0 page but I’m not able to find any documentation regarding that. For now I have the design of my page but I’m not able to create the connection between my frontend and Auth0. Can someone give me advice how to do so?

Here’s my code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link rel="icon" href="../../../../favicon.ico" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;1,600&display=swap"
      rel="stylesheet"
    />
    <title>Setează parola - Privent Matching</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
      integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
      crossorigin="anonymous"
    />
    <!-- Bootstrap core CSS -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />

    <!-- Custom styles for this template -->
    <link href="https://www.privent.ro/auth0/signin.css" rel="stylesheet" />
  </head>

  <body class="text-center">
    <form class="form-signin" onsubmit="return false;" method="post">
      <div class="logo-container">
        <img
          class="logo"
          src="https://www.privent.ro/auth0/logo.svg"
          alt=""
          width=""
          height=""
        />
      </div>
      <div class="true-form">
        <h1 class="h3">Setează parola</h1>
        <div id="error-message" class="alert alert-danger" style="display: none;"></div>
        <div class="change-password-widget-container">
          <div class="input-group">
            <div class="input-group-prepend">
              <div class="input-group-text">
                <svg
                  aria-hidden="true"
                  width="15"
                  viewBox="0 0 32 26"
                  xmlns="http://www.w3.org/2000/svg"
                  class="auth0-lock-icon auth0-lock-icon-box"
                >
                  <path
                    d="M30 23c0 .55-.45 1-1 1H3c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h26c.55 0 1 .45 1 1v20zm0-23H2C.89 0 0 .89 0 2v22a2 2 0 002 2h28c1.1 0 2-.9 2-2V2a2 2 0 00-2-2zm-8 6h4v4h-4V6zm-2 6h8V4h-8v8zM4 16h14v-2H4v2zm0 4h14v-2H4v2z"
                  />
                </svg>
              </div>
            </div>
            <input
              type="password"
              id="password"
              class="form-control"
              placeholder="Parola noua"
              autocomplete="new-password"
              required
              autofocus
            />
          </div>

          <div class="input-group">
            <div class="input-group-prepend">
              <div class="input-group-text">
                <svg
                  aria-hidden="true"
                  width="15"
                  viewBox="0 0 32 26"
                  xmlns="http://www.w3.org/2000/svg"
                  class="auth0-lock-icon auth0-lock-icon-box"
                >
                  <path
                    d="M30 23c0 .55-.45 1-1 1H3c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h26c.55 0 1 .45 1 1v20zm0-23H2C.89 0 0 .89 0 2v22a2 2 0 002 2h28c1.1 0 2-.9 2-2V2a2 2 0 00-2-2zm-8 6h4v4h-4V6zm-2 6h8V4h-8v8zM4 16h14v-2H4v2zm0 4h14v-2H4v2z"
                  />
                </svg>
              </div>
            </div>
            <input
              type="password"
              id="password"
              class="form-control"
              placeholder="Confirmă parola nouă"
              autocomplete="new-password"
              required
            />
          </div>
        </div>

        <button
          type="submit"
          class="btn btn-lg btn-primary btn-block"
          id="btn-login"
        >
          Resetează parola
        </button>


      </div>
    </form>
    <p class="fixed-bottom">
      &copy; 2021 Privent Entertainment SRL. Toate drepturile rezervate.
    </p>
    <script src="https://cdn.auth0.com/js/auth0/9.14/auth0.min.js"></script>
    <script src="https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js"></script>
    <script>
      new Auth0ChangePassword({
      container:         "change-password-widget-container",                // required
      email:             "{{email | escape}}",                              // DO NOT CHANGE THIS
      csrf_token:        "{{csrf_token}}",                                  // DO NOT CHANGE THIS
      ticket:            "{{ticket}}",                                      // DO NOT CHANGE THIS
      password_policy:   "{{password_policy}}",                             // DO NOT CHANGE THIS
      password_complexity_options:  {{password_complexity_options}},        // DO NOT CHANGE THIS
      theme: {
        icon: "{{tenant.picture_url | default: '//cdn.auth0.com/styleguide/1.0.0/img/badge.png'}}",
        primaryColor: "{{tenant.colors.primary | default: '#ea5323'}}"
      },
      dict: {
        // passwordPlaceholder: "your new password",
        // passwordConfirmationPlaceholder: "confirm your new password",
        // passwordConfirmationMatchError: "Please ensure the password and the confirmation are the same.",
        // passwordStrength: {
        //   containsAtLeast: "Contain at least %d of the following %d types of characters:",
        //   identicalChars: "No more than %d identical characters in a row (e.g., "%s" not allowed)",
        //   nonEmpty: "Non-empty password required",
        //   numbers: "Numbers (i.e. 0-9)",
        //   lengthAtLeast: "At least %d characters in length",
        //   lowerCase: "Lower case letters (a-z)",
        //   shouldContain: "Should contain:",
        //   specialCharacters: "Special characters (e.g. !@#$%^&*)",
        //   upperCase: "Upper case letters (A-Z)"
        // },
        // successMessage: "Your password has been reset successfully. Click <a href='https://matching.privent.ro'>here</a> to login.",
        // configurationError: "An error ocurred. There appears to be a misconfiguration in the form.",
        // networkError: "The server cannot be reached, there is a problem with the network.",
        // timeoutError: "The server cannot be reached, please try again.",
        // serverError: "There was an error processing the password reset.",
        // headerText: "Enter a new password for<br />{email}",
        // title: "Change Password",
        // weakPasswordError: "Password is too weak."
        // passwordHistoryError: "Password has previously been used."
      }
    });
    

    </script>
    <link href="https://www.privent.ro/auth0/signin.css" rel="stylesheet" />
  </body>
</html>

Hi @adelin.preda,

Thanks for reaching out to the Auth0 Community.

I understand that you are looking to customize the Password Reset Page for your Universal Login.

Here is the documentation on customizing the Password Reset Page with instructions on the options available to customize the Auth0ChangePassword widget.

After looking at the code snippet, I noticed that you are missing the reference to the Change Password Widget. You will need to include the following to use Auth0ChangePassword:

<script src="https://cdn.auth0.com/js/change-password-1.5.min.js"></script>

You may also find this example useful in building a Custom Hosted Password Reset Page: https://github.com/auth0/auth0-custom-password-reset-hosted-page

Finally, I’d like to emphasize that there are not as many available options out-of-the-box to modify the Password Reset Page compared to the Login Page.

If you’re only looking to customize the styles, then you may want to try overriding the CSS on the Password Reset Page: https://auth0.com/docs/libraries/lock/lock-ui-customization#overriding-css

Please let me know if you have any questions.

Thank you.

2 Likes

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.