1
// Licensed to the Software Freedom Conservancy (SFC) under one
2
// or more contributor license agreements.  See the NOTICE file
3
// distributed with this work for additional information
4
// regarding copyright ownership.  The SFC licenses this file
5
// to you under the Apache License, Version 2.0 (the
6
// "License"); you may not use this file except in compliance
7
// with the License.  You may obtain a copy of the License at
8
//
9
//   http://www.apache.org/licenses/LICENSE-2.0
10
//
11
// Unless required by applicable law or agreed to in writing,
12
// software distributed under the License is distributed on an
13
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14
// KIND, either express or implied.  See the License for the
15
// specific language governing permissions and limitations
16
// under the License.
17

18
import React, { useState } from 'react'
19
import {
20
  Button,
21
  Dialog,
22
  DialogActions,
23
  DialogContent,
24
  DialogContentText,
25
  DialogTitle,
26
  FormControl,
27
  Input,
28
  InputAdornment,
29
  InputLabel
30
} from '@mui/material'
31
import IconButton from '@mui/material/IconButton'
32
import { Visibility, VisibilityOff } from '@mui/icons-material'
33

34
interface State {
35
  amount: string
36
  password: string
37
  weight: string
38
  weightRange: string
39
  showPassword: boolean
40
}
41

42
const PasswordDialog = (props) => {
43
  const { title, children, open, openDialog, onConfirm, onCancel } = props
44
  const [values, setValues] = useState<State>({
45
    amount: '',
46
    password: '',
47
    weight: '',
48
    weightRange: '',
49
    showPassword: false
50
  })
51

52
  const handleChange = (prop: keyof State) => (event: React.ChangeEvent<HTMLInputElement>) => {
53
    setValues({ ...values, [prop]: event.target.value })
54
  }
55
  const handleClickShowPassword = () => {
56
    setValues({ ...values, showPassword: !values.showPassword })
57
  }
58

59
  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
60
    event.preventDefault()
61
  }
62

63
  const handleKeyDown = (event: React.KeyboardEvent): void => {
64
    if (event.key === 'Enter') {
65
      event.preventDefault()
66
      onConfirm(values.password)
67
    }
68
  };
69

70
  return (
71
    <Dialog
72
      open={open}
73
      onClose={() => openDialog(false)}
74
      aria-labelledby='password-dialog'
75
    >
76
      <DialogTitle id='password-dialog'>{title}</DialogTitle>
77
      <DialogContent>
78
        <DialogContentText>
79
          {children}
80
        </DialogContentText>
81
        <FormControl
82
          sx={{ margin: 1, width: '25ch' }}
83
          variant='standard'
84
        >
85
          <InputLabel
86
            htmlFor='standard-adornment-password'
87
          >
88
            Password
89
          </InputLabel>
90
          <Input
91
            id='standard-adornment-password'
92
            autoFocus
93
            margin='dense'
94
            type={values.showPassword ? 'text' : 'password'}
95
            value={values.password}
96
            inputProps={{
97
              onKeyDown: handleKeyDown
98
            }}
99
            fullWidth
100
            onChange={handleChange('password')}
101
            endAdornment={
102
              <InputAdornment position='end'>
103
                <IconButton
104
                  aria-label='toggle password visibility'
105
                  onClick={handleClickShowPassword}
106
                  onMouseDown={handleMouseDownPassword}
107
                  size='large'
108
                >
109
                  {values.showPassword ? <Visibility /> : <VisibilityOff />}
110
                </IconButton>
111
              </InputAdornment>
112
            }
113
          />
114
        </FormControl>
115
      </DialogContent>
116
      <DialogActions>
117
        <Button
118
          variant='contained'
119
          onClick={() => {
120
            openDialog(false)
121
            onCancel()
122
          }}
123
          color='secondary'
124
        >
125
          Cancel
126
        </Button>
127
        <Button
128
          variant='contained'
129
          onClick={() => {
130
            // setOpen(false)
131
            onConfirm(values.password)
132
          }}
133
          color='primary'
134
        >
135
          Accept
136
        </Button>
137
      </DialogActions>
138
    </Dialog>
139
  )
140
}
141

142
export default PasswordDialog
143

144