Merge branch 'usebruno:main' into feature/1602-multipart-content-type

packages/bruno-app/src/components/CodeEditor/index.js

@@ -232,7 +232,7 @@ export default class CodeEditor extends React.Component {
         let curWord = start != end && currentLine.slice(start, end);
         //Qualify if autocomplete will be shown
         if (
-          /^(?!Shift|Tab|Enter|ArrowUp|ArrowDown|ArrowLeft|ArrowRight|\s)\w*/.test(event.key) &&
+          /^(?!Shift|Tab|Enter|Escape|ArrowUp|ArrowDown|ArrowLeft|ArrowRight|\s)\w*/.test(event.key) &&
           curWord.length > 0 &&
           !/\/\/|\/\*|.*{{|`[^$]*{|`[^{]*$/.test(currentLine.slice(0, end)) &&
           /(?<!\d)[a-zA-Z\._]$/.test(curWord)

packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/StyledWrapper.js

@@ -9,7 +9,7 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.colors.text.yellow};
   }
 
-  input {
+  .non-passphrase-input {
     width: 300px;
   }
 

packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js

@@ -3,6 +3,8 @@ import { IconCertificate, IconTrash, IconWorld } from '@tabler/icons';
 import { useFormik } from 'formik';
 import { uuid } from 'utils/common';
 import * as Yup from 'yup';
+import { IconEye, IconEyeOff } from '@tabler/icons';
+import { useState } from 'react';
 
 import StyledWrapper from './StyledWrapper';
 
@@ -29,6 +31,8 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
     formik.values[e.name] = e.files[0].path;
   };
 
+  const [passwordVisible, setPasswordVisible] = useState(false);
+
   return (
     <StyledWrapper className="w-full h-full">
       <div className="text-xs mb-4 text-muted">Add client certificates to be used for specific domains.</div>
@@ -63,7 +67,7 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
             type="text"
             name="domain"
             placeholder="*.example.org"
-            className="block textbox"
+            className="block textbox non-passphrase-input"
             onChange={formik.handleChange}
             value={formik.values.domain || ''}
           />
@@ -79,7 +83,7 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
             id="certFilePath"
             type="file"
             name="certFilePath"
-            className="block"
+            className="block non-passphrase-input"
             onChange={(e) => getFile(e.target)}
           />
           {formik.touched.certFilePath && formik.errors.certFilePath ? (
@@ -94,7 +98,7 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
             id="keyFilePath"
             type="file"
             name="keyFilePath"
-            className="block"
+            className="block non-passphrase-input"
             onChange={(e) => getFile(e.target)}
           />
           {formik.touched.keyFilePath && formik.errors.keyFilePath ? (
@@ -105,14 +109,23 @@ const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
           <label className="settings-label" htmlFor="passphrase">
             Passphrase
           </label>
-          <input
-            id="passphrase"
-            type="password"
-            name="passphrase"
-            className="block textbox"
-            onChange={formik.handleChange}
-            value={formik.values.passphrase || ''}
-          />
+          <div className="textbox flex flex-row items-center w-[300px] h-[1.70rem] relative">
+            <input
+              id="passphrase"
+              type={passwordVisible ? 'text' : 'password'}
+              name="passphrase"
+              className="outline-none w-64 bg-transparent"
+              onChange={formik.handleChange}
+              value={formik.values.passphrase || ''}
+            />
+            <button
+              type="button"
+              className="btn btn-sm absolute right-0 l"
+              onClick={() => setPasswordVisible(!passwordVisible)}
+            >
+              {passwordVisible ? <IconEyeOff size={18} strokeWidth={1.5} /> : <IconEye size={18} strokeWidth={1.5} />}
+            </button>
+          </div>
           {formik.touched.passphrase && formik.errors.passphrase ? (
             <div className="ml-1 text-red-500">{formik.errors.passphrase}</div>
           ) : null}

packages/bruno-app/src/components/CollectionSettings/ProxySettings/index.js

@@ -4,6 +4,8 @@ import Tooltip from 'components/Tooltip';
 import StyledWrapper from './StyledWrapper';
 import * as Yup from 'yup';
 import toast from 'react-hot-toast';
+import { IconEye, IconEyeOff } from '@tabler/icons';
+import { useState } from 'react';
 
 const ProxySettings = ({ proxyConfig, onUpdate }) => {
   const proxySchema = Yup.object({
@@ -78,6 +80,7 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
         });
     }
   });
+  const [passwordVisible, setPasswordVisible] = useState(false);
 
   useEffect(() => {
     formik.setValues({
@@ -277,18 +280,27 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
             <label className="settings-label" htmlFor="auth.password">
               Password
             </label>
-            <input
-              id="auth.password"
-              type="password"
-              name="auth.password"
-              className="block textbox"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              value={formik.values.auth.password}
-              onChange={formik.handleChange}
-            />
+            <div className="textbox flex flex-row items-center w-[13.2rem] h-[1.70rem] relative">
+              <input
+                id="auth.password"
+                type={passwordVisible ? 'text' : 'password'}
+                name="auth.password"
+                className="outline-none bg-transparent w-[10.5rem]"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+                value={formik.values.auth.password}
+                onChange={formik.handleChange}
+              />
+              <button
+                type="button"
+                className="btn btn-sm absolute right-0"
+                onClick={() => setPasswordVisible(!passwordVisible)}
+              >
+                {passwordVisible ? <IconEyeOff size={18} strokeWidth={1.5} /> : <IconEye size={18} strokeWidth={1.5} />}
+              </button>
+            </div>
             {formik.touched.auth?.password && formik.errors.auth?.password ? (
               <div className="ml-3 text-red-500">{formik.errors.auth.password}</div>
             ) : null}

packages/bruno-app/src/components/Preferences/ProxySettings/index.js

@@ -6,6 +6,8 @@ import { savePreferences } from 'providers/ReduxStore/slices/app';
 
 import StyledWrapper from './StyledWrapper';
 import { useDispatch, useSelector } from 'react-redux';
+import { IconEye, IconEyeOff } from '@tabler/icons';
+import { useState } from 'react';
 
 const ProxySettings = ({ close }) => {
   const preferences = useSelector((state) => state.app.preferences);
@@ -88,6 +90,8 @@ const ProxySettings = ({ close }) => {
       });
   };
 
+  const [passwordVisible, setPasswordVisible] = useState(false);
+
   useEffect(() => {
     formik.setValues({
       enabled: preferences.proxy.enabled || false,
@@ -164,6 +168,7 @@ const ProxySettings = ({ close }) => {
             </label>
           </div>
         </div>
+
         <div className="mb-3 flex items-center">
           <label className="settings-label" htmlFor="hostname">
             Hostname
@@ -240,18 +245,27 @@ const ProxySettings = ({ close }) => {
             <label className="settings-label" htmlFor="auth.password">
               Password
             </label>
-            <input
-              id="auth.password"
-              type="password"
-              name="auth.password"
-              className="block textbox"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              value={formik.values.auth.password}
-              onChange={formik.handleChange}
-            />
+            <div className="textbox flex flex-row items-center w-[13.2rem] h-[2.25rem] relative">
+              <input
+                id="auth.password"
+                type={passwordVisible ? `text` : 'password'}
+                name="auth.password"
+                className="outline-none w-[10.5rem] bg-transparent"
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck="false"
+                value={formik.values.auth.password}
+                onChange={formik.handleChange}
+              />
+              <button
+                type="button"
+                className="btn btn-sm absolute right-0"
+                onClick={() => setPasswordVisible(!passwordVisible)}
+              >
+                {passwordVisible ? <IconEyeOff size={18} strokeWidth={2} /> : <IconEye size={18} strokeWidth={2} />}
+              </button>
+            </div>
             {formik.touched.auth?.password && formik.errors.auth?.password ? (
               <div className="ml-3 text-red-500">{formik.errors.auth.password}</div>
             ) : null}

packages/bruno-app/src/components/Sidebar/ImportCollection/index.js

@@ -79,7 +79,7 @@ const ImportCollection = ({ onClose, handleSubmit }) => {
         </div>
         <div className="flex justify-start w-full mt-4 max-w-[450px]">
           {Object.entries(options || {}).map(([key, option]) => (
-            <div className="relative flex items-start">
+            <div key={key} className="relative flex items-start">
               <div className="flex h-6 items-center">
                 <input
                   id="comments"

packages/bruno-app/src/components/Sidebar/index.js

@@ -129,7 +129,7 @@ const Sidebar = () => {
                   Star
                 </GitHubButton> */}
               </div>
-              <div className="flex flex-grow items-center justify-end text-xs mr-2">v1.13.1</div>
+              <div className="flex flex-grow items-center justify-end text-xs mr-2">v1.14.0</div>
             </div>
           </div>
         </div>

packages/bruno-app/src/pages/ErrorBoundary/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import Bruno from 'components/Bruno/index';
+
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
@@ -14,29 +16,61 @@ class ErrorBoundary extends React.Component {
   }
   componentDidCatch(error, errorInfo) {
     console.log({ error, errorInfo });
+    this.setState({ hasError: true, error, errorInfo });
   }
+
+  returnToApp() {
+    const { ipcRenderer } = window;
+    ipcRenderer.invoke('open-file');
+
+    this.setState({ hasError: false, error: null, errorInfo: null });
+  }
+
+  forceQuit() {
+    const { ipcRenderer } = window;
+    ipcRenderer.invoke('main:force-quit');
+  }
+
   render() {
     if (this.state.hasError) {
       return (
-        <div className="flex items-center justify-center p-10">
-          <div className="bg-white rounded-lg shadow-lg p-4 w-full">
+        <div className="flex text-center justify-center p-20 h-full">
+          <div className="bg-white rounded-lg p-10 w-full">
+            <div className="m-auto" style={{ width: '256px' }}>
+              <Bruno width={256} />
+            </div>
+
             <h1 className="text-2xl font-semibold text-red-600 mb-2">Oops! Something went wrong</h1>
-            <p className="text-red-600 mb-2">{this.state.error && this.state.error.toString()}</p>
-            {this.state.error && this.state.error.stack && (
-              <pre className="bg-gray-100 p-2 rounded-lg overflow-auto">{this.state.error.stack}</pre>
-            )}
+            <p className="text-red-500 mb-2">
+              If you are using an official production build: the above error is most likely a bug!
+              <br />
+              Please report this under:
+              <a
+                className="text-link hover:underline cursor-pointer ml-2"
+                href="https://github.com/usebruno/bruno/issues"
+                target="_blank"
+              >
+                https://github.com/usebruno/bruno/issues
+              </a>
+            </p>
+
             <button
               className="bg-red-500 text-white px-4 py-2 mt-4 rounded hover:bg-red-600 transition"
-              onClick={() => {
-                this.setState({ hasError: false, error: null });
-              }}
+              onClick={() => this.returnToApp()}
             >
-              Close
+              Return to App
             </button>
+
+            <div className="text-red-500 mt-3">
+              <a href="" className="hover:underline cursor-pointer" onClick={this.forceQuit}>
+                Force Quit
+              </a>
+            </div>
           </div>
         </div>
       );
     }
+
     return this.props.children;
   }
 }

packages/bruno-app/src/providers/App/useTelemetry.js

@@ -60,7 +60,7 @@ const trackStart = () => {
     event: 'start',
     properties: {
       os: platformLib.os.family,
-      version: '1.13.1'
+      version: '1.14.0'
     }
   });
 };