Claim gateway via QR code (FE)

CHANGELOG.md

@@ -16,6 +16,7 @@ For details about compatibility between different releases, see the **Commitment
 - Option to pause application webhooks.
 - Endpoint for claiming gateways using a qr code
 - Update the GetTemplate endpoint in device repository to check for profile identifiers in the vendor index.
+- Support for claiming a gateway via QR code in the Console.
 
 ### Changed
 

pkg/qrcodegenerator/qrcode/gateways/gateways.go

@@ -123,5 +123,5 @@ func (s *Server) Parse(formatID string, data []byte) (ret Data, err error) {
  return f, nil
  }
 
- return nil, errUnknownFormat
+ return nil, errUnknownFormat.New()
 }

pkg/qrcodegenerator/qrcode/gateways/ttigpro1.go

@@ -26,8 +26,8 @@ const (
 )
 
 // ttigpro1Regex is the regular expression to match the TTIGPRO1 format.
-// The format is as follows: https://ttig.pro/c/{16 lowercase base16 chars}/{12 base62 chars}.
-var ttigpro1Regex = regexp.MustCompile(`^https://ttig\.pro/c/([a-f0-9]{16})/([a-z0-9]{12})$`)
+// The format is as follows: https://ttig.pro/c/{16 lowercase base16 chars}/{8+ base32 chars}.
+var ttigpro1Regex = regexp.MustCompile(`^https://ttig\.pro/c/([a-f0-9]{16})/([a-z0-9]{8,})$`)
 
 // TTIGPRO1 is a format for gateway identification QR codes.
 type ttigpro1 struct {
@@ -40,7 +40,7 @@ func (m *ttigpro1) UnmarshalText(text []byte) error {
  // Match the URL against the pattern
  matches := ttigpro1Regex.FindStringSubmatch(string(text))
  if matches == nil || len(matches) != 3 {
- return errInvalidFormat
+ return errInvalidFormat.New()
  }
 
  if err := m.gatewayEUI.UnmarshalText([]byte(matches[1])); err != nil {
@@ -49,8 +49,8 @@ func (m *ttigpro1) UnmarshalText(text []byte) error {
 
  m.ownerToken = matches[2]
 
- if len(m.ownerToken) != 12 /* owner token length */ {
- return errInvalidLength
+ if len(m.ownerToken) < 8 {
+ return errInvalidLength.New()
  }
 
  return nil

pkg/qrcodegenerator/qrcode/gateways/ttigpro1_test.go

@@ -37,10 +37,10 @@ func TestTTIGPRO1(t *testing.T) {
  }{
  {
  Name: "CorrectQRCode",
- Data: []byte("https://ttig.pro/c/ec656efffe000128/abcdef123456"),
+ Data: []byte("https://ttig.pro/c/ec656efffe000128/abcdef12"),
  Expected: ttigpro1{
  gatewayEUI: types.EUI64{0xec, 0x65, 0x6e, 0xff, 0xfe, 0x00, 0x01, 0x28},
- ownerToken: "abcdef123456",
+ ownerToken: "abcdef12",
  },
  },
  {
@@ -77,7 +77,7 @@ func TestTTIGPRO1(t *testing.T) {
  },
  {
  Name: "Invalid/OwnerTokenLength",
- Data: []byte("https://ttig.pro/c/ec656efffe000128/abcdef123"),
+ Data: []byte("https://ttig.pro/c/ec656efffe000128/abcdef"),
  ErrorAssertion: func(t *testing.T, err error) bool {
  t.Helper()
  return assertions.New(t).So(errors.IsInvalidArgument(err), should.BeTrue)

pkg/webui/components/modal/modal.styl

@@ -28,7 +28,7 @@
  max-height: 80vh
 
  +media-query-min($bp.sm)
- min-width: 500px
+ min-width: 385px
  max-width: 780px
 
  +media-query($bp.sm)

pkg/webui/components/qr-modal-button/index.js

@@ -35,14 +35,12 @@ const QrScanDoc = (
 )
 
 const m = defineMessages({
- scanEndDeviceContinue: 'Please scan the QR code to continue. {qrScanDoc}',
- invalidData:
- 'Invalid QR code data. Please note that only TR005 LoRaWAN® Device Identification QR Code can be scanned. Some devices have unrelated QR codes printed on them that cannot be used.',
+ scanContinue: 'Please scan the QR code to continue. {qrScanDoc}',
  apply: 'Apply',
 })
 
 const QRModalButton = props => {
- const { message, onApprove, onCancel, onRead, qrData } = props
+ const { message, onApprove, onCancel, onRead, qrData, invalidMessage } = props
 
  const handleRead = useCallback(
  val => {
@@ -57,15 +55,16 @@ const QRModalButton = props => {
  qrData.valid ? (
  <DataSheet data={qrData.data} />
  ) : (
- <ErrorMessage content={m.invalidData} />
+ <ErrorMessage content={invalidMessage} />
  )
  ) : (
  <>
  <QR onChange={handleRead} />
  <Message
- content={m.scanEndDeviceContinue}
+ content={m.scanContinue}
  values={{ qrScanDoc: QrScanDoc }}
  component="span"
+ className="c-text-neutral-light"
  />
  </>
  )}
@@ -80,7 +79,7 @@ const QRModalButton = props => {
  onApprove={onApprove}
  message={message}
  modalData={{
- title: sharedMessages.scanEndDevice,
+ title: message,
  children: modalData,
  buttonMessage: m.apply,
  approveButtonProps: {
@@ -95,6 +94,7 @@ const QRModalButton = props => {
 }
 
 QRModalButton.propTypes = {
+ invalidMessage: PropTypes.message.isRequired,
  message: PropTypes.message.isRequired,
  onApprove: PropTypes.func.isRequired,
  onCancel: PropTypes.func.isRequired,

pkg/webui/components/qr/input/video/index.js

@@ -234,7 +234,7 @@ const Video = props => {
  data-test-id="webcam-feed"
  />
  ) : (
- <Spinner center>
+ <Spinner center inline className="mb-cs-xl">
  <Message className={style.msg} content={m.fetchingCamera} />
  </Spinner>
  )}

pkg/webui/components/qr/qr.styl

@@ -36,5 +36,5 @@
  width: 100%
  max-height: 75vh
 
-.msg
- color: var(--c-bg-neutral-min)
+ +media-query($bp.xl)
+  max-height: 47vh

pkg/webui/components/qr/require-permission.js

@@ -18,6 +18,7 @@ import { defineMessages } from 'react-intl'
 import ErrorMessage from '@ttn-lw/lib/components/error-message'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
+import sharedMessages from '@ttn-lw/lib/shared-messages'
 
 import Button from '../button'
 
@@ -111,9 +112,14 @@ const RequirePermission = props => {
  if (!allow || videoError) {
  return (
  <div className={style.captureWrapper}>
- <ErrorMessage style={{ color: '#fff' }} content={m.permissionDeniedError} />
+ <ErrorMessage content={m.permissionDeniedError} />
  <br />
- <Button className="mt-cs-m" onClick={handleUseCapture} message={m.uploadImage} secondary />
+ <Button
+ className="mt-cs-m"
+ onClick={handleUseCapture}
+ message={sharedMessages.uploadAnImage}
+ secondary
+ />
  </div>
  )
  }

pkg/webui/console/containers/device-onboarding-form/messages.js

@@ -49,9 +49,6 @@ export default defineMessages({
  hasEndDeviceQR:
  'Does your end device have a LoRaWAN® Device Identification QR Code? Scan it to speed up onboarding.',
  deviceGuide: 'Device registration help',
- deviceInfo: 'Found QR code data',
- resetQRCodeData: 'Reset QR code data',
- resetConfirm:
- 'Are you sure you want to discard QR code data? The scanned device will not be registered and the form will be reset.',
- scanSuccess: 'QR code scanned successfully',
+ invalidData:
+ 'Invalid QR code data. Please note that only TR005 LoRaWAN® Device Identification QR Code can be scanned. Some devices have unrelated QR codes printed on them that cannot be used.',
 })

pkg/webui/console/containers/device-onboarding-form/qr-scan-form-section/index.js

@@ -27,7 +27,7 @@ import Message from '@ttn-lw/lib/components/message'
 import attachPromise from '@ttn-lw/lib/store/actions/attach-promise'
 import sharedMessages from '@ttn-lw/lib/shared-messages'
 
-import { parseQRCode } from '@console/store/actions/qr-code-generator'
+import { parseEndDeviceQRCode } from '@console/store/actions/qr-code-generator'
 
 import { selectDeviceBrands } from '@console/store/selectors/device-repository'
 
@@ -101,15 +101,15 @@ const DeviceQRScanFormSection = () => {
  async qrCode => {
  try {
  // Get end device template from QR code
- const device = await dispatch(attachPromise(parseQRCode(qrCode)))
+ const device = await dispatch(attachPromise(parseEndDeviceQRCode(qrCode)))
 
  const { end_device } = device.end_device_template
  const { lora_alliance_profile_ids } = end_device
 
  const brand = getBrand(lora_alliance_profile_ids.vendor_id)
  const sheetData = [
  {
- header: m.deviceInfo,
+ header: sharedMessages.qrCodeData,
  items: [
  {
  key: sharedMessages.claimAuthCode,
@@ -151,7 +151,7 @@ const DeviceQRScanFormSection = () => {
  {qrData.approved ? (
  <div className="mb-cs-xs">
  <Icon icon={IconCheck} textPaddedRight className="c-bg-success-normal" />
- <Message content={m.scanSuccess} />
+ <Message content={sharedMessages.scanSuccess} />
  </div>
  ) : (
  <div className="mb-cs-xs">
@@ -164,12 +164,12 @@ const DeviceQRScanFormSection = () => {
  type="button"
  icon={IconX}
  onApprove={handleReset}
- message={m.resetQRCodeData}
+ message={sharedMessages.qrCodeDataReset}
  modalData={{
- title: m.resetQRCodeData,
+ title: sharedMessages.qrCodeDataReset,
  noTitleLine: true,
- buttonMessage: m.resetQRCodeData,
- children: <Message content={m.resetConfirm} component="span" />,
+ buttonMessage: sharedMessages.qrCodeDataReset,
+ children: <Message content={sharedMessages.resetConfirm} component="span" />,
  approveButtonProps: {
  icon: IconX,
  },
@@ -178,6 +178,7 @@ const DeviceQRScanFormSection = () => {
  ) : (
  <QRModalButton
  message={sharedMessages.scanEndDevice}
+ invalidMessage={m.invalidData}
  onApprove={handleQRCodeApprove}
  onCancel={handleQRCodeCancel}
  onRead={handleQRCodeRead}

pkg/webui/console/containers/gateway-onboarding-form/gateway-provisioning-form/gateway-claim-form-section/index.js

@@ -52,6 +52,7 @@ const initialValues = {
 const GatewayClaimFormSection = () => {
  const { values, addToFieldRegistry, removeFromFieldRegistry } = useFormikContext()
  const isManaged = values._inputMethod === 'managed'
+ const withQRdata = values._withQRdata
 
  // Register hidden fields so they don't get cleaned.
  useEffect(() => {
@@ -83,6 +84,7 @@ const GatewayClaimFormSection = () => {
  component={Input}
  encode={btoa}
  decode={atob}
+ disabled={withQRdata}
  autoFocus
  />
  <Form.Field

pkg/webui/console/containers/gateway-onboarding-form/gateway-provisioning-form/index.js

@@ -71,6 +71,7 @@ const GatewayProvisioningFormSection = () => {
  values: {
  _ownerId: ownerId,
  _inputMethod: inputMethod,
+ _withQRdata: withQRdata,
  ids: { eui = '' },
  },
  initialValues,
@@ -120,6 +121,13 @@ const GatewayProvisioningFormSection = () => {
  }
  }, [dispatch, eui, hasEmptyEui, setFieldValue])
 
+ useEffect(() => {
+ // Auto-confirm the join EUI when using QR code data.
+ if (withQRdata) {
+ handleGatewayEUI()
+ }
+ }, [withQRdata, handleGatewayEUI])
+
  const handleEuiReset = useCallback(async () => {
  setEuiError(undefined)
  resetForm({ values: { ...initialValues, _ownerId: ownerId } })
@@ -162,7 +170,7 @@ const GatewayProvisioningFormSection = () => {
  component={Input}
  tooltipId={tooltipIds.GATEWAY_EUI}
  required={inputMethod !== 'register'}
- disabled={hasInputMethod}
+ disabled={hasInputMethod || withQRdata}
  onKeyDown={handleGatewayEUIKeydown}
  encode={gatewayEuiEncoder}
  decode={gatewayEuiDecoder}
@@ -184,6 +192,7 @@ const GatewayProvisioningFormSection = () => {
  message={sharedMessages.reset}
  onClick={handleEuiReset}
  secondary
+ disabled={withQRdata}
  />
  ) : (
  <Button

pkg/webui/console/containers/gateway-onboarding-form/index.js

@@ -33,6 +33,7 @@ import GatewayProvisioningFormSection from './gateway-provisioning-form'
 import validationSchema from './gateway-provisioning-form/validation-schema'
 import { initialValues as registerInitialValues } from './gateway-provisioning-form/gateway-registration-form-section'
 import { initialValues as claimingInitialValues } from './gateway-provisioning-form/gateway-claim-form-section'
+import GatewayQRScanSection from './qr-scan-section'
 
 const GatewayOnboardingForm = props => {
  const { onSuccess } = props
@@ -190,6 +191,7 @@ const GatewayOnboardingForm = props => {
  validationSchema={validationSchema}
  validateAgainstCleanedValues
  >
+ <GatewayQRScanSection />
  <GatewayProvisioningFormSection userId={userId} />
  </Form>
  </>