feat: add copy button and animations when success and format

tbmc · Mar 31, 2024 · f353b07 · f353b07
1 parent 7dd19ae
commit f353b07
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 53 deletions.
diff --git a/web-app/package.json b/web-app/package.json
@@ -1,39 +1,39 @@
 {
-	"name": "web-app",
-	"version": "0.0.1",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"test": "vitest",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
-	},
-	"devDependencies": {
-		"@fontsource/fira-mono": "^4.5.10",
-		"@neoconfetti/svelte": "^1.0.0",
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/adapter-static": "^2.0.3",
-		"@sveltejs/kit": "^1.20.4",
-		"@types/cookie": "^0.5.1",
-		"@typescript-eslint/eslint-plugin": "^6.0.0",
-		"@typescript-eslint/parser": "^6.0.0",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte": "^2.30.0",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.10.1",
-		"svelte": "^4.0.5",
-		"svelte-check": "^3.4.3",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.4.2",
-		"vitest": "^0.34.0"
-	},
-	"type": "module",
-	"dependencies": {
-		"svelte-i18n": "^3.7.4"
-	}
+  "name": "web-app",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test": "vitest",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write ."
+  },
+  "devDependencies": {
+    "@fontsource/fira-mono": "^4.5.10",
+    "@neoconfetti/svelte": "^1.0.0",
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/adapter-static": "^2.0.3",
+    "@sveltejs/kit": "^1.20.4",
+    "@types/cookie": "^0.5.1",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte": "^2.30.0",
+    "prettier": "^2.8.0",
+    "prettier-plugin-svelte": "^2.10.1",
+    "svelte": "^4.0.5",
+    "svelte-check": "^3.4.3",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^4.4.2",
+    "vitest": "^0.34.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "svelte-i18n": "^3.7.4"
+  }
 }
diff --git a/web-app/src/lib/GenerateUrl/LoginForm.svelte b/web-app/src/lib/GenerateUrl/LoginForm.svelte
@@ -1,37 +1,41 @@
 <script lang="ts">
   import { t } from 'svelte-i18n';
-  
-  import {dataToRequestParam} from "$lib/GenerateUrl/dataToRequestParam.js";
-  import {dataParams, fetchTeamsGet, fetchTeamsIsLoading} from "$lib/GenerateUrl/store.js";
-  
+
+  import { dataToRequestParam } from '$lib/GenerateUrl/dataToRequestParam.js';
+  import { dataParams, fetchTeamsGet, fetchTeamsIsLoading } from '$lib/GenerateUrl/store.js';
+  import TwoTextComponent from '$lib/UI/TwoTextComponent.svelte';
+
   let usernameTranslation = $t('generateUrl.form.username');
   let passwordTranslation = $t('generateUrl.form.password');
   let teamIdTranslation = $t('generateUrl.form.teamId');
 
   let username = '';
   let password = '';
   let teamId = '';
-  
+
   let invalidUsername: boolean | null = null;
   let invalidPassword: boolean | null = null;
 
   function clicked() {
     invalidUsername = username === '';
     invalidPassword = password === '';
   }
-  
+
   function listTeams() {
     if (username !== '' && password !== '') fetchTeamsGet(username, password);
-    
+
     clicked();
   }
 
+  let twoText: TwoTextComponent;
+
   function generateUrl() {
     if (username !== '' && password !== '') {
       const data = dataToRequestParam(username, password, teamId);
       dataParams.set(data);
+      twoText.animate();
     }
-    
+
     clicked();
   }
 
@@ -97,12 +101,18 @@
   <footer>
     <div class="grid">
       <div />
-      <button class="secondary outline reset" on:click={reset}>{$t('generateUrl.form.buttonReset')}</button>
+      <button class="secondary outline reset" on:click={reset}
+        >{$t('generateUrl.form.buttonReset')}</button
+      >
       <button class="secondary list-teams" on:click={listTeams} aria-busy={$fetchTeamsIsLoading}>
         {$t('generateUrl.form.buttonListTeams')}
       </button>
       <button class="generate" on:click={generateUrl}>
-        {$t('generateUrl.form.buttonGenerate')}
+        <TwoTextComponent
+          bind:this={twoText}
+          originalText={$t('generateUrl.form.buttonGenerate')}
+          otherText="✓"
+        />
       </button>
       <div />
     </div>

diff --git a/web-app/src/lib/GenerateUrl/ShowUrl.svelte b/web-app/src/lib/GenerateUrl/ShowUrl.svelte
@@ -1,10 +1,18 @@
 <script lang="ts">
   import { t } from 'svelte-i18n';
 
-  import {dataParams, getOrigin} from './store.js';
+  import { dataParams, getOrigin } from './store.js';
+  import TwoTextComponent from '$lib/UI/TwoTextComponent.svelte';
 
   const origin = getOrigin();
   $: url = `${origin}?data=${$dataParams}`;
+
+  let twoText: TwoTextComponent;
+
+  function onCopyClick() {
+    navigator.clipboard.writeText(url);
+    twoText.animate();
+  }
 </script>
 
 {#if $dataParams !== ''}
@@ -13,8 +21,15 @@
       {$t('generateUrl.urlGenerated')}
     </header>
 
-    <div>
-      <a href={url}>{url}</a>
+    <div class="custom-container">
+      <code>
+        <a href={url}>{url}</a>
+      </code>
+      <div class="sub-container">
+        <button on:click={onCopyClick}>
+          <TwoTextComponent bind:this={twoText} originalText={$t('copy')} otherText={'✓'} />
+        </button>
+      </div>
     </div>
   </article>
 {/if}
@@ -24,4 +39,30 @@
     color: white;
     background-color: var(--primary-background);
   }
+
+  .custom-container {
+    display: grid;
+    grid-template-columns: auto auto;
+  }
+
+  .sub-container {
+    margin-left: 2vw;
+    position: relative;
+    min-width: 130px;
+  }
+
+  .sub-container button {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  code {
+    display: grid;
+    align-items: center;
+    overflow-wrap: anywhere;
+    min-height: 60px;
+  }
 </style>
diff --git a/web-app/src/lib/UI/TwoTextComponent.svelte b/web-app/src/lib/UI/TwoTextComponent.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  export let originalText: string;
+  export let otherText: string;
+
+  let text1Element: HTMLSpanElement;
+  let text2Element: HTMLSpanElement;
+
+  export const animate = () => {
+    text1Element.style.display = 'none';
+    text2Element.style.display = 'inline';
+
+    setTimeout(() => {
+      text1Element.style.display = 'inline';
+      text2Element.style.display = 'none';
+    }, 2_000);
+  };
+</script>
+
+<span bind:this={text1Element}>{originalText}</span>
+<span bind:this={text2Element} style="display: none;">{otherText}</span>
diff --git a/web-app/src/lib/i18n/locales/en.json b/web-app/src/lib/i18n/locales/en.json
@@ -20,5 +20,6 @@
       "id": "Team id"
     },
     "urlGenerated": "Generated URL"
-  }
+  },
+  "copy": "Copy"
 }
diff --git a/web-app/src/lib/i18n/locales/fr.json b/web-app/src/lib/i18n/locales/fr.json
@@ -17,8 +17,9 @@
     "listTeams": {
       "title": "Liste des équipes",
       "name": "Nom de l'équipe",
-      "id": "Identifiant de l'équipe" 
+      "id": "Identifiant de l'équipe"
     },
     "urlGenerated": "URL générée"
-  }
+  },
+  "copy": "Copier"
 }