refactor(desktop-ui): login to credential (#150)

Author: doums

nym-vpn-desktop/src/i18n/config.ts

@@ -6,34 +6,35 @@ import settings from './en/settings.json';
 import nodeLocation from './en/node-location.json';
 import backendMessages from './en/backend-messages.json';
 import display from './en/display.json';
-import login from './en/login.json';
+import addCredential from './en/add-credential.json';
 
-const defaultNS = 'common';
+export const defaultNS = 'common';
+export const resources = {
+  en: {
+    common,
+    home,
+    settings,
+    nodeLocation,
+    backendMessages,
+    display,
+    addCredential,
+  },
+} as const;
 
 i18n.use(initReactI18next).init({
   lng: 'en',
   debug: import.meta.env.DEV,
-  resources: {
-    en: {
-      common,
-      home,
-      settings,
-      nodeLocation,
-      backendMessages,
-      display,
-      login,
-    },
-  },
+  defaultNS,
+  resources,
   ns: [
+    'addCredential',
     'common',
     'home',
     'settings',
     'nodeLocation',
     'backendMessages',
     'display',
-    'login',
   ],
-  defaultNS,
 
   interpolation: {
     escapeValue: false, // not needed for react as it escapes by default

nym-vpn-desktop/src/i18n/en/add-credential.json

@@ -0,0 +1,8 @@
+{
+  "welcome": "Welcome!",
+  "description1": "Enter your credential to get started",
+  "description2": "To generate a new credential, please use the link provided in the alpha phase invitation email.",
+  "input-label": "Credential",
+  "add-button": "Add credential",
+  "error": "Invalid recovery phrase"
+}

nym-vpn-desktop/src/i18n/en/common.json

@@ -10,7 +10,6 @@
   "legal": "Legal",
   "support": "Support",
   "fastest": "Fastest",
-  "login": "Login",
   "ui-mode": {
     "dark": "Dark mode",
     "light": "Light mode"

nym-vpn-desktop/src/i18n/en/login.json

@@ -35,5 +35,5 @@
   "display-theme": "Display theme",
   "logs": "Logs",
   "quit": "Quit NymVPN",
-  "login-button": "Log in to view your account"
+  "add-credential-button": "Add credential to connect"
 }

nym-vpn-desktop/src/i18n/en/settings.json

@@ -0,0 +1,9 @@
+import { defaultNS, resources } from './config';
+
+// based on https://www.i18next.com/overview/typescript
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    defaultNS: typeof defaultNS;
+    resources: (typeof resources)['en'];
+  }
+}

nym-vpn-desktop/src/i18n/i18next.d.ts

@@ -3,10 +3,10 @@ import { useTranslation } from 'react-i18next';
 import { NymIcon } from '../../assets/icons';
 import { Button, TextArea } from '../../ui';
 
-function LogIn() {
+function AddCredential() {
   const [phrase, setPhrase] = useState('');
 
-  const { t } = useTranslation('login');
+  const { t } = useTranslation('addCredential');
 
   const onChange = (phrase: string) => {
     setPhrase(phrase);
@@ -22,7 +22,7 @@ function LogIn() {
         <h2 className="text-center dark:text-laughing-jack">
           {t('description1')}
         </h2>
-        <p className="text-xs text-center text-dim-gray dark:text-mercury-mist w-3/5">
+        <p className="text-xs text-center text-dim-gray dark:text-mercury-mist w-4/5">
           {t('description2')}
         </p>
       </div>
@@ -31,12 +31,12 @@ function LogIn() {
         onChange={onChange}
         spellCheck={false}
         resize="none"
-        rows={5}
+        rows={10}
         label={t('input-label')}
       />
-      <Button onClick={handleClick}>{t('login-button')}</Button>
+      <Button onClick={handleClick}>{t('add-button')}</Button>
     </div>
   );
 }
 
-export default LogIn;
+export default AddCredential;

nym-vpn-desktop/src/pages/login/LogIn.tsx …p/src/pages/credential/AddCredential.tsxnym-vpn-desktop/src/pages/login/LogIn.tsx renamed to nym-vpn-desktop/src/pages/credential/AddCredential.tsx nym-vpn-desktop/src/pages/login/LogIn.tsx renamed to nym-vpn-desktop/src/pages/credential/AddCredential.tsx

@@ -0,0 +1 @@
+export { default as AddCredential } from './AddCredential';

nym-vpn-desktop/src/pages/credential/index.ts

@@ -2,5 +2,5 @@ export * from './home';
 export * from './settings';
 export { default as MainLayout } from './MainLayout';
 export * from './location';
-export * from './login';
+export * from './credential';
 export { default as Error } from './Error';