Compare revisions

Rafael László · Rafael László · Rafael László · Rafael László · Rafael László · Torma Kristóf
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
-image: node:latest
+variables:
+  CONTAINER_IMAGE: 'harbor.sch.bme.hu/kszk-kepzes/frontend:$CI_COMMIT_REF_NAME'
 stages:
-  - Build
+  - Pre Build
+  - Docker Build
+  - deploy
+PreBuild:
-Install_Test:
+  stage: Pre Build
-  stage: Build
+  # tags: [kszk]
+  image: node:14.19-alpine3.14
  script:
+    -   'echo -n "Node version: " && node --version \
+      && echo -n "NPM version: " && npm --version'
    - npm install
-    - ./node_modules/.bin/eslint .
+    - 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
--- a/Dockerfile
+++ b/Dockerfile
-FROM node:10-alpine
+FROM nginx:1.19.2
-WORKDIR /opt/app
+# copy the files builded with npm run build
-ENV TZ Europe/Budapest
+COPY build /var/www
-RUN apk add --no-cache tzdata && ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
+COPY nginx.conf /etc/nginx/nginx.conf
-# Copying application files
-COPY ./src ./src
-COPY ./public ./public
-COPY package.json yarn.lock package-lock.json ./
-# Installing dependencies
-RUN npm install 
-RUN npm install serve
-RUN yarn build
-# Running
 EXPOSE 3000
-ENTRYPOINT ["npm", "run", "deploy"]
+ENTRYPOINT ["nginx","-g","daemon off;"]
--- a/k8s/deployment.yaml
+++ b/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
--- a/k8s/ingress.yaml
+++ b/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
--- a/k8s/service.yaml
+++ b/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
--- a/nginx.conf
+++ b/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;
+        }
+    }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -3,18 +3,18 @@
  "version": "0.2.8",
  "private": false,
  "dependencies": {
-    "axios": "^0.19.2",
+    "axios": "^0.21.1",
-    "eslint-plugin-flowtype": "^4.6.0",
+    "eslint-plugin-flowtype": "^4.7.0",
    "http-proxy-middleware": "^1.0.6",
-    "moment": "^2.24.0",
+    "moment": "^2.29.1",
-    "npm": "^6.13.7",
+    "npm": "^6.14.11",
    "prop-types": "^15.7.2",
-    "react": "^16.12.0",
+    "react": "^16.14.0",
-    "react-datepicker": "^2.11.0",
+    "react-datepicker": "^2.16.0",
-    "react-dom": "^16.12.0",
+    "react-dom": "^16.14.0",
-    "react-redux": "^7.1.3",
+    "react-redux": "^7.2.2",
-    "react-router-dom": "^5.1.2",
+    "react-router-dom": "^5.2.0",
-    "react-scripts": "^3.3.0",
+    "react-scripts": "^3.4.4",
    "react-slick": "^0.25.2",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
@@ -28,15 +28,14 @@
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject",
+    "eject": "react-scripts eject"
-    "deploy": "serve -l 3000 -s build"
  },
  "devDependencies": {
    "eslint": "6.8.0",
-    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-airbnb": "^18.2.1",
-    "eslint-plugin-import": "^2.20.0",
+    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.18.0"
+    "eslint-plugin-react": "^7.22.0"
  },
  "browserslist": [
    ">0.2%",

--- a/public/index.html
+++ b/public/index.html
-<!doctype html>
+<!DOCTYPE html>
 <html lang="hu">
  <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta
-    <meta name="theme-color" content="#000000">
+      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/
    -->
    <meta http-equiv="Pragma" content="no-cache" />
-	  <meta http-equiv="Expires" content="0" />
+    <meta http-equiv="Expires" content="0" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link
-    <link rel="stylesheet" href="index.css">
+      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.
@@ -22,12 +29,10 @@
      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>KSZKépzés 2020</title>
+    <title>KSZKépzés 2025</title>
  </head>
  <body>
-    <noscript>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
    <div id="root" style="height: 100%"></div>
    <!--
      This HTML file is a template.

--- a/public/kszk_circle_lightblue.svg
+++ b/public/kszk_circle_lightblue.svg
--- a/src/actions/auth.js
+++ b/src/actions/auth.js
@@ -58,6 +58,11 @@ export const getUserData = () => async (dispatch) => {
    });
  } catch (e) {
    console.log(e);
+    // Invalid session bug workaround
+    if (!e.response) {
+      window.location = "/oidc/logout"
+    }
  }
 };
