Merge pull request #21 from ashirrwad/fpm-security

Added support for stdlib and fpm

Author: everythingfunctional

Backend/Docker/Dockerfile

@@ -5,7 +5,23 @@ FROM alpine:latest
 RUN apk add --no-cache bash bash-doc bash-completion
 RUN apk add --no-cache musl-dev
 RUN apk add --no-cache gfortran
+RUN apk add git
+RUN apk add wget
 
-#Assigning default directory
 WORKDIR /fortran
+#Fetching FPM from releases
+RUN wget https://github.com/fortran-lang/fpm/releases/download/v0.6.0/fpm-0.6.0-linux-x86_64 -4 
+RUN mv fpm-0.6.0-linux-x86_64 fpm
+#Setup for FPM 
+RUN chmod u+x fpm
+RUN mkdir playground
+RUN mkdir playground/app 
+RUN mkdir playground/libraries
 
+#Fetching libraries
+WORKDIR /fortran/playground/libraries
+#Setting up stdlib
+RUN git clone https://github.com/fortran-lang/stdlib.git
+WORKDIR /fortran/playground/libraries/stdlib
+RUN git checkout stdlib-fpm
+WORKDIR /fortran/playground

Backend/File.f90

@@ -8,5 +8,6 @@ flask = "*"
 docker = "*"
 flask-cors = "*"
 pyyaml = "*"
+tomlkit = "*"
 
 [dev-packages]

Backend/Pipfile

@@ -6,6 +6,8 @@
 import tarfile
 import yaml
 import json
+import tomlkit
+
 app = Flask(__name__)
 
 cors = CORS(app)
@@ -14,7 +16,7 @@
 
 # Starting container
 client = docker.from_env()
-container = client.containers.run("playground-small", tty=True, detach=True, network_disabled=True, mem_limit="16g")
+container = client.containers.run("playground-f", tty=True, detach=True, network_disabled=True, mem_limit="16g")
 
 #Converting tutorial YAML
 with open('tutorial.yml', 'r') as file:
@@ -25,13 +27,22 @@
 
 
 # Editing the file with code inside editor
-def edit_file(code, input=""):
-    Fortran_file = open("./File.f90", "w+")
+def edit_file(code, input, libs):
+    Fortran_file = open("./main.f90", "w+") #main source code from editor
     Fortran_file.write(code)
     Fortran_file.close()
-    program_input = open("./program_input.txt", "w+")
+    program_input = open("./program_input.txt", "w+") #user input
     program_input.write(input)
     program_input.close()
+    #Generating fpm.toml for fpm processing
+    with open("fpm.toml", mode="rt", encoding="utf-8") as fp:
+        fpm = tomlkit.load(fp)
+    if "stdlib" in libs:
+        fpm["dependencies"] = {'stdlib' : {'path' : "libraries/stdlib"}}
+    else:
+        fpm["dependencies"] = {}
+    with open("fpm.toml", mode="wt", encoding="utf-8") as fp:
+        tomlkit.dump(fpm, fp)
 
 # Copying file with fortran code to container
 def copy_to(src, dst, container):
@@ -52,17 +63,12 @@ def copy_to(src, dst, container):
 
 # Executing code inside container and getting it's output
 def execute_code_in_container():
-    copy_to("./File.f90", "/fortran/File.f90", container)
-    copy_to("./program_input.txt", "/fortran/program_input.txt", container)
-    executable = container.exec_run(
-        "gfortran File.f90 -o executed_file.o", demux=True
-    )
-    if executable.exit_code == 0:
-        a = container.exec_run(
-            'sh -c "cat program_input.txt | timeout 15s ./executed_file.o"', demux=True
-        )
-    else:
-        a = executable
+    copy_to('./main.f90', '/fortran/playground/app/main.f90', container)
+    copy_to('./program_input.txt', '/fortran/playground/program_input.txt', container)
+    copy_to('./fpm.toml','/fortran/playground/fpm.toml', container)
+    container.exec_run('sh -c "/fortran/fpm build"')
+    a = container.exec_run('sh -c "cat program_input.txt | timeout 15s /fortran/fpm run"',demux=True)
+
     return a
 
 
@@ -71,18 +77,14 @@ def execute_code_in_container():
 @cross_origin()
 def run_code():
     data = request.get_json()
-    edit_file(data["code"], data["programInput"])
+    edit_file(data["code"], data["programInput"], data["libs"])
     code_result = execute_code_in_container()
-    if code_result.exit_code == 0:
-        if code_result.output[0] == None:
-            output = jsonify({"executed": ""})
-            return output, 202
-
-        print(code_result.output[0].decode())
-        output = jsonify({"executed": code_result.output[0].decode()})
-    else:
-        print(code_result.output[1].decode())
-        output = jsonify({"executed": code_result.output[1].decode()})
+    if code_result.output[0] == None:
+        output = jsonify({"executed": ""})
+        return output, 202
+    output = jsonify({"executed": code_result.output[0].decode()})
+    print(code_result.output)
+    
 
     return output, 202
 

Backend/app.py

