pvanand commited on
Commit
571ab11
·
verified ·
1 Parent(s): 2110d16

Update static/auth.html

Browse files
Files changed (1) hide show
  1. static/auth.html +42 -34
static/auth.html CHANGED
@@ -20,40 +20,50 @@
20
  padding: 20px;
21
  border-radius: 5px;
22
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
 
 
 
 
 
 
 
 
 
 
23
  }
24
  input, button {
25
- display: block;
26
- width: 100%;
27
  margin-bottom: 10px;
28
- padding: 5px;
 
 
29
  }
30
  button {
31
  background-color: #007bff;
32
  color: white;
33
  border: none;
34
- padding: 10px;
35
  cursor: pointer;
 
36
  }
37
  button:hover {
38
  background-color: #0056b3;
39
  }
 
 
 
 
 
40
  </style>
41
  </head>
42
  <body>
43
  <div class="container">
44
- <h2>Signup</h2>
45
- <input type="email" id="signupEmail" placeholder="Email">
46
- <input type="password" id="signupPassword" placeholder="Password">
47
- <button onclick="signup()">Sign Up</button>
48
-
49
- <h2>Login</h2>
50
- <input type="email" id="loginEmail" placeholder="Email">
51
- <input type="password" id="loginPassword" placeholder="Password">
52
- <button onclick="login()">Log In</button>
53
-
54
- <h2>Email Verification</h2>
55
  <button onclick="sendVerificationEmail()">Send Verification Email</button>
56
-
57
  <div id="message"></div>
58
  </div>
59
 
@@ -62,37 +72,34 @@
62
  client
63
  .setEndpoint('https://cloud.appwrite.io/v1')
64
  .setProject('66c2f6c7000abed7f1f9');
65
-
66
  const account = new Appwrite.Account(client);
67
 
68
  function signup() {
69
- const email = document.getElementById('signupEmail').value;
70
- const password = document.getElementById('signupPassword').value;
71
-
72
  account.create(Appwrite.ID.unique(), email, password)
73
  .then(response => {
74
- document.getElementById('message').innerText = 'Signup successful! Please check your email for verification.';
75
  console.log(response);
76
  sendVerificationEmail();
77
  })
78
  .catch(error => {
79
- document.getElementById('message').innerText = 'Signup failed: ' + error.message;
80
  console.error(error);
81
  });
82
  }
83
 
84
  function login() {
85
- const email = document.getElementById('loginEmail').value;
86
- const password = document.getElementById('loginPassword').value;
87
-
88
  account.createEmailPasswordSession(email, password)
89
  .then(response => {
90
- document.getElementById('message').innerText = 'Login successful!';
91
  console.log(response);
92
  checkVerificationStatus();
93
  })
94
  .catch(error => {
95
- document.getElementById('message').innerText = 'Login failed: ' + error.message;
96
  console.error(error);
97
  });
98
  }
@@ -100,11 +107,11 @@
100
  function sendVerificationEmail() {
101
  account.createVerification('https://pvanand-specialized-agents.hf.space/auth')
102
  .then(response => {
103
- document.getElementById('message').innerText = 'Verification email sent. Please check your inbox.';
104
  console.log(response);
105
  })
106
  .catch(error => {
107
- document.getElementById('message').innerText = 'Failed to send verification email: ' + error.message;
108
  console.error(error);
109
  });
110
  }
@@ -112,16 +119,17 @@
112
  function checkVerificationStatus() {
113
  account.get()
114
  .then(response => {
115
- if (response.emailVerification) {
116
- document.getElementById('message').innerText += ' Your email is verified.';
117
- } else {
118
- document.getElementById('message').innerText += ' Your email is not verified. Please verify your email.';
119
- }
120
  })
121
  .catch(error => {
122
  console.error('Failed to check verification status:', error);
123
  });
124
  }
 
 
 
 
125
  </script>
126
  </body>
127
  </html>
 
20
  padding: 20px;
21
  border-radius: 5px;
22
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
23
+ max-width: 300px;
24
+ width: 100%;
25
+ }
26
+ h2 {
27
+ text-align: center;
28
+ color: #333;
29
+ }
30
+ form {
31
+ display: flex;
32
+ flex-direction: column;
33
  }
34
  input, button {
 
 
35
  margin-bottom: 10px;
36
+ padding: 10px;
37
+ border: 1px solid #ddd;
38
+ border-radius: 4px;
39
  }
40
  button {
41
  background-color: #007bff;
42
  color: white;
43
  border: none;
 
44
  cursor: pointer;
45
+ transition: background-color 0.3s;
46
  }
47
  button:hover {
48
  background-color: #0056b3;
49
  }
50
+ #message {
51
+ margin-top: 20px;
52
+ text-align: center;
53
+ color: #666;
54
+ }
55
  </style>
56
  </head>
57
  <body>
58
  <div class="container">
59
+ <h2>Appwrite Auth</h2>
60
+ <form id="authForm">
61
+ <input type="email" id="email" placeholder="Email" required>
62
+ <input type="password" id="password" placeholder="Password" required>
63
+ <button type="button" onclick="signup()">Sign Up</button>
64
+ <button type="button" onclick="login()">Log In</button>
65
+ </form>
 
 
 
 
66
  <button onclick="sendVerificationEmail()">Send Verification Email</button>
 
67
  <div id="message"></div>
68
  </div>
69
 
 
72
  client
73
  .setEndpoint('https://cloud.appwrite.io/v1')
74
  .setProject('66c2f6c7000abed7f1f9');
 
75
  const account = new Appwrite.Account(client);
76
 
77
  function signup() {
78
+ const email = document.getElementById('email').value;
79
+ const password = document.getElementById('password').value;
 
80
  account.create(Appwrite.ID.unique(), email, password)
81
  .then(response => {
82
+ setMessage('Signup successful! Please check your email for verification.');
83
  console.log(response);
84
  sendVerificationEmail();
85
  })
86
  .catch(error => {
87
+ setMessage('Signup failed: ' + error.message);
88
  console.error(error);
89
  });
90
  }
91
 
92
  function login() {
93
+ const email = document.getElementById('email').value;
94
+ const password = document.getElementById('password').value;
 
95
  account.createEmailPasswordSession(email, password)
96
  .then(response => {
97
+ setMessage('Login successful!');
98
  console.log(response);
99
  checkVerificationStatus();
100
  })
101
  .catch(error => {
102
+ setMessage('Login failed: ' + error.message);
103
  console.error(error);
104
  });
105
  }
 
107
  function sendVerificationEmail() {
108
  account.createVerification('https://pvanand-specialized-agents.hf.space/auth')
109
  .then(response => {
110
+ setMessage('Verification email sent. Please check your inbox.');
111
  console.log(response);
112
  })
113
  .catch(error => {
114
+ setMessage('Failed to send verification email: ' + error.message);
115
  console.error(error);
116
  });
117
  }
 
119
  function checkVerificationStatus() {
120
  account.get()
121
  .then(response => {
122
+ const status = response.emailVerification ? 'verified' : 'not verified';
123
+ setMessage(`Your email is ${status}.`);
 
 
 
124
  })
125
  .catch(error => {
126
  console.error('Failed to check verification status:', error);
127
  });
128
  }
129
+
130
+ function setMessage(text) {
131
+ document.getElementById('message').innerText = text;
132
+ }
133
  </script>
134
  </body>
135
  </html>