Spaces:
Running
Running
File size: 4,601 Bytes
6acd93d 2110d16 4ebb821 6acd93d 4ebb821 6acd93d 4ebb821 571ab11 6acd93d 4ebb821 571ab11 6acd93d 571ab11 6acd93d 571ab11 6acd93d 4ebb821 571ab11 2110d16 4ebb821 6acd93d 4ebb821 571ab11 4ebb821 571ab11 4ebb821 2110d16 4ebb821 571ab11 4ebb821 6acd93d 4ebb821 571ab11 2110d16 4ebb821 571ab11 4ebb821 2110d16 4ebb821 571ab11 4ebb821 6acd93d 2b0154f c92f758 e61d9ee c92f758 571ab11 2110d16 571ab11 2110d16 571ab11 c92f758 2110d16 c92f758 2b0154f 571ab11 6acd93d |
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 |
<!DOCTYPE html>
<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> |