Merge pull request #1 from avirajsingh7/master

AppWrite Backend Integration Of Login and Registration
gupta-arpan · May 24, 2023 · 590797c · 590797c
2 parents b77b655 + aa60720
commit 590797c
Show file tree

Hide file tree

Showing 5 changed files with 427 additions and 374 deletions.
diff --git a/package.json b/package.json
@@ -35,6 +35,6 @@
     "process": "^0.11.10",
     "react-error-overlay": "6.0.9",
     "tailwindcss": "^3.3.2",
-    "vite": "^4.3.2"
+    "vite": "^4.3.8"
   }
 }
diff --git a/src/appwrite/appwriteConfig.js b/src/appwrite/appwriteConfig.js
@@ -0,0 +1,7 @@
+import { Client, Account, Databases} from "appwrite";
+
+const client = new Client();
+
+client.setEndpoint('https://cloud.appwrite.io/v1').setProject('ProjectID');
+
+export const account = new Account(client);
diff --git a/src/components/LoginCard.jsx b/src/components/LoginCard.jsx
@@ -1,7 +1,11 @@
 import { Link } from "react-router-dom";
-
+import React,{ useState } from "react";
+import {account} from '../appwrite/appwriteConfig';
+import { useNavigate } from "react-router-dom";
 
 function LoginCard(props) {
+
+  const navigate = useNavigate();
   function handleRegisterButtonClick() {
     props.isLoginCardVisible(prevValue => {
       return !prevValue;
@@ -10,6 +14,24 @@ function LoginCard(props) {
       return !prevValue;
     })
   }
+
+  const [user, setuser] = useState({
+    email:"",
+    password:""
+  })
+
+  const loginUser = async(e)=> {
+    e.preventDefault()
+    try {
+    await account.createEmailSession(user.email,user.password);
+    navigate('/find-restaurants');
+  } catch (error) {
+    console.log(error)
+    console.log("You were here")
+  }
+}
+
+
   return (
     <div>
       <div className="blur-background"></div>
@@ -36,6 +58,12 @@ function LoginCard(props) {
                   autoComplete="email"
                   required
                   className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
+                  onChange={(e)=>{
+                    setuser({
+                      ...user,
+                      email:e.target.value
+                    })
+                  }}
                 />
               </div>
             </div>
@@ -57,6 +85,12 @@ function LoginCard(props) {
                   autoComplete="current-password"
                   required
                   className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
+                  onChange={(e)=>{
+                    setuser({
+                      ...user,
+                      password:e.target.value
+                    })
+                  }}
                 />
               </div>
             </div>
@@ -90,7 +124,8 @@ function LoginCard(props) {
               <button
                 type="submit"
                 className="flex w-full  justify-center rounded-md bg-primary px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-hoverColor focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
-              >
+                onClick={loginUser}
+             >
                 Login
               </button>
             </div>

diff --git a/src/components/RegisterCard.jsx b/src/components/RegisterCard.jsx
@@ -1,7 +1,13 @@
-import { useState } from "react";
+import React,{ useState } from "react";
 import logo from "../assets/logo/logo.ico";
+import {account} from '../appwrite/appwriteConfig';
+import { v4 as uuidv4 } from 'uuid';
+import { useNavigate } from "react-router-dom";
+
 function RegisterCard(props) {
 
+
+  const navigate = useNavigate();
   function handleLoginButtonClick() {
     props.isRegisterCardVisible((prevValue) => {
       return !prevValue;
@@ -11,6 +17,36 @@ function RegisterCard(props) {
     });
   }
 
+  const [user, setuser] = useState({
+    name:"",
+    email:"",
+    password:""
+  })
+
+  const signupUser = async(e)=>{
+    e.preventDefault();
+    const promise = account.create(
+      uuidv4(),
+      user.email,
+      user.password,
+      user.name
+    )
+
+    promise.then(
+      function(response){
+        console.log(response)
+        navigate('/find-restaurants');
+
+      },
+      function(error){
+        console.log(error)
+        console.log("It is error")
+      }
+    )
+  }
+
+
+
   return (
     <div>
       <div className="blur-background"></div>
@@ -37,6 +73,12 @@ function RegisterCard(props) {
                   autoComplete="name"
                   required
                   className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
+                  onChange={(e)=>{
+                    setuser({
+                      ...user,
+                      name:e.target.value
+                    })
+                  }}
                 />
               </div>
             </div>
@@ -56,6 +98,12 @@ function RegisterCard(props) {
                   autoComplete="email"
                   required
                   className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
+                  onChange={(e)=>{
+                    setuser({
+                      ...user,
+                      email:e.target.value
+                    })
+                  }}
                 />
               </div>
             </div>
@@ -77,6 +125,12 @@ function RegisterCard(props) {
                   autoComplete="current-password"
                   required
                   className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
+                  onChange={(e)=>{
+                    setuser({
+                      ...user,
+                      password:e.target.value
+                    })
+                  }}
                 />
               </div>
             </div>
@@ -111,6 +165,7 @@ function RegisterCard(props) {
               <button
                 type="submit"
                 className="flex w-full  justify-center rounded-md bg-primary px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-hoverColor focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+                onClick={signupUser}
               >
                 Create account
               </button>