tomasalias/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Update master with new auth (#1236)

Browse Source 
* 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>
This commit is contained in:
Prospector
2023-07-20 11:19:42 -07:00
committed by GitHub
parent a5613ebb10
commit 34d63f3557
72 changed files with 2373 additions and 711 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
layouts/default.vue
View File

@@ -1,5 +1,21 @@
<template>
<div ref="main_page" class="layout" :class="{ 'expanded-mobile-nav': isBrowseMenuOpen }">
<div
v-if="auth.user && !auth.user.email_verified && route.path !== '/auth/verify-email'"
class="email-nag"
>
<template v-if="auth.user.email">
<span>For security purposes, please verify your email address on Modrinth.</span>
<button class="btn" @click="resendVerifyEmail">Re-send verification email</button>
</template>
<template v-else>
<span>For security purposes, please enter your email on Modrinth.</span>
<nuxt-link class="btn" to="/settings/account">
<SettingsIcon />
Visit account settings
</nuxt-link>
</template>
</div>
<header class="site-header" role="presentation">
<section class="navbar columns" role="navigation">
<section class="logo column" role="presentation">
@@ -25,7 +41,6 @@
<button
class="control-button button-transparent"
title="Switch theme"
:disabled="isThemeSwitchOnHold"
@click="changeTheme"
>
<MoonIcon v-if="$colorMode.value === 'light'" aria-hidden="true" />
@@ -80,7 +95,7 @@
<span class="title">Settings</span>
</NuxtLink>
<NuxtLink
v-if="$tag.staffRoles.includes($auth.user.role)"
v-if="tags.staffRoles.includes(auth.user.role)"
class="item button-transparent"
to="/moderation"
>
@@ -88,21 +103,16 @@
<span class="title">Moderation</span>
</NuxtLink>
<hr class="divider" />
<button class="item button-transparent" @click="logout()">
<button class="item button-transparent" @click="logoutUser()">
<LogOutIcon class="icon" />
<span class="dropdown-item__text">Log out</span>
</button>
</div>
</div>
<section v-else class="auth-prompt">
<a
:href="getAuthUrl()"
class="log-in-button header-button brand-button"
rel="noopener nofollow"
>
<GitHubIcon aria-hidden="true" />
Sign in with GitHub</a
>
<nuxt-link class="iconified-button brand-button" to="/auth/sign-in">
<LogInIcon /> Sign in
</nuxt-link>
</section>
</section>
</section>
@@ -150,19 +160,13 @@
<div>Visit your profile</div>
</div>
</NuxtLink>
<a
v-else
class="iconified-button brand-button"
:href="getAuthUrl()"
rel="nofollow noopener"
>
<GitHubIcon aria-hidden="true" />
Sign in with GitHub
</a>
<nuxt-link v-else class="iconified-button brand-button" to="/auth/sign-in">
<LogInIcon /> Sign in
</nuxt-link>
</div>
<div class="links">
<template v-if="auth.user">
<button class="iconified-button danger-button" @click="logout()">
<button class="iconified-button danger-button" @click="logoutUser()">
<LogOutIcon aria-hidden="true" />
Log out
</button>
@@ -187,7 +191,7 @@
<SettingsIcon aria-hidden="true" />
Settings
</NuxtLink>
<button class="iconified-button" :disabled="isThemeSwitchOnHold" @click="changeTheme">
<button class="iconified-button" @click="changeTheme">
<MoonIcon v-if="$colorMode.value === 'light'" class="icon" />
<SunIcon v-else class="icon" />
<span class="dropdown-item__text">Change theme</span>
@@ -319,11 +323,7 @@
</a>
</div>
<div class="buttons">
<button
class="iconified-button raised-button"
:disabled="isThemeSwitchOnHold"
@click="changeTheme"
>
<button class="iconified-button raised-button" @click="changeTheme">
<MoonIcon v-if="$colorMode.value === 'light'" aria-hidden="true" />
<SunIcon v-else aria-hidden="true" />
Change theme
@@ -340,6 +340,7 @@
</div>
</template>
<script setup>
import { LogInIcon } from 'omorphia'
import HamburgerIcon from '~/assets/images/utils/hamburger.svg'
import CrossIcon from '~/assets/images/utils/x.svg'
import SearchIcon from '~/assets/images/utils/search.svg'
@@ -357,7 +358,6 @@ import LogOutIcon from '~/assets/images/utils/log-out.svg'
import HeartIcon from '~/assets/images/utils/heart.svg'
import ChartIcon from '~/assets/images/utils/chart.svg'
import GitHubIcon from '~/assets/images/utils/github.svg'
import NavRow from '~/components/ui/NavRow.vue'
import ModalCreation from '~/components/ui/ModalCreation.vue'
import Avatar from '~/components/ui/Avatar.vue'
@@ -365,6 +365,8 @@ import Avatar from '~/components/ui/Avatar.vue'
const app = useNuxtApp()
const auth = await useAuth()
const user = await useUser()
const cosmetics = useCosmetics()
const tags = useTags()
const config = useRuntimeConfig()
const route = useRoute()
@@ -383,9 +385,9 @@ let developerModeCounter = 0
function developerModeIncrement() {
if (developerModeCounter >= 5) {
app.$cosmetics.developerMode = !app.$cosmetics.developerMode
cosmetics.value.developerMode = !cosmetics.value.developerMode
developerModeCounter = 0
if (app.$cosmetics.developerMode) {
if (cosmetics.value.developerMode) {
app.$notify({
group: 'main',
title: 'Developer mode activated',
@@ -404,6 +406,10 @@ function developerModeIncrement() {
developerModeCounter++
}
}
async function logoutUser() {
await logout()
}
</script>
<script>
export default defineNuxtComponent({
@@ -412,7 +418,6 @@ export default defineNuxtComponent({
isDropdownOpen: false,
isMobileMenuOpen: false,
isBrowseMenuOpen: false,
isThemeSwitchOnHold: false,
registeredSkipLink: null,
hideDropdown: false,
navRoutes: [
@@ -463,12 +468,8 @@ export default defineNuxtComponent({
this.runAnalytics()
},
},
async mounted() {
mounted() {
this.runAnalytics()
if (this.$route.query.code) {
await useAuth(this.$route.query.code)
window.history.replaceState(history.state, null, this.$route.path)
}
},
methods: {
runAnalytics() {
@@ -498,28 +499,8 @@ export default defineNuxtComponent({
this.isMobileMenuOpen = false
}
},
logout() {
useCookie('auth-token').value = null
this.$notify({
group: 'main',
title: 'Logged Out',
text: 'You have logged out successfully!',
type: 'success',
})
useRouter()
.push('/')
.then(() => {
useRouter().go()
})
},
changeTheme() {
this.isThemeSwitchOnHold = true
updateTheme(this.$colorMode.value === 'dark' ? 'light' : 'dark', true)
setTimeout(() => {
this.isThemeSwitchOnHold = false
}, 1000)
},
},
})
@@ -1147,5 +1128,15 @@ export default defineNuxtComponent({
}
}
}
.email-nag {
background-color: var(--color-raised-bg);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 0.5rem 1rem;
}
</style>
<style src="vue-multiselect/dist/vue-multiselect.css"></style>