Teren-app/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue

<script setup>
import { ref } from "vue";
import { useForm } from "@inertiajs/vue3";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/Components/ui/dialog";
import InputError from "@/Components/InputError.vue";
import { Monitor, Smartphone, LogOut, CheckCircle } from "lucide-vue-next";

defineProps({
  sessions: Array,
});

const confirmingLogout = ref(false);
const passwordInput = ref(null);

const form = useForm({
  password: "",
});

const confirmLogout = () => {
  confirmingLogout.value = true;

  setTimeout(() => passwordInput.value.focus(), 250);
};

const logoutOtherBrowserSessions = () => {
  form.delete(route("other-browser-sessions.destroy"), {
    preserveScroll: true,
    onSuccess: () => closeModal(),
    onError: () => passwordInput.value.focus(),
    onFinish: () => form.reset(),
  });
};

const closeModal = () => {
  confirmingLogout.value = false;

  form.reset();
};
</script>

<template>
  <Card>
    <CardHeader>
      <div class="flex items-center gap-2">
        <LogOut class="h-5 w-5 text-muted-foreground" />
        <CardTitle>Browser Sessions</CardTitle>
      </div>
      <CardDescription>
        Manage and log out your active sessions on other browsers and devices.
      </CardDescription>
    </CardHeader>

    <CardContent class="space-y-6">
      <p class="text-sm text-muted-foreground">
        If necessary, you may log out of all of your other browser sessions across all of
        your devices. Some of your recent sessions are listed below; however, this list
        may not be exhaustive. If you feel your account has been compromised, you should
        also update your password.
      </p>

      <!-- Other Browser Sessions -->
      <div v-if="sessions.length > 0" class="space-y-4">
        <div
          v-for="(session, i) in sessions"
          :key="i"
          class="flex items-center gap-3 rounded-lg border p-3"
        >
          <div class="flex-shrink-0">
            <Monitor
              v-if="session.agent.is_desktop"
              class="h-8 w-8 text-muted-foreground"
            />
            <Smartphone v-else class="h-8 w-8 text-muted-foreground" />
          </div>

          <div class="flex-1 min-w-0">
            <div class="text-sm font-medium">
              {{ session.agent.platform ? session.agent.platform : "Unknown" }} -
              {{ session.agent.browser ? session.agent.browser : "Unknown" }}
            </div>
            <div class="text-xs text-muted-foreground mt-1">
              {{ session.ip_address }}
              <span
                v-if="session.is_current_device"
                class="inline-flex items-center ml-2 text-green-600 dark:text-green-400 font-semibold"
              >
                This device
              </span>
              <span v-else class="ml-1"> · Last active {{ session.last_active }} </span>
            </div>
          </div>
        </div>
      </div>

      <div class="flex items-center gap-3">
        <Button @click="confirmLogout">
          <LogOut class="h-4 w-4 mr-2" />
          Log Out Other Browser Sessions
        </Button>

        <div
          v-if="form.recentlySuccessful"
          class="flex items-center gap-1.5 text-sm text-muted-foreground"
        >
          <CheckCircle class="h-4 w-4 text-green-600" />
          <span>Done.</span>
        </div>
      </div>
    </CardContent>

    <!-- Log Out Other Devices Confirmation Dialog -->
    <Dialog :open="confirmingLogout" @update:open="closeModal">
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Log Out Other Browser Sessions</DialogTitle>
          <DialogDescription>
            Please enter your password to confirm you would like to log out of your other
            browser sessions across all of your devices.
          </DialogDescription>
        </DialogHeader>

        <div class="py-4">
          <Input
            ref="passwordInput"
            v-model="form.password"
            type="password"
            placeholder="Password"
            autocomplete="current-password"
            @keyup.enter="logoutOtherBrowserSessions"
          />
          <InputError :message="form.errors.password" class="mt-2" />
        </div>

        <DialogFooter>
          <Button variant="outline" @click="closeModal"> Cancel </Button>
          <Button :disabled="form.processing" @click="logoutOtherBrowserSessions">
            Log Out Other Browser Sessions
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  </Card>
</template>