[add] Integrate WUI backup/restore tool inside the app repository

.github/workflows/wui.yml

@@ -0,0 +1,53 @@
+name: Password backup site generation & update
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - develop
+      - master
+  pull_request:
+    branches:
+      - develop
+      - master
+
+jobs:
+  generate:
+    name: Generate the site
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clone
+        uses: actions/checkout@v4
+      - name: Set Node.js 16.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 16.x
+      - name: Run install
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: install
+          dir: client/wui/
+      - name: Run install
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: build
+          dir: client/wui/
+      - name: Upload documentation bundle
+        uses: actions/upload-artifact@v4
+        with:
+          name: site
+          path: client/wui/build/
+
+  deploy:
+    name: Deploy the site on Github pages
+    runs-on: ubuntu-latest
+    needs: generate
+    if: github.event_name == 'push'  && github.ref == 'refs/heads/master'
+    steps:
+      - name: Download documentation bundle
+        uses: actions/download-artifact@v4
+      - name: Deploy documentation on pages
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: site

clients/wui/README.md

@@ -0,0 +1,49 @@
+# Passwords Backup
+
+[Live demo here](https://blog.ledger.com/passwords-backup/)
+
+## What is this Web App ?
+
+This Web App allows you to backup/restore the list of `password nicknames` stored inside the `Passwords app` on your Ledger Nano S/ Nano X.
+It is useful to have such a backup when you update the Passwords app on your device, or the device firmware, because the list gets erased.
+
+Another case where it's practical to have a nickname backup is when you loose your device: Restoring the [24-words recovery phrase](https://www.ledger.com/academy/crypto/what-is-a-recovery-phrase) is necessary but not sufficient to restore your passwords, you need your nickname list as well.
+
+The backup consists in a human readable `backup.json` file containing a dump of the 4096 bytes of application storage.
+
+Note that all operations of this Web App are done locally on your computer, there are no external communications occuring.
+
+## What is the Ledger Passwords application ?
+
+Look [here](https://github.com/LedgerHQ/app-passwords/blob/master/README.md) for more information on the device application itself.
+
+## How to use this Web App ?
+
+- Install the `Passwords app` on your Nano S/ Nano X from the [Ledger Live](https://support.ledger.com/hc/en-us/articles/360006523674-Install-uninstall-and-update-apps).
+- Connect your Nano S/Nano X to your computer and open the `Passwords app`.
+- You can now click on the big `Connect` button, and if it succeeds the Backup/Restore buttons should appear in place of the previous button. If you have troubles with this step, have a look [here](https://support.ledger.com/hc/en-us/articles/115005165269-Fix-connection-issues). \n\* Either click on Backup/Restore depending on what you want to do.
+  - `Backup` will prompt a screen requesting your approval on your device (`\"Transfer metadatas ?\"`), then save a backup file. This is your backup. it's not confidential, so for instance you can send it to yourself by e-mail to never loose it.
+  - `Restore` will prompt a file input dialog where you should indicate a previous backup file. A prompt (`\"Overwite metadatas ?\"`) will then request your approval on your device.
+
+## Which web browsers are supported ?
+
+The communication with the device is done through `WebUSB`, which is curently supported only on `Google Chrome` / `Chromium` / `Brave` for `Linux` and `MacOS`. On `Windows`, [Zadig](https://github.com/WICG/webusb/issues/143) is required.
+
+## Less common use cases
+
+- If you ever encounter a WTF-kind of error with your passwords app (some or all of your entries are suddenly gone? A password has changed ?), it is wise to first come here and make a backup. You can then have a look inside the backup file to see if something is wrong (You might also want to create an issue [here](https://github.com/LedgerHQ/app-passwords/issues) so we fix your issue for all users).
+- If you want to add a lot of new passwords, the manual input on the device keyboard will show its limits. You can instead create a backup and edit it manually to add all your new entries. You just have to restore your app with this file and the job is done :)
+
+## Building the project
+
+```bash
+$ yarn install
+$ yarn start
+```
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+## Credits
+
+This WebApp was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

clients/wui/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "passwords-backup",
+  "version": "0.1.0",
+  "private": true,
+  "homepage": "https://ledgerhq.github.io/passwords-backup",
+  "dependencies": {
+    "@ledgerhq/hw-transport-webusb": "^5.49.0",
+    "install": "^0.13.0",
+    "react": "^17.0.1",
+    "react-accessible-accordion": "^3.3.3",
+    "react-dom": "^17.0.1",
+    "react-markdown": "^5.0.2",
+    "react-toastify": "^6.0.9",
+    "web-vitals": "^0.2.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "gh-pages": "^3.1.0",
+    "react-scripts": "4.0.0",
+    "prettier": "^2.1.2"
+  }
+}

clients/wui/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/logo.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Backup your Passwords" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+  <title>Passwords Backup</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>

clients/wui/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "Passwords Backup",
+  "name": "Passwords Backup",
+  "icons": [
+    {
+      "src": "favicon.svg",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

clients/wui/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

clients/wui/src/App.css

@@ -0,0 +1,71 @@
+.App {
+  text-align: center;
+}
+
+html {background-color: #232123}
+
+.App-banner {
+  margin-top: 10vh;
+  margin-bottom: 10vh;
+  justify-content: center;
+  display: flex;
+  flex-direction: row;
+  max-height: 10vh;
+  color: white;
+}
+
+.App-header {
+  min-width: 100vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
+.App-logo {
+  width: 10vh;
+  height: auto;
+  pointer-events: none;
+}
+
+.App-title {
+  margin-left: 1.5vh;
+  font-size: 3vh;
+  font-weight: 1;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+.Commands {
+  /* margin-top: 10vh; */
+  margin-bottom: 6vh;
+  display: flex;
+  flex-direction: row;
+
+}
+
+.Toastify__toast-container {
+  width: 400px;
+}
+
+.App-footer a {
+    color: #61dafb;
+    text-decoration: none;
+  }
+
+@media only screen and (orientation: landscape) {
+  .App-footer {
+    margin-top: 6vh;
+    font-size: 1.2vh;
+  }
+}
+
+@media only screen and (orientation: portrait) {
+  .App-footer {
+    margin-top: 6vw;
+    font-size: 1.2vw;
+  }
+}