.eslintrc

 {
   "extends": "airbnb",
+  "parser": "babel-eslint",
   "globals": {
     "document": false
   },
   "rules": {
     "react/jsx-filename-extension": 0,
+    "react/no-danger": 0,
     "jsx-quotes": ["error", "prefer-single"],
     "import/prefer-default-export": 0,
-    "react/prop-types": 1,
-    "react/prefer-stateless-function": 0
+    "react/prop-types": 0,
+    "react/destructuring-assignment": 0,
+    "react/prefer-stateless-function": 0,
+    "camelcase": 0,
+    "no-alert": "off",
+    "no-undef": "off",
+    "no-console": "off",
+    "no-prototype-builtins": "off",
+    "import/no-cycle": "off",
+    "jsx-a11y/label-has-associated-control": "off",
+    "react/no-access-state-in-setstate": "off",
+    "consistent-return": "off",
+    "no-case-declarations": "off"
   }
 }
-

.gitignore

@@ -19,3 +19,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+/public/images

.gitlab-ci.yml

+variables:
+  CONTAINER_IMAGE: 'harbor.sch.bme.hu/kszk-kepzes/frontend:$CI_COMMIT_REF_NAME'
+
+stages:
+  - Pre Build
+  - Docker Build
+  - deploy
+
+PreBuild:
+  stage: Pre Build
+  # tags: [kszk]
+  image: node:14.19-alpine3.14
+  script:
+    -   'echo -n "Node version: " && node --version \
+      && echo -n "NPM version: " && npm --version'
+    - npm install
+    - npm run build
+  cache:
+    paths:
+      - build/
+  artifacts:
+    expire_in: 1 day
+    paths:
+      - build/
+  only:
+    - tags
+
+Docker build:
+  stage: Docker Build
+  # tags: [kszk]
+  only:
+    - tags
+  image:
+    name: gcr.io/kaniko-project/executor:debug
+    entrypoint: ['']
+  script:
+    - echo "{\"auths\":{\"harbor.sch.bme.hu\":{\"username\":\"$REGISTRY_USER\",\"password\":\"$REGISTRY_PASSWORD\"}}}" > /kaniko/.docker/config.json
+    - /kaniko/executor --context $CI_PROJECT_DIR --dockerfile $CI_PROJECT_DIR/Dockerfile --destination $CONTAINER_IMAGE
+
+Deploy to Kubernetes:
+  stage: deploy
+  image: alpine
+  tags: [k9r]
+  environment:
+    name: master
+  before_script:
+    - chmod 600 $KUBECONFIG
+    - apk add --no-cache curl
+    - curl -LO "https://dl.k8s.io/release/$(curl -L -s https://dl.k8s.io/release/stable.txt)/bin/linux/amd64/kubectl"
+    - chmod +x ./kubectl
+    - mv ./kubectl /usr/local/bin/kubectl
+    - kubectl version
+  script:
+    - cd k8s
+    - sed -i "s|##IMAGETAG##|${CI_COMMIT_REF_NAME}|" deployment.yaml
+    - kubectl apply -f ./
+  only:
+    - tags

.travis.yml

+language: node_js
+node_js:
+  - "8"
+  - "9"
+
+# command to install dependencies
+install:
+  - npm install
+
+# command to run tests
+script:
+  - ./node_modules/.bin/eslint .
+  - npm run test

Dockerfile

+FROM nginx:1.19.2
+
+# copy the files builded with npm run build
+COPY build /var/www
+COPY nginx.conf /etc/nginx/nginx.conf
+
+EXPOSE 3000
+
+ENTRYPOINT ["nginx","-g","daemon off;"]

README.md

@@ -3,12 +3,25 @@
 ## Run & Install
 ```bash
 npm install
-# or
+
+## or
 yarn install
 
 cp config.js.temp config.js
 
 npm start
-# or
+## or
 yarn start
 ```
+
+# Docker
+```
+sudo docker image build -t kszkepzes-frontend .
+sudo docker container run --publish 3000:3000 --name kszkepzes-frontend kszkepzes-frontend
+```
+
+If you want to run in detached mode
+```
+sudo docker container run --publish 3000:3000 --detach --name kszkepzes-frontend kszkepzes-frontend
+```
+

k8s/deployment.yaml

