specialized-agents

Sleeping

App Files Files Community

pvanand commited on Aug 19, 2024

Commit

4ebb821

verified ·

1 Parent(s): 5ffacbe

Update static/auth.html

Browse files

Files changed (1) hide show

static/auth.html +45 -106

static/auth.html CHANGED Viewed

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Appwrite Auth</title>
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -14,87 +15,45 @@
             margin: 0;
             background-color: #f0f0f0;
         }
-        .auth-container {
             background-color: white;
-            padding: 2rem;
-            border-radius: 8px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            width: 300px;
-        }
-        h1 {
-            text-align: center;
-            margin-bottom: 1.5rem;
         }
-        input {
             display: block;
             width: 100%;
-            padding: 0.5rem;
-            margin-bottom: 1rem;
-            border: 1px solid #ccc;
-            border-radius: 4px;
         }
         button {
-            width: 100%;
-            padding: 0.5rem;
             background-color: #007bff;
             color: white;
             border: none;
-            border-radius: 4px;
             cursor: pointer;
-            margin-bottom: 0.5rem;
         }
         button:hover {
             background-color: #0056b3;
         }
-        #message {
-            margin-top: 1rem;
-            text-align: center;
-            color: #dc3545;
-        }
-        .toggle-form {
-            text-align: center;
-            margin-top: 1rem;
-            cursor: pointer;
-            color: #007bff;
-        }
-        .popup {
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background-color: white;
-            padding: 2rem;
-            border-radius: 8px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            display: none;
-            text-align: center;
-        }
-        .popup button {
-            margin-top: 1rem;
-            width: auto;
-            padding: 0.5rem 1rem;
-        }
     </style>
 </head>
 <body>
-    <div class="auth-container">
-        <h1 id="form-title">Login</h1>
-        <form id="auth-form">
-            <input type="email" id="email" placeholder="Email" required>
-            <input type="password" id="password" placeholder="Password" required>
-            <button type="submit" id="submit-btn">Log In</button>
-        </form>
-        <div id="message"></div>
-        <div class="toggle-form" id="toggle-form">Don't have an account? Sign Up</div>
-    </div>
-    <div class="popup" id="popup">
-        <h2>Success!</h2>
-        <p id="popup-message"></p>
-        <button id="close-popup">Close</button>
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
     <script>
         const client = new Appwrite.Client();
         client
@@ -103,55 +62,35 @@
         const account = new Appwrite.Account(client);
-        let isLoginForm = true;
-        const formTitle = document.getElementById('form-title');
-        const submitBtn = document.getElementById('submit-btn');
-        const toggleForm = document.getElementById('toggle-form');
-        const authForm = document.getElementById('auth-form');
-        const messageElement = document.getElementById('message');
-        const popup = document.getElementById('popup');
-        const popupMessage = document.getElementById('popup-message');
-        const closePopup = document.getElementById('close-popup');
-        toggleForm.addEventListener('click', () => {
-            isLoginForm = !isLoginForm;
-            formTitle.textContent = isLoginForm ? 'Login' : 'Sign Up';
-            submitBtn.textContent = isLoginForm ? 'Log In' : 'Sign Up';
-            toggleForm.textContent = isLoginForm ? "Don't have an account? Sign Up" : "Already have an account? Log In";
-            messageElement.textContent = '';
-        });
-        authForm.addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const email = document.getElementById('email').value;
-            const password = document.getElementById('password').value;
-            try {
-                let result;
-                if (isLoginForm) {
-                    result = await account.createEmailSession(email, password);
-                    showPopup('Login successful!');
-                } else {
-                    result = await account.create(Appwrite.ID.unique(), email, password);
-                    showPopup('Sign up successful! Please check your email for verification.');
-                }
-                console.log('Result:', result);
-                // Redirect or perform actions after successful login/signup
-            } catch (error) {
-                messageElement.textContent = `${isLoginForm ? 'Login' : 'Sign up'} failed. Please check your credentials.`;
-                messageElement.style.color = '#dc3545';
-                console.error('Error:', error);
-            }
-        });
-        function showPopup(message) {
-            popupMessage.textContent = message;
-            popup.style.display = 'block';
         }
-        closePopup.addEventListener('click', () => {
-            popup.style.display = 'none';
-        });
     </script>
 </body>
 </html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Appwrite Auth</title>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
     <style>
         body {
             font-family: Arial, sans-serif;
             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);
         }
+        input, button {
             display: block;
             width: 100%;
+            margin-bottom: 10px;
+            padding: 5px;
         }
         button {
             background-color: #007bff;
             color: white;
             border: none;
+            padding: 10px;
             cursor: pointer;
         }
         button:hover {
             background-color: #0056b3;
         }
     </style>
 </head>
 <body>
+    <div class="container">
+        <h2>Signup</h2>
+        <input type="email" id="signupEmail" placeholder="Email">
+        <input type="password" id="signupPassword" placeholder="Password">
+        <button onclick="signup()">Sign Up</button>
+        <h2>Login</h2>
+        <input type="email" id="loginEmail" placeholder="Email">
+        <input type="password" id="loginPassword" placeholder="Password">
+        <button onclick="login()">Log In</button>
+        <div id="message"></div>
     </div>
     <script>
         const client = new Appwrite.Client();
         client
         const account = new Appwrite.Account(client);
+        function signup() {
+            const email = document.getElementById('signupEmail').value;
+            const password = document.getElementById('signupPassword').value;
+            account.create(Appwrite.ID.unique(), email, password)
+                .then(response => {
+                    document.getElementById('message').innerText = 'Signup successful!';
+                    console.log(response);
+                })
+                .catch(error => {
+                    document.getElementById('message').innerText = 'Signup failed: ' + error.message;
+                    console.error(error);
+                });
+        }
+        function login() {
+            const email = document.getElementById('loginEmail').value;
+            const password = document.getElementById('loginPassword').value;
+            account.createEmailSession(email, password)
+                .then(response => {
+                    document.getElementById('message').innerText = 'Login successful!';
+                    console.log(response);
+                })
+                .catch(error => {
+                    document.getElementById('message').innerText = 'Login failed: ' + error.message;
+                    console.error(error);
+                });
         }
     </script>
 </body>
 </html>