Repository: answerdev/answer
File: ui/src/pages/Install/components/SecondStep/index.tsx (TypeScript)

Code before:
                    number-input
                    id='sslmodeOptionsDropdown'
                    className='form-group col-lg-2 col-md-4 col-sm-8'
                  >
                    <label htmlFor ='sslmodeOptions'>
                      <span className='requiredAsterisk' />
                    </label>
                    <select id='sslmode' className='form-control'>
                      <option>require</option>
                      <option>verify-ca</option>
                    </select>
                  </div>
                  )}
                </div>
          </Form.Group>

          <Form.Group controlId="db_host" className="mb-3">
            <Form.Label>{t('db_host.label')}</Form.Label>
            <Form.Control
              required
              placeholder={t('db_host.placeholder')}
              value={data.db_host.value}
              isInvalid={data.db_host.isInvalid}
              onChange={(e) => {
                changeCallback({
                  db_host: {
                    value: e.target.value,
                    isInvalid: false,
                    errorMsg: '',
                  },
                });
              }}
            />
            <Form.Control.Feedback type="invalid">
              {data.db_host.errorMsg}
            </Form.Control.Feedback>
          </Form.Group>

          <Form.Group controlId="name" className="mb-3">
            <Form.Label>{t('db_name.label')}</Form.Label>
            <Form.Control
              required
              placeholder={t('db_name.placeholder')}
              value={data.db_name.value}
              isInvalid={data.db_name.isInvalid}
              onChange={(e) => {
                changeCallback({
                  db_name: {
                    value: e.target.value,
                    isInvalid: false,
                    errorMsg: '',

Review comment (suggestion):
1. Our UI uses bootstrap and react-bootstrap. Please adjust the UI to keep it consistent.
    ![image](https://github.com/user-attachments/assets/a8341aa8-669d-4694-8f43-f31a86798aee)
2. All copywriting in the project needs to be processed using i18n. You can refer to the existing usage in the project.
3. This feature should be displayed only when selecting PostgreSQL.

After the functions are completed, you can test your own advancedness, including UI and functions. 




Code after:
            />
            <Form.Control.Feedback type="invalid">
              {data.db_username.errorMsg}
            </Form.Control.Feedback>
          </Form.Group>

          <Form.Group controlId="db_password" className="mb-3">
            <Form.Label>{t('db_password.label')}</Form.Label>
            <Form.Control
              required
              value={data.db_password.value}
              isInvalid={data.db_password.isInvalid}
              onChange={(e) => {
                changeCallback({
                  db_password: {
                    value: e.target.value,
                    isInvalid: false,
                    errorMsg: '',
                  },
                });
              }}
            />
            <Form.Control.Feedback type="invalid">
              {data.db_password.errorMsg}
            </Form.Control.Feedback>
          </Form.Group>
          {data.db_type.value === 'postgres' && (
            <Form.Group controlId="ssl_enabled" className="mb-3">
              <Form.Label>{t('ssl_enabled.label')}</Form.Label>
              <Form.Check
                type="switch"
                label={`${
                  data.ssl_enabled.value
                    ? t('ssl_enabled_on.label')
                    : t('ssl_enabled_off.label')
                }`}
                checked={data.ssl_enabled.value}
                onChange={(e) => {
                  changeCallback({
                    ssl_enabled: {
                      value: e.target.checked,
                      isInvalid: false,
                      errorMsg: '',
                    },
                    ssl_mode: {
                      value: 'require',
                      isInvalid: false,
                      errorMsg: '',
                    },
                    key_file: {
                      value: '',