From 6e807ca6cf47f24aabd84393b5857dccdee2f06e Mon Sep 17 00:00:00 2001
From: aumetra <aumetra@cryptolab.net>
Date: Thu, 12 Oct 2023 23:09:07 +0200
Subject: [PATCH] create glitchedelement wrapper that respects the reduced
 motion directive

---
 .../src/components/CaptchaComponent.vue       |  4 ++--
 kitsune-fe/src/components/GlitchedElement.vue | 21 +++++++++++++++++++
 kitsune-fe/src/components/NavBarLink.vue      |  2 +-
 kitsune-fe/src/views/NotFound.vue             |  2 +-
 4 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 kitsune-fe/src/components/GlitchedElement.vue

diff --git a/kitsune-fe/src/components/CaptchaComponent.vue b/kitsune-fe/src/components/CaptchaComponent.vue
index 6adacc4a1..52d11620f 100644
--- a/kitsune-fe/src/components/CaptchaComponent.vue
+++ b/kitsune-fe/src/components/CaptchaComponent.vue
@@ -7,7 +7,7 @@
   />
 
   <vue-hcaptcha
-    v-if="backend == CaptchaBackend.HCaptcha"
+    v-if="backend === CaptchaBackend.HCaptcha"
     :sitekey="sitekey"
     @verify="onVerify"
     @expired="onExpire"
@@ -58,7 +58,7 @@
   }
 
   onMounted(async () => {
-    if (props.backend == CaptchaBackend.MCaptcha) {
+    if (props.backend === CaptchaBackend.MCaptcha) {
       const config = {
         widgetLink: new URL(props.sitekey),
       };
diff --git a/kitsune-fe/src/components/GlitchedElement.vue b/kitsune-fe/src/components/GlitchedElement.vue
new file mode 100644
index 000000000..d8612364b
--- /dev/null
+++ b/kitsune-fe/src/components/GlitchedElement.vue
@@ -0,0 +1,21 @@
+<template>
+  <slot v-if="reduceMotion" />
+
+  <GlitchedElement v-else :options="options">
+    <slot />
+  </GlitchedElement>
+</template>
+
+<script lang="ts" setup>
+  import { usePreferredReducedMotion } from '@vueuse/core';
+
+  import { computed } from 'vue';
+  import { GlitchedElement } from 'vue-powerglitch';
+
+  defineProps<{ options?: object }>();
+
+  const preferredReducedMotion = usePreferredReducedMotion();
+  const reduceMotion = computed(
+    () => preferredReducedMotion.value === 'reduce',
+  );
+</script>
diff --git a/kitsune-fe/src/components/NavBarLink.vue b/kitsune-fe/src/components/NavBarLink.vue
index 444e7a099..a5d323ab7 100644
--- a/kitsune-fe/src/components/NavBarLink.vue
+++ b/kitsune-fe/src/components/NavBarLink.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { GlitchedElement } from 'vue-powerglitch';
+  import GlitchedElement from './GlitchedElement.vue';
 
   defineProps<{
     class?: string;
diff --git a/kitsune-fe/src/views/NotFound.vue b/kitsune-fe/src/views/NotFound.vue
index 8ffa4d22f..3c1131208 100644
--- a/kitsune-fe/src/views/NotFound.vue
+++ b/kitsune-fe/src/views/NotFound.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { GlitchedElement } from 'vue-powerglitch';
+  import GlitchedElement from '../components/GlitchedElement.vue';
 </script>
 
 <style scoped lang="scss">