Produced by Araxis Merge on 9/24/2019 1:37:43 PM Eastern Daylight Time. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.
| # | Location | File | Last Modified |
|---|---|---|---|
| 1 | PCL-5_v1_build_8.zip\v1_build 8\Unredacted\spp_form_builder-dev.zip\spp_form_builder-dev\source\frontend\src\app | Login.js | Wed Jul 31 18:47:01 2019 UTC |
| 2 | PCL-5_v1_build_8.zip\v1_build 8\Unredacted\spp_form_builder-dev.zip\spp_form_builder-dev\source\frontend\src\app | Login.js | Fri Sep 20 17:11:21 2019 UTC |
| Description | Between Files 1 and 2 |
|
|---|---|---|
| Text Blocks | Lines | |
| Unchanged | 2 | 450 |
| Changed | 1 | 2 |
| Inserted | 0 | 0 |
| Removed | 0 | 0 |
| Whitespace | |
|---|---|
| Character case | Differences in character case are significant |
| Line endings | Differences in line endings (CR and LF characters) are ignored |
| CR/LF characters | Not shown in the comparison detail |
No regular expressions were active.
| 1 | import Rea ct, { useS tate } fro m 'react'; | |
| 2 | ||
| 3 | import axi os from 'a xios'; | |
| 4 | import Swa l from 'sw eetalert2' ; | |
| 5 | import wit hReactCont ent from ' sweetalert 2-react-co ntent'; | |
| 6 | ||
| 7 | import sty led from ' styled-com ponents'; | |
| 8 | import Lin earProgres s from '@m aterial-ui /core/Line arProgress '; | |
| 9 | import Car d from '@m aterial-ui /core/Card '; | |
| 10 | import Car dHeader fr om '@mater ial-ui/cor e/CardHead er'; | |
| 11 | import Car dActions f rom '@mate rial-ui/co re/CardAct ions'; | |
| 12 | import Car dContent f rom '@mate rial-ui/co re/CardCon tent'; | |
| 13 | import But ton from ' @material- ui/core/Bu tton'; | |
| 14 | import Tex tField fro m '@materi al-ui/core /TextField '; | |
| 15 | import Inp utAdornmen t from '@m aterial-ui /core/Inpu tAdornment '; | |
| 16 | import Com puter from '@materia l-ui/icons /Computer' ; | |
| 17 | import Inp ut from '@ material-u i/icons/In put'; | |
| 18 | import Ico nButton fr om '@mater ial-ui/cor e/IconButt on'; | |
| 19 | import Vis ibility fr om '@mater ial-ui/ico ns/Visibil ity'; | |
| 20 | import Vis ibilityOff from '@ma terial-ui/ icons/Visi bilityOff' ; | |
| 21 | import Sen d from '@m aterial-ui /icons/Sen d'; | |
| 22 | ||
| 23 | import { c onnect } f rom 'react -redux'; | |
| 24 | ||
| 25 | const DivC ardWrapper = styled. div` | |
| 26 | margin: 1.5rem; | |
| 27 | min-widt h: 420px; | |
| 28 | max-heig ht: 420px; | |
| 29 | `; | |
| 30 | ||
| 31 | const Card HeaderStyl e = styled (({ ...oth er }) => < CardHeader {...other } />)` | |
| 32 | backgrou nd-color: #347ab7; | |
| 33 | ||
| 34 | & .MuiCa rdHeader-t itle { | |
| 35 | color: #fff; | |
| 36 | font-s ize: 1rem; | |
| 37 | } | |
| 38 | `; | |
| 39 | ||
| 40 | const Card ContentSty le = style d(CardCont ent)` | |
| 41 | && { | |
| 42 | displa y: flex; | |
| 43 | flex-d irection: column; | |
| 44 | margin : auto; | |
| 45 | max-wi dth: 28vw; | |
| 46 | } | |
| 47 | `; | |
| 48 | ||
| 49 | const Card ActionsSty le = style d(CardActi ons)` | |
| 50 | && { | |
| 51 | displa y: flex; | |
| 52 | justif y-content: center; | |
| 53 | margin -bottom: 1 rem; | |
| 54 | } | |
| 55 | `; | |
| 56 | ||
| 57 | const Text FieldStyle = styled( TextField) ` | |
| 58 | && { | |
| 59 | margin -top: 1rem ; | |
| 60 | } | |
| 61 | `; | |
| 62 | ||
| 63 | const Butt onStyle = styled(But ton)` | |
| 64 | && { | |
| 65 | backgr ound: line ar-gradien t(45deg, # 01d1b2 30% , #01d1b2 90%); | |
| 66 | color: #f8f8f8; | |
| 67 | text-t ransform: capitalize ; | |
| 68 | font-s ize: 1rem; | |
| 69 | } | |
| 70 | `; | |
| 71 | ||
| 72 | const Send IconStyle = styled(S end)` | |
| 73 | margin-l eft: 0.5re m; | |
| 74 | `; | |
| 75 | ||
| 76 | const Line arProgress Style = st yled(({ .. .other }) => ( | |
| 77 | <LinearP rogress {. ..other} / > | |
| 78 | ))` | |
| 79 | & .MuiLi nearProgre ss-barColo rPrimary { | |
| 80 | backgr ound-color : #007bff; | |
| 81 | } | |
| 82 | `; | |
| 83 | ||
| 84 | ||
| 85 | const Logi n = ({ log in, loadin gData }) = > { | |
| 86 | const [ip, setIp] = useState(' IP '); | |
| 87 | const [p ort, setPo rt] = useS tate('8083 '); | |
| 88 | const [a ccess, set Access] = useState(' '); | |
| 89 | const [v erify, set Verify] = useState(' '); | |
| 90 | const [s howPasswor d, setShow Password] = useState (false); | |
| 91 | const [i sConnectin g, setIsCo nnecting] = useState (false); | |
| 92 | ||
| 93 | const My Swal = wit hReactCont ent(Swal); | |
| 94 | ||
| 95 | async fu nction han dleConnect () { | |
| 96 | setIsC onnecting( true); | |
| 97 | ||
| 98 | var sh ortid = re quire('sho rtid'); | |
| 99 | const payload = { | |
| 100 | ip, | |
| 101 | port , | |
| 102 | acce ss, | |
| 103 | veri fy, | |
| 104 | sess ionId: sho rtid.gener ate() | |
| 105 | }; | |
| 106 | ||
| 107 | try { | |
| 108 | cons t user = a wait axios .post(`/ap i/login`, payload); | |
| 109 | cons t userData = user.da ta; | |
| 110 | if ( userData.i sAuthentic ated) { | |
| 111 | lo gin({ ...u serData, s essionId: payload.se ssionId }) ; | |
| 112 | } el se { | |
| 113 | My Swal.fire( { | |
| 114 | type: 'war ning', | |
| 115 | title: 'Co nnection f ailed!', | |
| 116 | html: `<p4 >Failed to connect t o VistaLin k</p4> | |
| 117 | <b r/><br/> | |
| 118 | Pl ease doubl e check <b >server, p ort, acces s and veri fy code.</ b>` | |
| 119 | }) ; | |
| 120 | se tIsConnect ing(false) ; | |
| 121 | } | |
| 122 | } catc h (error) { | |
| 123 | MySw al.fire({ | |
| 124 | ty pe: 'error ', | |
| 125 | ti tle: 'Conn ection err or!', | |
| 126 | ht ml: `<p4>E rror in co nnecting t o VistaLin k</p4>` | |
| 127 | }); | |
| 128 | setI sConnectin g(false); | |
| 129 | } fina lly { | |
| 130 | load ingData(); | |
| 131 | } | |
| 132 | } | |
| 133 | ||
| 134 | return ( | |
| 135 | <DivCa rdWrapper> | |
| 136 | <Car d> | |
| 137 | <C ardHeaderS tyle title ="Login" / > | |
| 138 | <C ardContent Style> | |
| 139 | <TextField Style | |
| 140 | id="ip" | |
| 141 | label="S erver" | |
| 142 | value={i p} | |
| 143 | onChange ={(event) => setIp(e vent.targe t.value)} | |
| 144 | InputPro ps={{ | |
| 145 | endAdo rnment: ( | |
| 146 | <Inp utAdornmen t position ="start"> | |
| 147 | <C omputer /> | |
| 148 | </In putAdornme nt> | |
| 149 | ) | |
| 150 | }} | |
| 151 | /> | |
| 152 | <TextField Style | |
| 153 | id="port " | |
| 154 | label="P ort" | |
| 155 | value={p ort} | |
| 156 | onChange ={(event) => setPort (event.tar get.value) } | |
| 157 | InputPro ps={{ | |
| 158 | endAdo rnment: ( | |
| 159 | <Inp utAdornmen t position ="start"> | |
| 160 | <I nput /> | |
| 161 | </In putAdornme nt> | |
| 162 | ) | |
| 163 | }} | |
| 164 | /> | |
| 165 | <TextField Style | |
| 166 | id="acce ss" | |
| 167 | label="A ccess Code " | |
| 168 | type={sh owPassword ? 'text' : 'passwor d'} | |
| 169 | value={a ccess} | |
| 170 | onChange ={(event) => setAcce ss(event.t arget.valu e)} | |
| 171 | InputPro ps={{ | |
| 172 | endAdo rnment: ( | |
| 173 | <Inp utAdornmen t position ="start"> | |
| 174 | <I conButton | |
| 175 | edge="end" | |
| 176 | aria-label ="Toggle a ccess code visibilit y" | |
| 177 | onClick={( ) => setSh owPassword (!showPass word)} | |
| 178 | > | |
| 179 | {showPassw ord ? <Vis ibilityOff /> : <Vis ibility /> } | |
| 180 | </ IconButton > | |
| 181 | </In putAdornme nt> | |
| 182 | ) | |
| 183 | }} | |
| 184 | /> | |
| 185 | <TextField Style | |
| 186 | id="veri fy" | |
| 187 | label="V erify Code " | |
| 188 | type={sh owPassword ? 'text' : 'passwor d'} | |
| 189 | value={v erify} | |
| 190 | onChange ={(event) => setVeri fy(event.t arget.valu e)} | |
| 191 | InputPro ps={{ | |
| 192 | endAdo rnment: ( | |
| 193 | <Inp utAdornmen t position ="start"> | |
| 194 | <I conButton | |
| 195 | edge="end" | |
| 196 | aria-label ="Toggle v erify code visibilit y" | |
| 197 | onClick={( ) => setSh owPassword (!showPass word)} | |
| 198 | > | |
| 199 | {showPassw ord ? <Vis ibilityOff /> : <Vis ibility /> } | |
| 200 | </ IconButton > | |
| 201 | </In putAdornme nt> | |
| 202 | ) | |
| 203 | }} | |
| 204 | /> | |
| 205 | </ CardConten tStyle> | |
| 206 | <C ardActions Style> | |
| 207 | <ButtonSty le variant ="containe d" onClick ={handleCo nnect}> | |
| 208 | Connect <SendIconS tyle /> | |
| 209 | </ButtonSt yle> | |
| 210 | </ CardAction sStyle> | |
| 211 | </Ca rd> | |
| 212 | ||
| 213 | {isC onnecting && <Linear ProgressSt yle />} | |
| 214 | </DivC ardWrapper > | |
| 215 | ); | |
| 216 | }; | |
| 217 | ||
| 218 | export def ault conne ct( | |
| 219 | // 👇 Map to you r required state | |
| 220 | null, | |
| 221 | // 👇 Map your r equired ac tions | |
| 222 | (dispatc h) => ({ | |
| 223 | login: dispatch. login, | |
| 224 | loadin gData: dis patch.load ingData | |
| 225 | }) | |
| 226 | )(Login); |
Araxis Merge (but not the data content of this report) is Copyright © 1993-2016 Araxis Ltd (www.araxis.com). All rights reserved.