github.com/grafviktor/keep-my-secret@v0.9.10-0.20230908165355-19f35cce90e5/website/src/components/Home/Password/index.jsx (about)

     1  import get from 'lodash/get'
     2  import noop from 'lodash/noop'
     3  import isUndefined from 'lodash/isUndefined'
     4  import {useContext, useState} from 'react'
     5  import ApplicationContext from '../../../context'
     6  
     7  import './style.css'
     8  
     9  export default () => {
    10    const {
    11      secret,
    12      navigateTo,
    13      createSecret,
    14      updateSecret,
    15      setAlertMessage,
    16    } = useContext(ApplicationContext)
    17  
    18    const type = 'pass'
    19    const secretID = get(secret, 'id')
    20    const [note, setNote] = useState(get(secret, 'note', ''))
    21    const [title, setTitle] = useState(get(secret, 'title', ''))
    22    const [login, setLogin] = useState(get(secret, 'login', ''))
    23    const [password, setPassword] = useState(get(secret, 'password', ''))
    24  
    25    const setValue = (event) => {
    26      const field = get(event, 'target.id', '')
    27      const value = get(event, 'target.value', '')
    28  
    29      const changeValueHandler = {
    30        note     : setNote,
    31        title    : setTitle,
    32        login    : setLogin,
    33        password : setPassword,
    34      }[field] || noop
    35  
    36      changeValueHandler(value)
    37    }
    38  
    39    const onSubmitButtonClick = async () => {
    40      const apiHandler = isUndefined(secretID) ? createSecret : updateSecret
    41  
    42      try {
    43        await apiHandler({
    44          id: secretID,
    45          type,
    46          title,
    47          note,
    48          login,
    49          password,
    50        }, secretID)
    51  
    52        navigateTo('home')
    53      } catch (error) {
    54        console.warn(error.message)
    55        setAlertMessage(`Error: ${error.message}`)
    56      }
    57    }
    58  
    59    return (
    60      <div className="kms-secret-edit">
    61        <form className="kms-secret-edit__form">
    62          <div className="row gy-3">
    63            <div className="col-md-12">
    64              <label htmlFor="title" className="form-label">Title</label>
    65              <input type="text" className="form-control" id="title" value={title} onChange={setValue} />
    66            </div>
    67  
    68            <div className="col-md-6">
    69              <label htmlFor="login" className="form-label">Login</label>
    70              <input type="text" className="form-control" id="login" value={login} onChange={setValue} />
    71              <small className="text-body-secondary">Full name as displayed on card</small>
    72            </div>
    73  
    74            <div className="col-md-6">
    75              <label htmlFor="password" className="form-label">Password</label>
    76              <input type="text" className="form-control" id="password" value={password} onChange={setValue} />
    77            </div>
    78  
    79            <div className="col-md-12">
    80              <label htmlFor="note" className="form-label">Add a few notes here</label>
    81              <textarea className="form-control" id="note" value={note} onChange={setValue} />
    82            </div>
    83          </div>
    84        </form>
    85        <div className="kms-secret-edit__controls">
    86          <button type="button" className="btn btn-primary kms-button-add" onClick={onSubmitButtonClick}>
    87            Save
    88          </button>
    89          <button type="button" className="btn btn-danger kms-button-add" onClick={() => navigateTo('home')}>
    90            Cancel
    91          </button>
    92        </div>
    93      </div>
    94    )
    95  }