Add mnemonic key recovery to onboarding (#316)

arj03 · Jul 9, 2021 · d7997ef · d7997ef
1 parent 5f05b4f
commit d7997ef
Show file tree

Hide file tree

Showing 7 changed files with 192 additions and 60 deletions.
diff --git a/browser.html b/browser.html
@@ -4,6 +4,13 @@
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
     <link rel="manifest" href="manifest.json">
+
+    <!-- Include these first so they can be overridden. -->
+    <link rel="stylesheet" type="text/css" href="node_modules/vue-select/dist/vue-select.css">
+    <link rel="stylesheet" type="text/css" href="node_modules/@toast-ui/editor/dist/toastui-editor.css">
+    <link rel="stylesheet" type="text/css" href="node_modules/vue-simple-context-menu/dist/vue-simple-context-menu.css">
+    <link rel="stylesheet" type="text/css" href="node_modules/vue-slim-tabs/themes/default.css">
+
     <link rel="stylesheet" type="text/css" href="css/main.css">
     <link rel="stylesheet" type="text/css" href="css/theme-dark.css">
     <link rel="stylesheet" type="text/css" href="css/theme-ethereal.css">
@@ -19,10 +26,6 @@
     <link rel="stylesheet" type="text/css" href="css/threads.css">
     <link rel="stylesheet" type="text/css" href="css/connections.css">
     <link rel="stylesheet" type="text/css" href="css/modal.css">
-
-    <link rel="stylesheet" type="text/css" href="node_modules/vue-select/dist/vue-select.css">
-    <link rel="stylesheet" type="text/css" href="node_modules/@toast-ui/editor/dist/toastui-editor.css">
-    <link rel="stylesheet" type="text/css" href="node_modules/vue-simple-context-menu/dist/vue-simple-context-menu.css">
   </head>
   <body>
     <div class="refresher">

diff --git a/css/main.css b/css/main.css
@@ -490,3 +490,49 @@ textarea.source
 {
   background-color: #fff;
 }
+
+.vue-tablist
+{
+  margin-bottom: 0;
+}
+
+.vue-tab
+{
+  background: #e6e8eb;
+}
+
+.vue-tab[aria-selected="true"],
+.vue-tabpanel
+{
+  background: #f7f9fc;
+}
+
+.vue-tabpanel
+{
+  border: 1px solid #e2e2e2;
+  border-top: none;
+  padding: 0 10px 5px 10px;
+}
+
+.tab-clear-margin
+{
+  font-size: 0;
+}
+
+p.warning,
+p.note
+{
+  padding: 5px 10px;
+}
+
+p.warning
+{
+  border: 1px solid #993333;
+  background: #ffdddd;
+}
+
+p.note
+{
+  border: 1px solid #dddd00;
+  background: #ffff99;
+}
diff --git a/messages.json b/messages.json
@@ -34,6 +34,8 @@
       "stoppedFollowing": "Stopped following",
       "close": "Close",
       "save": "Save",
+      "warning": "WARNING!",
+      "note": "NOTE:",
       "posted": "posted",
       "a": "a",
       "inReplyTo": "in reply to",
@@ -127,14 +129,19 @@
       "title": "Notifications"
     },
     "onboarding": {
-      "title": "New user",
+      "newUser": "New user",
+      "recoverExistingAccount": "Recover existing account",
+      "mnemonicInstructions": "If you've already created an account and need to recover it or move it to this device, please enter your mnemonic key here:",
       "welcomeMessage": "Welcome!  It looks like you're new here.  All of this information is <strong>entirely optional</strong>, but it does tend to help get you up and running quickly and easily.",
       "profileName": "Pick a name for yourself (you can change this later under Profile):",
       "profileNamePlaceholder": "(Your name/nickname)",
       "profileDescription": "If you want, you can type up a short bio:",
       "profileDescriptionPlaceholder": "(A short bio about you - Markdown formatting is supported)",
       "suggestedPeers": "Here are some preset servers you can connect to:",
       "suggestedFollows": "And here are some people you might like to follow:",
+      "warningSingleDevice": "Accounts should only ever be used from one device at a time.  Otherwise, you risk forking your feed.  Please make sure this account is not being used from anywhere else.",
+      "warningReloading": "We will now need to reload for this change to take effect.",
+      "noteConnectToSync": "You will need to connect to a server or peer who has a copy of your data to be able to recover your data.  We have provided some presets below.  If your data is on a different peer, please connect to them in the Settings tab and allow the sync to finish before posting anything.",
       "manualSetup": "Manual setup",
       "getStarted": "Get started!"
     },
@@ -266,7 +273,7 @@
       "postMessage": "Fire!"
     },
     "onboarding": {
-      "title": "Landlubber",
+      "newUser": "Landlubber",
       "welcomeMessage": "Ahoy, matey!  Welcome aboard!  Git yerself signed onto the register, so we know who be aboard.  It'll help ye get yer sealegs.",
       "profileName": "Yer name ('ye can change this under Profile):",
       "profileNamePlaceholder": "(Aaaaargh!)",
@@ -353,6 +360,8 @@
       "stoppedFollowing": "フォローをやめた",
       "mentions": "言及します：",
       "searchErrorInvalidMsg": "メッセージIDが無効です。 タイプミスを確認して、再試行してください。",
+      "warning": "警告！",
+      "note": "注意：",
       "close": "閉じて",
       "save": "変更を保存"
     },
