Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Home-refresh #1001

Closed
wants to merge 24 commits into from
Closed
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
create mr_auth composables
darling committed Jan 22, 2024

Unverified

This user has not yet uploaded their public signing key.
commit 3afac8e66b751a555e56c30f094b0a0429dcfc5e
79 changes: 58 additions & 21 deletions theseus_gui/src/components/ui/platform/AccountDropdown.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
<template>
<div class="account-dropdown">
<Modal
ref="modrinthLoginModal"
class="login-screen-modal"
:noblur="!themeStore.advancedRendering"
>
<ModrinthLoginScreen :modal="true" :prev-page="signInAfter" :next-page="signInAfter" />
</Modal>
<OverflowMenu
v-if="mrAuth.auth.value?.user"
class="btn btn-transparent headless-button"
:options="[
{
id: 'play',
id: 'sign-out',
color: 'danger',
action: () => {},
hoverFilledOnly: true,
@@ -13,44 +21,73 @@
direction="up"
position="right"
>
<Avatar circle size="sm" :src="credentials?.user?.avatar_url" />
<template #play> <LogOutIcon /> Sign out </template>
<Avatar circle size="sm" :src="mrAuth.auth.value?.user?.avatar_url" />
<template #sign-out> <LogOutIcon /> Sign out </template>
</OverflowMenu>
<OverflowMenu
v-else
class="btn btn-transparent headless-button"
:options="[
{
id: 'sign-in',
color: 'primary',
action: () => {
modrinthLoginModal?.show()
},
},
]"
direction="up"
position="right"
>
<Avatar circle size="sm" />
<template #sign-in> <LogInIcon /> Sign in </template>
</OverflowMenu>
</div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { Avatar, OverflowMenu, LogOutIcon } from 'omorphia'
import { get as getCredentials } from '@/helpers/mr_auth.js'
import { useNotifications } from '@/store/notifications.js'
import { Avatar, OverflowMenu, LogOutIcon, LogInIcon, Modal } from 'omorphia'

import { useTheming } from '@/store/state'
import ModrinthLoginScreen from '@/components/ui/tutorial/ModrinthLoginScreen.vue'
import { useMrAuth } from '@/composables/auth.js'

const themeStore = useTheming()

const notifs = useNotifications()
const mrAuth = useMrAuth()

const credentials = ref(null)
const modrinthLoginModal = ref(null)

const refreshCredentials = async () => {
try {
credentials.value = await getCredentials()
} catch (error) {
notifs.addNotification({
title: 'An error occurred',
text: error.message ?? error,
type: 'error',
})
console.error(error)
}
await mrAuth.get()
}

onMounted(async () => {
await refreshCredentials()
})

const signInAfter = async () => {
modrinthLoginModal.value?.hide()
await refreshCredentials()
}
</script>

<style lang="scss">
.account-dropdown {
*.headless-button {
<style scoped lang="scss">
:deep {
.headless-button {
padding: 0 !important;
border-radius: 99999px;
}

.login-screen-modal {
.modal-container .modal-body {
width: auto;

.content {
background: none;
}
}
}
}
</style>
38 changes: 38 additions & 0 deletions theseus_gui/src/composables/auth.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { ref, onMounted } from 'vue'
import { get as getCredentials, logout as removeCredentials } from '@/helpers/mr_auth.js'
import { handleError } from '@/store/state.js'

export const useMrAuth = () => {
const auth = ref(null)

const get = async () => {
try {
const creds = await getCredentials()
auth.value = creds
return creds
} catch (error) {
handleError(error)
}
}

const logout = async () => {
try {
const result = await removeCredentials()
auth.value = null
return result
} catch (error) {
handleError(error)
}
return null
}

onMounted(() => {
get()
})

return {
auth,
get,
logout,
}
}
19 changes: 8 additions & 11 deletions theseus_gui/src/pages/Settings.vue
Original file line number Diff line number Diff line change
@@ -16,7 +16,9 @@ import {
import { handleError, useTheming } from '@/store/state'
import { is_dir_writeable, change_config_dir, get, set } from '@/helpers/settings'
import { get_max_memory } from '@/helpers/jre'
import { get as getCreds, logout } from '@/helpers/mr_auth.js'

import { useMrAuth } from '@/composables/auth'

import JavaSelector from '@/components/ui/JavaSelector.vue'
import ModrinthLoginScreen from '@/components/ui/tutorial/ModrinthLoginScreen.vue'
import { mixpanel_opt_out_tracking, mixpanel_opt_in_tracking } from '@/helpers/mixpanel'
@@ -105,17 +107,12 @@ watch(
{ deep: true }
)

const credentials = ref(await getCreds().catch(handleError))
const mrAuth = useMrAuth()
const loginScreenModal = ref()

async function logOut() {
await logout().catch(handleError)
credentials.value = await getCreds().catch(handleError)
}

async function signInAfter() {
loginScreenModal.value.hide()
credentials.value = await getCreds().catch(handleError)
await mrAuth.get()
}

async function findLauncherDir() {
@@ -163,12 +160,12 @@ async function refreshDir() {
<div class="adjacent-input">
<label for="theme">
<span class="label__title">Manage account</span>
<span v-if="credentials" class="label__description">
You are currently logged in as {{ credentials.user.username }}.
<span v-if="mrAuth.auth.value" class="label__description">
You are currently logged in as {{ mrAuth.auth.value?.user.username }}.
</span>
<span v-else> Sign in to your Modrinth account. </span>
</label>
<button v-if="credentials" class="btn" @click="logOut">
<button v-if="mrAuth.auth.value" class="btn" @click="mrAuth.logout()">
<LogOutIcon />
Sign out
</button>