34d63f3557
* Begin UI for threads and moderation overhaul * Hide close button on non-report threads * Fix review age coloring * Add project count * Remove action buttons from queue page and add queued date to project page * Hook up to actual data * Remove unused icon * Get up to 1000 projects in queue * prettier * more prettier * Changed all the things * lint * rebuild * Add omorphia * Workaround formatjs bug in ThreadSummary.vue * Fix notifications page on prod * Fix a few notifications and threads bugs * lockfile * Fix duplicate button styles * more fixes and polishing * More fixes * Remove legacy pages * More bugfixes * Add some error catching for reports and notifications * More error handling * fix lint * Add inbox links * Remove loading component and rename member header * Rely on threads always existing * Handle if project update notifs are not grouped * oops * Fix chips on notifications page * Import ModalModeration * finish threads * New authentication (#1234) * Initial new auth work * more auth pages * Finish most * more * fix on landing page * Finish everything but PATs + Sessions * fix threads merge bugs * fix cf pages ssr * fix most issues * Finish authentication * Fix merge --------- Co-authored-by: triphora <emma@modrinth.com> Co-authored-by: Jai A <jaiagr+gpg@pm.me> Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
90 lines
2.3 KiB
Vue
90 lines
2.3 KiB
Vue
<template>
|
|
<div class="universal-card">
|
|
<h2>Sessions</h2>
|
|
<p>
|
|
Here are all the devices that are currently logged in with your Modrinth account. You can log
|
|
out of each one individually.
|
|
<br /><br />
|
|
If you see an entry you don't recognize, log out of that device and change your Modrinth
|
|
account password immediately.
|
|
</p>
|
|
<div v-for="session in sessions" :key="session.id" class="universal-card recessed session">
|
|
<div>
|
|
<div>
|
|
<strong>
|
|
{{ session.os ?? 'Unknown OS' }} ⋅ {{ session.platform ?? 'Unknown platform' }} ⋅
|
|
{{ session.ip }}
|
|
</strong>
|
|
</div>
|
|
<div>
|
|
<template v-if="session.city">{{ session.city }}, {{ session.country }} ⋅</template>
|
|
<span v-tooltip="$dayjs(session.last_login).format('MMMM D, YYYY [at] h:mm A')">
|
|
Last accessed {{ fromNow(session.last_login) }}
|
|
</span>
|
|
⋅
|
|
<span v-tooltip="$dayjs(session.created).format('MMMM D, YYYY [at] h:mm A')">
|
|
Created {{ fromNow(session.created) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="input-group">
|
|
<i v-if="session.current">Current session</i>
|
|
<button v-else class="iconified-button raised-button" @click="revokeSession(session.id)">
|
|
<XIcon /> Revoke session
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { XIcon } from 'omorphia'
|
|
|
|
definePageMeta({
|
|
middleware: 'auth',
|
|
})
|
|
|
|
useHead({
|
|
title: 'Sessions - Modrinth',
|
|
})
|
|
|
|
const data = useNuxtApp()
|
|
const { data: sessions, refresh } = await useAsyncData('session/list', () =>
|
|
useBaseFetch('session/list')
|
|
)
|
|
|
|
async function revokeSession(id) {
|
|
startLoading()
|
|
try {
|
|
sessions.value = sessions.value.filter((x) => x.id !== id)
|
|
await useBaseFetch(`session/${id}`, {
|
|
method: 'DELETE',
|
|
})
|
|
await refresh()
|
|
} catch (err) {
|
|
data.$notify({
|
|
group: 'main',
|
|
title: 'An error occurred',
|
|
text: err.data.description,
|
|
type: 'error',
|
|
})
|
|
}
|
|
stopLoading()
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.session {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
|
|
@media screen and (min-width: 800px) {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.input-group {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|