Add route for extension auth + Modq improvements (#1013)

Author: Excellify

src/apollo/query/mod-queue.query.ts

@@ -2,8 +2,8 @@ import gql from "graphql-tag";
 import { Message } from "@/structures/Message";
 
 export const GetModRequests = gql`
-	query GetModRequests($after: ObjectID, $limit: Int, $wish: String) {
-		modRequests(after_id: $after, limit: $limit, wish: $wish) {
+	query GetModRequests($after: ObjectID, $limit: Int, $wish: String, $country: String) {
+		modRequests(after_id: $after, limit: $limit, wish: $wish, country: $country) {
 			total
 			messages {
 				id

src/components/form/TextInput.vue

@@ -6,6 +6,7 @@
 			:error="error"
 			:autofocus="autofocus"
 			:value="modelValue"
+			:maxlength="maxlength"
 			:empty="typeof modelValue === 'string' ? !modelValue?.length : typeof modelValue !== 'number'"
 			@input="onInput"
 			@blur="emit('blur')"
@@ -37,6 +38,7 @@ const props = withDefaults(
 		width?: string;
 		appearance?: "flat" | "outline";
 		autofocus?: boolean;
+		maxlength?: number;
 	}>(),
 	{
 		type: "text",

src/components/form/Toggle.vue

@@ -0,0 +1,92 @@
+<template>
+	<div class="seventv-toggle-outer">
+		<span v-if="left" class="seventv-toggle-option">
+			{{ left }}
+		</span>
+		<label class="seventv-toggle-switch" :for="id">
+			<input :id="id" v-model="value" tabindex="0" type="checkbox" @change="$emit('update:modelValue', value)" />
+			<div class="seventv-toggle round"></div>
+		</label>
+		<span v-if="right" class="seventv-toggle-option">
+			{{ right }}
+		</span>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const props = defineProps<{
+	id: string;
+	left?: string;
+	right?: string;
+	modelValue: boolean;
+}>();
+
+const value = ref(props.modelValue);
+
+defineEmits<{
+	(e: "update:modelValue", value: boolean): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+.seventv-toggle-outer {
+	display: flex;
+	flex-wrap: nowrap;
+	align-items: center;
+	gap: 0.8rem;
+}
+
+.seventv-toggle-option {
+	font-size: 1rem;
+	font-weight: 600;
+	vertical-align: center;
+}
+
+.seventv-toggle-switch {
+	display: inline-block;
+	height: 1rem;
+	position: relative;
+	width: 2rem;
+}
+
+.seventv-toggle {
+	inset: 0;
+	cursor: pointer;
+	position: absolute;
+	transition: 0.25s;
+	outline: 0.01rem solid currentcolor;
+}
+
+.seventv-toggle::before {
+	bottom: 0.15rem;
+	content: "";
+	height: 0.7rem;
+	left: 0.15rem;
+	position: absolute;
+	transition: 0.25s;
+	width: 0.7rem;
+	background-color: currentcolor;
+}
+
+input {
+	opacity: 0;
+
+	&:focus + .seventv-toggle {
+		outline: 0.1rem solid black;
+	}
+
+	&:checked + .seventv-toggle::before {
+		transform: translateX(1rem);
+	}
+}
+
+.seventv-toggle.round {
+	border-radius: 0.25rem;
+}
+
+.seventv-toggle.round::before {
+	border-radius: 0.25rem;
+}
+</style>

src/components/utility/EmoteCard.vue

@@ -16,7 +16,7 @@
 				class="img-wrapper"
 				:censor="!emote.state.includes('LISTED') && !actor.hasPermission(Permissions.EditAnyEmote)"
 			>
-				<img v-if="src" :src="src" />
+				<img v-if="src" :loading="lazy ? 'lazy' : undefined" :src="src" />
 			</div>
 			<div class="img-gap" />
 			<div class="title-banner">
@@ -91,10 +91,12 @@ const props = withDefaults(
 		personalContext?: boolean;
 		decorative?: boolean;
 		hideIndicators?: boolean;
+		lazy?: boolean;
 	}>(),
 	{
 		emote: () => ({ id: "" } as Emote),
 		scale: "10em",
+		lazy: false,
 	},
 );
 

src/router/auth.route.ts

@@ -0,0 +1,7 @@
+import { RouteRecordRaw } from "vue-router";
+
+export const ExtensionAuthRoute = {
+	path: "/extension/auth",
+	name: "ExtensionAuth",
+	component: () => import("@/views/ExtensionAuth.vue"),
+} as RouteRecordRaw;

src/router/router.ts

@@ -1,5 +1,6 @@
 import { RouteRecordRaw, createRouter, createWebHistory } from "vue-router";
 import { AdminRoute } from "./admin.route";
+import { ExtensionAuthRoute } from "./auth.route";
 import { CallbackRoute } from "./callback.route";
 import { EmoteSetRoute } from "./emote-sets.route";
 import { EmotesRoute } from "./emotes.route";
@@ -21,6 +22,7 @@ const routes: Array<RouteRecordRaw> = [
 	InboxRoute,
 	AdminRoute,
 	...CallbackRoute,
+	ExtensionAuthRoute,
 	{
 		path: "/:pathMatch(.*)*",
 		name: "Not Found",

src/views/ExtensionAuth.vue

@@ -0,0 +1,39 @@
+<template>
+	<div class="extension-auth-content">
+		<LoginButton v-if="!actor.user" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { watch } from "vue";
+import { useActor } from "@/store/actor";
+import { useStore } from "@/store/main";
+import LoginButton from "@/components/utility/LoginButton.vue";
+
+const store = useStore();
+const actor = useActor();
+window.addEventListener("message", function listener(e) {
+	if (e.origin !== "https://www.twitch.tv") return;
+	if (e.data !== "7tv-token-request") return;
+	window.removeEventListener("message", listener);
+	watch(
+		() => store.authToken,
+		(t) => {
+			if (!t) return;
+			e.source?.postMessage({ type: "7tv-token", token: t }, { targetOrigin: "https://www.twitch.tv/*" });
+		},
+		{ immediate: true },
+	);
+});
+</script>
+
+<style lang="scss">
+nav {
+	display: none;
+}
+.extension-auth-content {
+	display: flex;
+	margin: auto;
+	justify-content: center;
+}
+</style>