<template>
  <li class="nav-item" :class="{ dropdown: userStore.loggedIn }">
    <template v-if="userStore.loggedIn">
      <a
        class="nav-link dropdown-toggle"
        href="#"
        role="button"
        data-bs-toggle="dropdown"
        aria-expanded="false"
      >
        <img v-bind:src="avatarURL" /> 
      </a>
      <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" @click.prevent="doLogout">Logout</a></li>
      </ul>
    </template>
    <a v-else @click.prevent="doLogin()" href="#" class="btn btn-primary">Login</a>
  </li>
</template>

<script setup lang="ts">
import { useUserStore } from "@/stores/user";
import { generateLibravatarURL } from "../util";
import { useRoute, useRouter } from "vue-router";
import { login, logout, useAuth } from "../auth";

const auth = useAuth();
const route = useRoute();
const userStore = useUserStore();
const router = useRouter();
const avatarURL = generateLibravatarURL("rlerch@redhat.com", 30, "retro");

const doLogin = () => login(auth, route.fullPath);

const doLogout = () => {
  logout();
  if (route.meta.auth) {
    router.push("/");
  }
};
</script>

<template>
  <li class="nav-item" :class="{ dropdown: userStore.loggedIn }">
    <template v-if="userStore.loggedIn">
      <a
        class="nav-link dropdown-toggle"
        href="#"
        role="button"
        data-bs-toggle="dropdown"
        aria-expanded="false"
      >
        <img v-bind:src="avatarURL" /> 
      </a>
      <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" @click.prevent="doLogout">Logout</a></li>
      </ul>
    </template>
    <a v-else @click.prevent="doLogin()" href="#" class="btn btn-primary">Login</a>
  </li>
</template>

<script setup lang="ts">
import { useUserStore } from "@/stores/user";
import { generateLibravatarURL } from "../util";
import { useRoute, useRouter } from "vue-router";
import { login, logout, useAuth } from "../auth";

const auth = useAuth();
const route = useRoute();
const userStore = useUserStore();
const router = useRouter();
const avatarURL = generateLibravatarURL(userStore.email, 30, "retro");

const doLogin = () => login(auth, route.fullPath);

const doLogout = () => {
  logout();
  if (route.meta.auth) {
    router.push("/");
  }
};
</script>

Use the users email to generate avatar, not my email
Use the users email to generate avatar, not my email

Signed-off-by: Ryan Lerch <e809e25f3c554b2b195ccd768cd9a485288f896f@redhat.com>
