fix: remove protocol before showing on popup screen

thedevs-network · Mar 16, 2020 · a2b9bc1 · a2b9bc1
1 parent 1077348
commit a2b9bc1
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 30 deletions.
diff --git a/src/Popup/PopupBody.tsx b/src/Popup/PopupBody.tsx
@@ -3,6 +3,7 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import QRCode from 'qrcode.react';
 
 import Icon from '../components/Icon';
+import { removeProtocol } from '../util/link';
 
 export type ProcessedRequestProperties = {
     error: boolean | null;
@@ -27,8 +28,8 @@ const PopupBody: React.FC<PopupBodyProperties> = ({ requestProcessed: { message,
     return (
         <>
             <div className="popup__body">
-                {!error && (
-                    <div>
+                {!error ? (
+                    <>
                         <button
                             className="icon__button"
                             type="button"
@@ -38,27 +39,30 @@ const PopupBody: React.FC<PopupBodyProperties> = ({ requestProcessed: { message,
                         >
                             <Icon className="qr__icon" name="qrcode" />
                         </button>
-
+                        {!copied ? (
+                            <CopyToClipboard
+                                text={message}
+                                onCopy={(): void => {
+                                    return setCopied(true);
+                                }}
+                            >
+                                <Icon className="copy__icon" name="copy" />
+                            </CopyToClipboard>
+                        ) : (
+                            <Icon name="tick" />
+                        )}
                         <CopyToClipboard
                             text={message}
                             onCopy={(): void => {
                                 return setCopied(true);
                             }}
                         >
-                            {!copied ? (
-                                <button className="icon__button" type="button">
-                                    <Icon className="copy__icon" name="copy" />
-                                </button>
-                            ) : (
-                                <button type="button">
-                                    <Icon name="tick" />
-                                </button>
-                            )}
+                            <p>{removeProtocol(message)}</p>
                         </CopyToClipboard>
-                    </div>
+                    </>
+                ) : (
+                    <p>{message}</p>
                 )}
-
-                <p>{message}</p>
             </div>
 
             {!error && QRView && (

diff --git a/src/Popup/PopupForm.tsx b/src/Popup/PopupForm.tsx
@@ -88,7 +88,7 @@ const PopupForm = withFormik<PopupFormProperties, PopupFormValuesProperties>({
         // ToDo: Remove special symbols from password & customurl fields
 
         // password validation
-        if (values.password && values.password.trim().length < 1) {
+        if (values.password && values.password.trim().length < 3) {
             errors.password = 'Password must be atleast 3 characters';
         }
         // custom url validation
@@ -153,9 +153,10 @@ const PopupForm = withFormik<PopupFormProperties, PopupFormValuesProperties>({
             const {
                 data: { link },
             } = response;
+            const trimmedLink: string = link.replace('https://', '');
 
             // show shortened url
-            setRequestProcessed({ error: false, message: link });
+            setRequestProcessed({ error: false, message: trimmedLink });
         } else {
             // errored
             setRequestProcessed({ error: true, message: response.message });

diff --git a/src/Popup/styles.scss b/src/Popup/styles.scss
@@ -13,6 +13,7 @@ body {
 
   .popup__form {
     padding: 15px 15px;
+
     h4 {
       padding: 10px 0px 5px 0px;
       font-size: 0.9em;
@@ -41,24 +42,24 @@ body {
     display: flex;
     justify-content: center;
     padding: 15px 15px 0px 15px;
+
     p {
       padding-top: 5px;
       text-decoration: underline;
       font-size: 1.2em;
     }
-    .icon__button {
+
+    .copy__icon {
+      display: block;
+      padding-right: 5px;
+      cursor: pointer;
+    }
+
+    .qr__icon {
+      display: block;
+      padding-right: 5px;
+      padding-top: 5px;
       cursor: pointer;
-      .copy__icon {
-        display: block;
-        padding-right: 5px;
-        cursor: pointer;
-      }
-      .qr__icon {
-        display: block;
-        padding-right: 5px;
-        padding-top: 5px;
-        cursor: pointer;
-      }
     }
   }
 
@@ -92,9 +93,10 @@ body {
       background-color: transparent !important;
       cursor: pointer;
     }
+
     .refresh__icon {
       cursor: pointer;
       padding-right: 5px;
     }
   }
-}
+}
diff --git a/src/util/link.ts b/src/util/link.ts
@@ -0,0 +1,3 @@
+export const removeProtocol = (link: string): string => {
+    return link.replace(/^https?:\/\//, '');
+};