feat(ui): ability to set all client attributes

feat(ui): ability to send mails

types/client.go

@@ -79,5 +79,15 @@ func (c *Client) Validate() error {
 			return errors.New(fmt.Sprintf("permission '%s' is invalid", p))
 		}
 	}
+	if c.DefaultSender != "" && !c.DefaultSender.Valid() {
+		return errors.New("invalid default sender address")
+	}
+	if c.AllowedSenders != nil && len(c.AllowedSenders) > 0 {
+		for _, e := range c.AllowedSenders {
+			if !e.Valid() {
+				return errors.New("invalid allowed sender address")
+			}
+		}
+	}
 	return nil
 }

web/routes/api/client.go

@@ -79,6 +79,11 @@ func (h *ClientHandler) post(w http.ResponseWriter, r *http.Request) {
 
 	payload.UserId = reqClient.UserId
 
+	if err := payload.Validate(); err != nil {
+		util.RespondErrorMessage(w, r, http.StatusBadRequest, err)
+		return
+	}
+
 	client, err := h.clientService.Create(&payload)
 	if err != nil {
 		util.RespondError(w, r, http.StatusConflict, err)

webui/src/App.svelte

@@ -2,6 +2,7 @@
   import router from 'page'
   import Home from './views/Home.svelte'
   import Clients from './views/Clients.svelte'
+  import Mails from './views/Mails.svelte';
 
   import { user } from './stores/auth'
 
@@ -17,6 +18,7 @@
   router('/', () => (page = Home))
   router('/login', () => (page = Home))
   router('/clients', () => (page = Clients))
+  router('/mails', () => (page = Mails))
 
   router.start()
 </script>

webui/src/api/api.js

@@ -1,4 +1,5 @@
 import { user } from '../stores/auth'
+import { errors } from '../stores/alerts'
 
 function apiUrl() {
     return process.env.apiUrl || '/api'
@@ -25,7 +26,8 @@ async function request(path, data, options) {
     }
 
     if (response.status >= 400) {
-        throw new Error(`request faield with status ${response.status}`)
+        errors.spawn(`Error (${response.status}): ${await response.text()}`)
+        throw new Error(`request failed with status ${response.status}`)
     }
 
     return { data: response.json(), response: response }

webui/src/api/mails.js

@@ -0,0 +1,7 @@
+import { request } from './api'
+
+async function sendMail(mail) {
+    return await request('/mail', mail, { method: 'POST' })
+}
+
+export { sendMail }

webui/src/components/AccountIndicator.svelte

@@ -15,8 +15,7 @@
     <span class="text-sm flex items-center"><span class="material-icons mr-1">person</span> {currentUser}</span>
     <span>|</span>
     <a
-      href="#"
-      class="text-sm text-primary hover:text-primary-dark"
+      class="text-sm text-primary hover:text-primary-dark cursor-pointer"
       on:click={logout}>Logout</a>
   {:else}
     <a

webui/src/components/Navigation.svelte

@@ -5,13 +5,13 @@
         <li class="flex space-x-2">
             <span class="material-icons">vpn_key</span>
             <a
-                href="#"
+                href="clients"
                 class="hover:text-gray-800">API Clients</a>
         </li>
         <li class="flex space-x-2">
             <span class="material-icons">email</span>
             <a
-                href="#"
+                href="mails"
                 class="hover:text-gray-800">Test E-Mail</a>
         </li>
     </ul>

webui/src/layouts/Main.svelte

@@ -1,7 +1,9 @@
 <script>
+  import { slide } from 'svelte/transition'
   import AccountIndicator from '../components/AccountIndicator.svelte'
 
   import { user } from '../stores/auth'
+  import { errors, infos, successes } from '../stores/alerts'
 
   function logout() {
     user.logout()
@@ -10,6 +12,35 @@
 </script>
 
 <div id="app-container" class="container mx-auto my-8 flex flex-col flex-grow">
+  <div
+    id="alert-container"
+    class="w-full absolute inset-x-0 top-0 py-8 flex justify-center space-y-2 flex-col items-center">
+    {#each $errors as m}
+      <div
+        class="flex space-x-2 mt-4 bg-red-500 px-4 py-2 rounded text-white text-sm"
+        transition:slide>
+        <span class="material-icons">warning</span>
+        <span>{m}</span>
+      </div>
+    {/each}
+    {#each $infos as m}
+      <div
+        class="flex space-x-2 mt-4 bg-primary px-4 py-2 rounded text-white text-sm"
+        transition:slide>
+        <span class="material-icons">info</span>
+        <span>{m}</span>
+      </div>
+    {/each}
+    {#each $successes as e}
+      <div
+        class="flex space-x-2 mt-4 bg-green-500 px-4 py-2 rounded text-white text-sm"
+        transition:slide>
+        <span class="material-icons">check_circle</span>
+        <span>{e}</span>
+      </div>
+    {/each}
+  </div>
+
   <header class="flex w-full justify-between">
     <div id="logo-container" class="flex space-x-4 items-center">
       <img src="images/logo.svg" alt="Logo" style="max-height: 60px;" />
@@ -34,8 +65,8 @@
         class="text-primary hover:text-primary-dark">GitHub</a>
     </div>
     <div class="flex space-x-4">
-      <a href="#" class="text-primary hover:text-primary-dark">Imprint & Data
-        Privacy</a>
+      <a href="imprint" class="text-primary hover:text-primary-dark">Imprint &
+        Data Privacy</a>
     </div>
   </footer>
 </div>

webui/src/stores/alerts.js

@@ -0,0 +1,32 @@
+import { writable } from 'svelte/store'
+
+function createErrors() {
+    const { subscribe, update } = writable([])
+    const spawn = (message) => {
+        update(alerts => alerts = [...alerts, message])
+        setTimeout(() => update(alerts => alerts = alerts.filter(a => a !== message)), 3000)
+    }
+    return { subscribe, spawn }
+}
+
+function createInfos() {
+    const { subscribe, update } = writable([])
+    const spawn = (message) => {
+        update(alerts => alerts = [...alerts, message])
+        setTimeout(() => update(alerts => alerts = alerts.filter(a => a !== message)), 3000)
+    }
+    return { subscribe, spawn }
+}
+
+function createSuccesses() {
+    const { subscribe, update } = writable([])
+    const spawn = (message) => {
+        update(alerts => alerts = [...alerts, message])
+        setTimeout(() => update(alerts => alerts = alerts.filter(a => a !== message)), 3000)
+    }
+    return { subscribe, spawn }
+}
+
+export const errors = createErrors()
+export const infos = createInfos()
+export const successes = createSuccesses()