Add pfp format verification

singlelink-co · Feb 11, 2021 · a3f111d · a3f111d
1 parent 9b84030
commit a3f111d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/client/pages/dashboard/analytics.vue b/client/pages/dashboard/analytics.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="flex flex-shrink-0 flex-col p-8 items-center bg-gray-100 overflow-x-hidden overflow-y-scroll">
-    <h1 class="text-gray-800 font-extrabold tracking-tight text-3xl w-full mb-4">
-      Profile analytics (30 days)
+    <h1 class="text-gray-800 font-extrabold tracking-tight text-3xl w-full mb-4 flex flex-row items-start lg:items-center">
+      Profile analytics <span class="hidden lg:flex ml-2">(30 days)</span>
     </h1>
 
       <div class="flex lg:flex-row flex-col items-center justify-center w-full">

diff --git a/client/pages/dashboard/settings.vue b/client/pages/dashboard/settings.vue
@@ -87,6 +87,10 @@
             type="text"
             placeholder="e.g. https://uifaces.co/our-content/donated/rSuiu_Hr.jpg"
           >
+          <div v-if="!profile_valid" class="py-3 px-4 rounded-lg bg-red-200 border border-red-400 text-red-500 flex flex-col items-start mt-2 text-sm">
+            <span class="font-semibold">Warning!</span>
+            <span class="text-xs font-medium">Your profile picture is improperly formatted! Ensure your image is loaded via an SSL and ends in .gif, .png, .jpg, .jpeg, or another supported file extension.<a href="https://www.notion.so/neutroncreative/Troubleshooting-9a162db4a8ce482d89b3d3e1bc9825ba" target="_blank" class="ml-2 font-semibold underline hover:text-red-700">Learn more</a></span>
+          </div>
         </div>
 
         <div class="flex flex-col w-full mb-6">
@@ -111,12 +115,12 @@
             class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out"
           >
 
-          <label for="themeGlobal" class="ml-4 block text-sm leading-5 text-gray-600">
+          <label for="themeGlobal" class="ml-4 flex font-medium text-sm leading-5 text-gray-600 w-full lg:w-auto flex-col" style="max-width:calc(100% - 32px)">
             Display Watermark ("Proudly built with {{ app_name }}!")
             <br>
             <span
               v-show="showWatermarkNotice"
-              class="mt-1 flex text-gray-800 font-medium"
+              class="mt-1 flex text-gray-800 font-semibold text-xs lg:text-sm"
             >
               This is completely optional, but it really helps us out! Mind spreading the word about {{ app_name }}?
             </span>
@@ -276,6 +280,15 @@ export default Vue.extend({
 
     this.loaded = true;
   },
+  
+  computed: {
+    profile_valid() {
+      if(!this.user.activeProfile.imageUrl) return true;
+      if(!this.user.activeProfile.imageUrl.match(/.(jpg|jpeg|png|gif)$/i) ) return false;
+      if(this.user.activeProfile.imageUrl.indexOf('https://')<0) return false;
+      return true;
+    }
+  },
 
   methods: {
     async getUserData() {