@@ -105,6 +110,7 @@ export const submitRegistration = ({
      alert('Mentés nem sikerült!');
    }
  } catch (e) {
-    console.log(e);
+    console.log(e, e.response);
+    alert('Mentés nem sikerült!');
  }
 };
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -4,7 +4,7 @@ import Main from './Main';
 import React from 'react';
 const App = () => (
-  <div style={{ minHeight: '100%', position: 'relative' }}>
+  <div style={{ minHeight: '100%', position: 'relative', paddingBottom: '3em' }}>
    <header id="header">
      <Header />
    </header>

--- a/src/components/Footer.js
+++ b/src/components/Footer.js
-import { Container, Segment } from 'semantic-ui-react';
+import { Container, Segment } from "semantic-ui-react";
-import React from 'react';
+import React from "react";
 const Footer = () => (
  <Segment inverted vertical textAlign="center">
    <Container>
-      <p textalign="center">Created by DevTeam &copy; 2018-2020.</p>
+      <p textalign="center">Created by DevTeam &copy; 2018-2025.</p>
    </Container>
  </Segment>
 );

--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -7,64 +7,64 @@ import {
  Popup,
  Responsive,
  Segment,
-} from 'semantic-ui-react';
+} from "semantic-ui-react";
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import KSZKlogo from './images/kszk_logo.svg';
+import KSZKlogo from "./images/kszk_logo.svg";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
-import { getUserData } from '../actions';
+import { getUserData } from "../actions";
 // Objects that will be converted to menu items in the render method
 const menuItems = [
  {
-    text: 'Főoldal',
+    text: "Főoldal",
-    to: '/home',
+    to: "/home",
    prefix: (
-      <Image size="mini" src={KSZKlogo} style={{ marginRight: '1.5em' }} />
+      <Image size="mini" src={KSZKlogo} style={{ marginRight: "1.5em" }} />
    ),
    permissionLevel: 0,
  },
  {
-    text: 'Hírek',
+    text: "Hírek",
-    to: '/news',
+    to: "/news",
-    prefix: '',
+    prefix: "",
    permissionLevel: 0,
  },
  {
-    text: 'Köreink',
+    text: "Köreink",
-    to: '/groups',
+    to: "/groups",
-    prefix: '',
+    prefix: "",
    permissionLevel: 0,
  },
  {
-    text: 'Ütemterv',
+    text: "Ütemterv",
-    to: '/schedule',
+    to: "/schedule",
-    prefix: '',
+    prefix: "",
    permissionLevel: 1,
  },
  {
-    text: 'Mentorok',
+    text: "Mentorok",
-    to: '/mentors',
+    to: "/mentors",
-    prefix: '',
+    prefix: "",
-    permissionLevel: 2,
+    permissionLevel: 1,
  },
  {
-    text: 'Statisztika',
+    text: "Statisztika",
-    to: '/statistics',
+    to: "/statistics",
-    prefix: '',
+    prefix: "",
    permissionLevel: 3,
  },
  {
-    text: 'Jelentkezések',
+    text: "Jelentkezések",
-    to: '/applications',
+    to: "/applications",
-    prefix: '',
+    prefix: "",
    permissionLevel: 3,
  },
  {
-    text: 'Házi feladatok',
+    text: "Házi feladatok",
-    to: '/homework',
+    to: "/homework",
-    prefix: '',
+    prefix: "",
    permissionLevel: 2,
  },
 ];
@@ -97,7 +97,7 @@ class Header extends Component {
    let maxNum = 0;
    if (this.props.user.id) {
      maxNum = menuItems.filter(
-        (item) => this.props.user.permission >= item.permissionLevel
+        (item) => this.props.user.permission >= item.permissionLevel,
      ).length;
    } else {
      maxNum = 3;
@@ -161,7 +161,7 @@ class Header extends Component {
                        {item.prefix}
                        {item.text}
                      </Menu.Item>
-                    ) : null
+                    ) : null,
                  )}
                </Menu>
              </Popup>
@@ -173,10 +173,10 @@ class Header extends Component {
                  <Button inverted as={Link} to="/profile">
                    Profilom
                  </Button>
-                  <Button as="a" href="/api/v1/logout/" icon="sign out" />
+                  <Button as="a" href="/oidc/logout/" icon="sign out" />
                </Button.Group>
              ) : (
-                <Button as="a" href="/api/v1/login/authsch/" inverted>
+                <Button as="a" href="/oidc/authenticate/" inverted>
                  Bejelentkezés
                </Button>
              )}