@@ -0,0 +1,13 @@
+name = "playground"
+author = "Ashirwad Mishra"
+maintainer = "[email protected]"
+
+[build]
+auto-executables = true
+auto-tests = true
+auto-examples = true
+
+[install]
+library = false
+
+[dependencies]

Backend/fpm.toml

@@ -6,7 +6,7 @@ An interactive Fortran playground
 # Flask API
 1. Install Docker
 2. Build docker image (Switch to docker directory)
-``` docker build -t playground-small .``` 
+``` docker build -t playground-f .``` 
 3. Install pipenv to manage packages 
 ```pip install pipenv```
 4. Switch to backend directory and 

README.md

@@ -12,7 +12,7 @@
   padding: 0.2rem;
   display:  flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: space-around;
 
 }
 

frontend/src/App.css

@@ -12,19 +12,44 @@ import RunCode from './run.png'
 import ResetCode from './reset.png'
 import InputBox from './InputBox';
 import TutorialCard from './TutorialCard';
+import Modal from 'react-bootstrap/Modal';
+import Form from 'react-bootstrap/Form';
+
 
 function NewlineText(props) {
   const text = props.text;
   return <div className='output-formmating'>{text}</div>;
 }
 
+var libs = []
 
 function App() {
   const [ text, setText ] = useState('') //State to store editor code
   const [output, setOutput] = useState('')//State to store output
   const [isLoading, setIsLoading] = useState(false);//Loading animations
-  const [ input, setInput ] = useState('')
-  const [inputOn, setinputOn] = useState(false)
+  const [ input, setInput ] = useState('') // user input
+  const [inputOn, setinputOn] = useState(false) // toggle for input button
+  const [show, setShow] = useState(false); // library modal toggle
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+  const [stdlibOn, setstdlibOn] = useState(false); // state to store package info
+
+  {/*switch toggle for stdlib */}
+  const onSwitchAction = () => {
+    setstdlibOn(!stdlibOn);
+    if(!stdlibOn){
+      libs.push("stdlib")
+    }
+    else{
+      if(libs.includes("stdlib")){
+        libs = libs.filter(item => item !== "stdlib")
+
+      }
+    }
+
+  };
+  
+
 
 
   const handleInputChange = (e) => {
@@ -33,6 +58,7 @@ function App() {
     console.log(input)
   };
 
+  //inputbox toggle
   const handleInputBox = (e) =>{
     {inputOn ? setinputOn(false) : setinputOn(true)}
     //setinputOn(true)
@@ -43,11 +69,12 @@ function App() {
     setOutput('')
     setIsLoading(true);
       // POST request using axios inside useEffect React hook
-            await axios.post('http://127.0.0.1:5000/run', {code : text, programInput: input})
+            await axios.post('http://127.0.0.1:5000/run', {code : text, programInput: input, libs: libs})
           .then((response) => {setOutput(response.data.executed)});
           setIsLoading(false);
   }
 
+    //reset code button
   const resetCode = () => {
     setText("")
   }
@@ -77,6 +104,10 @@ function App() {
           background-color: #009900;
           color: white;
         }
+        .btn-run:focus{
+          background-color: #734f96;
+          color: white;
+        }
         `}
         </style>
 
@@ -98,12 +129,45 @@ function App() {
             </Card.Body>
           </Card>
 
+
+          {/*Tutorial Card Component */}
           <TutorialCard />
           {/* Input Box to provide input for program */}
-          {/*<InputBox value={input} onChange={handleInputChange}/> */}
-          <Button onClick={handleInputBox}>INPUT</Button>
-          {inputOn ? <InputBox value={input} onChange={handleInputChange}/> : null}
-          
+          <div>
+          <Button onClick={handleInputBox}>Input</Button>
+          {inputOn ? <InputBox value={input} onChange={handleInputChange}/> : null} {/*toggle for input */}
+
+                
+            <Button variant="primary" onClick={handleShow}>
+              Libraries
+            </Button>
+          {/*Library selector pop-up modal */}
+            <Modal show={show} onHide={handleClose}>
+              <Modal.Header closeButton>
+                <Modal.Title>Packages</Modal.Title>
+              </Modal.Header>
+              <Modal.Body>Please select the packages you want
+                    <Form>
+                            <Form.Check 
+                              type="switch"
+                              id="custom-switch"
+                              label="stdlib"
+                              onChange={onSwitchAction}
+                              checked={stdlibOn}
+                            />
+                    </Form>
+              </Modal.Body>
+              <Modal.Footer>
+                <Button variant="secondary" onClick={handleClose}>
+                  Close
+                </Button>
+                <Button variant="primary" onClick={handleClose}>
+                  Save Changes
+                </Button>
+              </Modal.Footer>
+            </Modal>
+          </div>
+
       </div>
 
       </div>

frontend/src/App.js

@@ -25,7 +25,7 @@ function TutorialCard(props) {
     }
   }
   return (
-    <Card style={{ width: '100%', height: '100%' }} className="overflow-auto">
+    <Card style={{ width: '100%', height: '50%' }} className="overflow-auto">
 
       <Card.Body>
         <Card.Title>{Tutorial[exercise].title}</Card.Title>