prevent double-submitting forms.

3 years ago · bd60ab4c98
15 changed files with 97 additions and 14 deletions
--- a/svelte-ui/src/components/Modal.svelte
+++ b/svelte-ui/src/components/Modal.svelte
@ -142,6 +142,11 @@ div.modal :global(button:hover), div.modal :global(button:focus) {
  background: #222;
  color: #FFF;
 }
+div.modal :global(button:disabled) {
+  background: #444;
+  color: #AAA;
+}
+

 div.modal :global(label) {
  padding: 0 0 0.125em 0.25ch;
--- a/svelte-ui/src/forms/GoalForm.svelte
+++ b/svelte-ui/src/forms/GoalForm.svelte
@ -46,8 +46,11 @@ import GroupSelect from "../components/GroupSelect.svelte";
  let endTime = formatFormTime(goal.endTime);
  
  let error = null;
+  let loading = false;

  function onSubmit() {
+    loading = true;
+
    if (creation) {
      stuffLogClient.createGoal({
        startTime: new Date(startTime), 
@ -59,6 +62,8 @@ import GroupSelect from "../components/GroupSelect.svelte";
        modalStore.close();
      }).catch(err => {
        error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
      })
    } else if (deletion) {
      stuffLogClient.deleteGoal(goal.id).then(() => {
@ -67,6 +72,8 @@ import GroupSelect from "../components/GroupSelect.svelte";
        modalStore.close();
      }).catch(err => {
        error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
      })
    } else {
      stuffLogClient.updateGoal(goal.id, {
@ -79,6 +86,8 @@ import GroupSelect from "../components/GroupSelect.svelte";
        modalStore.close();
      }).catch(err => {
        error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
      })
    }

@ -107,6 +116,6 @@ import GroupSelect from "../components/GroupSelect.svelte";

    <hr />

-    <button type="submit">{verb} Goal</button>
+    <button disabled={loading} type="submit">{verb} Goal</button>
  </form>
 </Modal>
--- a/svelte-ui/src/forms/GroupForm.svelte
+++ b/svelte-ui/src/forms/GroupForm.svelte
@ -33,8 +33,11 @@ import projectStore, { fpProjectStore } from "../stores/project";
  let description = group.description;
  let icon = group.icon as IconName;
  let error = null;
+  let loading = false;

  function onSubmit() {
+    loading = true;
+
    if (creation) {
      stuffLogClient.createGroup({
        name, description, icon,
@ -43,6 +46,8 @@ import projectStore, { fpProjectStore } from "../stores/project";
        modalStore.close();
      }).catch(err => {
        error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
      })
    } else if (deletion) {
      stuffLogClient.deleteGroup(group.id).then(() => {
@ -50,6 +55,8 @@ import projectStore, { fpProjectStore } from "../stores/project";
        modalStore.close();
      }).catch(err => {
        error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
      })
    } else {
      stuffLogClient.updateGroup(group.id, {
@ -63,6 +70,8 @@ import projectStore, { fpProjectStore } from "../stores/project";
        modalStore.close();
      }).catch(err => {
        error = err.message ? err.message : err.toString();
+      }).finally(() => {
+        loading = false;
      })
    }

@ -85,6 +94,6 @@ import projectStore, { fpProjectStore } from "../stores/project";

    <hr />

-    <button type="submit">{verb} Group</button>
+    <button disabled={loading} type="submit">{verb} Group</button>
  </form>
 </Modal>
--- a/svelte-ui/src/forms/ItemAddForm.svelte
+++ b/svelte-ui/src/forms/ItemAddForm.svelte
@ -15,8 +15,11 @@
  let description = "";
  let groupWeight = 1;
  let error = null;
+  let loading = false;

  function onSubmit() {
+    loading = true;
+
    stuffLogClient.createItem({
      groupId: group.id, 

@ -26,6 +29,8 @@
      goalStore.markStale();
      fpGoalStore.markStale();
      modalStore.close();
+    }).finally(() => {
+      loading = false;
    })

    error = null;
@ -49,6 +54,6 @@

    <hr />

-    <button type="submit">Add Item</button>
+    <button disabled={loading} type="submit">Add Item</button>
  </form>
 </Modal>
--- a/svelte-ui/src/forms/ItemDeleteForm.svelte
+++ b/svelte-ui/src/forms/ItemDeleteForm.svelte
@ -15,13 +15,18 @@
  let description = item.description;
  let groupWeight = item.groupWeight;
  let error = null;
+  let loading = false;

  function onSubmit() {
+    loading = true;
+
    stuffLogClient.deleteItem(item.id).then(() => {
      groupStore.markStale();
      modalStore.close();
    }).catch(err => {
      error = err.message ? err.message : err.toString();
+    }).finally(() => {
+      loading = false;
    })

    error = null;
@ -45,6 +50,6 @@

    <hr />

-    <button type="submit">Delete Item</button>
+    <button disabled={loading} type="submit">Delete Item</button>
  </form>
 </Modal>
--- a/svelte-ui/src/forms/ItemEditForm.svelte
+++ b/svelte-ui/src/forms/ItemEditForm.svelte
@ -17,8 +17,11 @@
  let description = item.description;
  let groupWeight = item.groupWeight;
  let error = null;
+  let loading = false;

  function onSubmit() {
+    loading = true;
+
    stuffLogClient.updateItem(item.id, {
      name, description, groupWeight,
    }).then(() => {
@ -28,6 +31,8 @@
      projectStore.markStale();
      fpProjectStore.markStale();
      modalStore.close();
+    }).finally(() => {
+      loading = false;
    })

    error = null;
@ -51,6 +56,6 @@

    <hr />

-    <button type="submit">Edit Item</button>
+    <button disabled={loading} type="submit">Edit Item</button>
  </form>
 </Modal>
--- a/svelte-ui/src/forms/LogAddForm.svelte
+++ b/svelte-ui/src/forms/LogAddForm.svelte
@ -18,8 +18,11 @@ import logStore from "../stores/logs";
  let description = "";
  let markInactive = task.completedAmount >= (task.itemAmount - 1);
  let error = null;
+  let loading = false;

  function onSubmit() {
+    loading = true;
+
    stuffLogClient.createLog({
      taskId: task.id, 
      loggedTime: new Date(loggedTime).toISOString(),
@ -36,6 +39,8 @@ import logStore from "../stores/logs";
      goalStore.markStale();
      fpGoalStore.markStale();
      logStore.markStale();
+    }).finally(() => {
+      loading = false;
    })

    error = null;
@ -59,6 +64,6 @@ import logStore from "../stores/logs";

    <hr />

-    <button type="submit">Add Log</button>
+    <button disabled={loading} type="submit">Add Log</button>
  </form>
 </Modal>
--- a/svelte-ui/src/forms/LogDeleteForm.svelte
+++ b/svelte-ui/src/forms/LogDeleteForm.svelte
@ -15,6 +15,7 @@
  let loggedTime = formatFormTime(new Date(md.log.loggedTime));
  let description = md.log.description;
  let error = null;
+  let loading = false;

  function onSubmit() {
    const md = $modalStore;
@ -22,6 +23,8 @@
      throw new Error("Wrong form");
    }

+    loading = true;
+
    stuffLogClient.deleteLog(md.log.id).then(() => {
      projectStore.markStale();
      fpProjectStore.markStale();
@ -30,6 +33,8 @@
      logStore.markStale();

      modalStore.close();
+    }).finally(() => {
+      loading = false;
    })

    error = null;
@ -51,6 +56,6 @@

    <hr />

-    <button type="submit">Delete Log</button>
+    <button disabled={loading} type="submit">Delete Log</button>
  </form>
 </Modal>
--- a/svelte-ui/src/forms/LogEditForm.svelte
+++ b/svelte-ui/src/forms/LogEditForm.svelte
@ -15,6 +15,7 @@
  let loggedTime = formatFormTime(new Date(md.log.loggedTime));
  let description = md.log.description;
  let error = null;
+  let loading = false;

  function onSubmit() {
    const md = $modalStore;
@ -22,6 +23,8 @@
      throw new Error("Wrong form");
    }

+    loading = true;
+
    stuffLogClient.updateLog(md.log.id, { 
      loggedTime: new Date(loggedTime).toISOString(),
      description,
@ -33,6 +36,8 @@
      logStore.markStale();

      modalStore.close();
+    }).finally(() => {
+      loading = false;
    })

    error = null;
@ -54,6 +59,6 @@

    <hr />

-    <button type="submit">Edit Log</button>
+    <button disabled={loading} type="submit">Edit Log</button>
  </form>
 </Modal>
--- a/svelte-ui/src/forms/ProjectAddForm.svelte
+++ b/svelte-ui/src/forms/ProjectAddForm.svelte
@ -11,8 +11,11 @@
  let description = "";
  let icon = iconNames[0];
  let error = null;
+  let loading = false;

  function onSubmit() {
+    loading = true;
+
    stuffLogClient.createProject({
      active: true,
      endTime: ( endTime == "" ) ? null : new Date(endTime),
@ -26,6 +29,8 @@
      modalStore.close();
    }).catch(err => {
      error = err.message ? err.message : err.toString();
+    }).finally(() => {
+      loading = false;
    })

    error = null;
@ -49,6 +54,6 @@

    <hr />

-    <button type="submit">Add Project</button>
+    <button disabled={loading} type="submit">Add Project</button>
  </form>
 </Modal>
--- a/svelte-ui/src/forms/ProjectDeleteForm.svelte
+++ b/svelte-ui/src/forms/ProjectDeleteForm.svelte
@ -18,8 +18,11 @@
  let description = project.description;
  let icon = project.icon as IconName;
  let error = null;
+  let loading = false;

  function onSubmit() {
+    loading = true;
+
    stuffLogClient.deleteProject(project.id).then(() => {
      projectStore.markStale();
      if (endTime !== "") {
@ -28,6 +31,8 @@
      modalStore.close();
    }).catch(err => {
      error = err.message ? err.message : err.toString();
+    }).finally(() => {
+      loading = false;
    })

    error = null;
@ -51,6 +56,6 @@

    <hr />

-    <button type="submit">Delete Project</button>
+    <button disabled={loading} type="submit">Delete Project</button>
  </form>
 </Modal>
--- a/svelte-ui/src/forms/ProjectEditForm.svelte
+++ b/svelte-ui/src/forms/ProjectEditForm.svelte
@ -20,8 +20,11 @@ import Checkbox from "../components/Checkbox.svelte";
  let description = project.description;
  let icon = project.icon as IconName;
  let error = null;
+  let loading = false;

  function onSubmit() {
+    loading = true;
+
    stuffLogClient.updateProject(project.id, {
      endTime: ( endTime == "" ) ? null : new Date(endTime),
      clearEndTime: ( endTime == "" ),
@ -33,6 +36,8 @@ import Checkbox from "../components/Checkbox.svelte";
      modalStore.close();
    }).catch(err => {
      error = err.message ? err.message : err.toString();
+    }).finally(() => {
+      loading = false;
    })

    error = null;
@ -57,6 +62,6 @@ import Checkbox from "../components/Checkbox.svelte";

    <hr />

-    <button type="submit">Edit Project</button>
+    <button disabled={loading} type="submit">Edit Project</button>
  </form>
 </Modal>
--- a/svelte-ui/src/forms/TaskAddForm.svelte
+++ b/svelte-ui/src/forms/TaskAddForm.svelte
@ -13,8 +13,11 @@
  let description = "";
  let itemAmount = 1;
  let error = null;
+  let loading = false;

  function onSubmit() {
+    loading = true;
+
    stuffLogClient.createTask({
      projectId: project.id, 
      itemId: itemId,
@ -28,6 +31,8 @@
      modalStore.close();
    }).catch(err => {
      error = err.message ? err.message : err.toString();
+    }).finally(() => {
+      loading = false;
    })

    error = null;
@ -69,6 +74,6 @@

    <hr />

-    <button type="submit">Add Task</button>
+    <button disabled={loading} type="submit">Add Task</button>
  </form>
 </Modal>
--- a/svelte-ui/src/forms/TaskDeleteForm.svelte
+++ b/svelte-ui/src/forms/TaskDeleteForm.svelte
@ -19,8 +19,11 @@ import Checkbox from "../components/Checkbox.svelte";
  let completed = !task.active;
  let endTime = task.endTime ? formatFormTime(task.endTime) : "";
  let error = null;
+  let loading = false;

  function onSubmit() {
+    loading = true;
+
    stuffLogClient.deleteTask(task.id).then(() => {
      projectStore.markStale();
      fpProjectStore.markStale();
@ -29,6 +32,8 @@ import Checkbox from "../components/Checkbox.svelte";
      modalStore.close();
    }).catch(err => {
      error = err.message ? err.message : err.toString();
+    }).finally(() => {
+      loading = false;
    })

    error = null;
@ -55,6 +60,6 @@ import Checkbox from "../components/Checkbox.svelte";

    <hr />

-    <button type="submit">Delete Task</button>
+    <button disabled={loading} type="submit">Delete Task</button>
  </form>
 </Modal>
--- a/svelte-ui/src/forms/TaskEditForm.svelte
+++ b/svelte-ui/src/forms/TaskEditForm.svelte
@ -19,8 +19,11 @@ import Checkbox from "../components/Checkbox.svelte";
  let completed = !task.active;
  let endTime = task.endTime ? formatFormTime(task.endTime) : "";
  let error = null;
+  let loading = false;

  function onSubmit() {
+    loading = true;
+
    stuffLogClient.updateTask(task.id, {
      endTime: (endTime == "") ? null : new Date(endTime),
      clearEndTime: endTime == "",
@ -35,6 +38,8 @@ import Checkbox from "../components/Checkbox.svelte";
      modalStore.close();
    }).catch(err => {
      error = err.message ? err.message : err.toString();
+    }).finally(() => {
+      loading = false;
    })

    error = null;
@ -61,6 +66,6 @@ import Checkbox from "../components/Checkbox.svelte";

    <hr />

-    <button type="submit">Add Task</button>
+    <button disabled={loading} type="submit">Add Task</button>
  </form>
 </Modal>