Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Appwrite Auth with Email Verification</title> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| background-color: #f0f0f0; | |
| } | |
| .container { | |
| background-color: white; | |
| padding: 20px; | |
| border-radius: 5px; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.1); | |
| max-width: 300px; | |
| width: 100%; | |
| } | |
| h2 { | |
| text-align: center; | |
| color: #333; | |
| } | |
| form { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| input, button { | |
| margin-bottom: 10px; | |
| padding: 10px; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| } | |
| button { | |
| background-color: #007bff; | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| button:hover { | |
| background-color: #0056b3; | |
| } | |
| #message { | |
| margin-top: 20px; | |
| text-align: center; | |
| color: #666; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2>Appwrite Auth</h2> | |
| <form id="authForm"> | |
| <input type="email" id="email" placeholder="Email" required> | |
| <input type="password" id="password" placeholder="Password" required> | |
| <button type="button" onclick="signup()">Sign Up</button> | |
| <button type="button" onclick="login()">Log In</button> | |
| </form> | |
| <button onclick="sendVerificationEmail()">Send Verification Email</button> | |
| <div id="message"></div> | |
| </div> | |
| <script> | |
| const client = new Appwrite.Client(); | |
| client | |
| .setEndpoint('https://cloud.appwrite.io/v1') | |
| .setProject('66c2f6c7000abed7f1f9'); | |
| const account = new Appwrite.Account(client); | |
| function signup() { | |
| const email = document.getElementById('email').value; | |
| const password = document.getElementById('password').value; | |
| account.create(Appwrite.ID.unique(), email, password) | |
| .then(response => { | |
| setMessage('Signup successful! Please check your email for verification.'); | |
| console.log(response); | |
| sendVerificationEmail(); | |
| }) | |
| .catch(error => { | |
| setMessage('Signup failed: ' + error.message); | |
| console.error(error); | |
| }); | |
| } | |
| function login() { | |
| const email = document.getElementById('email').value; | |
| const password = document.getElementById('password').value; | |
| account.createEmailPasswordSession(email, password) | |
| .then(response => { | |
| setMessage('Login successful!'); | |
| console.log(response); | |
| checkVerificationStatus(); | |
| }) | |
| .catch(error => { | |
| setMessage('Login failed: ' + error.message); | |
| console.error(error); | |
| }); | |
| } | |
| function sendVerificationEmail() { | |
| account.createVerification('https://pvanand-specialized-agents.hf.space/auth-success') | |
| .then(response => { | |
| setMessage('Verification email sent. Please check your inbox.'); | |
| console.log(response); | |
| }) | |
| .catch(error => { | |
| setMessage('Failed to send verification email: ' + error.message); | |
| console.error(error); | |
| }); | |
| } | |
| function checkVerificationStatus() { | |
| account.get() | |
| .then(response => { | |
| const status = response.emailVerification ? 'verified' : 'not verified'; | |
| setMessage(`Your email is ${status}.`); | |
| }) | |
| .catch(error => { | |
| console.error('Failed to check verification status:', error); | |
| }); | |
| } | |
| function setMessage(text) { | |
| document.getElementById('message').innerText = text; | |
| } | |
| </script> | |
| </body> | |
| </html> |