File size: 4,055 Bytes
451fc8c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
593dd3d
451fc8c
 
593dd3d
451fc8c
593dd3d
56bbddc
0b75163
 
 
 
593dd3d
0b75163
451fc8c
 
 
 
 
 
 
 
 
 
 
f14a8fb
0b75163
451fc8c
 
593dd3d
451fc8c
 
 
 
 
f14a8fb
 
451fc8c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
593dd3d
451fc8c
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!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>