terms / reset.html
Pepguy's picture
Update reset.html
56bbddc verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Reset Password</title>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<style>
body {
font-family: system-ui, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #f5f5f5;
color: #333;
margin: 0;
}
.card {
background: #fff;
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
max-width: 400px;
width: 90%;
}
h2 {
text-align: center;
margin-bottom: 1rem;
}
input {
width: 100%;
padding: 0.75rem;
border-radius: 0.5rem;
border: 1px solid #ccc;
margin-bottom: 1rem;
font-size: 1rem;
}
button {
width: 100%;
padding: 0.75rem;
border: none;
border-radius: 0.5rem;
background: #007aff;
color: white;
font-weight: bold;
cursor: pointer;
font-size: 1rem;
}
button:disabled {
background: #ccc;
cursor: not-allowed;
}
.message {
text-align: center;
margin-top: 1rem;
color: #007aff;
}
.error {
color: #e74c3c;
}
</style>
</head>
<body>
<div class="card">
<h2>Reset your password</h2>
<input id="password" type="password" placeholder="Enter new password" />
<button id="resetBtn">Update Password</button>
<div id="message" class="message"></div>
</div>
<script>
/* const SUPABASE_URL = "https://sabzdinksnhtxkmuifhu.supabase.co"; // <-- replace
const SUPABASE_ANON_KEY = "sb_publishable_cnPXh7btnMgXgSh1uP2WHw_8254URhU"; // <-- replace
const supabase = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
*/
const SUPABASE_URL = "https://sabzdinksnhtxkmuifhu.supabase.co";
const SUPABASE_ANON_KEY = "sb_publishable_cnPXh7btnMgXgSh1uP2WHw_8254URhU";
// Use window.supabase (the global from CDN) instead of const supabase
const { createClient } = window.supabase;
const supabaseClient = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
const resetBtn = document.getElementById("resetBtn");
const messageDiv = document.getElementById("message");
async function init() {
const hashParams = window.location.hash.substring(1).split("&");
const params = {};
hashParams.forEach(p => {
const [key, value] = p.split("=");
params[key] = decodeURIComponent(value);
});
// alert(params.type === "recovery" && params.access_token);
if (params.type === "recovery" && params.access_token) {
// automatically sign in using recovery token
const { data, error } = await supabaseClient.auth.setSession({
access_token: params.access_token,
refresh_token: params.refresh_token
});
if (error) {
messageDiv.textContent = `${error}`;
// messageDiv.textContent = "Invalid or expired link.";
messageDiv.classList.add("error");
resetBtn.disabled = true;
}
} else {
messageDiv.textContent = "Invalid reset link.";
messageDiv.classList.add("error");
resetBtn.disabled = true;
}
}
resetBtn.addEventListener("click", async () => {
const password = document.getElementById("password").value.trim();
if (!password) return alert("Please enter a new password");
resetBtn.disabled = true;
messageDiv.textContent = "Updating password...";
const { data, error } = await supabaseClient.auth.updateUser({ password });
if (error) {
messageDiv.textContent = error.message;
messageDiv.classList.add("error");
resetBtn.disabled = false;
} else {
messageDiv.textContent = "✅ Password successfully updated! You can close this page now.";
}
});
init();
</script>
</body>
</html>