347 |
348 | You probably can't (yet)! To fix that, you need to expose port 8080 in the container to the host and port 8080 in the host to the external world so the website is accessible via the Internet. If you're not familiar with what publishing ports means in Docker, [read the Container networking](https://docs.docker.com/engine/reference/commandline/run/) page.
349 |
350 | To publish ports and make the website accessible via the Internet, you will need to stop the container and run it again using a certain Docker CLI option to publish the aforementioned ports.
351 |
352 | ## Capture The Flag
353 |
354 | Once you're able to successfully load the website, click on the blue **Login** button. At the moment, you will not be able to log in because the client application is not connected to the backend application. Let's find out which URL the website is calling whenever you click on the Login button.
355 |
356 | To find that out, [open your Browser's developer tools](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools). Look for a tab called **Network** and click on it. Now that you can see all API calls being made by the website, click on the Login button again and you should see an API call to the `authenticate` endpoint being made and failing. What's the **domain AND port** the website is sending the POST request to? That's the flag! For example, if the website was sending a request to `http://example.com:5656/authenticate`, the flag would be `example.com:5656`. Submit the correct flag (domain and port separated by colon) using the format `DevSlopCTF{FLAG}` to earn **2700 points**! And remember that the flag is case sensitive.
357 |
358 | ## Available Hints
359 |
360 | Here are the available hints for this task and how much points you will lose by unlocking them:
361 |
362 | * How to obtain the instance's public IP address - **700 points**
363 | * How to expose a container port to the host and making it accessible via the Internet - **800 points**
364 |
365 | ### Hints
366 |
367 | #### Obtaining the instance's public IP address (700 points)
368 |
369 | To obtain the public IP of the ec2 instance, run the following command in your terminal:
370 |
371 | ```
372 | curl ifconfig.co
373 | ```
374 |
375 | Use the IP above to access the front-end.
376 |
377 | #### Exposing a container port to the host and making it accessible via the Internet (800 points)
378 |
379 | **Hint 1**
380 |
381 | To expose container ports to the host and making them available via the Internet, use the `-p` option. For example to expose port 80 in a container and map it to port 9999 in the Docker host, you'd specify `-p 9999:80` in the `docker run` command. However, note that this is only an example. Read the task to find out which port to expose.
382 |
383 | **Hint 2**
384 |
385 | After running the container, you can have a look at the ports being exposed. If you see the following:
386 |
387 | ```
388 | 127.0.0.1:8080->8080/tcp
389 | ```
390 |
391 | That means the container can only be accessed through port 8080 from within the host. If you want the container to be accessible from outside the host, the output should look like:
392 |
393 | ```
394 | 0.0.0.0:8080->8080/tcp
395 | ```
396 |
397 | **Hint 3**
398 |
399 | The only ports allowed to receive traffic from outside our EC2 instances are 8080 and 7777. If you run your container on any other port and it needs to be able to receive traffic from outside, it won't work.
400 |
401 | # Task 4: Building and Running The Backend (5000 Points)
402 |
403 | Now things will start to get interesting! Let's talk about Docker networks. **Read the first 3 (three) paragraphs** of the following documentation page: https://docs.docker.com/network/bridge/
404 |
405 | ## Bridge Network
406 |
407 | Before we start developing a Dockerfile for the Backend application, let's create a bridge network for the Backend container. **In the Docker host**, use the command `docker network` to `create` a network called `backend` (do not run this command in the Cloud9 environment, you need to run it in the docker host).
408 |
409 | After successfully creating the network, list the networks (you should see the following):
410 |
411 | ```
412 | $ docker network list
413 | NETWORK ID NAME DRIVER SCOPE
414 | e52edcff0c1e backend bridge local
415 | 57c19bd7421b bridge bridge local
416 | 4a3cd7ddc34d host host local
417 | 3895c7b02506 none null local
418 | ```
419 |
420 | **Go back to the Cloud9 environment to develop a Dockerfile for the Backend.**
421 |
422 | ## Dockerfile
423 |
424 | Here's the difference between the frontend and the backend directories in the repository: the frontend contains all the files necessary to run the application. But, what about the backend? It only contains an empty Dockerfile (how exciting!).
425 |
426 | The backend Dockerfile will look a bit different than the frontend's Dockerfile as you will perform a [Multi-stage build](https://docs.docker.com/develop/develop-images/multistage-build/). Here's all the information you will need in order to develop the backend's Dockerfile:
427 |
428 | * Your Dockerfile should have 2 (two) FROM statements. Both statements should use this image: **alpine:3.12**
429 | * The first stage in your Dockerfile should install git (use the command: `apk add --no-cache git`) and clone the backend repository: [https://github.com/thedojoseries/react-todo-backend](https://github.com/thedojoseries/react-todo-backend)
430 | * Once the repository is cloned, create a second stage using the same image: **alpine:3.12**.
431 | * The second stage should install Node.js and NPM (use the command: `apk add --no-cache nodejs npm`) and copy the backend repository folder from the first stage into the second stage
432 | * Once the repository is copied over, run `npm install` to install all the dependencies
433 | * The container command to run the backend application should be: `npm run server-dev`
434 |
435 | After you build the image and run the container, you should see the following:
436 |
437 | ```
438 | $ docker run test
10 |
11 |
12 |
--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mongo-express-react",
3 | "version": "1.0.0",
4 | "description": "A full stack application with React and MongoDB (Easily deployed)",
5 | "main": "index.js",
6 | "scripts": {
7 | "build": "webpack -p",
8 | "dev": "webpack-dev-server --host 0.0.0.0 --port 8080"
9 | },
10 | "dependencies": {
11 | "@babel/plugin-proposal-class-properties": "^7.4.0",
12 | "axios": "^0.18.0",
13 | "body-parser": "^1.18.3",
14 | "bootstrap": "^4.1.3",
15 | "cors": "^2.8.4",
16 | "css-loader": "^2.1.1",
17 | "express": "^4.16.3",
18 | "file-loader": "^3.0.1",
19 | "history": "^4.7.2",
20 | "md5": "^2.2.1",
21 | "mongodb": "^3.1.8",
22 | "node-sass": "^4.11.0",
23 | "react": "^16.4.2",
24 | "react-dom": "^16.5.0",
25 | "react-redux": "^5.0.7",
26 | "react-router": "^4.3.1",
27 | "react-router-dom": "^4.3.1",
28 | "redux": "^4.0.0",
29 | "redux-logger": "^3.0.6",
30 | "redux-saga": "^0.16.2",
31 | "sass-loader": "^7.1.0",
32 | "url-loader": "^1.1.2",
33 | "uuid": "^3.3.2",
34 | "webpack": "^4.17.2"
35 | },
36 | "engines": {
37 | "node": "9.2.0"
38 | },
39 | "devDependencies": {
40 | "@babel/core": "^7.0.0",
41 | "@babel/node": "^7.0.0",
42 | "@babel/preset-env": "^7.0.0",
43 | "@babel/preset-react": "^7.0.0",
44 | "@babel/register": "^7.0.0",
45 | "babel-loader": "^8.0.2",
46 | "concurrently": "^4.0.1",
47 | "cross-env": "^5.2.0",
48 | "highground": "^1.0.3-beta",
49 | "jest": "^23.6.0",
50 | "mongodb": "^3.1.10",
51 | "nodemon": "^1.18.4",
52 | "style-loader": "^0.23.0",
53 | "webpack-cli": "^3.1.2",
54 | "webpack-dev-server": "^3.1.7"
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/frontend/src/app/Assets/backgrond.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thedojoseries/docker-ctf/9cecff38ded6b4f58f7b0a3384ed4378abfcaf66/frontend/src/app/Assets/backgrond.jpg
--------------------------------------------------------------------------------
/frontend/src/app/components/AddTodo.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { TodoForm } from './TodoForm'
3 | import { Link } from 'react-router-dom';
4 |
5 | export const AddTodo = () => {
6 | return (
7 |
8 |
10 | )
11 | }
--------------------------------------------------------------------------------
/frontend/src/app/components/App.scss:
--------------------------------------------------------------------------------
1 |
2 | .app-container{
3 | background-image: url(../Assets/backgrond.jpg);
4 | background-size: cover;
5 | background-repeat: no-repeat;
6 | display: flex;
7 | align-items: center;
8 | justify-content: center;
9 | }
10 | .container {
11 | overflow: hidden;
12 | height: 100%;
13 | padding-top:30px;
14 | display: flex;
15 | flex-direction: column;
16 | align-items: center;
17 | }
18 | .board-dimentions {
19 | width: 100%;
20 | height: 100%;
21 | padding-bottom: 60px;
22 | }
23 | .container-height{
24 | height: 90%;
25 | }
26 | .scroll {
27 | overflow-y: scroll;
28 | background-color: rgba(208, 208, 208, 0.6);
29 | }
30 | .col {
31 | width: 30vw;
32 | }
33 | .todo-card-details{
34 | display: flex;
35 | flex-direction: column;
36 | }
37 | .header{
38 | margin: 8px;
39 | }
40 | .center-title{
41 | text-align: center;
42 | }
43 | .login-card {
44 | // width: 200vw;
45 | min-height: auto;
46 | max-width:90%;
47 | max-height: fit-content;
48 | }
49 | .card {
50 | border: none;
51 | margin: 8px;
52 | }
53 | .todo-card:hover{
54 | background-color: rgba(254, 239, 219, 0.7);
55 | //background-color: rgba(10, 6, 0, 0.2);
56 | }
57 |
58 | .todo-form{
59 | background-color: white;
60 | width: 60vw;
61 | padding: 50px;
62 | }
63 |
64 | .flex {
65 | display: flex
66 | }
67 |
68 | .flex-center {
69 | align-self: center;
70 | }
71 |
72 | .border {
73 | border: 1px solid #0000ff1c;
74 | }
75 |
76 | .form {
77 | align-items: baseline;
78 | margin: 30px;
79 | }
80 |
81 | .flex-column {
82 | display: flex;
83 | flex-direction: column;
84 | }
85 |
86 | .flex-end{
87 | align-self: flex-end;
88 | }
89 |
90 | .input {
91 | margin-left: 10px;
92 | }
93 | .title {
94 | align-self: center;
95 | }
96 | .label {
97 | font-weight: bold;
98 | }
--------------------------------------------------------------------------------
/frontend/src/app/components/Login.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * The login route component contains a simple form that checks authentication data via the server.
3 | */
4 |
5 | import React from 'react';
6 | import * as mutations from '../store/mutations';
7 | import { connect } from 'react-redux';
8 | import { Link } from 'react-router-dom';
9 |
10 | const LoginComponent = ({authenticateUser,authenticated})=>(
11 |
12 |
33 | );
34 |
35 | const mapStateToProps = ({session})=>({
36 | authenticated:session.authenticated
37 | });
38 |
39 | const mapDispatchToProps = (dispatch)=>({
40 | authenticateUser(e){
41 | e.preventDefault();
42 | let username = e.target[`username`].value;
43 | let password = e.target[`password`].value;
44 | dispatch(mutations.requestAuthenticateUser(username,password));
45 | }
46 | });
47 |
48 | export const ConnectedLogin = connect(mapStateToProps, mapDispatchToProps)(LoginComponent);
--------------------------------------------------------------------------------
/frontend/src/app/components/Main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Route, Router } from 'react-router-dom';
3 | import { Provider } from 'react-redux';
4 | import { ConnectedNavigation } from './Navigation';
5 | import { ConnectedLogin } from './Login';
6 | import { ConnectedSignup } from './Signup';
7 | import { AddTodo } from './AddTodo';
8 | import { UpdateTodo } from './UpdateTodo';
9 | import { store } from '../store';
10 | import { history } from '../store/history';
11 | import { Redirect } from 'react-router';
12 | import { TodoApp } from './TodoContainer';
13 |
14 | const RouteGuard = Component =>({match})=>
15 | !store.getState().session.authenticated ?
16 | 13 | Please login 14 |
15 |16 | 17 | Don't have an account? Sign up. 18 | 19 |
20 | 32 |
23 |
26 |
29 |
37 |
38 |
15 | { authenticated ?
16 |
17 | Welcome,
19 | : null
20 | }
21 |
22 | );
23 |
24 | const mapStateToProps = ({session})=>({
25 | id:session.id,
26 | authenticated:session.authenticated == mutations.AUTHENTICATED
27 | });
28 |
29 | export const ConnectedNavigation = connect(mapStateToProps)(Navigation);
30 |
31 |
--------------------------------------------------------------------------------
/frontend/src/app/components/Signup.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import * as mutations from '../store/mutations';
3 | import { connect } from 'react-redux';
4 |
5 | const SignupComponent = ({requestCreateUserAccount,authenticated})=>{
6 | return
17 | Welcome, !
18 |
19 | : null
20 | }
21 |
7 |
26 | };
27 |
28 | const mapStateToProps = state=>({
29 | authenticated:state.session.authenticated
30 | });
31 |
32 | const mapDispatchToProps = (dispatch)=>({
33 | requestCreateUserAccount(e){
34 | e.preventDefault();
35 | let username = e.target[`username`].value;
36 | let password = e.target[`password`].value;
37 | dispatch(mutations.requestCreateUserAccount(username,password));
38 | }
39 | })
40 |
41 | export const ConnectedSignup = connect(mapStateToProps, mapDispatchToProps)(SignupComponent);
--------------------------------------------------------------------------------
/frontend/src/app/components/TodoContainer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { TodoList} from './TodoList';
3 | import axios from 'axios';
4 | import './App.scss';
5 | import { Link } from 'react-router-dom';
6 |
7 | // Contaner Component
8 | // Todo Id
9 | window.id = 1;
10 | export class TodoApp extends React.Component{
11 | constructor(props){
12 | // Pass props to parent class
13 | super(props);
14 | // Set initial state
15 | this.state = {
16 | tasks: []
17 | }
18 | this.apiUrl = `http://__BACKEND_IP__:7777`;
19 | }
20 |
21 |
22 | // Handle remove
23 |
24 | // Lifecycle method
25 | componentDidMount(){
26 | // Make HTTP reques with Axios
27 | axios.get(this.apiUrl + '/tasks')
28 | .then((res) => {
29 | // Set state with result
30 | this.setState({tasks: this.groupTasks(res.data)});
31 | });
32 | }
33 |
34 | groupTasks(tasks) {
35 | var groups = tasks.reduce((tasksSoFar, task) => {
36 | if (!tasksSoFar[task.status]) tasksSoFar[task.status] = [];
37 | tasksSoFar[task.status].push(task);
38 | return tasksSoFar;
39 | }, []);
40 | return groups;
41 | }
42 |
43 | render(){
44 | // Render JSX
45 | return (
46 | 8 | Complete the following form to create a new account. 9 |
10 | 11 | 24 | 25 |
47 | Add a Task
48 |
55 | )
56 | }
57 |
58 | }
59 |
60 |
--------------------------------------------------------------------------------
/frontend/src/app/components/TodoForm.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import axios from 'axios';
3 | import { Redirect } from 'react-router';
4 | import './App.scss';
5 |
6 | const statusEnum = {
7 | DONE : "Done",
8 | TODO : "To Do",
9 | InProgress : "In Progress"
10 | }
11 |
12 | export class TodoForm extends React.Component{
13 |
14 | render() {
15 | return (
16 |
49 | {Object.entries(this.state.tasks).map(group =>
50 |
52 | )}
53 |
54 |
17 | oaisjd
18 |
19 | )
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/frontend/src/app/components/TodoList.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ConnectedUsernameDisplay } from './UsernameDisplay';
3 | import { Link } from 'react-router-dom';
4 | import './App.scss';
5 |
6 | export const TodoItem = ({todo}) => {
7 | const todoDetail = {
8 | pathname: `/task/${todo._id}`,
9 | todo: todo
10 | }
11 | return (
12 |
13 |
14 |
20 | );
21 | }
22 |
23 | export const TodoList = ({todos}) => {
24 | // Map through the todos
25 | const todoNode = todos.map((todo) => {
26 | return (
15 | Title : {todo.name} {todo.isComplete ? `✓` : null}
16 | Description : {todo.description}
17 | ETA : {todo.ETA}
18 |
19 |
30 |
33 | );
34 | }
--------------------------------------------------------------------------------
/frontend/src/app/components/UpdateTodo.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { TodoForm } from './TodoForm'
3 |
4 | export class UpdateTodo extends React.Component{
5 |
6 | render() {
7 | const todo = this.props.location.todo;
8 | return (
9 | {todos[0].status}
31 | {todoNode} 32 |
10 |
11 |
12 | )
13 | }
14 | }
--------------------------------------------------------------------------------
/frontend/src/app/components/UsernameDisplay.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 |
4 | export const UsernameDisplay = ({name})=>(
5 | {name}
6 | );
7 |
8 | const mapStateToProps = (state,ownProps)=>{
9 | return state.users.find(user=>user.id===ownProps.id)
10 | };
11 | export const ConnectedUsernameDisplay = connect(mapStateToProps)(UsernameDisplay);
--------------------------------------------------------------------------------
/frontend/src/app/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { Main } from './components/Main';
4 |
5 | ReactDOM.render(
6 | ,
7 | document.getElementById("app")
8 | );
--------------------------------------------------------------------------------
/frontend/src/app/store/history.js:
--------------------------------------------------------------------------------
1 | import { createBrowserHistory } from 'history'
2 |
3 | export const history = createBrowserHistory();
--------------------------------------------------------------------------------
/frontend/src/app/store/index.js:
--------------------------------------------------------------------------------
1 | import { createStore, applyMiddleware } from 'redux';
2 | import createSagaMiddleware from 'redux-saga'
3 | import {createLogger} from 'redux-logger'
4 |
5 | import { reducer } from './reducer'
6 | import * as sagas from './sagas'
7 |
8 | const sagaMiddleware = createSagaMiddleware();
9 |
10 | export const store = createStore(
11 | reducer,
12 | applyMiddleware(createLogger(), sagaMiddleware)
13 | );
14 |
15 | for (let saga in sagas) {
16 | sagaMiddleware.run(sagas[saga]);
17 | }
--------------------------------------------------------------------------------
/frontend/src/app/store/mutations.js:
--------------------------------------------------------------------------------
1 | export const SET_TASK_COMPLETE = `SET_TASK_COMPLETE`;
2 | export const SET_TASK_GROUP = `SET_TASK_GROUP`;
3 | export const SET_TASK_NAME = `SET_TASK_NAME`;
4 | export const ADD_TASK_COMMENT = `ADD_TASK_COMMENT`;
5 | export const REQUEST_TASK_CREATION = `REQUEST_TASK_CREATION`;
6 | export const CREATE_TASK = `CREATE_TASK`;
7 | export const REQUEST_AUTHENTICATE_USER = `REQUEST_AUTHENTICATE_USER`;
8 | export const PROCESSING_AUTHENTICATE_USER = `PROCESSING_AUTHENTICATE_USER`;
9 | export const AUTHENTICATING = `AUTHENTICATING`;
10 | export const AUTHENTICATED = `AUTHENTICATED`;
11 | export const NOT_AUTHENTICATED = `NOT_AUTHENTICATED`;
12 | export const SET_STATE = `SET_STATE`;
13 | export const USERNAME_RESERVED = `USERNAME_RESERVED`;
14 | export const REQUEST_USER_ACCOUNT_CREATION = `REQUEST_USER_ACCOUNT_CREATION`;
15 |
16 | export const setTaskCompletion = (id, isComplete = true)=>({
17 | type:SET_TASK_COMPLETE,
18 | taskID:id,
19 | isComplete
20 | });
21 |
22 | export const addTaskComment = (commentID, taskID, ownerID, content)=>({
23 | type:ADD_TASK_COMMENT,
24 | id:commentID,
25 | task: taskID,
26 | owner: ownerID,
27 | content
28 | });
29 |
30 | export const requestTaskCreation = (groupID)=>({
31 | type:REQUEST_TASK_CREATION,
32 | groupID
33 | });
34 |
35 | export const createTask = (taskID, groupID, ownerID)=>({
36 | type:CREATE_TASK,
37 | taskID,
38 | groupID,
39 | ownerID
40 | });
41 |
42 | export const setTaskGroup = (taskID, groupID)=>({
43 | type:SET_TASK_GROUP,
44 | taskID,
45 | groupID
46 | });
47 |
48 | export const setTaskName = (taskID, name)=>({
49 | type:SET_TASK_NAME,
50 | taskID,
51 | name
52 | });
53 |
54 | export const requestAuthenticateUser = (username, password)=>({
55 | type:REQUEST_AUTHENTICATE_USER,
56 | username,
57 | password
58 | });
59 |
60 | export const processAuthenticateUser = (status = AUTHENTICATING, session = null)=>({
61 | type: PROCESSING_AUTHENTICATE_USER,
62 | session,
63 | authenticated: status
64 | });
65 |
66 | export const setState = (state = {})=>({
67 | type:SET_STATE,
68 | state
69 | });
70 |
71 |
72 | export const requestCreateUserAccount = (username,password)=>({
73 | type:REQUEST_USER_ACCOUNT_CREATION,
74 | username,
75 | password
76 | });
--------------------------------------------------------------------------------
/frontend/src/app/store/reducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import * as mutations from './mutations'
3 |
4 | let defaultState = {
5 | session:{},
6 | comments:[],
7 | users:[],
8 | groups:[],
9 | tasks:[]
10 | };
11 |
12 | export const reducer = combineReducers({
13 | session(userSession = defaultState.session,action){
14 | let {type,authenticated, session} = action;
15 | switch(type){
16 | case mutations.SET_STATE:
17 | return {...userSession, id: action.state.session.id};
18 | case mutations.REQUEST_AUTHENTICATE_USER:
19 | return {...userSession, authenticated:mutations.AUTHENTICATING};
20 | case mutations.PROCESSING_AUTHENTICATE_USER:
21 | return {...userSession, authenticated};
22 | default:
23 | return userSession;
24 | }
25 | },
26 | comments:(comments = defaultState.comments,action)=>{
27 | switch (action.type) {
28 | case mutations.ADD_TASK_COMMENT:
29 | let {type,owner,task,content,id} = action;
30 | return [...comments,{owner,task,content,id}];
31 | case mutations.SET_STATE:
32 | return action.state.comments;
33 | }
34 | return comments;
35 | },
36 | users:(users = defaultState.users,action)=>{
37 | switch (action.type) {
38 | case mutations.SET_STATE:
39 | return action.state.users;
40 | }
41 | return users;
42 | },
43 | groups:(groups = defaultState.groups,action)=>{
44 | switch (action.type) {
45 | case mutations.SET_STATE:
46 | return action.state.groups;
47 | }
48 | return groups;
49 | },
50 | tasks(tasks = defaultState.tasks,action){
51 | switch(action.type) {
52 | case mutations.SET_STATE:
53 | return action.state.tasks;
54 | case mutations.SET_TASK_COMPLETE:
55 | return tasks.map(task=>{
56 | return (task.id === action.taskID) ? {...task,isComplete:action.isComplete} : task;
57 | });
58 | case mutations.SET_TASK_GROUP:
59 | return tasks.map(task=>{
60 | return (task.id === action.taskID) ? {...task, group:action.groupID} : task;
61 | });
62 | case mutations.SET_TASK_NAME:
63 | return tasks.map(task=> {
64 | return (task.id === action.taskID) ? {...task, name: action.name} : task;
65 | });
66 | case mutations.CREATE_TASK:
67 | return [...tasks,{
68 | id:action.taskID,
69 | name:"New Task",
70 | group:action.groupID,
71 | owner:action.ownerID,
72 | isComplete:false
73 | }]
74 | }
75 | return tasks;
76 | }
77 | });
78 |
--------------------------------------------------------------------------------
/frontend/src/app/store/sagas.js:
--------------------------------------------------------------------------------
1 | import { take, put, select } from 'redux-saga/effects';
2 | import uuid from 'uuid';
3 | import axios from 'axios';
4 |
5 | import { history } from './history'
6 | import * as mutations from './mutations';
7 | const url = process.env.NODE_ENV === 'production' ? `` : `http://__BACKEND_IP__:7777`;
8 |
9 | export function* taskCreationSaga(){
10 | while (true){
11 | const {groupID} = yield take(mutations.REQUEST_TASK_CREATION);
12 | const ownerID = yield select(state=>state.session.id);
13 | const taskID = uuid();
14 | let mutation = mutations.createTask(taskID, groupID, ownerID);
15 | const { res } = yield axios.post(url + `/task/new`,{task:{
16 | id:taskID,
17 | group: groupID,
18 | owner: ownerID,
19 | isComplete:false,
20 | name:"New task"
21 | }});
22 | yield put(mutation);
23 | }
24 | }
25 |
26 | export function* commentCreationSaga(){
27 | while (true) {
28 | const comment = yield take (mutations.ADD_TASK_COMMENT);
29 | axios.post(url + `/comment/new`,{comment})
30 | }
31 | }
32 |
33 | export function* taskModificationSaga(){
34 | while (true){
35 | const task = yield take([mutations.SET_TASK_GROUP, mutations.SET_TASK_NAME,mutations.SET_TASK_COMPLETE]);
36 | axios.post(url + `/task/update`,{
37 | task:{
38 | id:task.taskID,
39 | group:task.groupID,
40 | name:task.name,
41 | isComplete:task.isComplete
42 | }});
43 | }
44 | }
45 |
46 | export function* userAuthenticationSaga(){
47 | while (true){
48 | const {username,password} = yield take(mutations.REQUEST_AUTHENTICATE_USER);
49 | try {
50 | const { data } = yield axios.post(url + `/authenticate`,{username,password});
51 | yield put(mutations.setState(data.state));
52 | yield put(mutations.processAuthenticateUser(mutations.AUTHENTICATED, {
53 | id:"U1", // todo... get ID from response
54 | token:data.token
55 | }));
56 | history.push(`/dashboard`);
57 | } catch (e) {
58 | /* catch block handles failed login */
59 | yield put(mutations.processAuthenticateUser(mutations.NOT_AUTHENTICATED));
60 | }
61 | }
62 | }
63 |
64 |
65 | export function* userAccountCreationSaga(){
66 | while (true) {
67 | const {username, password } = yield take(mutations.REQUEST_USER_ACCOUNT_CREATION);
68 | try {
69 | const { data } = yield axios.post(url + `/user/create`, {username,password});
70 |
71 | yield put(mutations.setState({...data.state,session:{id:data.userID}}));
72 | yield put(mutations.processAuthenticateUser(mutations.AUTHENTICATED));
73 |
74 | history.push('/dashboard');
75 |
76 | } catch (e) {
77 | console.error("Error",e);
78 | yield put(mutations.processAuthenticateUser(mutations.USERNAME_RESERVED));
79 | }
80 | }
81 | }
--------------------------------------------------------------------------------
/frontend/src/app/store/sagas.mock.js:
--------------------------------------------------------------------------------
1 | import { take, put, select } from 'redux-saga/effects';
2 | import { delay } from 'redux-saga';
3 | import * as mutations from './mutations';
4 | import uuid from 'uuid';
5 | import { }from 'react-router'
6 | import { history } from './history';
7 |
8 | /**
9 | * Reducers cannot have any randomness (the must be deterministic)
10 | * Since the action of creating a task involves generating a random ID, it is not pure.
11 | * When the response to an action is not deterministic in a Redux application, both Sagas and Thunks are appropriate.
12 | */
13 | export function* taskCreationSaga(){
14 | while (true){
15 | const {groupID} = yield take(mutations.REQUEST_TASK_CREATION);
16 | const ownerID = yield select(state=>state.session.id);
17 | const taskID = uuid();
18 | yield put(mutations.createTask(taskID, groupID, ownerID));
19 | }
20 | }
21 |
22 | export function* userAuthenticationSaga(){
23 | while (true){
24 | const {username,password} = yield take(mutations.REQUEST_AUTHENTICATE_USER);
25 | yield delay(250);
26 | yield put(mutations.processAuthenticateUser(mutations.AUTHENTICATED, {
27 | id:"U1",
28 | token:"ABCD-1234",
29 | }));
30 |
31 | history.push(`/dashboard`)
32 | }
33 | }
--------------------------------------------------------------------------------
/frontend/webpack.config.js:
--------------------------------------------------------------------------------
1 | // import path from 'path';
2 |
3 | const path = require("path");
4 | // export default {
5 | module.exports = {
6 | mode: 'development',
7 | entry: path.resolve(__dirname, 'src','app'),
8 | output: {
9 | path: path.resolve(__dirname,'dist'),
10 | filename: 'bundle.js',
11 | publicPath: '/',
12 | },
13 | resolve: {
14 | extensions: ['.js','.jsx', '.scss']
15 | },
16 | devServer: {
17 | historyApiFallback: true
18 | },
19 | module: {
20 | rules: [{
21 | test: /\.jsx?/,
22 | loader:'babel-loader'
23 | },
24 | {
25 | test: /\.scss?/,
26 | use: [
27 | 'style-loader',
28 | 'css-loader',
29 | { loader:'sass-loader'}
30 | ]
31 | },
32 | {
33 | test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
34 | loader: 'url-loader?limit=100000'
35 | }
36 | ]
37 | }
38 | }
--------------------------------------------------------------------------------
/images/architecture.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thedojoseries/docker-ctf/9cecff38ded6b4f58f7b0a3384ed4378abfcaf66/images/architecture.jpeg
--------------------------------------------------------------------------------
/images/cloud9-environments.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thedojoseries/docker-ctf/9cecff38ded6b4f58f7b0a3384ed4378abfcaf66/images/cloud9-environments.png
--------------------------------------------------------------------------------
/images/cloud9-step-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thedojoseries/docker-ctf/9cecff38ded6b4f58f7b0a3384ed4378abfcaf66/images/cloud9-step-01.png
--------------------------------------------------------------------------------
/images/cloud9-step-02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thedojoseries/docker-ctf/9cecff38ded6b4f58f7b0a3384ed4378abfcaf66/images/cloud9-step-02.png
--------------------------------------------------------------------------------
/images/cloud9-step-03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thedojoseries/docker-ctf/9cecff38ded6b4f58f7b0a3384ed4378abfcaf66/images/cloud9-step-03.png
--------------------------------------------------------------------------------
/images/image-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thedojoseries/docker-ctf/9cecff38ded6b4f58f7b0a3384ed4378abfcaf66/images/image-1.png
--------------------------------------------------------------------------------
/images/image-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thedojoseries/docker-ctf/9cecff38ded6b4f58f7b0a3384ed4378abfcaf66/images/image-2.png
--------------------------------------------------------------------------------
/images/image-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thedojoseries/docker-ctf/9cecff38ded6b4f58f7b0a3384ed4378abfcaf66/images/image-3.png
--------------------------------------------------------------------------------