Requested changes done

src/routes/docs/tutorials/vue-auth/step-1/+page.markdoc

@@ -3,7 +3,7 @@ layout: tutorial
 title: Authentication with Vue
 description: Add Authentication to a Vue project using Appwrite.
 step: 1
-difficulty: medium
+difficulty: intermediate
 readtime: 40
 ---
 ## Appwrite: The backend you'll never have to build or maintain.

src/routes/docs/tutorials/vue-auth/step-10/+page.markdoc

@@ -0,0 +1,22 @@
+---
+layout: tutorial
+title: Next steps
+description: View your Vue.js app build on Appwrite Cloud.
+step: 10
+---
+
+# Test your project {% #test-project %}
+Run your project with `npm run dev` and open the URL that comes up on the terminal.
+
+
+# Play with your project {% #play-project %}
+
+Try to implement `validations` to input, make use of `phone verification`.
+
+# Use Appwrite{% #make-project %}
+
+Use appwrite in your projects and explore other amazing features that appwrite provides such as 
+
+- Databases
+- Functions
+- Storage

src/routes/docs/tutorials/vue-auth/step-2/+page.markdoc

@@ -5,6 +5,7 @@ description: Add Authentication to a Vue project using Appwrite.
 step: 2
 ---
 
+# Create Vue Project
 
 You can create a Vue project using [Vue](https://vuejs.org/guide/quick-start.html).
 

src/routes/docs/tutorials/vue-auth/step-3/+page.markdoc

@@ -1,6 +1,6 @@
 ---
 layout: tutorial
-title: Set up Appwrite
+title: Initialize SDK
 description: Import and configure a project with Appwrite Cloud and Vue.js.
 step: 3
 ---
@@ -51,26 +51,14 @@ The client is then used to initialize services like `Databases` and `Account`, s
 You can do this by instantiating the services you need in a file like `src/lib/appwrite.js` and **exporting the instances**.
 
 ```js
-  import { Databases, Account, Client } from "appwrite";
-
-  const client = new Client();
-  client
-    .setEndpoint(PUBLIC_APPWRITE_ENDPOINT)
-    .setProject(PUBLIC_APPWRITE_PROJECT);
-
-  export const account = new Account(client);
-  export const databases = new Databases(client);
-```
-For ease of building, we are using our `Endpoint` and `Project key` directly, but this is not advised when working with production code.
-
-For better security, we should use environment variables like
-`VITE_PUBLIC_APPWRITE_ENDPOINT` and `VITE_PUBLIC_APPWRITE_PROJECT` are environment variables that are exported in your project's [.env file](https://cli.vuejs.org/guide/mode-and-env.html#environment-variables).
+import { Client, Databases, Account } from "appwrite";
 
-For example, your `.env` might look something similar to this.
+const client = new Client();
+client
+  .setEndpoint("https://cloud.appwrite.io/v1")
+  .setProject("<YOUR_PROJECT_ID>"); // Replace with your project ID
 
-```text
-VITE_PUBLIC_APPWRITE_ENDPOINT= <Endpoint>
-VITE_PUBLIC_APPWRITE_PROJECT= <Project_ID>
+export const account = new Account(client);
+export const databases = new Databases(client);
 ```
-The env file must be placed in the project root. `VITE_` must be added in front of the environment variables in order for vite to identify them.
 You can get the values for these variables from the Appwrite console's **Settings** page.

src/routes/docs/tutorials/vue-auth/step-4/+page.markdoc

@@ -1,14 +1,13 @@
 ---
 layout: tutorial
-title: Set up Store, Navigation bar and routes
+title: Check if logged in
 description: Setting up a pinia store, a navigation bar for ease of navigation and routes using vue-router
 step: 4
 ---
 
 # Auth store {% #auth-store %}
 
-Since, we chose pinia for state management during the installatin process.So, we have already setuped our store. 
-
+Since, we chose pinia for state management during the installatin process. So, we have already setuped our store. 
 Now, We just need to declare state(data that user will have), actions (fetching of information for appwrite). We will discuss about these as we go.
 
 ```js
@@ -156,9 +155,8 @@ Create a new file `src/views/Home.vue` and add the following code to it.
       <br>
     </div>
     <RouterLink class="link" to="/login">
-      <Button p="20px" value="Get Started" />
+      <button> Get started</button>
     </RouterLink>
-
   </div>
 </template>
 ```

src/routes/docs/tutorials/vue-auth/step-5/+page.markdoc

@@ -1,7 +1,7 @@
 ---
 layout: tutorial
-title: Basic Authentication 
-description: Add navigation to your Vue.js app with Appwrite authentication and pinia stores.
+title: Create login page
+description: Everything about the login functionality and dashboard page.
 step: 5
 ---
 
@@ -67,16 +67,10 @@ export default {
                 router.push({ path: '/Dashboard' })
             },
             async register() {
-                authenticationStore.email = this.email;
-                authenticationStore.password = this.password;
-                authenticationStore.name = this.name;
-                await authenticationStore.register(this.email, this.password, this.name);
-                console.log(authenticationStore.user);
+               // To be discussed
             },
             async sendPasswordRecoveryMail() {
-                authenticationStore.email = this.email;
-                await authenticationStore.UpdatePassword(this.email);
-                alert("Recovery Mail sent!")
+                // To be discussed
             },
         };
     },
