mendersoftware / gui / 951400782

Source File
Press 'n' to go to next uncovered line, 'b' for previous

92.31
/src/js/components/devices/dialogs/preauth-dialog.js
1 
// Copyright 2020 Northern.tech AS
2 
//
3 
//    Licensed under the Apache License, Version 2.0 (the "License");
4 
//    you may not use this file except in compliance with the License.
5 
//    You may obtain a copy of the License at
6 
//
7 
//        http://www.apache.org/licenses/LICENSE-2.0
8 
//
9 
//    Unless required by applicable law or agreed to in writing, software
10 
//    distributed under the License is distributed on an "AS IS" BASIS,
11 
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 
//    See the License for the specific language governing permissions and
13 
//    limitations under the License.
14 
import React, { useState } from 'react';
15 









16



// material ui










17



import { InfoOutlined as InfoIcon } from '@mui/icons-material';










18



import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';










19












20



import { isEmpty } from '../../../helpers';










21



import FileUpload from '../../common/forms/fileupload';










22



import KeyValueEditor from '../../common/forms/keyvalueeditor';










23












24



export const DeviceLimitContact = () => (




15✔





25



  <p>




×







26



    If you need a higher device limit, you can contact us through our{' '}










27



    <a href="https://support.northern.tech" target="_blank" rel="noopener noreferrer">










28



      support portal










29



    </a>{' '}










30



    to request a higher limit.










31



  </p>










32



);










33












34



export const DeviceLimitWarning = ({ acceptedDevices, deviceLimit, hasContactInfo }) => (




15✔





35



  <div className="margin-bottom-small margin-top-small warning">




18✔





36



    <InfoIcon style={{ marginRight: 2, height: 16, verticalAlign: 'bottom' }} />










37



    You have reached your limit of authorized devices: {acceptedDevices} of {deviceLimit}










38



    {hasContactInfo && <DeviceLimitContact />}





18!





39



  </div>










40



);










41












42



export const PreauthDialog = ({ acceptedDevices, deviceLimit, limitMaxed, onCancel, onSubmit, preauthDevice, setSnackbar }) => {




15✔





43



  const [errortext, setErrortext] = useState(null);




48✔





44



  const [jsonIdentity, setJsonIdentity] = useState(null);




48✔





45



  const [publicKey, setPublicKey] = useState(null);




48✔





46












47



  const convertIdentityToJSON = jsonIdentity => {




48✔





48



    setErrortext(null);




42✔





49



    setJsonIdentity(jsonIdentity);




42✔





50



  };










51












52



  const onHandleSubmit = shouldClose => {




48✔





53



    const authset = {




2✔





54



      pubkey: publicKey,










55



      identity_data: jsonIdentity










56



    };










57



    return preauthDevice(authset)




2✔





58



      .then(() => onSubmit(shouldClose))




1✔





59



      .catch(setErrortext);










60



  };










61












62



  const isSubmitDisabled = !publicKey || isEmpty(jsonIdentity) || !!limitMaxed;





48✔





63



  return (




48✔





64



    <Dialog open>










65



      <DialogTitle>Preauthorize devices</DialogTitle>










66



      <DialogContent style={{ overflow: 'hidden' }}>










67



        <p>You can preauthorize a device by adding its authentication dataset here.</p>










68



        <p>This means when a device with the matching key and identity data comes online, it will automatically be authorized to connect to the server.</p>










69












70



        <h4 className="margin-top margin-bottom-small">Public key</h4>










71



        <FileUpload










72



          placeholder={










73



            <>










74



              Drag here or <a>browse</a> to upload a public key file










75



            </>










76



          }










77



          onFileChange={setPublicKey}










78



          setSnackbar={setSnackbar}










79



        />










80



        <h4 className="margin-bottom-none margin-top">Identity data</h4>










81



        <KeyValueEditor errortext={errortext} onInputChange={convertIdentityToJSON} />










82



        {!!limitMaxed && <DeviceLimitWarning acceptedDevices={acceptedDevices} deviceLimit={deviceLimit} />}





66✔





83



      </DialogContent>










84



      <DialogActions>










85



        <Button onClick={onCancel}>Cancel</Button>










86



        <Button variant="contained" disabled={isSubmitDisabled} onClick={() => onHandleSubmit(false)} color="primary" style={{ marginLeft: 10 }}>




1✔





87



          Save and add another










88



        </Button>










89



        <Button variant="contained" disabled={isSubmitDisabled} onClick={() => onHandleSubmit(true)} color="secondary" style={{ marginLeft: 10 }}>




1✔





90



          Save










91



        </Button>










92



      </DialogActions>










93



    </Dialog>










94



  );










95



};










96












97



export default PreauthDialog;
























    

  • 

    •