MyINPulse/front/MyINPulse-front/src/components/LoginComponent.vue

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { jwtDecode } from "jwt-decode"; // i hope this doesn't break the code later
import { store } from "../main.ts";
import { callApi } from "@/services/api.ts";
import Header from "@/components/HeaderComponent.vue";
const router = useRouter();

type TokenPayload = {
    realm_access?: {
        roles?: string[];
    };
};

const customRequest = ref("");

onMounted(() => {
    if (store.authenticated && store.user.token) {
        try {
            const decoded = jwtDecode<TokenPayload>(store.user.token);
            const roles = decoded.realm_access?.roles || [];

            if (roles.includes("MyINPulse-admin")) {
                router.push("/admin");
            } else if (roles.includes("MyINPulse-entrepreneur")) {
                router.push("/canvas");
            }
        } catch (err) {
            console.error("Failed to decode token", err);
        }
    }
});
/*
const loading = ref(false);

const callApiWithLoading = async (path: string) => {
  loading.value = true;
  await callApi(path);
  loading.value = false;
};
*/
</script>

<template>
    <Header />
    <error-wrapper></error-wrapper>
    <div class="auth-container">
        <div class="auth-card">
            <h1>Bienvenue</h1>

            <div
                class="status"
                :class="store.authenticated ? 'success' : 'error'"
            >
                <p>
                    {{
                        store.authenticated
                            ? "✅ Authenticated"
                            : "❌ Not Authenticated"
                    }}
                </p>
            </div>

            <div class="actions">
                <button @click="store.login">Login</button>
                <button @click="store.logout">Logout</button>
                <button @click="store.signup">Signup-admin</button>
                <button @click="store.signup">Signup-Entrepreneur</button>
                <button @click="store.refreshUserToken">Refresh Token</button>
            </div>

            <div v-if="store.authenticated" class="token-section">
                <p><strong>Access Token:</strong></p>
                <pre>{{ store.user.token }}</pre>

                <p><strong>Refresh Token:</strong></p>
                <pre>{{ store.user.refreshToken }}</pre>
            </div>

            <div class="api-calls">
                <h2>Test API Calls</h2>
                <button @click="callApi('random')">
                    Call Entrepreneur API
                </button>
                <button @click="callApi('random2')">Call Admin API</button>
                <button @click="callApi('unauth/dev')">Call Unauth API</button>

                <div class="custom-call">
                    <input
                        v-model="customRequest"
                        placeholder="Custom endpoint"
                    />
                    <button @click="callApi(customRequest)">Call</button>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 1rem;
    min-height: 100vh;
    background-color: #eef1f5;
    font-family: Arial, sans-serif;
}

.auth-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
}

h1 {
    text-align: center;
    margin-bottom: 1rem;
    color: #333;
}

.status {
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: bold;
}
.success {
    color: green;
}
.error {
    color: red;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.actions button {
    padding: 0.6rem 1rem;
    background-color: #4a90e2;
    border: none;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.actions button:hover {
    background-color: #357abd;
}

.token-section pre {
    background: #f6f8fa;
    padding: 0.5rem;
    overflow-x: auto;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.api-calls {
    margin-top: 2rem;
}
.api-calls h2 {
    margin-bottom: 1rem;
    color: #444;
    font-size: 1.1rem;
}
.api-calls button {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.custom-call {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
}
.custom-call input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 6px;
}
/* 
.status {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  display: inline-block;
  background-color: #e0f7e9; 
  color: #2e7d32;
}
*/
.status.error {
    background-color: #ffe2e2;
    color: #c62828;
}
</style>