import React, { Component } from 'react'; import { Container, Form, Dropdown, Divider, Segment, } from 'semantic-ui-react'; import { connect } from 'react-redux'; import { textChange, submitRegistration, groupChange } from '../../actions'; import { getDeadline } from '../../actions/auth'; import HiddenForm from '../forms/HiddenForm'; const options = [ { key: 'DT', text: 'DevTeam', value: 'DT' }, { key: 'NET', text: 'NETeam', value: 'NET' }, { key: 'ST', text: 'SecurITeam', value: 'ST' }, { key: 'SYS', text: 'SysAdmin', value: 'SYS' }, { key: 'HAT', text: 'Hallgatói Tudásbázis', value: 'HAT' }, ]; class Profile extends Component { UNSAFE_componentWillMount() { this.props.getDeadline(); if (!this.props.id) { this.props.history.push('/home'); } } render() { const { nick, groups, motivationAbout, motivationProfession, motivationExercise, signed, id, deadline, messageBefore, messageAfter, } = this.props; const endDate = new Date(deadline); const canEdit = Date.now() < endDate; return ( <Container style={{ marginTop: '1em', }} > {canEdit ? ( <Segment inverted color='red' tertiary> <p style={{ fontSize: '1.3em' }} dangerouslySetInnerHTML={{ __html: messageBefore }} /> </Segment> ) : ( <Segment inverted color='red' tertiary> <p style={{ fontSize: '1.3em' }} dangerouslySetInnerHTML={{ __html: messageAfter }} /> </Segment> )} <Form> {canEdit ? ( <Form.Input fluid name='nick' label='Becenév' onChange={(e) => this.props.textChange(e)} placeholder='Becenév' value={nick} /> ) : <HiddenForm fontWeight='bold' label='Becenév' value={nick} />} <Divider horizontal>Motiváció</Divider> {canEdit ? ( <Form.TextArea rows={10} name='motivationAbout' label='Mesélj nekünk egy kicsit magadról. Milyen szakmai vagy más eredményeket értél el, amikre büszke vagy?' onChange={(e) => this.props.textChange(e)} placeholder='Mesélj nekünk egy kicsit magadról. Milyen szakmai vagy más eredményeket értél el, amikre büszke vagy?' value={motivationAbout} /> ) : ( <HiddenForm fontWeight='bold' label='Mesélj nekünk egy kicsit magadról. Milyen szakmai vagy más eredményeket értél el, amikre büszke vagy?' value={motivationAbout} /> )} <Divider horizontal /> {canEdit ? ( <Form.TextArea rows={10} label='Mit vársz el a képzéstől, miért szeretnél rá jelentkezni, szerinted mire tudod majd használni az itt megszerzett tudást? Mit szeretnél elérni a szakmádban?' name='motivationProfession' onChange={(e) => this.props.textChange(e)} placeholder='Mit vársz el a képzéstől, miért szeretnél rá jelentkezni, szerinted mire tudod majd használni az itt megszerzett tudást? Mit szeretnél elérni a szakmádban?' value={motivationProfession} /> ) : ( <HiddenForm fontWeight='bold' label='Mit vársz el a képzéstől, miért szeretnél rá jelentkezni, szerinted mire tudod majd használni az itt megszerzett tudást? Mit szeretnél elérni a szakmádban?' value={motivationProfession} /> )} <Divider horizontal /> {canEdit ? ( <Form.TextArea rows={10} name='motivationExercise' onChange={(e) => this.props.textChange(e)} placeholder='' label={( <div> <b> Alább találsz néhány elgondolkodtató kérdést, megoldandó feladatot. A kérdések és feladatok elkészítése opcionális, nem titkolt célunk ezzel a lelkesedés felmérése. A válaszokat a kérdések alatti szövegdobozba várjuk. </b> <ul> <li> Szeretnéd kedvenc tantárgyad vik.wiki oldalát elérni, de szomorúan látod, hogy az oldal nem jön be. A Steam pedig hibátlanul megy a háttérben és az emailek is megérkeznek... Szobatársadnak pont megvan a vik.wiki szerverének IP-címe. Csodálkozva látod, hogy a böngésző címsorába írva eléred a kiszolgáló webszervert. Mi lehet a baj? </li> <br /> <li> Két előadás közti szünetben úgy döntesz, hogy laptopoddal az index.hu tech cikkeit fogod görgetni. Ám az oldal nem válaszol, a hiba okát megpróbálod kideríteni. Ekkor veszed észre, hogy az alábbiakat sem éred el: sze.hu, 444.hu, corvinus.hu, startlap.hu. Ugyanakkor a Facebook, a Gmail, a YouTube, de még az egyetemi oldalak többsége is működik. Szerinted mi lehet a hiba oka? </li> <br /> <li> Találsz egy értelmetlen szöveget egy honlapon (például: {' '} <a href='https://ujonc.kszk.bme.hu/zebra.html'> https://ujonc.kszk.bme.hu/zebra.html </a> ), de feltűnik, hogy két egyenlőségjellel fejeződik be. Nyomozz, s a végeredményt (amit találtál) írd ide! </li> <br /> <li> A {' '} <b>ujonc.kszk.bme.hu</b> {' '} címen elérhető gépen fut egy szolgáltatás az alapértelmezett {' '} <b>5432</b> {' '} porton (használd az előző feladatban kapott adatokat). Belépés után keresd meg a feladat megoldását! </li> </ul> </div> )} value={motivationExercise} /> ) : ( <HiddenForm fontWeight='normal' label={( <div> <b> Alább találsz néhány elgondolkodtató kérdést, megoldandó feladatot. A kérdések és feladatok elkészítése opcionális, nem titkolt célunk ezzel a lelkesedés felmérése. A válaszokat a kérdések alatti szövegdobozba várjuk. </b> <ul> <li> Szeretnéd kedvenc tantárgyad vik.wiki oldalát elérni, de szomorúan látod, hogy az oldal nem jön be. A Steam pedig hibátlanul megy a háttérben és az emailek is megérkeznek... Szobatársadnak pont megvan a vik.wiki szerverének IP-címe. Csodálkozva látod, hogy a böngésző címsorába írva eléred a kiszolgáló webszervert. Mi lehet a baj? </li> <li> Két előadás közti szünetben úgy döntesz, hogy laptopoddal az index.hu tech cikkeit fogod görgetni. Ám az oldal nem válaszol, a hiba okát megpróbálod kideríteni. Ekkor veszed észre, hogy az alábbiakat sem éred el: sze.hu, 444.hu, corvinus.hu, startlap.hu. Ugyanakkor a Facebook, a Gmail, a YouTube, de még az egyetemi oldalak többsége is működik. Szerinted mi lehet a hiba oka? </li> <li> Találsz egy értelmetlen szöveget egy honlapon (például: {' '} <a href='https://ujonc.kszk.bme.hu/zebra.html'>https://ujonc.kszk.bme.hu/zebra.html</a> ), de feltűnik, hogy két egyenlőségjellel fejeződik be. Nyomozz, s a végeredményt (amit találtál) írd ide! </li> <li> A {' '} <b>ujonc.kszk.bme.hu</b> {' '} címen elérhető gépen fut egy szolgáltatás az alapértelmezett {' '} <b>5432</b> {' '} porton (használd az előző feladatban kapott adatokat). Belépés után keresd meg a feladat megoldását! </li> </ul> </div> )} value={motivationExercise} /> )} <Divider horizontal>Érdekelődés</Divider> <Dropdown fluid multiple selection placeholder='DevTeam, ...' onChange={(_, v) => this.props.groupChange(v.value)} options={options} defaultValue={groups} disabled={!canEdit} /> <br /> <Form.Checkbox name='signed' label='Szeretnék a képzés során emaileket kapni és jelentkezni a KSZKépzésre' onChange={(_, v) => this.props.textChange({ target: { name: v.name, value: v.checked }, })} checked={signed} readOnly={!canEdit} style={!canEdit ? { marginBottom: '5em' } : null} /> {canEdit ? ( <Form.Button primary style={{ marginBottom: '5em' }} disabled={!signed} onClick={() => this.props.submitRegistration({ nick, motivationAbout, motivationProfession, motivationExercise, signed, groups, id, })} > Mentés </Form.Button> ) : '' } </Form> </Container> ); } } const mapStateToProps = ({ user: { nick, groups, motivationAbout, motivationProfession, motivationExercise, signed, id, deadline, messageBefore, messageAfter, }, }) => ({ nick, groups, motivationAbout, motivationProfession, motivationExercise, signed, id, deadline, messageBefore, messageAfter, }); export default connect(mapStateToProps, { textChange, submitRegistration, groupChange, getDeadline, })(Profile);