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_mha_dashboard-dev.zip\spp_mha_dashboard-dev\source\frontend\src\app | Login.js | Thu Jul 25 14:27:52 2019 UTC |
| 2 | PCL-5_v1_build_8.zip\v1_build 8\Unredacted\spp_mha_dashboard-dev.zip\spp_mha_dashboard-dev\source\frontend\src\app | Login.js | Fri Sep 20 17:12:11 2019 UTC |
| Description | Between Files 1 and 2 |
|
|---|---|---|
| Text Blocks | Lines | |
| Unchanged | 2 | 482 |
| 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, useR ef, useEff ect } from '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 C ardHeaderS tyle = sty led(({ ... other }) = > <CardHea der {...ot her} />)` | |
| 32 | // backg round-colo r: #347ab7 ; | |
| 33 | ||
| 34 | // & .Mu iCardHeade r-title { | |
| 35 | // col or: #fff; | |
| 36 | // fon t-size: 1r em; | |
| 37 | // } | |
| 38 | // `; | |
| 39 | ||
| 40 | const Card HeaderStyl e = styled (CardHeade r)` | |
| 41 | backgrou nd-color: #347ab7; | |
| 42 | ||
| 43 | .MuiCard Header-tit le { | |
| 44 | color: #fff; | |
| 45 | font-s ize: 1rem; | |
| 46 | } | |
| 47 | `; | |
| 48 | ||
| 49 | const Card ContentSty le = style d(CardCont ent)` | |
| 50 | && { | |
| 51 | displa y: flex; | |
| 52 | flex-d irection: column; | |
| 53 | margin : auto; | |
| 54 | max-wi dth: 28vw; | |
| 55 | } | |
| 56 | `; | |
| 57 | ||
| 58 | const Card ActionsSty le = style d(CardActi ons)` | |
| 59 | && { | |
| 60 | displa y: flex; | |
| 61 | justif y-content: center; | |
| 62 | margin -bottom: 1 rem; | |
| 63 | } | |
| 64 | `; | |
| 65 | ||
| 66 | const Text FieldStyle = styled( TextField) ` | |
| 67 | && { | |
| 68 | margin -top: 1rem ; | |
| 69 | } | |
| 70 | `; | |
| 71 | ||
| 72 | const Butt onStyle = styled(But ton)` | |
| 73 | && { | |
| 74 | backgr ound: line ar-gradien t(45deg, # 01d1b2 30% , #01d1b2 90%); | |
| 75 | color: #f8f8f8; | |
| 76 | text-t ransform: capitalize ; | |
| 77 | font-s ize: 1rem; | |
| 78 | } | |
| 79 | `; | |
| 80 | ||
| 81 | const Send IconStyle = styled(S end)` | |
| 82 | margin-l eft: 0.5re m; | |
| 83 | `; | |
| 84 | ||
| 85 | const Line arProgress Style = st yled(Linea rProgress) ` | |
| 86 | .MuiLine arProgress -barColorP rimary { | |
| 87 | backgr ound-color : #007bff; | |
| 88 | } | |
| 89 | `; | |
| 90 | ||
| 91 | const Logi n = ({ log in, loadDa shboardDat a }) => { | |
| 92 | const [ip, setIp] = useState(' IP '); | |
| 93 | const [p ort, setPo rt] = useS tate('8083 '); | |
| 94 | const [a ccess, set Access] = useState(' 1234ABC'); | |
| 95 | const [v erify, set Verify] = useState(' ABC.1234') ; | |
| 96 | const [s howPasswor d, setShow Password] = useState (false); | |
| 97 | const [i sConnectin g, setIsCo nnecting] = useState (false); | |
| 98 | ||
| 99 | /* Set C onnect but ton focus */ | |
| 100 | const bu ttonRef = useRef(); | |
| 101 | useEffec t(() => { | |
| 102 | button Ref.curren t.focus(); | |
| 103 | }); | |
| 104 | ||
| 105 | const My Swal = wit hReactCont ent(Swal); | |
| 106 | ||
| 107 | async fu nction han dleConnect () { | |
| 108 | setIsC onnecting( true); | |
| 109 | ||
| 110 | var sh ortid = re quire('sho rtid'); | |
| 111 | const payload = { | |
| 112 | ip, | |
| 113 | port , | |
| 114 | acce ss, | |
| 115 | veri fy, | |
| 116 | sess ionId: sho rtid.gener ate() | |
| 117 | }; | |
| 118 | ||
| 119 | try { | |
| 120 | cons t user = a wait axios .post(`/ap i/login`, payload); | |
| 121 | cons t userData = user.da ta; | |
| 122 | if ( userData.i sAuthentic ated) { | |
| 123 | lo gin({ ...u serData, s essionId: payload.se ssionId }) ; | |
| 124 | } el se { | |
| 125 | My Swal.fire( { | |
| 126 | type: 'war ning', | |
| 127 | title: 'Co nnection f ailed!', | |
| 128 | html: `<p4 >Failed to connect t o VistaLin k</p4> | |
| 129 | <b r/><br/> | |
| 130 | Pl ease doubl e check <b >server, p ort, acces s and veri fy code.</ b>` | |
| 131 | }) ; | |
| 132 | se tIsConnect ing(false) ; | |
| 133 | } | |
| 134 | } catc h (error) { | |
| 135 | MySw al.fire({ | |
| 136 | ty pe: 'error ', | |
| 137 | ti tle: 'Conn ection err or!', | |
| 138 | ht ml: `<p4>E rror in co nnecting t o VistaLin k</p4>` | |
| 139 | }); | |
| 140 | setI sConnectin g(false); | |
| 141 | } fina lly { | |
| 142 | load DashboardD ata(); | |
| 143 | } | |
| 144 | } | |
| 145 | ||
| 146 | return ( | |
| 147 | <DivCa rdWrapper> | |
| 148 | <Car d> | |
| 149 | <C ardHeaderS tyle title ="Login" / > | |
| 150 | <C ardContent Style> | |
| 151 | <TextField Style | |
| 152 | id="ip" | |
| 153 | label="S erver" | |
| 154 | value={i p} | |
| 155 | onChange ={(event) => setIp(e vent.targe t.value)} | |
| 156 | InputPro ps={{ | |
| 157 | endAdo rnment: ( | |
| 158 | <Inp utAdornmen t position ="start"> | |
| 159 | <C omputer /> | |
| 160 | </In putAdornme nt> | |
| 161 | ) | |
| 162 | }} | |
| 163 | /> | |
| 164 | <TextField Style | |
| 165 | id="port " | |
| 166 | label="P ort" | |
| 167 | value={p ort} | |
| 168 | onChange ={(event) => setPort (event.tar get.value) } | |
| 169 | InputPro ps={{ | |
| 170 | endAdo rnment: ( | |
| 171 | <Inp utAdornmen t position ="start"> | |
| 172 | <I nput /> | |
| 173 | </In putAdornme nt> | |
| 174 | ) | |
| 175 | }} | |
| 176 | /> | |
| 177 | <TextField Style | |
| 178 | id="acce ss" | |
| 179 | label="A ccess Code " | |
| 180 | type={sh owPassword ? 'text' : 'passwor d'} | |
| 181 | value={a ccess} | |
| 182 | onChange ={(event) => setAcce ss(event.t arget.valu e)} | |
| 183 | InputPro ps={{ | |
| 184 | endAdo rnment: ( | |
| 185 | <Inp utAdornmen t position ="start"> | |
| 186 | <I conButton | |
| 187 | edge="end" | |
| 188 | aria-label ="Toggle a ccess code visibilit y" | |
| 189 | onClick={( ) => setSh owPassword (!showPass word)} | |
| 190 | > | |
| 191 | {showPassw ord ? <Vis ibilityOff /> : <Vis ibility /> } | |
| 192 | </ IconButton > | |
| 193 | </In putAdornme nt> | |
| 194 | ) | |
| 195 | }} | |
| 196 | /> | |
| 197 | <TextField Style | |
| 198 | id="veri fy" | |
| 199 | label="V erify Code " | |
| 200 | type={sh owPassword ? 'text' : 'passwor d'} | |
| 201 | value={v erify} | |
| 202 | onChange ={(event) => setVeri fy(event.t arget.valu e)} | |
| 203 | InputPro ps={{ | |
| 204 | endAdo rnment: ( | |
| 205 | <Inp utAdornmen t position ="start"> | |
| 206 | <I conButton | |
| 207 | edge="end" | |
| 208 | aria-label ="Toggle v erify code visibilit y" | |
| 209 | onClick={( ) => setSh owPassword (!showPass word)} | |
| 210 | > | |
| 211 | {showPassw ord ? <Vis ibilityOff /> : <Vis ibility /> } | |
| 212 | </ IconButton > | |
| 213 | </In putAdornme nt> | |
| 214 | ) | |
| 215 | }} | |
| 216 | /> | |
| 217 | </ CardConten tStyle> | |
| 218 | <C ardActions Style> | |
| 219 | <ButtonSty le | |
| 220 | variant= "contained " | |
| 221 | ref={but tonRef} | |
| 222 | onClick= {handleCon nect} | |
| 223 | > | |
| 224 | Connect <SendIconS tyle /> | |
| 225 | </ButtonSt yle> | |
| 226 | </ CardAction sStyle> | |
| 227 | </Ca rd> | |
| 228 | ||
| 229 | {isC onnecting && <Linear ProgressSt yle />} | |
| 230 | </DivC ardWrapper > | |
| 231 | ); | |
| 232 | }; | |
| 233 | ||
| 234 | export def ault conne ct( | |
| 235 | // 👇 Map to you r required state | |
| 236 | null, | |
| 237 | // 👇 Map your r equired ac tions | |
| 238 | (dispatc h) => ({ | |
| 239 | login: dispatch. login, | |
| 240 | loadDa shboardDat a: dispatc h.loadDash boardData | |
| 241 | }) | |
| 242 | )(Login); |
Araxis Merge (but not the data content of this report) is Copyright © 1993-2016 Araxis Ltd (www.araxis.com). All rights reserved.