Merge pull request #173 from ThatConference/cs/159

adds error message on invalid form

src/App.svelte

@@ -123,8 +123,20 @@
 
 </main>
 
-<style>
+<style global>
   .tag-form-input :global(.svelte-tags-input-tag) {
     background: #252f3f;
   }
+
+  .sveltejs-forms .field.error input,
+  .sveltejs-forms .field.error textarea {
+    --text-opacity: 1;
+    border: 1px solid rgba(224, 36, 36, var(--text-opacity));
+  }
+  .sveltejs-forms .field.error .message {
+    margin-top: 0.2rem;
+    font-style: italic;
+    --text-opacity: 1;
+    color: rgba(224, 36, 36, var(--text-opacity));
+  }
 </style>

src/components/my/ProfileForm.svelte

@@ -18,6 +18,7 @@
 
   import { Waiting } from '../../elements';
   import { isAuthenticated, token } from '../../utilities/security.js';
+  import ErrorNotificaiton from '../../components/notifications/Error.svelte';
 
   const { isSlugTaken } = memberApi(getClient());
   let initialValues;
@@ -674,24 +675,14 @@
     </div>
   </div>
 
+  {#if isValid === false}
+    <ErrorNotificaiton message="Please correct the errors listed above." />
+  {/if}
+
   {#if isSubmitting}
     <div class="flex flex-grow justify-center py-12">
       <Waiting />
     </div>
   {/if}
 
 </Form>
-
-<style global>
-  .sveltejs-forms .field.error input,
-  .sveltejs-forms .field.error textarea {
-    --text-opacity: 1;
-    border: 1px solid rgba(224, 36, 36, var(--text-opacity));
-  }
-  .sveltejs-forms .field.error .message {
-    margin-top: 0.2rem;
-    font-style: italic;
-    --text-opacity: 1;
-    color: rgba(224, 36, 36, var(--text-opacity));
-  }
-</style>

src/components/notifications/Error.svelte

@@ -0,0 +1,60 @@
+<script>
+  export let message = 'Error';
+
+  import { onDestroy } from 'svelte';
+  import { fade } from 'svelte/transition';
+  import Icon from 'svelte-awesome';
+  import { warning } from 'svelte-awesome/icons';
+  import { Link } from 'yrv';
+  import { show } from '../../store/profileNotification';
+
+  let dismissed = false;
+</script>
+
+{#if !dismissed}
+  <div
+    class="fixed bottom-0 inset-x-0 pb-2 sm:pb-5"
+    transition:fade="{{ duration: 1000 }}"
+  >
+    <div class="max-w-screen-xl mx-auto px-2 sm:px-6 lg:px-8">
+      <div class="p-2 rounded-lg bg-red-400 shadow-lg sm:p-3">
+        <div class="flex items-center justify-between flex-wrap">
+          <div class="w-0 flex-1 flex items-center">
+            <span class="flex p-2 rounded-lg">
+              <Icon data="{warning}" class="w-6 h-6 text-white" />
+            </span>
+            <p class="ml-3 font-medium text-white truncate">
+              <span class="md:hidden">!</span>
+              <span class="hidden md:inline">{message}</span>
+            </p>
+          </div>
+
+          <div class="order-2 flex-shrink-0 sm:order-3 sm:ml-2">
+            <button
+              type="button"
+              class="-mr-1 flex p-2 rounded-md hover:bg-indigo-500
+              focus:outline-none focus:bg-indigo-500 transition ease-in-out
+              duration-150"
+              aria-label="Dismiss"
+              on:click="{() => (dismissed = !dismissed)}"
+            >
+              <svg
+                class="h-6 w-6 text-white"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M6 18L18 6M6 6l12 12"
+                ></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}