Practical 1 – Vue.js Directives: Role-Based Login System
======================================================

Demonstrates: v-if, v-else-if, v-else, v-show, v-for, v-on (@click), and v-model.

1. PROJECT STRUCTURE
--------------------
Create the project:
    npm create vue@latest

Project name: vue-project

    vue-project/
    ├── public/
    ├── src/
    │   ├── assets/
    │   │   └── main.css
    │   ├── App.vue
    │   ├── main.js
    │   └── users.json
    ├── index.html
    ├── package.json
    └── vite.config.js

Store users.json inside src so Vue can import it.

2. FILE 1 – src/users.json
--------------------------
[
  {
    "id": 1,
    "username": "admin",
    "password": "admin",
    "role": "Admin"
  },
  {
    "id": 2,
    "username": "Pratik",
    "password": "12345",
    "role": "Teacher"
  },
  {
    "id": 3,
    "username": "Kartik",
    "password": "67890",
    "role": "Student"
  }
]

3. FILE 2 – src/App.vue
-----------------------
<template>
  <div class="container">
    <h2>Role Based Login</h2>

    <!-- v-model -->
    <input type="text" v-model="username" placeholder="Enter Username" />
    <input type="password" v-model="password" placeholder="Enter Password" />

    <!-- v-on -->
    <button @click="login">Login</button>
    <hr />

    <!-- v-if -->
    <div v-if="loggedIn">
      <!-- Admin Component -->
      <div v-if="currentUser.role === 'Admin'" class="admin">
        <h3>Admin Login</h3>
        <p>ID: {{ currentUser.id }}</p>
        <p>Username: {{ currentUser.username }}</p>
        <p>Role: {{ currentUser.role }}</p>
        <!-- v-show -->
        <p v-show="true">You have Full Access</p>
      </div>

      <!-- Teacher Component -->
      <div v-else-if="currentUser.role === 'Teacher'" class="teacher">
        <h3>Teacher Login</h3>
        <p>ID: {{ currentUser.id }}</p>
        <p>Username: {{ currentUser.username }}</p>
        <p>Role: {{ currentUser.role }}</p>
        <p v-show="true">Manage Student Records</p>
      </div>

      <!-- Student Component -->
      <div v-else class="student">
        <h3>Student Login</h3>
        <p>ID: {{ currentUser.id }}</p>
        <p>Username: {{ currentUser.username }}</p>
        <p>Role: {{ currentUser.role }}</p>
        <p v-show="true">View Courses</p>
      </div>
    </div>

    <!-- v-else -->
    <div v-else>
      <p>Please Login...</p>
    </div>

    <hr />
    <h3>Available Users</h3>
    <!-- v-for -->
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.id }} - {{ user.username }} ({{ user.role }})
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";
import users from "./users.json";

const username = ref("");
const password = ref("");
const loggedIn = ref(false);
const currentUser = ref({});

function login() {
  const user = users.find(
    u => u.username === username.value && u.password === password.value
  );

  if (user) {
    currentUser.value = user;
    loggedIn.value = true;
  } else {
    alert("Invalid Username or Password");
    loggedIn.value = false;
    currentUser.value = {};
  }
}
</script>

<style scoped>
.container {
  width: 400px;
  margin: 30px auto;
  padding: 20px;
  text-align: center;
  border: 2px solid #ccc;
  border-radius: 10px;
  background: #f4f4f4;
  color: #222;
}
input {
  width: 90%;
  padding: 10px;
  margin: 8px 0;
  box-sizing: border-box;
}
button {
  padding: 10px 20px;
  background: royalblue;
  color: white;
  border: none;
  cursor: pointer;
  margin-top: 10px;
}
button:hover { background: blue; }
.admin {
  background: #ffe5e5;
  border: 2px solid red;
  padding: 15px;
  margin-top: 15px;
  border-radius: 8px;
}
.teacher {
  background: #e8ffe8;
  border: 2px solid green;
  padding: 15px;
  margin-top: 15px;
  border-radius: 8px;
}
.student {
  background: #e6f0ff;
  border: 2px solid blue;
  padding: 15px;
  margin-top: 15px;
  border-radius: 8px;
}
ul { list-style: none; padding: 0; }
li {
  background: white;
  margin: 5px;
  padding: 8px;
  border-radius: 5px;
}
</style>

4. FILE 3 – src/main.js
-----------------------
import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

5. FILE 4 – src/assets/main.css
-------------------------------
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background: #ffffff;
}

6. RUN THE PROJECT
------------------
In the VS Code terminal inside vue-project:
    npm install
    npm run dev

Open the local URL Vite prints, usually:
    http://localhost:5173/

7. LOGIN CREDENTIALS
--------------------
Role       Username    Password
Admin      admin       admin
Teacher    Pratik      12345
Student    Kartik      67890

8. EXPECTED OUTPUT
------------------
Admin Login: ID, username, Admin role, and Full Access.
Teacher Login: ID, username, Teacher role, and Manage Student Records.
Student Login: ID, username, Student role, and View Courses.

9. VUE DIRECTIVES DEMONSTRATED
------------------------------
v-model    : Username and password inputs
v-on       : @click="login"
v-if       : Checks login status
v-else-if  : Checks Teacher role
v-else     : Displays Student or Please Login
v-show     : Displays role-specific permissions
v-for      : Displays available users

10. FINAL PROJECT STRUCTURE
---------------------------
    vue-project/
    ├── src/
    │   ├── assets/
    │   │   └── main.css
    │   ├── App.vue
    │   ├── main.js
    │   └── users.json
    ├── public/
    ├── index.html
    ├── package.json
    └── vite.config.js

IMPLEMENTATION COMPLETE

Note: This is a practical demonstration, not production authentication.
Credentials are stored in a JSON file and should not be used for a real login system.
