feat(jans-tarp): user should be allowed to paste an SSA (or specify a…

… file from disk) in DCR form #6161 (#6467)

* feat: user should be allowed to paste an SSA (or specify a file from disk) in DCR form #6161

Signed-off-by: Arnab Dutta <arnab.bdutta@gmail.com>

* feat: user should be allowed to paste an SSA (or specify a file from disk) in DCR form #6161

Signed-off-by: Arnab Dutta <arnab.bdutta@gmail.com>

* feat: user should be allowed to paste an SSA (or specify a file from disk) in DCR form #6161

Signed-off-by: Arnab Dutta <arnab.bdutta@gmail.com>

---------

Signed-off-by: Arnab Dutta <arnab.bdutta@gmail.com>

demos/jans-tarp/package.json

@@ -32,13 +32,16 @@
     "adm-zip": "^0.5.10",
     "autoprefixer": "^10.4.7",
     "axios": "^1.4.0",
+    "jwt-decode": "^4.0.0",
     "moment": "^2.29.4",
     "postcss": "^8.4.14",
     "qs": "^6.11.2",
     "react-datepicker": "^4.12.0",
+    "react-dropzone": "^14.2.3",
     "react-router-dom": "6.2",
     "react-select": "^5.7.3",
     "react-spinner-overlay": "^0.1.33",
+    "styled-components": "^6.1.0",
     "uuid": "^9.0.0"
   }
 }

demos/jans-tarp/src/options/StyledDropzone.tsx

@@ -0,0 +1,77 @@
+import React, { useEffect, useCallback, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import styled from 'styled-components';
+
+const getColor = (props) => {
+    if (props.isDragAccept) {
+        return '#00e676';
+    }
+    if (props.isDragReject) {
+        return '#ff1744';
+    }
+    if (props.isFocused) {
+        return '#2196f3';
+    }
+    return '#eeeeee';
+}
+
+const Container = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  border-width: 2px;
+  border-radius: 2px;
+  border-color: ${props => getColor(props)};
+  border-style: dashed;
+  background-color: #fafafa;
+  color: #bdbdbd;
+  outline: none;
+  transition: border .24s ease-in-out;
+  margin-bottom: 30px;
+`;
+
+function StyledDropzone(props) {
+
+    const [selectedFileName, setSelectedFileName] = useState(null)
+    const [selectedFile, setSelectedFile] = useState(null)
+
+    useEffect(() => {
+        if (selectedFile) {
+            props.submitFile(selectedFile)
+        }
+    }, [selectedFile])
+
+    const onDrop = useCallback(acceptedFiles => {
+        const file = acceptedFiles[0]
+        setSelectedFileName(file.name)
+        setSelectedFile(file)
+    }, [])
+    const { getRootProps,
+        getInputProps,
+        isFocused,
+        isDragAccept,
+        isDragReject } = useDropzone({
+            onDrop,
+            accept: {
+                'application/jwt': ['.jwt'],
+            },
+        })
+
+
+    return (
+        <div>
+            <Container {...getRootProps({ isFocused, isDragAccept, isDragReject })}>
+                <input {...getInputProps()} />
+                {selectedFileName ? (
+                    <strong>Selected File : {selectedFileName}</strong>
+                ) : (
+                    <p>Drag &apos;n&apos; drop .jwt file here, or click to select file</p>
+                )}
+            </Container>
+        </div>
+    );
+}
+
+export default StyledDropzone;

demos/jans-tarp/src/options/options.css

@@ -95,7 +95,7 @@ fieldset {
 
 legend {
   font-size: 1.4em;
-  margin-bottom: 10px;
+  margin-bottom: 20px;
 }
 
 label {
@@ -142,7 +142,7 @@ label.light {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
+  align-items: left;
   min-width: 600px;
   font-size: 15px;
   padding: 2rem;