+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: kszkepzes-frontend
+  namespace: kszk-kepzes-site
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: kszkepzes-frontend
+  strategy:
+    type: Recreate
+  template:
+    metadata:
+      labels:
+        app: kszkepzes-frontend
+    spec:
+      containers:
+        - name: kszkepzes-frontend
+          image: harbor.sch.bme.hu/kszk-kepzes/frontend:##IMAGETAG##
+          imagePullPolicy: 'Always'
+          ports:
+            - containerPort: 3000
+          resources:
+            limits:
+              memory: 200Mi
+      imagePullSecrets:
+        - name: harbor

k8s/ingress.yaml

+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  namespace: kszk-kepzes-site
+  annotations:
+    cert-manager.io/cluster-issuer: letsencrypt
+    kubernetes.io/tls-acme: "true"
+  name: kszkepzes-frontend
+spec:
+  rules:
+    - host: "ujonc.kszk.bme.hu"
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: kszkepzes-frontend
+                port:
+                  number: 3000
+  tls:
+    - hosts:
+        - "ujonc.kszk.bme.hu"
+      secretName: kszkepzes-cert
\ No newline at end of file

k8s/service.yaml

+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: kszkepzes-frontend
+  namespace: kszk-kepzes-site
+spec:
+  type: ClusterIP
+  ports:
+    - port: 3000
+      targetPort: 3000
+      name: front
+      protocol: TCP
+  selector:
+    app: kszkepzes-frontend

nginx.conf

+# auto detects a good number of processes to run
+worker_processes auto;
+
+#Provides the configuration file context in which the directives that affect connection processing are specified.
+events {
+    # Sets the maximum number of simultaneous connections that can be opened by a worker process.
+    worker_connections 8000;
+    # Tells the worker to accept multiple connections at a time
+    multi_accept on;
+}
+
+
+http {
+    # what times to include
+    include       /etc/nginx/mime.types;
+    # what is the default one
+    default_type  application/octet-stream;
+
+    # Sets the path, format, and configuration for a buffered log write
+    log_format compression '$remote_addr - $remote_user [$time_local] '
+        '"$request" $status $upstream_addr '
+        '"$http_referer" "$http_user_agent"';
+
+    server {
+        # listen on port 80
+        listen 3000;
+        # save logs here
+        access_log /var/log/nginx/access.log compression;
+
+        # where the root here
+        root /var/www;
+        # what file to server as index
+        index index.html index.htm;
+
+        location / {
+            # First attempt to serve request as file, then
+            # as directory, then fall back to redirecting to index.html
+            try_files $uri $uri/ /index.html;
+        }
+
+        # Media: images, icons, video, audio, HTC
+        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
+          expires 1M;
+          access_log off;
+          add_header Cache-Control "public";
+        }
+
+        # Javascript and CSS files
+        location ~* \.(?:css|js)$ {
+            try_files $uri =404;
+            expires 1y;
+            access_log off;
+            add_header Cache-Control "public, max-age=60";
+        }
+
+        # Any route containing a file extension (e.g. /devicesfile.js)
+        location ~ ^.+\..+$ {
+            try_files $uri =404;
+        }
+    }
+}

package.json

 {
   "name": "kszkepzes-frontend",
-  "version": "0.1.0",
-  "private": true,
+  "version": "0.2.8",
+  "private": false,
   "dependencies": {
-    "prop-types": "^15.6.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-redux": "^5.0.6",
-    "react-router-dom": "^4.2.2",
-    "react-scripts": "1.1.0",
-    "redux": "^3.7.2",
+    "axios": "^0.21.1",
+    "eslint-plugin-flowtype": "^4.7.0",
+    "http-proxy-middleware": "^1.0.6",
+    "moment": "^2.29.1",
+    "npm": "^6.14.11",
+    "prop-types": "^15.7.2",
+    "react": "^16.14.0",
+    "react-datepicker": "^2.16.0",
+    "react-dom": "^16.14.0",
+    "react-redux": "^7.2.2",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "^3.4.4",
+    "react-slick": "^0.25.2",
+    "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.2.0",
-    "semantic-ui-css": "^2.2.12",
-    "semantic-ui-react": "^0.77.2"
+    "redux-thunk": "^2.3.0",
+    "semantic-ui-calendar-react": "^0.15.3",
+    "semantic-ui-css": "^2.4.0",
+    "semantic-ui-react": "^0.88.2",
+    "slick-carousel": "^1.8.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -22,10 +31,16 @@
     "eject": "react-scripts eject"
   },
   "devDependencies": {
-    "eslint": "^4.16.0",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.5.1"
-  }
+    "eslint": "6.8.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.22.0"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

public/index.css

+html, body, #root {
+  height: 100%;
+}

