-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathforgot-password.html
More file actions
204 lines (182 loc) · 10.2 KB
/
Copy pathforgot-password.html
File metadata and controls
204 lines (182 loc) · 10.2 KB
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tekpair | Reset Password</title>
<link rel="icon" type="image/png" href="assets/Tekpair.png">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script src="js/supabase.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
colors: { brand: { 600: '#0055FF', 700: '#0044CC', 800: '#003399' } },
animation: {
'float': 'float 6s ease-in-out infinite',
'blob': 'blob 7s infinite',
},
keyframes: {
float: { '0%, 100%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-10px)' } },
blob: {
'0%': { transform: 'translate(0px, 0px) scale(1)' },
'33%': { transform: 'translate(30px, -50px) scale(1.1)' },
'66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
'100%': { transform: 'translate(0px, 0px) scale(1)' }
}
}
}
}
}
</script>
<style>
body { font-family: 'Inter', sans-serif; background-color: #FAFAFA; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
.glass-input {
background: rgba(255, 255, 255, 0.9);
border: 1px solid #EAEAEA;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04);
transition: all 0.2s ease;
}
.glass-input:focus {
border-color: #0055FF;
box-shadow: 0 0 0 3px rgba(0, 85, 255, 0.15);
outline: none;
background: #FFFFFF;
}
.btn-modern {
background: linear-gradient(180deg, #0055FF 0%, #0044CC 100%);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
border: 1px solid #0044CC;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-modern:hover {
background: linear-gradient(180deg, #1A66FF 0%, #0055FF 100%);
box-shadow: 0 4px 12px rgba(0, 85, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
}
.btn-modern:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.card-bg {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0,0,0,0.02);
}
</style>
</head>
<body class="h-screen w-full flex items-center justify-center relative overflow-hidden bg-gray-50">
<!-- Background Elements -->
<div class="absolute inset-0 w-full h-full pointer-events-none overflow-hidden">
<div class="absolute top-[-10%] left-[-10%] w-[500px] h-[500px] bg-blue-100/50 rounded-full mix-blend-multiply filter blur-[80px] animate-blob"></div>
<div class="absolute bottom-[-10%] right-[-10%] w-[500px] h-[500px] bg-indigo-100/50 rounded-full mix-blend-multiply filter blur-[80px] animate-blob" style="animation-delay: 2s;"></div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[400px] bg-purple-100/50 rounded-full mix-blend-multiply filter blur-[80px] animate-blob" style="animation-delay: 4s;"></div>
<div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9IjAuMDIiLz4KPC9zdmc+')] opacity-60"></div>
</div>
<div class="w-full max-w-[420px] p-6 relative z-10 animate-float" style="animation-duration: 8s;">
<div class="card-bg rounded-2xl p-8 md:p-10 space-y-8">
<div class="space-y-4 text-center">
<a href="/" class="inline-block transition-transform hover:scale-105 active:scale-95 duration-200">
<img src="assets/tekpair.svg" alt="Tekpair Logo" class="h-14 w-auto mx-auto drop-shadow-sm">
</a>
<div class="space-y-2">
<h1 class="text-[24px] font-semibold tracking-tight text-gray-900">Reset password</h1>
<p class="text-[15px] text-gray-500 leading-relaxed">Enter the email associated with your account and we'll send you a reset link.</p>
</div>
</div>
<form id="forgotPasswordForm" class="space-y-6">
<div class="space-y-2">
<label for="email" class="block text-[13px] font-medium text-gray-700 ml-1">Email address</label>
<div class="relative group">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400 group-focus-within:text-brand-600 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
</svg>
</div>
<input type="email" id="email" required
class="glass-input w-full pl-10 pr-4 py-3 rounded-xl text-[14px] text-gray-900 placeholder:text-gray-400"
placeholder="name@company.com">
</div>
</div>
<div id="statusMessage" class="hidden p-4 rounded-xl text-[13px] font-medium text-center animate-in fade-in slide-in-from-top-2 duration-300"></div>
<button type="submit" id="submitBtn" class="btn-modern w-full text-white font-medium py-3 rounded-xl text-[14px] tracking-wide shadow-lg shadow-brand-600/20">
Send Reset Link
</button>
</form>
<div class="text-center pt-2">
<a href="index.html" class="inline-flex items-center gap-2 text-[13px] font-medium text-gray-500 hover:text-gray-900 transition-colors group">
<svg class="w-4 h-4 transition-transform group-hover:-translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
Back to Log In
</a>
</div>
</div>
<div class="mt-8 text-center">
<p class="text-[12px] text-gray-400 font-medium">
© 2026 TekPair. Secure System.
</p>
</div>
</div>
<script>
const form = document.getElementById('forgotPasswordForm');
const statusMessage = document.getElementById('statusMessage');
const submitBtn = document.getElementById('submitBtn');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const email = document.getElementById('email').value;
// UI Loading State
submitBtn.disabled = true;
const originalBtnText = submitBtn.innerHTML;
submitBtn.innerHTML = `
<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Sending...
`;
statusMessage.classList.add('hidden');
statusMessage.className = 'hidden p-4 rounded-xl text-[13px] font-medium text-center animate-in fade-in slide-in-from-top-2 duration-300';
// Simulate slight network delay for better UX feel
await new Promise(r => setTimeout(r, 800));
if (!window.supabase) {
showMessage('Supabase configuration error. Please refresh.', 'error');
resetBtn(originalBtnText);
return;
}
try {
const { data, error } = await window.supabase.auth.resetPasswordForEmail(email, {
redirectTo: window.location.origin + '/reset-password.html',
});
if (error) throw error;
showMessage('We have sent a password reset link to your email.', 'success');
form.reset();
resetBtn(originalBtnText); // Let user send another if needed
} catch (error) {
console.error(error);
showMessage(error.message || 'Something went wrong. Please try again.', 'error');
resetBtn(originalBtnText);
}
});
function showMessage(msg, type) {
statusMessage.textContent = msg;
statusMessage.classList.remove('hidden');
if (type === 'success') {
statusMessage.classList.add('bg-green-50/80', 'text-green-700', 'border', 'border-green-100', 'backdrop-blur-sm');
} else {
statusMessage.classList.add('bg-red-50/80', 'text-red-600', 'border', 'border-red-100', 'backdrop-blur-sm');
}
}
function resetBtn(originalText) {
submitBtn.disabled = false;
submitBtn.innerHTML = originalText || 'Send Reset Link';
}
</script>
</body>
</html>