thelounge/client/components/Session.vue
Max Leiter dd05ee3a65
TypeScript and Vue 3 (#4559)
Co-authored-by: Eric Nemchik <eric@nemchik.com>
Co-authored-by: Pavel Djundik <xPaw@users.noreply.github.com>
2022-06-18 17:25:21 -07:00

83 lines
1.7 KiB
Vue

<template>
<div class="session-item">
<div class="session-item-info">
<strong>{{ session.agent }}</strong>
<a :href="'https://ipinfo.io/' + session.ip" target="_blank" rel="noopener">{{
session.ip
}}</a>
<p v-if="session.active > 1" class="session-usage">
Active in {{ session.active }} browsers
</p>
<p v-else-if="!session.current && !session.active" class="session-usage">
Last used on <time>{{ lastUse }}</time>
</p>
</div>
<div class="session-item-btn">
<button class="btn" @click.prevent="signOut">
<template v-if="session.current">Sign out</template>
<template v-else>Revoke</template>
</button>
</div>
</div>
</template>
<style>
.session-list .session-item {
display: flex;
font-size: 14px;
}
.session-list .session-item-info {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.session-list .session-item-btn {
flex-shrink: 0;
}
.session-list .session-usage {
font-style: italic;
color: var(--body-color-muted);
}
</style>
<script lang="ts">
import {computed, defineComponent, PropType} from "vue";
import localetime from "../js/helpers/localetime";
import Auth from "../js/auth";
import socket from "../js/socket";
import {ClientSession} from "../js/store";
export default defineComponent({
name: "Session",
props: {
session: {
type: Object as PropType<ClientSession>,
required: true,
},
},
setup(props) {
const lastUse = computed(() => {
return localetime(props.session.lastUse);
});
const signOut = () => {
if (!props.session.current) {
socket.emit("sign-out", props.session.token);
} else {
socket.emit("sign-out");
Auth.signout();
}
};
return {
lastUse,
signOut,
};
},
});
</script>