public/index.html

-<!doctype html>
-<html lang="en">
+<!DOCTYPE html>
+<html lang="hu">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+      rel="shortcut icon"
+      type="image/svg+xml"
+      href="%PUBLIC_URL%/kszk_circle_lightblue.svg"
+    />
+    <link rel="stylesheet" href="%PUBLIC_URL%/index.css" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -19,13 +29,11 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>KSZKépzés 2025</title>
   </head>
   <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root" style="height: 100%"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

public/manifest.json

@@ -4,7 +4,6 @@
   "icons": [
     {
       "src": "favicon.ico",
-      "sizes": "192x192",
       "type": "image/png"
     }
   ],

src/actions/auth.js

+import {
+  GET_DEADLINE,
+  GET_USERDATA,
+  GROUP_CHANGE,
+  PROFILE_CHANGE,
+} from './types';
+
+import axios from './session';
+
+export const getUserData = () => async (dispatch) => {
+  try {
+    const user = await axios.get('/api/v1/profiles/me');
+    const {
+      id,
+      join_date: joinDate,
+      nick,
+      motivation_about: motivationAbout,
+      motivation_profession: motivationProfession,
+      motivation_exercise: motivationExercise,
+      full_name,
+      signed,
+      groups,
+      role,
+      bits,
+    } = user.data;
+    let permission;
+    switch (role) {
+      case 'Applicant':
+        permission = 1;
+        break;
+      case 'Student':
+        permission = 2;
+        break;
+      case 'Staff':
+        permission = 3;
+        break;
+      default:
+        permission = 0;
+        break;
+    }
+
+    dispatch({
+      type: GET_USERDATA,
+      payload: {
+        id,
+        joinDate,
+        nick,
+        motivationAbout,
+        motivationProfession,
+        motivationExercise,
+        full_name,
+        signed,
+        groups,
+        role,
+        permission,
+        bits,
+      },
+    });
+  } catch (e) {
+    console.log(e);
+
+    // Invalid session bug workaround
+    if (!e.response) {
+      window.location = "/oidc/logout"
+    }
+  }
+};
+
+export const getDeadline = () => async (dispatch) => {
+  try {
+    const response = await axios.get('/api/v1/profiles/deadline');
+
+    dispatch({
+      type: GET_DEADLINE,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const textChange = ({ target: { name, value } }) => (dispatch) => {
+  dispatch({ type: PROFILE_CHANGE, payload: value, target: name });
+};
+
+export const groupChange = (groups) => (dispatch) =>
+  dispatch({ type: GROUP_CHANGE, payload: groups });
+
+export const submitRegistration = ({
+  nick,
+  groups,
+  signed,
+  motivationAbout,
+  motivationProfession,
+  motivationExercise,
+  id,
+}) => async () => {
+  try {
+    const response = await axios.patch(`/api/v1/profiles/${id}/`, {
+      nick,
+      groups,
+      signed,
+      motivation_about: motivationAbout,
+      motivation_profession: motivationProfession,
+      motivation_exercise: motivationExercise,
+    });
+    if (response.data.id === id) {
+      alert('Sikeres mentés!');
+    } else {
+      alert('Mentés nem sikerült!');
+    }
+  } catch (e) {
+    console.log(e, e.response);
+    alert('Mentés nem sikerült!');
+  }
+};

src/actions/groups.js

+import { GET_GROUPS } from './types';
+import axios from './session';
+
+export const getGroups = () => async (dispatch) => {
+  try {
+    const response = await axios.get('/api/v1/groups');
+    dispatch({
+      type: GET_GROUPS,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};

src/actions/home.js

+import { GET_IMAGES } from './types';
+import axios from './session';
+
+export const getImages = () => async (dispatch) => {
+  try {
+    const response = await axios.get('/api/v1/images');
+    dispatch({
+      type: GET_IMAGES,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};