@@ -247,7 +247,7 @@ class Header extends Component {
                          {item.prefix}
                          {item.text}
                        </Menu.Item>
-                      ) : null
+                      ) : null,
                    )}
                    <Menu.Item>
                      {this.props.user.id ? (
@@ -263,7 +263,7 @@ class Header extends Component {
                          <Button
                            onClick={this.handleClose}
                            as="a"
-                            href="/api/v1/logout/"
+                            href="/oidc/logout/"
                            icon="sign out"
                          />
                        </Button.Group>
@@ -271,7 +271,7 @@ class Header extends Component {
                        <Button
                          onClick={this.handleClose}
                          as="a"
-                          href="/api/v1/login/authsch/"
+                          href="/oidc/authenticate/"
                          inverted
                        >
                          Bejelentkezés

--- a/src/components/forms/AddSolutionForm.js
+++ b/src/components/forms/AddSolutionForm.js
-import React, { Component } from 'react';
+import './Forms.css';
 import {
-  Modal,
  Button,
+  Dimmer,
+  Divider,
  Form,
-  Input,
-  TextArea,
-  Icon,
  Header,
-  Segment,
+  Icon,
-  Divider,
+  Input,
-  Dimmer,
  Loader,
+  Modal,
+  Segment,
+  TextArea,
 } from 'semantic-ui-react';
-import { connect } from 'react-redux';
+import React, { Component } from 'react';
 import {
-  addSolution,
-  writeSolution,
-  writeSolutionFile,
  addDocument,
+  addSolution,
  clearWrite,
  getDocuments,
  getSolutions,
+  writeSolution,
+  writeSolutionFile,
 } from '../../actions/homework';
-import './Forms.css';
 import ConfirmModal from './ConfirmModal';
+import { connect } from 'react-redux';
 import { customMessage } from '../pages/Homework';
 const allowedFileTypes = [
  'image/jpeg',
  'image/png',
-  'application/x-zip-compressed',
+  'application/zip',
+  'application/x-zip',
 ];
+const allowedFileEnds = ['.zip', '.jpeg', '.jpg', '.jpe', '.png'];
+function validateFileName(fileNameToValidate) {
+  return (
+    allowedFileEnds.find((typeName) => {
+      return fileNameToValidate.toLowerCase().endsWith(typeName);
+    }).length > 0
+  );
+}
 // in megabytes
 const maxFileSize = 50;
@@ -181,6 +194,7 @@ class AddSolutionForm extends Component {
                </label>
                <Input
                  type="file"
+                  accept={allowedFileTypes.join(',')}
                  onChange={(e) => this.props.writeSolutionFile(e)}
                />
              </Form.Field>
@@ -207,7 +221,7 @@ class AddSolutionForm extends Component {
                    !description ||
                    (!file
                      ? false
-                      : !allowedFileTypes.includes(file.type) ||
+                      : !validateFileName(file.name) ||
                        file.size > maxFileSize * 1024 ** 2)
                  }
                  inverted
@@ -251,7 +265,10 @@ class AddSolutionForm extends Component {
                      });
                      alert('Sikertelen feltöltés!');
                    }
-                  );
+                  )
+                  .finally(() => {
+                    window.location.reload(false);
+                  });
              }}
            />
          ) : (
@@ -263,7 +280,7 @@ class AddSolutionForm extends Component {
                !description ||
                (!file
                  ? false
-                  : !allowedFileTypes.includes(file.type) ||
+                  : !validateFileName(file.name) ||
                    file.size > maxFileSize * 1024 ** 2)
              }
              onClick={() => {

--- a/src/components/pages/EventDetail.js
+++ b/src/components/pages/EventDetail.js
@@ -8,24 +8,24 @@ import {
  Item,
  Segment,
  Table,
-} from 'semantic-ui-react';
+} from "semantic-ui-react";
-import React, { Component } from 'react';
+import React, { Component } from "react";
 import {
  clearWrite,
  getNotesByEvent,
  postEventNote,
  writeNote,
-} from '../../actions/notes';
+} from "../../actions/notes";
 import {
  getEventById,
  getTrainees,
  submitVisitors,
  visitorChange,
-} from '../../actions/statistics';
+} from "../../actions/statistics";
-import TraineeTableRow from './EventDetailTableRow';
+import TraineeTableRow from "./EventDetailTableRow";
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
-import moment from 'moment';
+import moment from "moment";
 class EventDetail extends Component {
  constructor(props) {
@@ -43,20 +43,30 @@ class EventDetail extends Component {
  renderTrainees() {
    const event = this.props.selectedEvent;
-    return this.props.trainees?.map((item) => {
+    return this.props.trainees
-      const notes = this.props.eventNotes?.filter(
+      ?.sort(function (a, b) {
-        (note) => note.profile === item.id
+        var nameA = a.full_name.toLowerCase(),
-      );
+          nameB = b.full_name.toLowerCase();
-      return item.role === 'Student' ? (
+        if (nameA < nameB)
-        <TraineeTableRow
+          //sort string ascending
-          selectedEvent={event}
+          return -1;
-          notes={notes}
+        if (nameA > nameB) return 1;
-          trainee={item}
+        return 0; //default return value (no sorting)
-          edit={this.state.edit}
+      })
-          key={item.id}
+      .map((item) => {
-        />
+        const notes = this.props.eventNotes?.filter(
-      ) : null;
+          (note) => note.profile === item.id
-    });
+        );
+        return item.role === "Student" ? (
+          <TraineeTableRow
+            selectedEvent={event}
+            notes={notes}
+            trainee={item}
+            edit={this.state.edit}
+            key={item.id}
+          />
+        ) : null;
+      });
  }
  renderEvent() {
@@ -64,11 +74,11 @@ class EventDetail extends Component {
    return (
      <Segment>
        <Item>
-          <Divider style={{ fontSize: '2em' }} horizontal>
+          <Divider style={{ fontSize: "2em" }} horizontal>
            <Header as="h1">
              {name}
-              <Item.Header style={{ fontSize: '0.6em' }}>
+              <Item.Header style={{ fontSize: "0.6em" }}>
-                {moment(date).format('LL')}
+                {moment(date).format("LL")}
              </Item.Header>
            </Header>
          </Divider>
@@ -91,7 +101,7 @@ class EventDetail extends Component {
              <Comment.Content>
                <Comment.Author>{note.created_by_name}</Comment.Author>
                <Comment.Metadata>
-                  {moment(note.created_at).format('LL')}
+                  {moment(note.created_at).format("LL")}
                </Comment.Metadata>
                <Comment.Text>{note.note}</Comment.Text>
              </Comment.Content>
@@ -99,7 +109,7 @@ class EventDetail extends Component {
          </Segment>
        );
      }
-      return '';
+      return "";
    });
  }
@@ -107,24 +117,12 @@ class EventDetail extends Component {
    const event = this.props.selectedEvent;
    const note = this.props.actualNote;
    return (
-      <Container style={{ paddingTop: '1em', paddingBottom: '7em' }}>
+      <Container style={{ paddingTop: "1em", paddingBottom: "7em" }}>
        <Container textAlign="center">
          {this.props.selectedEvent && this.props.trainees
            ? this.renderEvent()
-            : ''}
+            : ""}
        </Container>
-        <Table celled unstackable>
-          <Table.Header>
-            <Table.Row textAlign="center">
-              <Table.HeaderCell>Név</Table.HeaderCell>
-              <Table.HeaderCell>Jelen volt</Table.HeaderCell>
-              <Table.HeaderCell>Megjegyzések</Table.HeaderCell>
-            </Table.Row>
-          </Table.Header>
-          <Table.Body>
-            {this.props.selectedEvent ? this.renderTrainees() : null}
-          </Table.Body>
-        </Table>
        {!this.state.edit ? (
          <Button onClick={() => this.setState({ edit: true })}>
            Módosítás
@@ -133,16 +131,27 @@ class EventDetail extends Component {
          <Button
            onClick={() => {
              this.setState({ edit: false });
-              this.props.submitVisitors(this.props.selectedEvent);
            }}
          >
-            {' '}
+            {" "}
            Kész
          </Button>
        )}
+        <Table celled unstackable>
+          <Table.Header>
+            <Table.Row textAlign="center">
+              <Table.HeaderCell>Név</Table.HeaderCell>
+              <Table.HeaderCell>Jelen volt</Table.HeaderCell>
+              <Table.HeaderCell>Megjegyzések</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {this.props.selectedEvent ? this.renderTrainees() : null}
+          </Table.Body>
+        </Table>
        <Comment.Group>
          <Header dividing>Megjegyzések</Header>
-          {this.props.eventNotes ? this.renderComments() : ''}
+          {this.props.eventNotes ? this.renderComments() : ""}
          <Form reply>
            <Form.TextArea
              value={note.note}

--- a/src/components/pages/Home.css
+++ b/src/components/pages/Home.css
@@ -9,3 +9,29 @@
  text-shadow: black 0px 0px 10px, black 0px 0px 6px;
  -webkit-text-fill-color: white;
 }
+.quote {
+  position: relative;
+  margin-bottom: 0.5rem;
+}
+.quote:before {
+  content: '“';
+  position: absolute;
+  left: -0.45em;
+}
+.quote::after {
+  content: '”';
+  margin-right: -1rem;
+}
+.quote--container {
+  margin: 2rem auto 0;
+  padding-bottom: 0.7rem;
+}
+.quote--author {
+  text-align: right;
+  font-weight: 300;
+}
--- a/src/components/pages/Home.js
+++ b/src/components/pages/Home.js
-import './Home.css';
+import "./Home.css";
 import {
  Button,
@@ -9,15 +9,15 @@ import {
  Image,
  Responsive,
  Segment,
-} from 'semantic-ui-react';
+} from "semantic-ui-react";
 /* eslint-disable react/jsx-props-no-spreading */
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import KSZKbiglogo from '../images/kszk_with_shadow.png';
+import KSZKbiglogo from "../images/kszk_with_shadow.png";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
-import Slider from 'react-slick';
+import Slider from "react-slick";
-import { connect } from 'react-redux';
+import { connect } from "react-redux";
-import { getImages } from '../../actions/home';
+import { getImages } from "../../actions/home";
 const settings = {
  dots: false,
@@ -42,12 +42,14 @@ class Home extends Component {
    if (view === 0) {
      return (
        <div>
+          {!!this.props.images}
          <Slider {...settings}>
-            {this.props.images.map((image) => (
+            {this.props.images &&
-              <div key={image}>
+              this.props.images.map((image) => (
-                <img src={image.image} width={imageWidth} alt="" />
+                <div key={image}>
-              </div>
+                  <img src={image.image} width={imageWidth} alt="" />
-            ))}
+                </div>
+              ))}
          </Slider>
          <div className="car-text-kszk">
            <Segment textAlign="center" vertical>
@@ -56,8 +58,8 @@ class Home extends Component {
                content="Üdvözlünk a"
                inverted
                style={{
-                  fontSize: '3vw',
+                  fontSize: "3vw",
-                  fontWeight: 'normal',
+                  fontWeight: "normal",
                  marginBottom: 0,
                }}
              />
@@ -66,10 +68,10 @@ class Home extends Component {
                content="Kollégiumi Számítástechnikai Kör"
                inverted
                style={{
-                  fontSize: '3.5vw',
+                  fontSize: "3.5vw",
-                  fontWeight: 'bold',
+                  fontWeight: "bold",
-                  marginBottom: '0.5vw',
+                  marginBottom: "0.5vw",
-                  marginTop: '0.5vw',
+                  marginTop: "0.5vw",
                }}
              />
              <Header
@@ -77,57 +79,57 @@ class Home extends Component {
                content="újoncképzésének weboldalán!"
                inverted
                style={{
-                  fontSize: '3vw',
+                  fontSize: "3vw",
-                  fontWeight: 'normal',
+                  fontWeight: "normal",
                  marginBottom: 0,
-                  marginTop: '0.5vw',
+                  marginTop: "0.5vw",
                }}
              />
              <Image
                verticalAlign="middle"
                src={KSZKbiglogo}
-                style={{ marginTop: '1vw', width: '17%' }}
+                style={{ marginTop: "1vw", width: "17%" }}
              />
              <Header
                as="h1"
                content="Szeretettel várunk a KSZKépzésre!"
                inverted
                style={{
-                  fontSize: '3vw',
+                  fontSize: "3vw",
-                  fontWeight: 'normal',
+                  fontWeight: "normal",
                  marginBottom: 0,
-                  marginTop: '1vw',
+                  marginTop: "1vw",
                }}
              />
              <Container>
                {this.props.user.id ? (
-                  <Button
+                <Button
-                    as={Link}
+                as={Link}
-                    to="/profile"
+                to="/profile"
-                    primary
+                primary
-                    size="huge"
+                size="huge"
-                    style={{
+                style={{
-                      fontSize: '2vw',
+                fontSize: "2vw",
-                      marginTop: '1vw',
+                marginTop: "1vw",
-                      marginBottom: '1vw',
+                marginBottom: "1vw",
-                      fontWeight: 'bold',
+                fontWeight: "bold",
-                      letterSpacing: '0.13vw',
+                letterSpacing: "0.13vw",
-                    }}
+                }}
-                  >
+                >
                    Jelentkezés
-                    <Icon name="right arrow" />
+                <Icon name="right arrow" />
-                  </Button>
+                </Button>
                ) : (
                  <Button
-                    href="/api/v1/login/authsch/"
+                    href="/oidc/authenticate/"
                    primary
                    size="huge"
                    style={{
-                      fontSize: '2vw',
+                      fontSize: "2vw",
-                      marginTop: '1vw',
+                      marginTop: "1vw",
-                      marginBottom: '1vw',
+                      marginBottom: "1vw",
-                      fontWeight: 'bold',
+                      fontWeight: "bold",
-                      letterSpacing: '0.13vw',
+                      letterSpacing: "0.13vw",
                    }}
                  >
                    Bejelentkezés
@@ -157,8 +159,8 @@ class Home extends Component {
                content="Üdvözlünk a"
                inverted
                style={{
-                  fontSize: '5vw',
+                  fontSize: "5vw",
-                  fontWeight: 'bold',
+                  fontWeight: "bold",
                  marginBottom: 0,
                }}
              />
@@ -167,10 +169,10 @@ class Home extends Component {
                content="Kollégiumi Számítástechnikai Kör"
                inverted
                style={{
-                  fontSize: '6vw',
+                  fontSize: "6vw",
-                  fontWeight: 'bold',
+                  fontWeight: "bold",
-                  marginBottom: '0.5vw',
+                  marginBottom: "0.5vw",
-                  marginTop: '0.5vw',
+                  marginTop: "0.5vw",
                }}
              />
              <Header
@@ -178,27 +180,27 @@ class Home extends Component {
                content="újoncképzésének weboldalán!"
                inverted
                style={{
-                  fontSize: '5vw',
+                  fontSize: "5vw",
-                  fontWeight: 'bold',
+                  fontWeight: "bold",
                  marginBottom: 0,
-                  marginTop: '0.5vw',
+                  marginTop: "0.5vw",
                }}
              />
              <Image
                className="kszklogo"
                verticalAlign="middle"
                src={KSZKbiglogo}
-                style={{ marginTop: '1vw', width: '20%' }}
+                style={{ marginTop: "1vw", width: "20%" }}
              />
              <Header
                as="h1"
                content="Szeretettel várunk a KSZKépzésre!"
                inverted
                style={{
-                  fontSize: '5vw',
+                  fontSize: "5vw",
-                  fontWeight: 'bold',
+                  fontWeight: "bold",
                  marginBottom: 0,
-                  marginTop: '1vw',
+                  marginTop: "1vw",
                }}
              />
              <Container>
@@ -209,11 +211,11 @@ class Home extends Component {
                    primary
                    size="massive"
                    style={{
-                      fontSize: '4vw',
+                      fontSize: "4vw",
-                      marginTop: '1.5vw',
+                      marginTop: "1.5vw",
-                      marginBottom: '1vw',
+                      marginBottom: "1vw",
-                      fontWeight: 'bold',
+                      fontWeight: "bold",
-                      letterSpacing: '0.15vw',
+                      letterSpacing: "0.15vw",
                    }}
                  >
                    Jelentkezés
@@ -221,15 +223,15 @@ class Home extends Component {
                  </Button>
                ) : (
                  <Button
-                    href="/api/v1/login/authsch/"
+                    href="/oidc/authenticate/"
                    primary
                    size="massive"
                    style={{
-                      fontSize: '4vw',
+                      fontSize: "4vw",
-                      marginTop: '1vw',
+                      marginTop: "1vw",
-                      marginBottom: '1vw',
+                      marginBottom: "1vw",
-                      fontWeight: 'bold',
+                      fontWeight: "bold",
-                      letterSpacing: '0.15vw',
+                      letterSpacing: "0.15vw",
                    }}
                  >
                    Bejelentkezés
@@ -248,12 +250,29 @@ class Home extends Component {
  renderText() {
    const kszk_age = new Date().getFullYear() - 1976;
    return (
-      <Segment style={{ padding: '8em 0em', fontFamily: 'Arial' }} vertical>
+      <Segment style={{ padding: "1em 0em", fontFamily: "Arial" }} vertical>
        <Container text>
-          <Header as="h3" style={{ fontSize: '2em', fontFamily: 'Arial' }}>
+          <Segment inverted color="green" tertiary>
+            <Header as="h3" style={{ fontSize: "2em", fontFamily: "Arial" }}>
+              Bemutatkozó videók
+            </Header>
+            <p style={{ fontSize: "1.33em", fontFamily: "Arial" }}>
+              A gólyakörtére készített videóinkat megnézhetitek a{" "}
+              <a
+                href="https://www.youtube.com/@kollegiumiszamitastechnika470/videos"
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{ color: "white", textDecoration: "underline" }}
+              >
+                YouTube csatornánkon
+              </a>
+              !
+            </p>
+          </Segment>
+          <Header as="h3" style={{ fontSize: "2em", fontFamily: "Arial" }}>
            Kik is vagyunk mi?
          </Header>
-          <p style={{ fontSize: '1.33em', fontFamily: 'Arial' }}>
+          <p style={{ fontSize: "1.33em", fontFamily: "Arial" }}>
            A Kollégiumi Számítástechnikai Kör az Egyetem legrégebben működő és
            legnagyobb aktív, informatikával foglalkozó öntevékeny
            csoportosulása, idén ünnepeljük {kszk_age}. születésnapunkat. A
@@ -265,11 +284,11 @@ class Home extends Component {
          <Button as={Link} size="large" to="/groups">
            Ismerd meg a köreinket! <Icon name="right arrow" />
          </Button>
-          <Divider as="h4" className="header" style={{ margin: '3em 0em' }} />
+          <Divider as="h4" className="header" style={{ margin: "3em 0em" }} />
-          <Header as="h3" style={{ fontSize: '2em', fontFamily: 'Arial' }}>
+          <Header as="h3" style={{ fontSize: "2em", fontFamily: "Arial" }}>
            Lehetőségek
          </Header>
-          <p style={{ fontSize: '1.33em', fontFamily: 'Arial' }}>
+          <p style={{ fontSize: "1.33em", fontFamily: "Arial" }}>
            A KSZK a lehetőségek tárháza, a hely ahol Te – leendő mérnök –
            minden területen kipróbálhatod, továbbképezheted magad. Nálunk
            kibontakoztathatod kreativitásod, tapasztalatot, mérnöki szemléletet
@@ -279,34 +298,92 @@ class Home extends Component {
            szakma egy-egy meghatározó területével foglalkoznak a fejlesztés és
            üzemeltetés területén.
          </p>
-          <Divider as="h4" className="header" style={{ margin: '3em 0em' }} />
+          <Divider as="h4" className="header" style={{ margin: "3em 0em" }} />
-          <Header as="h3" style={{ fontSize: '2em', fontFamily: 'Arial' }}>
+          <Header as="h3" style={{ fontSize: "2em", fontFamily: "Arial" }}>
+            Miért jó KSZK-snak lenni?
+          </Header>
+          <div
+            class="quote--container"
+            style={{ fontSize: "1.5em", fontFamily: "Arial" }}
+          >
+            <p class="quote">
+              Szerintem KSZK-snak jó lenni, mert rengeteget tanulok belőle.
+              Gyakorlok, hallok újdonságokat, kipróbálhatom magam mindenféle
+              szerepben, és közben még barátokat is szerzek. Ezek a barátságok,
+              tapasztalatok egyébként később is nagyon jól jönnek, például a
+              CV-mben egész erős fegyvertény, hogy ennyi mindent csináltam.
+              Tényleg rengeteget kaptam a reszorttól, szakmailag és emberileg
+              is. Ja, és szeretem, hogy a KSZK ilyen szabad, és abba kóstolok
+              bele, amibe akarok.
+            </p>
+            <p class="quote--author">&ndash; Feri</p>
+          </div>
+          <div
+            class="quote--container"
+            style={{ fontSize: "1.5em", fontFamily: "Arial" }}
+          >
+            <p class="quote">
+              A nulláról kezdtem a képzést és az egyetemi tanulmányaimat is,
+              semmilyen infós tudásom nem volt, de rengeteget fejlődtem a
+              KSZK-nak köszönhetően. Ezenkívül nem csak szakmai tudást
+              szereztem, hanem egy fantasztikus közösség részévé is váltam.
+            </p>
+            <p class="quote--author">&ndash; Patrik</p>
+          </div>
+          <div
+            class="quote--container"
+            style={{ fontSize: "1.5em", fontFamily: "Arial" }}
+          >
+            <p class="quote">
+              Amikor idejöttem egyetemre nem tudtam, hogy mennyire fogom
+              megtalálni a helyem. Aztán, elkezdtem megismerkedni a kari
+              közösséggel és barátokat szereztem, akik jelentős részét a
+              KSZK-ban ismertem meg, vagy velem csatlakozott ide. Együtt
+              foglalkozgatunk projektekkel, a Ház rendszereinek üzemeltetésével
+              és egyéb nagyon érdekes ügyes-bajos dolgokkal. Úgy érzem, hogy a
+              KSZK-ban igazán megtaláltam a helyem, mind emberileg, mind
+              szakmailag.
+            </p>
+            <p class="quote--author">&ndash; Mike</p>
+          </div>
+          <div
+            class="quote--container"
+            style={{ fontSize: "1.5em", fontFamily: "Arial" }}
+          >
+            <p class="quote">
+              Számtalan dologgal foglalkozunk, és tényleg azt csinálhatom, ami
+              csak érdekel. Emellett a KSZK-t a szívügyemnek tekintem, szerintem
+              a legjobb lehetőség a szakmai fejlődésen kívül életre szóló
+              barátságok alakítására.
+            </p>
+            <p class="quote--author">&ndash; Blint</p>
+          </div>
+          <Divider as="h4" className="header" style={{ margin: "3em 0em" }} />
+          <Header as="h3" style={{ fontSize: "2em", fontFamily: "Arial" }}>
            Képzésünk
          </Header>
-          <p style={{ fontSize: '1.33em', fontFamily: 'Arial' }}>
+          <p style={{ fontSize: "1.33em", fontFamily: "Arial" }}>
-            Kilenc alkalmas képzésünk végén Te is igazi KSZK-ssá válhatsz,
+            Képzésünk végén Te is igazi KSZK-ssá válhatsz, hiszen rengeteg
-            hiszen rengeteg szakmai tudást igyekszünk átadni nektek. A
+            szakmai tudást igyekszünk átadni nektek. A képzésalkalmak rendkívül
-            képzésalkalmak rendkívül jó hangulatban telnek, és a szociális
+            jó hangulatban telnek, és a szociális irányultságú foglalkozások
-            irányultságú foglalkozások alatt egy nagyon jó csapat kovácsolódik
+            alatt egy nagyon jó csapat kovácsolódik az érdeklődőkből. Az első
-            az érdeklődőkből. Az első képzés időpontja február 16. vasárnap
+            képzés időpontja február 20. csütörtök 18:00, ettől kezdve pedig
-            18:00, ettől kezdve pedig minden héten találkozunk ugyanabban az
+            minden héten egy közösségi és számos szakmai alkalom során
-            időpontban. A képzés ideje alatt április 17-19 között rendezünk
+            találkozunk. A képzésalkalmak után április 11-től 13-ig rendezünk
-            tábort. Az alkalmakon és a táboron kötelező a részvétel.
+            tábort. Az közösségi alkalmakon és a táboron kötelező a részvétel.
          </p>
-          <Divider as="h4" className="header" style={{ margin: '3em 0em' }} />
+          <Divider as="h4" className="header" style={{ margin: "3em 0em" }} />
          <Segment inverted color="red" tertiary>
-            <Header as="h3" style={{ fontSize: '2em', fontFamily: 'Arial' }}>
+            <Header as="h3" style={{ fontSize: "2em", fontFamily: "Arial" }}>
              Korlátos férőhely
            </Header>
-            <p style={{ fontSize: '1.33em', fontFamily: 'Arial' }}>
+            <p style={{ fontSize: "1.33em", fontFamily: "Arial" }}>
              Általánosságban elmondható, hogy a KSZK tagjai rengeteg dologgal
              foglalkoznak a hétköznapjaik során, hogy minden informatikai
              rendszer úgy működjön a kollégiumban, ahogy kell. Így van ez
-              velünk képzőkkel is, emiatt hetente csak egy képzésalkalmat tudunk
+              velünk képzőkkel is, emiatt a férőhelyek korlátosak.
-              tartani. Mivel az oktatóterem férőhelyében korlátozott, ezért a
-              képzésre maximum 35 embert tudunk befogadni.
            </p>
-            <p style={{ fontSize: '1.33em', fontFamily: 'Arial' }}>
+            <p style={{ fontSize: "1.33em", fontFamily: "Arial" }}>
              Sajnos előfordulhat olyan eset, hogy valaki már nem fér be a
              képzésre, ezért kérünk titeket, hogy ennek tudatában
              jelentkezzetek majd. Ilyen esetben reméljük ez nem szegi
@@ -324,12 +401,12 @@ class Home extends Component {
        <Responsive minWidth={600}>
          <div className="car-image-kszk">
            <div />
-            {this.renderSlider(0, '120%')}
+            {this.renderSlider(0, "120%")}
          </div>
          {this.renderText()}
        </Responsive>
        <Responsive maxWidth={600}>
-          <div className="car-image-kszk">{this.renderSlider(1, '200%')}</div>
+          <div className="car-image-kszk">{this.renderSlider(1, "200%")}</div>
          {this.renderText()}
        </Responsive>
      </div>

--- a/src/components/pages/LeaderBoard.js
+++ b/src/components/pages/LeaderBoard.js
@@ -14,9 +14,8 @@ class LeaderBoard extends Component {
    return this.props.trainees
      .sort(
        (a, b) =>
-          Number(b.homework_bits) +
+          (Number(b.homework_bits) + Number(b.events_visited) + Number(b.extra_bits)) -
-          b.events_visited -
+          (Number(a.homework_bits) + Number(a.events_visited) + Number(a.extra_bits))
-          (Number(a.homework_bits) + a.events_visited)
      )
      .map((trainee) =>
        trainee.role === 'Student' ? (
@@ -24,10 +23,10 @@ class LeaderBoard extends Component {
            <Table.Cell textAlign="center">{trainee.full_name}</Table.Cell>
            <Table.Cell textAlign="center">{trainee.events_visited}</Table.Cell>
            <Table.Cell textAlign="center">
-              {Number(trainee.homework_bits)}
+              {Number(trainee.homework_bits) + Number(trainee.extra_bits)}
            </Table.Cell>
            <Table.Cell textAlign="center">
-              {Number(trainee.homework_bits) + trainee.events_visited}
+              {Number(trainee.homework_bits) + trainee.events_visited + Number(trainee.extra_bits)}
            </Table.Cell>
          </Table.Row>
        ) : null

--- a/src/components/pages/Mentors.js
+++ b/src/components/pages/Mentors.js
@@ -31,7 +31,7 @@ class Mentors extends Component {
              <Item.Content style={{ padding: '1rem' }}>
                <Item.Header>{item.name}</Item.Header>
                <Item.Description>
-                  <p>{item.text}</p>
+                  <p dangerouslySetInnerHTML={{ __html: item.text }}></p>
                </Item.Description>
                <Item.Extra>
                  <Label>
@@ -56,7 +56,9 @@ class Mentors extends Component {
        <Image src={item.image} wrapped ui={false} />
        <Card.Content>
          <Card.Header>{item.name}</Card.Header>
-          <Card.Description>{item.text}</Card.Description>
+          <Card.Description>
+            <p dangerouslySetInnerHTML={{ __html: item.text }}></p>
+          </Card.Description>
        </Card.Content>
        <Card.Content extra>
          <Label>
No results found