@@ -95,6 +89,7 @@ Here is a short overview of what the above code is doing:
 
 ```html
 <template>
+    <!-- Log in --> 
     <div v-if="isLogin && !isAuthenticated && !forgotPassword">
         <h1>Sign in</h1>
         <form @submit.prevent="login()">
@@ -107,37 +102,22 @@ Here is a short overview of what the above code is doing:
             <button @click="() => { forgotPassword = !forgotPassword }">Forgot Password?</button>
         </div>
     </div>
+
+    <!-- Sign up --> 
     <div v-if="!isLogin && !forgotPassword">
-        <h1>Sign up</h1>
-        <form @submit.prevent="register()">
-            <input type="text" v-model="name" placeholder="Name">
-            <input type="email" v-model="email" placeholder="Email">
-            <input type="password" v-model="password" placeholder="Password">
-            <button type="submit">Sign up</button>
-        </form>
-        <div>
-            <button @click="() => { isLogin = !isLogin }">Sign in</button>
-            <button @click="() => { forgotPassword = !forgotPassword }" >Forgot Password?</button>
-        </div>
+        <!-- To be discussed --> 
     </div>
+
+    <!-- Forgot Password --> 
     <div v-if="forgotPassword">
-        <h1>Forgot Password</h1>
-        <form @submit.prevent="sendPasswordRecoveryMail()">
-            <input type="email" v-model="email" placeholder="Email">
-            <button type="submit">Submit</button>
-        </form>
-        <div>
-            <button @click="() => { forgotPassword = !forgotPassword }">Back</button>
-        </div>
+        <!-- To be discussed --> 
     </div>
 </template>
 ```
 
 In the above code we are doing the following things:
 
-- Creating three variables: `isLogin`, `forgotPassword`, and `email`.
-- Seting the `isLogin` variable to `false` and the `forgotPassword` variable to `false`.
-- Writing three methods: `login()`, `register()`, and `sendPasswordRecoveryMail()`. These methods will be called when the user submits the corresponding form.
+- Using three variables: `isLogin`, `forgotPassword`, and `email`.
 - Creating a Vue.js template with three sections: login, register, and forgot password.
 - Using the `v-if` directive to conditionally render each section of the page.
 - Using the `@submit.prevent` directive to prevent the default form submission behavior and call the corresponding method instead.
@@ -159,20 +139,6 @@ if user is registered, the user will be redirected to the `dashboard page` which
 
 The login action takes inputs such as email and password of the user.
 
-## Register action
-
-```js
-async register() {
-      const registerResponse = await account.create(ID.unique(), this.email, this.password, this.name);
-      alert("Account Created")
-    }
-```
-
-To register to our app, we use `create` function which appwrite provides, this creates a user in our appwrite console. Now, user can login to the app with the credentials, the user entered during registration.
-
-
-The register action takes inputs such as email, password and the name of the user.
-
 ## Logout Action
 
 We can find the logout button in the navbar once the user is logged in.
@@ -235,7 +201,6 @@ In the above code we are doing the following things:
 - Creating a computed property called `isAuthenticated` that returns the value of the `isAuthenticated` property in the authentication store.
 - Creating a computed property called `isVerified` that returns the value of the `isVerified` property in the authentication store.
 - Creating a reactive reference to the `user` object in the authentication store by calling the `storeToRefs()` function and passing in the `authenticationStore` variable.
-- Creating a method called `userDelete()` that calls the `DeleteUser()` method on the authentication store.
 - Creating a method called `userVerify()` that calls the `verifyUser()` method on the authentication store.