SAKE-app v0.5.0

https://github.com/thomaspark/bootswatch/pull/1087

CHANGELOG.md

@@ -0,0 +1,74 @@
+[//]: # (Copyright 2023 Rodolphe Bréard <rodolphe@breard.tf>)
+
+[//]: # (Copying and distribution of this file, with or without modification,)
+[//]: # (are permitted in any medium without royalty provided the copyright)
+[//]: # (notice and this notice are preserved.  This file is offered as-is,)
+[//]: # (without any warranty.)
+
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+
+## [0.5.0] - 2023-09-29
+
+### Changed
+- If the browser uses a dark theme, the default theme is also set to dark
+- Display the navigation bar on every view, except the creation of the first account
+
+### Fixed
+- The account deletion view is now emphasized the same way it was before
+
+
+## [0.4.0] - 2023-09-26
+
+### Added
+- Possibility to set a default account
+- Dark mode
+- Use the browser's preferred language if available
+
+### Changed
+- The style has been entirely reworked using Bootstrap instead of Bulma
+- It is now impossible to include the separator in the dedicated name
+- When adding a new account, error messages are displayed alongside each affected elements whenever possible
+- By default, the new sub-address form reset button switches to the default account
+
+## Fixed
+- Invalid preferences are now automatically corrected
+- It is now impossible to add the same account twice
+
+
+## [0.3.0] - 2023-08-25
+
+### Added
+- The main view now includes a reset button
+- An error message is now displayed if JavaScript is disabled
+
+### Changed
+- Secret keys are now restricted to 128 bits (16 bytes) or 256 bits (32 bytes)
+- The local part cannot contain the separator
+- The HTML lang attribute is now set to the appropriate language
+
+
+## [0.2.0] - 2023-08-11
+
+### Added
+- The "About" page
+- French translation
+
+### Changed
+- Account deletions has been moved to a dedicated page
+- Error handling has been improved
+- All Bulma components are included
+
+### Fixed
+- The QR code scanner now works with strict CSP
+
+
+## [0.1.0] - 2023-08-01
+
+### Added
+
+- Initial application with a limited set of functionalities.

LICENSE-APACHE-2.0.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

LICENSE-MIT.txt

@@ -0,0 +1,19 @@
+Copyright 2023 Rodolphe Bréard
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,6 +1,15 @@
 # Sub-Address KEy (SAKE) app
 
-Web application that can be used to generate new sub-addresses as defined in the [Sub-Address KEy (SAKE) filter](https://github.com/breard-r/opensmtpd-filter-sake).
+Web application that can be used to generate new sub-addresses as defined in the [Sub-Address KEy (SAKE) filter](https://git.what.tf/rodolphe/opensmtpd-filter-sake).
+
+## Install
+
+Download the build from [the latest released version](https://git.what.tf/rodolphe/sake-app/releases). Extract the archive and configure your web server to serve those files.
+
+That's it. The final build is plain HTML/CSS/JS with a few assets, therefore there is no back-end to configure.
+
+Alternatively, on ArchLinux you can install the [sake-app](https://aur.archlinux.org/packages/sake-app) package from the AUR. You will find the files in the `/usr/share/webapps/sake-app` directory.
+
 
 ## Project Setup
 
@@ -25,7 +34,7 @@ npm run build
 
 ## Can I use this app without self-hosting it?
 
-Unfortunately, although it would be ok, there is currently no known hosted version of this application. This should change in the future.
+Yes, you can use [https://sake.email/](https://sake.email/). This instance is kept up to date.
 
 ## Can I use this app completely offline?
 

index.html

@@ -1,7 +1,7 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
-		<meta charset="UTF-8">
+		<meta charset="utf-8">
 		<link rel="icon" href="favicon.ico">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>Sub-Address KEy</title>
@@ -9,5 +9,8 @@
 	<body>
 		<div id="app"></div>
 		<script type="module" src="src/main.js"></script>
+		<noscript>
+			<p>This application's main purpose is to compute values on the client side, therefore JavaScript is required.</p>
+		</noscript>
 	</body>
 </html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sake-app",
-  "version": "0.1.0",
+  "version": "0.5.0",
   "author": "Rodolphe Bréard <rodolphe@what.tf>",
   "license": "(MIT OR Apache-2.0)",
   "private": true,
@@ -15,14 +15,18 @@
   },
   "dependencies": {
     "@noble/hashes": "^1.3.1",
+    "@popperjs/core": "^2.11.8",
     "@vueuse/core": "^10.2.1",
     "base32-encode": "^2.0.0",
-    "bulma": "^0.9.4",
+    "bootstrap": "^5.3.2",
+    "bootswatch": "^5.3.2",
     "vue": "^3.3.4",
+    "vue-i18n": "^9.2.2",
     "vue-qrcode-reader": "^5.1.0",
     "vue-router": "^4.2.4"
   },
   "devDependencies": {
+    "@intlify/unplugin-vue-i18n": "^1.2.0",
     "@vitejs/plugin-vue": "^4.2.3",
     "sass": "^1.64.1",
     "vite": "^4.4.6"

release.sh

@@ -22,9 +22,18 @@ update_app_version()
 {
 	local new_version="$1"
 	local tmp_file="package.json.tmp"
+	local current_date=$(date "+%Y-%m-%d")
 
 	jq ".version = \"${new_version}\"" "package.json" >"${tmp_file}"
 	mv "${tmp_file}" "package.json"
+	sed -i "s/## \[Unreleased\]/## \[${new_version}\] - ${current_date}/" "CHANGELOG.md"
+	update_dependencies
+}
+
+update_dependencies()
+{
+	npm update
+	npm outdated
 }
 
 check_working_directory()
@@ -45,6 +54,8 @@ build_assets()
 
 	npm run --silent build >/dev/null
 	cp -r "dist" "${asset_dir}"
+	cp "LICENSE-APACHE-2.0.txt" "${asset_dir}"
+	cp "LICENSE-MIT.txt" "${asset_dir}"
 	rm -f "${asset_dir}/manifest.webmanifest" "${asset_dir}/sw.js"
 
 	tar czf "${asset_dir}.tar.gz" "${asset_dir}"
@@ -101,6 +112,7 @@ main()
 	local new_version
 	local confirm_release
 
+	update_dependencies
 	check_working_directory
 
 	display_app_version

src/accounts.js

@@ -0,0 +1,8 @@
+export function sortAccounts(accounts) {
+	accounts.sort((a, b) => {
+		const va = `${a.localPart}@${a.domain}`;
+		const vb = `${b.localPart}@${b.domain}`;
+		return va.localeCompare(vb);
+	});
+	return accounts;
+}

src/assets/bulma-license.css

@@ -1,25 +0,0 @@
-/*!
- * Bulma | https://bulma.io/ | https://github.com/jgthms/bulma
- *
- * The MIT License (MIT)
- *
- * Copyright (c) 2023 Jeremy Thomas
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */

src/assets/main.sass

@@ -1,30 +1,6 @@
 @charset "utf-8"
 
-@import "bulma-license"
+@import "bootswatch/dist/minty/variables"
-
+@import "variables.scss"
-// Base stuff
+@import "bootstrap/scss/bootstrap"
-@import "node_modules/bulma/sass/utilities/_all"
+@import "bootswatch/dist/minty/bootswatch"
-@import "node_modules/bulma/sass/base/_all"
-
-// Elements
-@import "node_modules/bulma/sass/elements/button"
-@import "node_modules/bulma/sass/elements/container"
-@import "node_modules/bulma/sass/elements/notification"
-@import "node_modules/bulma/sass/elements/title"
-@import "node_modules/bulma/sass/elements/other"
-
-// Form
-@import "node_modules/bulma/sass/form/shared"
-@import "node_modules/bulma/sass/form/input-textarea"
-@import "node_modules/bulma/sass/form/select"
-@import "node_modules/bulma/sass/form/tools"
-
-// Navbar
-@import "node_modules/bulma/sass/components/navbar"
-
-// Columns
-@import "node_modules/bulma/sass/grid/columns"
-
-// Helpers
-@import "node_modules/bulma/sass/helpers/_all"
-@import "node_modules/bulma/sass/layout/section"

src/assets/variables.scss

@@ -0,0 +1,8 @@
+$container-max-widths: (
+  sm: 600px,
+  md: 700px,
+  lg: 800px,
+  xl: 820px,
+  xxl: 840px
+);
+$web-font-path: false;

src/components/ButtonGroupComponent.vue

@@ -0,0 +1,5 @@
+<template>
+	<div class="d-grid gap-2 col-6 mx-auto">
+		<slot></slot>
+	</div>
+</template>

src/components/ExternalLinkComponent.vue

@@ -0,0 +1,7 @@
+<script setup>
+defineProps(['url', 'name']);
+</script>
+
+<template>
+	<a :href="url" target="_blank" rel="noopener noreferrer">{{ name }}</a>
+</template>

src/components/LayoutComponent.vue

@@ -1,11 +1,5 @@
 <template>
-	<section class="section">
+	<div class="container">
-		<div class="container">
+		<slot></slot>
-			<div class="columns is-centered">
+	</div>
-				<div class="column is-three-fifths">
-					<slot></slot>
-				</div>
-			</div>
-		</div>
-	</section>
 </template>

src/components/NavBarComponent.vue

@@ -1,32 +1,35 @@
 <script setup>
 import { ref } from 'vue';
 import { RouterLink } from 'vue-router';
-
+import LayoutComponent from '../components/LayoutComponent.vue';
-const menuActive = ref(false);
+import { Popover } from 'bootstrap';
-const toggleBurger = () => {
-	menuActive.value = !menuActive.value;
-};
 </script>
 
 <template>
-	<div class="container">
+	<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
-		<div class="columns is-centered">
+		<div class="container-fluid">
-			<div class="column is-three-fifths">
+			<span class="navbar-brand"></span>
-				<nav class="navbar" role="navigation" aria-label="main navigation">
+			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavBar" aria-controls="mainNavBar" aria-expanded="false" aria-label="Toggle navigation">
-					<div class="navbar-brand">
+				<span class="navbar-toggler-icon"></span>
-						<a role="button" class="navbar-burger" :class="{ 'is-active': menuActive }" aria-label="menu" aria-expanded="false" @click="toggleBurger">
+			</button>
-							<span aria-hidden="true"></span>
+			<div class="collapse navbar-collapse" id="mainNavBar">
-							<span aria-hidden="true"></span>
+				<LayoutComponent>
-							<span aria-hidden="true"></span>
+					<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
-						</a>
+						<li class="nav-item">
-					</div>
+							<RouterLink to="/add-account" class="nav-link">{{ $t("navbar.addAccount") }}</RouterLink>
-					<div class="navbar-menu" :class="{ 'is-active': menuActive }">
+						</li>
-						<div class="navbar-end">
+						<li class="nav-item">
-							<RouterLink to="/add-account" class="navbar-item">New account</RouterLink>
+							<RouterLink to="/manage-accounts" class="nav-link">{{ $t("navbar.manageAccounts") }}</RouterLink>
-						</div>
+						</li>
-					</div>
+						<li class="nav-item">
-				</nav>
+							<RouterLink to="/config" class="nav-link">{{ $t("navbar.config") }}</RouterLink>
+						</li>
+						<li class="nav-item">
+							<RouterLink to="/about" class="nav-link">{{ $t("navbar.about") }}</RouterLink>
+						</li>
+					</ul>
+				</LayoutComponent>
 			</div>
 		</div>
-	</div>
+	</nav>
 </template>

src/const.js

@@ -0,0 +1,9 @@
+export const allowedColorModes = [
+	'light',
+	'dark',
+];
+export const allowedLocales = [
+	'en',
+	'fr',
+];
+export const resetToDefaultAccount = true;

src/locales/en.json

@@ -0,0 +1,85 @@
+{
+	"locale_name": "English",
+	"invariants": {
+		"controls": {
+			"cancel": "Cancel",
+			"close": "Close",
+			"copy": "Copy",
+			"delete": "Delete",
+			"reset": "Reset"
+		}
+	},
+	"navbar": {
+		"addAccount": "New account",
+		"manageAccounts": "Accounts",
+		"config": "Preferences",
+		"about": "About"
+	},
+	"about": {
+		"title": "About",
+		"name": "Sub-Address KEy (SAKE) app",
+		"version": "Version: {version}",
+		"license": "License: {mit} or {apache}",
+		"license_mit_url": "https://en.wikipedia.org/wiki/MIT_License",
+		"license_apache_url": "https://en.wikipedia.org/wiki/Apache_License",
+		"repository": "Repository: {url}",
+		"close": "@:invariants.controls.close"
+	},
+	"addAccount": {
+		"title": "New account",
+		"localPart": "Local part",
+		"separator": "Separator",
+		"domainName": "Domain name",
+		"privateKey": "Private key",
+		"scan": "Scan",
+		"scanTitle": "Scan a QR code",
+		"addAccount": "Add account",
+		"cancel": "@:invariants.controls.cancel",
+		"error": {
+			"accountAlreadyExists": "You already have an account on this domain that uses this local part.",
+			"invalidBase64": "The key must be a valid base64 string.",
+			"invalidKeyLength": "The key's length must be either 128 bits (16 bytes) or 256 bits (32 bytes).",
+			"invalidSeparator": "The separator must be a single character.",
+			"cameraNotAllowed": "Camera access permission was not granted.",
+			"cameraNotFound": "No camera detected.",
+			"cameraInsecureContext": "Unable to access the camera through an insecure channel.",
+			"cameraNotReadable": "Camera not accessible (potentially already in use).",
+			"cameraOverconstrained": "Installed cameras are not suitable.",
+			"cameraStreamApiNotSupported": "Stream API is not supported in this browser.",
+			"localPartSeparator": "The local part cannot contain the separator.",
+			"unknown": "Unknown error."
+		}
+	},
+	"config": {
+		"title": "Preferences",
+		"language": "Language",
+		"colorMode": "Theme",
+		"resetToDefault": "Switch to the default account when the new sub-address form is reset",
+		"lightTheme": "Light",
+		"darkTheme": "Dark",
+		"close": "@:invariants.controls.close"
+	},
+	"deleteAccount": {
+		"title": "Delete account",
+		"account": "You are about to delete the following account:",
+		"confirm": "Are you sure?",
+		"delete": "@:invariants.controls.delete",
+		"cancel": "@:invariants.controls.cancel"
+	},
+	"main": {
+		"title": "New address",
+		"account": "Account",
+		"name": "Name",
+		"input": "Dedicated name",
+		"address": "Address",
+		"copy": "@:invariants.controls.copy",
+		"reset": "@:invariants.controls.reset"
+	},
+	"manageAccounts": {
+		"title": "Accounts",
+		"isDefault": "default",
+		"setDefault": "Set default",
+		"delete": "@:invariants.controls.delete",
+		"close": "@:invariants.controls.close"
+	}
+}

src/locales/fr.json

@@ -0,0 +1,85 @@
+{
+	"locale_name": "Français",
+	"invariants": {
+		"controls": {
+			"cancel": "Annuler",
+			"close": "Fermer",
+			"copy": "Copier",
+			"delete": "Supprimer",
+			"reset": "Réinitialiser"
+		}
+	},
+	"navbar": {
+		"addAccount": "Nouveau compte",
+		"manageAccounts": "Comptes",
+		"config": "Préférences",
+		"about": "À propos"
+	},
+	"about": {
+		"title": "À propos",
+		"name": "Sub-Address KEy (SAKE) app",
+		"version": "Version : {version}",
+		"license": "Licence : {mit} ou {apache}",
+		"license_mit_url": "https://fr.wikipedia.org/wiki/Licence_MIT",
+		"license_apache_url": "https://fr.wikipedia.org/wiki/Licence_Apache",
+		"repository": "Dépôt : {url}",
+		"close": "@:invariants.controls.close"
+	},
+	"addAccount": {
+		"title": "Nouveau compte",
+		"localPart": "Partie locale",
+		"separator": "Séparateur",
+		"domainName": "Nom de domaine",
+		"privateKey": "Clé privée",
+		"scan": "Scanner",
+		"scanTitle": "Scanner un QR code",
+		"addAccount": "Ajouter",
+		"cancel": "@:invariants.controls.cancel",
+		"error": {
+			"accountAlreadyExists": "Vous avez déjà un compte sur ce nom de domaine qui utilise cette partie locale.",
+			"invalidBase64": "La clé doit être une chaîne de caractère en base64.",
+			"invalidKeyLength": "La longueur de la clé doit être de 128 bits (16 bytes) ou de 256 bits (32 bytes).",
+			"invalidSeparator": "Le séparateur doit être un unique caractère.",
+			"cameraNotAllowed": "L'accès à la caméra n'a pas été autorisé.",
+			"cameraNotFound": "Aucune caméra détectée.",
+			"cameraInsecureContext": "Impossible d'accéder à la caméra depuis une liaison non-sécurisée.",
+			"cameraNotReadable": "Caméra inaccessible (potentiellement déjà utilisée).",
+			"cameraOverconstrained": "Les caméras détectées ne sont pas compatibles.",
+			"cameraStreamApiNotSupported": "L'API du flux de données vidéo n'est pas supportée par ce navigateur.",
+			"localPartSeparator": "La partie locale ne peut pas contenir le séparateur.",
+			"unknown": "Erreur inconnue."
+		}
+	},
+	"config": {
+		"title": "Préférences",
+		"language": "Langue",
+		"colorMode": "Thème",
+		"resetToDefault": "Basculer sur le compte par défaut lorsque le formulaire de sous-adresse est réinitialisé",
+		"lightTheme": "Clair",
+		"darkTheme": "Sombre",
+		"close": "@:invariants.controls.close"
+	},
+	"deleteAccount": {
+		"title": "Supprimer le compte",
+		"account": "Vous êtes sur le point de supprimer le compte suivant :",
+		"confirm": "Souhaitez-vous vraiment continuer ?",
+		"delete": "@:invariants.controls.delete",
+		"cancel": "@:invariants.controls.cancel"
+	},
+	"main": {
+		"title": "Nouvelle adresse",
+		"account": "Compte",
+		"name": "Nom",
+		"input": "Nom dédié",
+		"address": "Adresse",
+		"copy": "@:invariants.controls.copy",
+		"reset": "@:invariants.controls.reset"
+	},
+	"manageAccounts": {
+		"title": "Comptes",
+		"isDefault": "défaut",
+		"setDefault": "Définir par défaut",
+		"delete": "@:invariants.controls.delete",
+		"close": "@:invariants.controls.close"
+	}
+}

src/locales_utils.js

@@ -0,0 +1,19 @@
+import { allowedLocales } from './const';
+
+const fallBackValue = 'en';
+
+const getShortLanguageCode = (language) => {
+	language = language.split('-')[0];
+	language = language.split('_')[0];
+	return language;
+};
+
+export const getDefaultLocale = () => {
+	for (const lang of navigator.languages) {
+		const lang_short = getShortLanguageCode(lang);
+		if (allowedLocales.includes(lang_short)) {
+			return lang_short;
+		}
+	}
+	return fallBackValue;
+};

src/main.js

@@ -1,9 +1,43 @@
 import './assets/main.sass';
 
+import { allowedColorModes, allowedLocales } from './const';
+import { getDefaultLocale } from './locales_utils';
 import { createApp } from 'vue';
+import { createI18n } from 'vue-i18n';
+import { useStorage } from '@vueuse/core';
 import App from './App.vue';
 import router from './router';
+import messages from '@intlify/unplugin-vue-i18n/messages';
+
+const setGlobalAttribute = (attrName, storageName, defaultValue, allowedValues) => {
+	const stored_value = useStorage(storageName, '');
+	if (!stored_value.value) {
+		stored_value.value = defaultValue;
+	}
+	document.documentElement.setAttribute(attrName, stored_value.value);
+	if (!allowedValues.includes(stored_value.value)) {
+		stored_value.value = defaultValue;
+	}
+	return {
+		'stored': stored_value,
+		'defaultValue': defaultValue,
+	};
+};
+const getDefaultColorMode = () => {
+	const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+	return darkMediaQuery.matches ? 'dark' : 'light';
+};
+const locale = setGlobalAttribute('lang', 'sake-locale', getDefaultLocale(), allowedLocales);
+const colorMode = setGlobalAttribute('data-bs-theme', 'sake-color-mode', getDefaultColorMode(), allowedColorModes);
+
+const i18n = createI18n({
+	legacy: false,
+	locale: locale.stored.value,
+	fallbackLocale: locale.defaultValue,
+	messages,
+});
 
 const app = createApp(App);
 app.use(router);
+app.use(i18n);
 app.mount('#app');

src/router/index.js

@@ -1,11 +1,19 @@
 import {createRouter, createMemoryHistory} from 'vue-router';
-import { useStorage } from '@vueuse/core'
+import { useStorage } from '@vueuse/core';
 
 import MainView from '../views/MainView.vue';
+import AboutView from '../views/AboutView.vue';
 import AddAccountView from '../views/AddAccountView.vue';
+import ConfigView from '../views/ConfigView.vue';
 import DeleteAccountView from '../views/DeleteAccountView.vue';
+import ManageAccountsView from '../views/ManageAccountsView.vue';
 
 const accounts = useStorage('sake-accounts', []);
+const requireAccounts = () => {
+	if (!accounts.value.length) {
+		return '/add-account';
+	}
+};
 const router = createRouter({
 	history: createMemoryHistory(),
 	routes: [
@@ -13,22 +21,34 @@ const router = createRouter({
 			path: '/',
 			name: 'main',
 			component: MainView,
-			beforeEnter: (to, from) => {
+			beforeEnter: requireAccounts,
-				if (!accounts.value.length) {
+		},
-					return '/add-account';
+		{
-				}
+			path: '/about',
-			}
+			name: 'about',
+			component: AboutView,
 		},
 		{
 			path: '/add-account',
 			name: 'add-account',
-			component: AddAccountView
+			component: AddAccountView,
+		},
+		{
+			path: '/config',
+			name: 'config',
+			component: ConfigView,
 		},
 		{
 			path: '/delete-account/:id',
 			name: 'delete-account',
 			component: DeleteAccountView,
 		},
+		{
+			path: '/manage-accounts',
+			name: 'manage-accounts',
+			component: ManageAccountsView,
+			beforeEnter: requireAccounts,
+		},
 	]
 });
 

src/views/AboutView.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { useRouter } from 'vue-router';
+import { version } from '../../package.json';
+import ButtonGroupComponent from '../components/ButtonGroupComponent.vue';
+import LayoutComponent from '../components/LayoutComponent.vue';
+import ExternalLinkComponent from '../components/ExternalLinkComponent.vue';
+import NavBarComponent from '../components/NavBarComponent.vue';
+
+const router = useRouter();
+const repoUrl = 'https://git.what.tf/rodolphe/sake-app';
+
+const toMainView = () => {
+	return router.push('/');
+};
+</script>
+
+<template>
+	<NavBarComponent />
+	<LayoutComponent>
+		<h1>{{ $t("about.title") }}</h1>
+		<h4>{{ $t("about.name") }}</h4>
+
+		<i18n-t scope="global" keypath="about.version" tag="p">
+			<template v-slot:version>{{ version }}</template>
+		</i18n-t>
+		<i18n-t scope="global" keypath="about.license" tag="p">
+			<template v-slot:mit>
+				<ExternalLinkComponent :url="$t('about.license_mit_url')" name="MIT" />
+			</template>
+			<template v-slot:apache>
+				<ExternalLinkComponent :url="$t('about.license_apache_url')" name="Apache 2.0" />
+			</template>
+		</i18n-t>
+		<i18n-t scope="global" keypath="about.repository" tag="p">
+			<template v-slot:url>
+				<ExternalLinkComponent :url="repoUrl" :name="repoUrl" />
+			</template>
+		</i18n-t>
+
+		<ButtonGroupComponent>
+			<button type="button" class="btn btn-secondary" @click="toMainView">{{ $t("about.close") }}</button>
+		</ButtonGroupComponent>
+	</LayoutComponent>
+</template>

src/views/AddAccountView.vue

@@ -1,11 +1,15 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, reactive, computed, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
-import { useStorage } from '@vueuse/core'
+import { useStorage } from '@vueuse/core';
-import { QrcodeStream } from 'vue-qrcode-reader'
+import { QrcodeStream, setZXingModuleOverrides } from 'vue-qrcode-reader';
 import { sha256 } from '@noble/hashes/sha256';
+import { Modal } from 'bootstrap';
 import base32Encode from 'base32-encode';
+import ButtonGroupComponent from '../components/ButtonGroupComponent.vue';
 import LayoutComponent from '../components/LayoutComponent.vue';
+import NavBarComponent from '../components/NavBarComponent.vue';
+import wasmFile from "../../node_modules/@sec-ant/zxing-wasm/dist/reader/zxing_reader.wasm?url";
 
 const accounts = useStorage('sake-accounts', []);
 const router = useRouter();
@@ -13,7 +17,15 @@ const localPart = ref('');
 const separator = ref('+');
 const domainName = ref('');
 const privateKey = ref('');
-const errorMessage = ref('');
+const authorizedKeyLengths = [16, 32];
+const state = reactive({
+	QrCodeModal: null,
+});
+
+const errorMessageId = ref('');
+const separatorErrorMessageId = ref('');
+const localPartErrorMessageId = ref('');
+const addrKeyErrorMessageId = ref('');
 
 const base64Decode = (str_b64) => {
 	try {
@@ -25,7 +37,7 @@ const base64Decode = (str_b64) => {
 		}
 		return b;
 	} catch (e) {
-		throw new Error('The key must be a valid base64 string.');
+		throw new Error('addAccount.error.invalidBase64');
 	}
 };
 
@@ -35,42 +47,102 @@ const addDisabled = computed(() => {
 		localPart.value,
 		separator.value,
 		domainName.value,
-		privateKey.value
+		privateKey.value,
 	];
 	return !params.every((e) => e);
 });
 const addAccount = () => {
 	if (!addDisabled.value) {
+		resetErrorMessage();
+		var hasError = false;
+		var key = null;
+		var accountId = null;
+		if (separator.value.length != 1) {
+			hasError = setErrorMessage('addAccount.error.invalidSeparator', separatorErrorMessageId);
+		}
 		try {
-			if (separator.value.length != 1) {
+			if (localPart.value.includes(separator.value)) {
-				throw new Error('The separator must be a single character.');
+				throw new Error('addAccount.error.localPartSeparator');
 			}
-			const key = base64Decode(privateKey.value);
+			accountId = `${localPart.value}@${domainName.value}`;
-			const hash = sha256(`${localPart.value}@${domainName.value}`);
+			for (const acc of accounts.value) {
+				const comp = `${acc.localPart}@${acc.domain}`;
+				if (accountId == comp) {
+					throw new Error('addAccount.error.accountAlreadyExists');
+				}
+			}
+		} catch (e) {
+			console.log(e);
+			hasError = setErrorMessage(e.message, localPartErrorMessageId);
+		}
+		try {
+			key = base64Decode(privateKey.value);
+			if (!authorizedKeyLengths.includes(key.length)) {
+				throw new Error('addAccount.error.invalidKeyLength');
+			}
+		} catch (e) {
+			hasError = setErrorMessage(e.message, addrKeyErrorMessageId);
+		}
+		if (!hasError && key && accountId) {
+			const hash = sha256(accountId);
 			const newAccount = {
 				id: base32Encode(hash, 'RFC4648', { padding: false }).toLowerCase(),
 				localPart: localPart.value,
 				separator: separator.value,
 				domain: domainName.value,
 				key: key,
+				isDefault: false,
 			};
 			accounts.value.push(newAccount);
 			return toMainView();
-		} catch (e) {
-			errorMessage.value = e.message;
 		}
 	}
 };
 
 // QR code reader
+setZXingModuleOverrides({
+	locateFile: (path, prefix) => {
+		if (path.endsWith(".wasm")) {
+			return wasmFile;
+		}
+		return prefix + path;
+	},
+});
+onMounted(() => {
+	state.QrCodeModal = new Modal('#qr-code-modal', {});
+});
 const scanQrCode = ref(false);
 const showQrCodeScanner = (data) => {
+	state.QrCodeModal.show();
 	scanQrCode.value = true;
 };
+const hideQrCodeScanner = () => {
+	scanQrCode.value = false;
+	state.QrCodeModal.hide();
+};
 const onQrCodeDetected = (result_list) => {
 	if (result_list.length >= 1) {
 		privateKey.value = result_list[0].rawValue;
-		scanQrCode.value = false;
+		hideQrCodeScanner();
+	}
+};
+const onQrCodeError = (err) => {
+	hideQrCodeScanner();
+	if (err.name === 'NotAllowedError') {
+		setErrorMessage('addAccount.error.cameraNotAllowed');
+	} else if (err.name === 'NotFoundError') {
+		setErrorMessage('addAccount.error.cameraNotFound');
+	} else if (err.name === 'NotSupportedError' || err.name === 'InsecureContextError') {
+		setErrorMessage('addAccount.error.cameraInsecureContext');
+	} else if (err.name === 'NotReadableError') {
+		setErrorMessage('addAccount.error.cameraNotReadable');
+	} else if (err.name === 'OverconstrainedError') {
+		setErrorMessage('addAccount.error.cameraOverconstrained');
+	} else if (err.name === 'StreamApiNotSupportedError') {
+		setErrorMessage('addAccount.error.cameraStreamApiNotSupported');
+	} else {
+		setErrorMessage('addAccount.error.unknown');
+		console.log(`${err.name}: ${err.value}`);
 	}
 };
 
@@ -83,50 +155,76 @@ const toMainView = () => {
 };
 
 // Error message
+const setErrorMessage = (messageId, messageType) => {
+	const messageIdClean = messageId.startsWith('addAccount.error.') ? messageId : 'addAccount.error.unknown';
+	if (messageType) {
+		messageType.value = messageIdClean;
+	} else {
+		errorMessageId.value = messageIdClean;
+	}
+	return true;
+};
+const resetFloatingErrorMessage = () => {
+	errorMessageId.value = '';
+};
 const resetErrorMessage = () => {
-	errorMessage.value = '';
+	resetFloatingErrorMessage();
+	separatorErrorMessageId.value = '';
+	localPartErrorMessageId.value = '';
+	addrKeyErrorMessageId.value = '';
 };
 </script>
 
 <template>
+	<NavBarComponent v-if="!cancellDisabled" />
 	<LayoutComponent>
-		<h1 class="title is-1">New account</h1>
+		<h1>{{ $t("addAccount.title") }}</h1>
-		<div class="notification is-danger is-light" v-if="errorMessage">
+
-			<button class="delete" @click="resetErrorMessage"></button>
+		<div class="alert alert-danger alert-dismissible fade show" role="alert" v-if="errorMessageId">
-			{{ errorMessage }}
+			{{ $t(errorMessageId) }}
+			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" @click="resetFloatingErrorMessage"></button>
 		</div>
-		<div class="container" id="new-account-error-msg-container"></div>
+
-		<div class="field">
+		<div class="mb-3">
-			<label class="label" for="new-addr-local-part">Local part</label>
+			<label class="form-label" for="new-addr-local-part">{{ $t("addAccount.localPart") }}</label>
-			<div class="control">
+			<input :class="{ 'form-control': true, 'is-invalid': localPartErrorMessageId}" type="text" id="new-addr-local-part" v-model="localPart">
-				<input class="input" type="text" id="new-addr-local-part" v-model="localPart">
+			<div class="invalid-feedback" v-if="localPartErrorMessageId">{{ $t(localPartErrorMessageId) }}</div>
+		</div>
+		<div class="mb-3">
+			<label class="form-label" for="new-addr-separator">{{ $t("addAccount.separator") }}</label>
+			<input :class="{ 'form-control': true, 'is-invalid': separatorErrorMessageId}" type="text" id="new-addr-separator" v-model="separator">
+			<div class="invalid-feedback" v-if="separatorErrorMessageId">{{ $t(separatorErrorMessageId) }}</div>
+		</div>
+		<div class="mb-3">
+			<label class="form-label" for="new-addr-domain">{{ $t("addAccount.domainName") }}</label>
+			<input class="form-control" type="text" id="new-addr-domain" placeholder="example.org" v-model="domainName">
+		</div>
+		<div class="mb-3">
+			<label class="form-label" for="new-addr-key">{{ $t("addAccount.privateKey") }}</label>
+			<div class="input-group">
+				<input :class="{ 'form-control': true, 'is-invalid': addrKeyErrorMessageId}" type="text" id="new-addr-key" v-model="privateKey">
+				<button class="btn btn-primary" type="button" @click="showQrCodeScanner">{{ $t("addAccount.scan") }}</button>
+				<div class="invalid-feedback" v-if="addrKeyErrorMessageId">{{ $t(addrKeyErrorMessageId) }}</div>
 			</div>
 		</div>
-		<div class="field">
+
-			<label class="label" for="new-addr-separator">Separator</label>
+		<div class="modal fade" id="qr-code-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
-			<div class="control">
+			<div class="modal-dialog">
-				<input class="input" type="text" id="new-addr-separator" v-model="separator">
+				<div class="modal-content">
+					<div class="modal-header">
+						<h1 class="modal-title fs-5" id="staticBackdropLabel">{{ $t("addAccount.scanTitle") }}</h1>
+						<button type="button" class="btn-close" aria-label="Close" @click="hideQrCodeScanner"></button>
+					</div>
+					<div class="modal-body">
+						<qrcode-stream v-if="scanQrCode" @detect="onQrCodeDetected" @error="onQrCodeError"></qrcode-stream>
+					</div>
+				</div>
 			</div>
 		</div>
-		<div class="field">
+
-			<label class="label" for="new-addr-domain">Domain name</label>
+		<ButtonGroupComponent>
-			<div class="control">
+			<button type="button" class="btn btn-primary" :disabled="addDisabled" @click="addAccount">{{ $t("addAccount.addAccount") }}</button>
-				<input class="input" type="text" id="new-addr-domain" placeholder="example.org" v-model="domainName">
+			<button type="button" class="btn btn-secondary" v-if="!cancellDisabled" @click="toMainView">{{ $t("addAccount.cancel") }}</button>
-			</div>
+		</ButtonGroupComponent>
-		</div>
-		<label class="label" for="new-addr-key">Private key</label>
-		<div class="field has-addons">
-			<div class="control is-expanded">
-				<input class="input" type="text" id="new-addr-key" v-model="privateKey">
-			</div>
-			<p class="control">
-				<a class="button is-primary" @click="showQrCodeScanner">Scan</a>
-			</p>
-		</div>
-		<qrcode-stream v-if="scanQrCode" @detect="onQrCodeDetected"></qrcode-stream>
-		<div class="buttons is-centered">
-			<button class="button is-primary" :disabled="addDisabled" @click="addAccount">Add account</button>
-			<button class="button is-light" v-if="!cancellDisabled" @click="toMainView">Cancel</button>
-		</div>
 	</LayoutComponent>
 </template>

src/views/ConfigView.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { allowedColorModes, resetToDefaultAccount } from '../const';
+import { watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useStorage } from '@vueuse/core';
+import ButtonGroupComponent from '../components/ButtonGroupComponent.vue';
+import LayoutComponent from '../components/LayoutComponent.vue';
+import NavBarComponent from '../components/NavBarComponent.vue';
+
+const router = useRouter();
+const stored_locale = useStorage('sake-locale', '');
+const { t, locale } = useI18n({ useScope: 'global' });
+const colorMode = useStorage('sake-color-mode');
+const resetToDefault = useStorage('sake-reset-to-default', resetToDefaultAccount);
+
+const toMainView = () => {
+	return router.push('/');
+};
+
+watch(locale, async (newLocale) => {
+	stored_locale.value = newLocale;
+	document.documentElement.setAttribute('lang', newLocale);
+});
+watch(colorMode, async (newColorMode) => {
+	console.log(`new color mode: ${newColorMode}`);
+	document.documentElement.setAttribute('data-bs-theme', newColorMode);
+});
+</script>
+
+<template>
+	<NavBarComponent />
+	<LayoutComponent>
+		<h1>{{ $t("config.title") }}</h1>
+
+		<div class="mb-3">
+			<label class="form-label" for="app-language">{{ $t("config.language") }}</label>
+			<select class="form-select" id="app-language" v-model="$i18n.locale">
+				<option v-for="locale_id in $i18n.availableLocales" :key="`locale-${locale_id}`" :value="locale_id">{{ $t("locale_name", 1, { locale: locale_id}) }}</option>
+			</select>
+		</div>
+		<div class="mb-3">
+			<label class="form-label" for="app-color-mode">{{ $t("config.colorMode") }}</label>
+			<select class="form-select" id="app-color-mode" v-model="colorMode">
+				<option v-for="mode in allowedColorModes" :key="mode" :value="mode">{{ $t(`config.${mode}Theme`) }}</option>
+			</select>
+		</div>
+		<div class="mb-3">
+			<div class="form-check form-switch">
+				<input class="form-check-input" type="checkbox" role="switch" id="app-reset-to-default" v-model="resetToDefault">
+				<label class="form-check-label" for="app-reset-to-default">{{ $t("config.resetToDefault") }}</label>
+			</div>
+		</div>
+
+		<ButtonGroupComponent>
+			<button type="button" class="btn btn-secondary" @click="toMainView">{{ $t("about.close") }}</button>
+		</ButtonGroupComponent>
+	</LayoutComponent>
+</template>

src/views/DeleteAccountView.vue

@@ -1,7 +1,9 @@
 <script setup>
 import { useRoute, useRouter } from 'vue-router';
-import { useStorage } from '@vueuse/core'
+import { useStorage } from '@vueuse/core';
+import ButtonGroupComponent from '../components/ButtonGroupComponent.vue';
 import LayoutComponent from '../components/LayoutComponent.vue';
+import NavBarComponent from '../components/NavBarComponent.vue';
 
 const accounts = useStorage('sake-accounts', []);
 const router = useRouter();
@@ -18,14 +20,17 @@ const toMainView = () => {
 </script>
 
 <template>
+	<NavBarComponent />
 	<LayoutComponent>
-		<h1 class="title is-1">Delete account</h1>
+		<h1>{{ $t("deleteAccount.title") }}</h1>
-		<p>You are about to delete the following account:</p>
+
-		<p class="has-text-weight-semibold is-size-5">{{ account.localPart }}@{{ account.domain }}</p>
+		<p>{{ $t("deleteAccount.account") }}</p>
-		<p>Are you sure?</p>
+		<p class="fw-semibold fs-5">{{ account.localPart }}@{{ account.domain }}</p>
-		<div class="buttons is-centered">
+		<p>{{ $t("deleteAccount.confirm") }}</p>
-			<button class="button is-danger" @click="deleteAccount">Delete</button>
+
-			<button class="button is-light" @click="toMainView">Cancel</button>
+		<ButtonGroupComponent>
-		</div>
+			<button type="button" class="btn btn-danger" @click="deleteAccount">{{ $t("deleteAccount.delete") }}</button>
+			<button type="button" class="btn btn-secondary" @click="toMainView">{{ $t("deleteAccount.cancel") }}</button>
+		</ButtonGroupComponent>
 	</LayoutComponent>
 </template>

src/views/MainView.vue

@@ -1,21 +1,25 @@
 <script setup>
+import { sortAccounts } from '../accounts';
+import { resetToDefaultAccount } from '../const';
 import { ref, computed } from 'vue';
 import { RouterLink, useRouter } from 'vue-router';
-import { useStorage } from '@vueuse/core'
+import { useStorage } from '@vueuse/core';
 import { hmac } from '@noble/hashes/hmac';
 import { sha256 } from '@noble/hashes/sha256';
 import base32Encode from 'base32-encode';
+import ButtonGroupComponent from '../components/ButtonGroupComponent.vue';
 import LayoutComponent from '../components/LayoutComponent.vue';
 import NavBarComponent from '../components/NavBarComponent.vue';
 
 const router = useRouter();
 const accounts = useStorage('sake-accounts', []);
-accounts.value.sort((a, b) => {
+const resetToDefault = useStorage('sake-reset-to-default', resetToDefaultAccount);
-	const va = `${a.localPart}@${a.domain}`;
+const sortedAccounts = computed(() => sortAccounts(accounts.value));
-	const vb = `${b.localPart}@${b.domain}`;
+const getDefaultAccount = () => {
-	return va.localeCompare(vb);
+	const def = accounts.value.find((a) => a.isDefault);
-});
+	return def ? def.id : accounts.value[0].id;
-const selectedAccountId = ref(accounts.value[0].id);
+};
+const selectedAccountId = ref(getDefaultAccount());
 const subAddrName = ref('');
 
 const fromRawAccount = (raw_account) => {
@@ -32,58 +36,60 @@ const generatedAddr = computed(() => {
 		const raw_account = accounts.value.find((e) => e.id == selectedAccountId.value);
 		if (raw_account) {
 			const account = fromRawAccount(raw_account);
-			var hasher = hmac.create(sha256, account.key);
+			if (subAddrName.value.indexOf(account.separator) != -1) {
-			hasher.update(account.localPart);
+				subAddrName.value = subAddrName.value.replaceAll(account.separator, '');
-			hasher.update(account.separator);
+			}
-			hasher.update(subAddrName.value);
+			if (subAddrName.value) {
-			const mac = hasher.digest();
+				var hasher = hmac.create(sha256, account.key);
-			const offset = mac[mac.length - 1] & 0xf;
+				hasher.update(account.localPart);
-			const reduced_mac = mac.slice(offset, offset + 5);
+				hasher.update(account.separator);
-			const code = base32Encode(reduced_mac, 'RFC4648', { padding: false }).toLowerCase();
+				hasher.update(subAddrName.value);
-			return `${account.localPart}${account.separator}${subAddrName.value}${account.separator}${code}@${account.domain}`;
+				const mac = hasher.digest();
+				const offset = mac[mac.length - 1] & 0xf;
+				const reduced_mac = mac.slice(offset, offset + 5);
+				const code = base32Encode(reduced_mac, 'RFC4648', { padding: false }).toLowerCase();
+				return `${account.localPart}${account.separator}${subAddrName.value}${account.separator}${code}@${account.domain}`;
+			}
 		}
 	}
 	return '';
 });
-const deleteAccount = () => {
-	return router.push(`/delete-account/${selectedAccountId.value}`);
-};
 const copyAddr = () => {
 	navigator.clipboard.writeText(generatedAddr.value);
 };
+const resetForm = () => {
+	subAddrName.value = '';
+	if (resetToDefault.value) {
+		selectedAccountId.value = getDefaultAccount();
+	}
+};
 </script>
 
 <template>
 	<NavBarComponent />
 	<LayoutComponent>
-		<h1 class="title is-1">New address</h1>
+		<h1>{{ $t("main.title") }}</h1>
-		<label class="label" for="account-name">Account</label>
+
-		<div class="field has-addons">
+		<div class="mb-3">
-			<div class="control is-expanded">
+			<label class="form-label" for="account-name">{{ $t("main.account") }}</label>
-				<div class="select is-fullwidth">
+			<select class="form-select" id="account-name" v-model="selectedAccountId">
-					<select id="account-name" v-model="selectedAccountId">
+				<option v-for="account in sortedAccounts" :key="account.id" :value="account.id">{{ account.localPart }}@{{ account.domain }}</option>
-						<option v-for="account in accounts" :key="account.id" :value="account.id">{{ account.localPart }}@{{ account.domain }}</option>
+			</select>
-					</select>
-				</div>
-			</div>
-			<p class="control">
-				<a class="button is-danger" @click="deleteAccount">Delete</a>
-			</p>
 		</div>
-		<div class="field">
+
-			<label class="label" for="sub-addr-name">Name</label>
+		<div class="mb-3">
-			<div class="control">
+			<label class="form-label" for="sub-addr-name">{{ $t("main.name") }}</label>
-				<input class="input" type="text" id="sub-addr-name" placeholder="Text input" v-model="subAddrName">
+			<input class="form-control" type="text" id="sub-addr-name" :placeholder="$t('main.input')" v-model="subAddrName">
-			</div>
 		</div>
-		<div class="field">
+
-			<label class="label" for="generated-addr">Address</label>
+		<div class="mb-3">
-			<div class="control">
+			<label class="form-label" for="generated-addr">{{ $t("main.address") }}</label>
-				<input class="input" type="text" id="generated-addr" v-model="generatedAddr" disabled>
+			<input class="form-control" type="text" id="generated-addr" v-model="generatedAddr" disabled>
-			</div>
-		</div>
-		<div class="buttons is-centered">
-			<button class="button is-primary" @click="copyAddr">Copy</button>
 		</div>
+
+		<ButtonGroupComponent>
+			<button type="button" class="btn btn-primary" @click="copyAddr">{{ $t("main.copy") }}</button>
+			<button type="button" class="btn btn-secondary" @click="resetForm">{{ $t("main.reset") }}</button>
+		</ButtonGroupComponent>
 	</LayoutComponent>
 </template>

src/views/ManageAccountsView.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { sortAccounts } from '../accounts';
+import { computed } from 'vue';
+import { RouterLink, useRouter } from 'vue-router';
+import { useStorage } from '@vueuse/core';
+import ButtonGroupComponent from '../components/ButtonGroupComponent.vue';
+import LayoutComponent from '../components/LayoutComponent.vue';
+import NavBarComponent from '../components/NavBarComponent.vue';
+
+const router = useRouter();
+const accounts = useStorage('sake-accounts', []);
+const sortedAccounts = computed(() => sortAccounts(accounts.value));
+
+const deleteAccount = (accountId) => {
+	return router.push(`/delete-account/${accountId}`);
+};
+const setDefaultAccount = (accountId) => {
+	accounts.value = accounts.value.map((a) => {
+		a.isDefault = a.id === accountId;
+		return a;
+	});
+};
+const toMainView = () => {
+	return router.push('/');
+};
+</script>
+
+<template>
+	<NavBarComponent />
+	<LayoutComponent>
+		<h1>{{ $t("manageAccounts.title") }}</h1>
+
+		<table class="table">
+				<tbody>
+					<tr v-for="account in sortedAccounts">
+						<th class="text-end align-middle">
+							<span class="badge text-bg-primary" v-if="account.isDefault">{{ $t("manageAccounts.isDefault") }}</span>
+							{{ account.localPart }}@{{ account.domain }}
+						</th>
+						<th>
+							<button type="button" class="btn btn-primary me-2" @click="setDefaultAccount(account.id)" v-if="!account.isDefault">{{ $t("manageAccounts.setDefault") }}</button>
+							<button type="button" class="btn btn-danger" @click="deleteAccount(account.id)">{{ $t("manageAccounts.delete") }}</button>
+						</th>
+					</tr>
+				</tbody>
+			</table>
+
+		<ButtonGroupComponent>
+			<button type="button" class="btn btn-secondary" @click="toMainView">{{ $t("manageAccounts.close") }}</button>
+		</ButtonGroupComponent>
+	</LayoutComponent>
+</template>

vite.config.js

@@ -1,17 +1,22 @@
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from 'node:url';
 
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue'
+import vue from '@vitejs/plugin-vue';
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
+import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
 	base: '',
 	plugins: [
 		vue(),
+		VueI18nPlugin({
+			include: [path.resolve(__dirname, './src/locales/**')],
+		}),
 	],
 	resolve: {
 		alias: {
-			'@': fileURLToPath(new URL('./src', import.meta.url))
+			'@': fileURLToPath(new URL('./src', import.meta.url)),
 		}
 	},
 	build: {
@@ -22,5 +27,10 @@ export default defineConfig({
 				assetFileNames: 'assets/sake.min[extname]',
 			}
 		}
+	},
+	define: {
+		__VUE_I18N_FULL_INSTALL__: true,
+		__VUE_I18N_LEGACY_API__: false,
+		__INTLIFY_PROD_DEVTOOLS__: false,
 	}
-})
+});