Fix form fields issues with localized interface

swiftyapp · Nov 6, 2022 · aa07eeb · aa07eeb
1 parent 73c664e
commit aa07eeb
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "description": "Modern, Lightweight, Fast and Free Password Manager",
   "repository": "https://github.com/alchaplinsky/swifty.git",
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.0",
     "@swiftyapp/cryptor": "^1.1.2",
     "classnames": "^2.3.1",
     "electron-log": "^4.4.8",

diff --git a/src/renderer/javascripts/components/main/body/aside/form/card.js b/src/renderer/javascripts/components/main/body/aside/form/card.js
@@ -8,48 +8,59 @@ const Card = ({ entry, validate, onChange, onTagsChange }) => {
   return (
     <>
       <Field
-        name={i18n('Title')}
+        label={i18n('Title')}
+        name="title"
         validate={validate}
         entry={entry}
         onChange={onChange}
         maxLength="40"
       />
       <Field
-        name={i18n('Number')}
+        label={i18n('Number')}
+        name="number"
         validate={validate}
         entry={entry}
         onChange={onChange}
         maxLength="19"
       />
       <Field
-        name={i18n('Month')}
+        label={i18n('Month')}
+        name="month"
         validate={validate}
         entry={entry}
         onChange={onChange}
         maxLength="2"
       />
       <Field
-        name={i18n('Year')}
+        label={i18n('Year')}
+        name="year"
         validate={validate}
         entry={entry}
         onChange={onChange}
         maxLength="4"
       />
       <Field
-        name={i18n('CVC')}
+        label={i18n('CVC')}
+        name="cvc"
         validate={validate}
         entry={entry}
         onChange={onChange}
         maxLength="4"
       />
       <SecureField
-        name={i18n('Pin')}
+        label={i18n('Pin')}
+        name="pin"
         validate={validate}
         entry={entry}
         onChange={onChange}
         maxLength="6"
       />
-      <Field name={i18n('Name')} entry={entry} onChange={onChange} />
+      <Field
+        label={i18n('Name')}
+        name="name"
+        entry={entry}
+        onChange={onChange}
+      />
       <TagField entry={entry} onChange={onTagsChange} />
     </>
   )

diff --git a/src/renderer/javascripts/components/main/body/aside/form/field.js b/src/renderer/javascripts/components/main/body/aside/form/field.js
@@ -1,7 +1,15 @@
 import React from 'react'
 import classnames from 'classnames'
 
-export default ({ name, entry, validate, onChange, rows, maxLength }) => {
+export default ({
+  label,
+  name,
+  entry,
+  validate,
+  onChange,
+  rows,
+  maxLength
+}) => {
   const isEmpty = () => {
     return entry[name.toLowerCase()].trim() === ''
   }
@@ -36,7 +44,7 @@ export default ({ name, entry, validate, onChange, rows, maxLength }) => {
 
   return (
     <div className={classNames()}>
-      <label htmlFor="">{name}</label>
+      <label htmlFor="">{label}</label>
       {renderInput()}
     </div>
   )

diff --git a/src/renderer/javascripts/components/main/body/aside/form/login.js b/src/renderer/javascripts/components/main/body/aside/form/login.js
@@ -15,22 +15,30 @@ const Login = ({ entry, validate, onChange, onTagsChange }) => {
   return (
     <>
       <Field
-        name={i18n('Title')}
+        label={i18n('Title')}
+        name="title"
         validate={validate}
         entry={entry}
         onChange={onChange}
         maxLength="40"
       />
-      <Field name={i18n('Website')} entry={entry} onChange={onChange} />
       <Field
-        name={i18n('Username')}
+        label={i18n('Website')}
+        name="wbsite"
+        entry={entry}
+        onChange={onChange}
+      />
+      <Field
+        label={i18n('Username')}
+        name="username"
         validate={validate}
         entry={entry}
         onChange={onChange}
         maxLength="40"
       />
       <SecureField
-        name={i18n('Password')}
+        label={i18n('Password')}
+        name="password"
         validate={validate}
         entry={entry}
         onChange={onChange}
@@ -40,10 +48,26 @@ const Login = ({ entry, validate, onChange, onTagsChange }) => {
           generate
         </span>
       </SecureField>
-      <SecureField name={i18n('OTP')} entry={entry} onChange={onChange} />
-      <Field name={i18n('Email')} entry={entry} onChange={onChange} />
+      <SecureField
+        label={i18n('OTP')}
+        name="otp"
+        entry={entry}
+        onChange={onChange}
+      />
+      <Field
+        label={i18n('Email')}
+        name="email"
+        entry={entry}
+        onChange={onChange}
+      />
       <TagField entry={entry} onChange={onTagsChange} />
-      <Field name={i18n('Note')} entry={entry} onChange={onChange} rows="5" />
+      <Field
+        label={i18n('Note')}
+        name="note"
+        entry={entry}
+        onChange={onChange}
+        rows="5"
+      />
     </>
   )
 }

diff --git a/src/renderer/javascripts/components/main/body/aside/form/note.js b/src/renderer/javascripts/components/main/body/aside/form/note.js
@@ -8,14 +8,16 @@ const Note = ({ entry, validate, onChange, onTagsChange }) => {
   return (
     <>
       <Field
-        name={i18n('Title')}
+        label={i18n('Title')}
+        name="title"
         entry={entry}
         onChange={onChange}
         validate={validate}
         maxLength="40"
       />
       <SecureField
-        name={i18n('Note')}
+        label={i18n('Note')}
+        name="note"
         entry={entry}
         onChange={onChange}
         validate={validate}

diff --git a/src/renderer/javascripts/components/main/body/aside/form/secure.js b/src/renderer/javascripts/components/main/body/aside/form/secure.js
@@ -4,6 +4,7 @@ import View from 'view.svg'
 import Hide from 'hide.svg'
 
 export default ({
+  label,
   name,
   entry,
   validate,
@@ -58,7 +59,7 @@ export default ({
 
   return (
     <div className={className()}>
-      <label htmlFor="">{name}</label>
+      <label htmlFor="">{label}</label>
       <div className="value">
         <div className="wrapper">
           {renderInput()}

diff --git a/src/renderer/javascripts/index.js b/src/renderer/javascripts/index.js
@@ -1,15 +1,25 @@
 import 'application.sass'
 import React from 'react'
-import { render } from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import { Provider } from 'react-redux'
-import { createStore, applyMiddleware } from 'redux'
+import { configureStore } from '@reduxjs/toolkit'
 import thunkMiddleware from 'redux-thunk'
 import rootReducer from 'reducers'
 import './shortcuts'
 
 import Swifty from './components/swifty'
 
-const store = createStore(rootReducer, applyMiddleware(thunkMiddleware))
+const store = configureStore({
+  reducer: rootReducer,
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware().concat([thunkMiddleware])
+})
+
+let root
+
+window.onload = () => {
+  root = ReactDOM.createRoot(document.getElementById('root'))
+}
 
 const renderApplication = i18n => {
   const locale = localStorage.getItem('locale')
@@ -20,11 +30,11 @@ const renderApplication = i18n => {
   document
     .querySelector('body')
     .setAttribute('platform', window.AppAPI.platform())
-  render(
+
+  root.render(
     <Provider store={store}>
       <Swifty />
-    </Provider>,
-    document.getElementById('root')
+    </Provider>
   )
 }
 window.refreshApplication = () => renderApplication(window._i18n)

diff --git a/yarn.lock b/yarn.lock
@@ -1392,6 +1392,16 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@reduxjs/toolkit@^1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.9.0.tgz#76b264fcea677d256b18f86cc77e00743a9e02b0"
+  integrity sha512-ak11IrjYcUXRqlhNPwnz6AcvA2ynJTu8PzDbbqQw4a3xR4KZtgiqbNblQD+10CRbfK4+5C79SOyxnT9dhBqFnA==
+  dependencies:
+    immer "^9.0.16"
+    redux "^4.2.0"
+    redux-thunk "^2.4.2"
+    reselect "^4.1.7"
+
 "@sinclair/typebox@^0.24.1":
   version "0.24.51"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.51.tgz#645f33fe4e02defe26f2f5c0410e1c094eac7f5f"
@@ -4679,6 +4689,11 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
+immer@^9.0.16:
+  version "9.0.16"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.16.tgz#8e7caab80118c2b54b37ad43e05758cdefad0198"
+  integrity sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ==
+
 immutable@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef"
@@ -6934,6 +6949,11 @@ redux-thunk@^2.4.1:
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714"
   integrity sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==
 
+redux-thunk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.2.tgz#b9d05d11994b99f7a91ea223e8b04cf0afa5ef3b"
+  integrity sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==
+
 redux@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
@@ -7039,6 +7059,11 @@ require-main-filename@^1.0.1:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
   integrity sha512-IqSUtOVP4ksd1C/ej5zeEh/BIP2ajqpn8c5x+q99gvcIG/Qf0cud5raVnE/Dwd0ua9TXYDoDc0RE5hBSdz22Ug==
 
+reselect@^4.1.7:
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.7.tgz#56480d9ff3d3188970ee2b76527bd94a95567a42"
+  integrity sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A==
+
 resolve-alpn@^1.0.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9"