@@ -439,14 +448,19 @@
       "title": "通知"
     },
     "onboarding": {
-      "title": "新しいユーザー",
+      "newUser": "新しいユーザー",
+      "recoverExistingAccount": "既存のアカウントを回復する",
+      "mnemonicInstructions": "すでにアカウントを作成していて、それを回復するか、このデバイスに移動する必要がある場合は、ここにニーモニックキーを入力してください。",
       "welcomeMessage": "ようこそ！ あなたはここで新しいようです。この情報はすべて<strong>完全にオプション</strong>ですが、すばやく簡単に開始するのに役立ちます。",
       "profileName": "自分の名前を選択してください（後で「プロファイル」で変更できます）：",
       "profileNamePlaceholder": "（あなたの名前またはニックネーム）",
       "profileDescription": "必要に応じて、短い経歴を入力できます：",
       "profileDescriptionPlaceholder": "（あなたについての短い経歴。「Markdown」フォーマットがサポートされています。）",
       "suggestedPeers": "接続できるプリセットサーバーは次のとおりです：",
       "suggestedFollows": "そしてここにあなたがフォローしたいと思うかもしれない何人かの人々がいます：",
+      "warningSingleDevice": "アカウントは、一度に1つのデバイスからのみ使用する必要があります。 そうしないと、フィードをフォークするリスクがあります。 このアカウントが他の場所から使用されていないことを確認してください。",
+      "warningReloading": "この変更を有効にするには、リロードする必要があります。",
+      "noteConnectToSync": "データを回復できるようにするには、データのコピーを持っているサーバーまたはピアに接続する必要があります。 以下にいくつかのプリセットを用意しました。 データが別のピアにある場合は、[設定]タブでそれらに接続し、何かを投稿する前に同期が終了するのを待ってください。",
       "manualSetup": "キャンセル/手動セットアップ",
       "getStarted": "始めましょう！"
     },
@@ -555,6 +569,8 @@
       "title": "Canais"
     },
     "common": {
+      "warning": "AVISO!",
+      "note": "NOTA:",
       "close": "Fechar",
       "genericUsername": "Pessoa",
       "lastXMessages": "Últimas {count} mensagens",
@@ -630,13 +646,18 @@
     "onboarding": {
       "getStarted": "Iniciar!",
       "manualSetup": "Configuração manual",
+      "mnemonicInstructions": "Se você já criou uma conta e precisa recuperá-la ou movê-la para este dispositivo, insira sua chave mnemônica aqui:",
+      "noteConnectToSync": "Você precisará se conectar a um servidor ou par que tenha uma cópia dos seus dados para poder recuperá-los. Fornecemos algumas predefinições abaixo. Se seus dados estiverem em um par diferente, conecte-se a eles na guia Configurações e permita que a sincronização termine antes de postar qualquer coisa.",
       "profileDescription": "Se você quiser, você pode digitar uma breve biografia:",
       "profileDescriptionPlaceholder": "(Uma breve biografia sobre você - formatação de markdown é suportada)",
       "profileName": "Escolha um nome (você pode alterar isso mais tarde em Perfil):",
       "profileNamePlaceholder": "(Seu nome / apelido)",
       "suggestedFollows": "E aqui estão algumas pessoas que talvez você gostaria de seguir:",
       "suggestedPeers": "Aqui estão alguns servidores predefinidos que você pode se conectar:",
-      "title": "Nova pessoa",
+      "newUser": "Nova pessoa",
+      "recoverExistingAccount": "Recuperar conta existente",
+      "warningReloading": "Agora precisaremos recarregar para que essa alteração tenha efeito.",
+      "warningSingleDevice": "As contas só devem ser usadas em um dispositivo por vez. Caso contrário, você corre o risco de bifurcar seu feed. Certifique-se de que essa conta não esteja sendo usada em nenhum outro lugar.",
       "welcomeMessage": "Bem-vind@! Parece que você é nov@ aqui. Toda esta informação é <strong>inteiramente opcional</strong>, mas tende a ajudar a ter tudo funcionando com rapidez e facilidade."
     },
     "pages": {

diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
diff --git a/package.json b/package.json
@@ -30,7 +30,8 @@
     "vue-i18n": "^8.22.4",
     "vue-router": "^3.5.1",
     "vue-select": "^3.11.2",
-    "vue-simple-context-menu": "^3.4.1"
+    "vue-simple-context-menu": "^3.4.1",
+    "vue-slim-tabs": "^0.4.0"
   },
   "devDependencies": {
     "browserify": "^17.0.0",

diff --git a/ui/components.js b/ui/components.js
@@ -10,11 +10,14 @@ module.exports = function () {
   require('./connected')
   const { Editor } = require('@toast-ui/vue-editor')
   const { VueSimpleContextMenu } = require("vue-simple-context-menu")
+  const { Tabs, Tab } = require("vue-slim-tabs")
   require('./markdown-editor')
 
   Vue.component('v-select', VueSelect.VueSelect)
   Vue.component('vue-simple-context-menu', VueSimpleContextMenu)
   Vue.component('tui-editor', Editor)
+  Vue.component('tabs', Tabs)
+  Vue.component('tab', Tab)
 
   const state = {
     publicRefreshTimer: 0,