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">
© 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>