npm create vue@latest p1
cd p1
npm install
npm run dev




src\users.json :
[
  {"username":"admin","password":"123","role":"Admin"},
  {"username":"student","password":"123","role":"Student"},
  {"username":"guest","password":"123","role":"Guest"}
]






App.vue :
<script setup>
import { ref } from 'vue'
import users from './users.json'

const username = ref('')
const password = ref('')
const currentUser = ref(null)
const error = ref('')
const showHint = ref(false)

function login() {
  const user = users.find(u =>
    u.username === username.value &&
    u.password === password.value
  )
  if (user) {
    currentUser.value = user
    error.value = ''
  } else {
    error.value = 'Invalid credentials!'
  }
}

function logout() {
  currentUser.value = null
  username.value = ''
  password.value = ''
}
</script>

<template>
  <main :class="['app', currentUser?.role?.toLowerCase()]">
    <section class="card">
      <h1>Role Portal</h1>

      <form v-if="!currentUser" @submit.prevent="login">
        <input v-model="username" placeholder="Username" required>
        <input v-model="password" type="password"
               placeholder="Password" required>
        <button type="submit">Login</button>

        <p v-if="error" class="error">{{ error }}</p>

        <button type="button" class="link"
                @click="showHint = !showHint">
          {{ showHint ? 'Hide' : 'Show' }} demo credentials
        </button>
        <p v-show="showHint" class="hint">
          admin / 123, student / 123, guest / 123
        </p>
      </form>

      <div v-else>
        <h2>Welcome, {{ currentUser.username }}!</h2>
        <p>Role: <b>{{ currentUser.role }}</b></p>

        <h3>Available Features</h3>
        <ul>
          <li v-for="feature in
            (currentUser.role === 'Admin'
              ? ['Manage Users', 'View Reports']
              : currentUser.role === 'Student'
              ? ['View Courses', 'Check Results']
              : ['View Public Content'])"
            :key="feature">
            {{ feature }}
          </li>
        </ul>

        <button @click="logout">Logout</button>
      </div>
    </section>
  </main>
</template>

<style src="./style.css"></style>









main.js : 
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

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










src/style.css : 
* { box-sizing: border-box; }

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

.app {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}

.card {
  width: 100%;
  max-width: 380px;
  padding: 28px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 8px 25px #0002;
}

h1 { color: #334155; text-align: center; }
input, button {
  width: 100%;
  padding: 12px;
  margin: 7px 0;
  border-radius: 6px;
  font-size: 15px;
}

input { border: 1px solid #cbd5e1; }
button {
  border: 0;
  background: #2563eb;
  color: white;
  cursor: pointer;
}
button:hover { opacity: .85; }
.link { background: #64748b; }
.error { color: #dc2626; }
.hint { color: #475569; font-size: 13px; }
li { padding: 6px; }

.admin .card { border-top: 6px solid #7c3aed; }
.student .card { border-top: 6px solid #2563eb; }
.guest .card { border-top: 6px solid #059669; }

