index.js

// Copyright © 2021 The Things Network Foundation, The Things Industries B.V.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import React, { useState, useCallback } from 'react'
import { useLocation } from 'react-router-dom'
import Query from 'query-string'
import { defineMessages } from 'react-intl'

import api from '@account/api'

import Form from '@ttn-lw/components/form'
import Input from '@ttn-lw/components/input'
import SubmitButton from '@ttn-lw/components/submit-button'

import IntlHelmet from '@ttn-lw/lib/components/intl-helmet'

import style from '@account/views/front/front.styl'

import Yup from '@ttn-lw/lib/yup'
import {
  selectApplicationRootPath,
  selectApplicationSiteName,
  selectApplicationSiteTitle,
} from '@ttn-lw/lib/selectors/env'
import sharedMessages from '@ttn-lw/lib/shared-messages'

const m = defineMessages({
  loginToken: 'Login Token',
  loginFailed: 'Login failed',
})

const appRoot = selectApplicationRootPath()
const siteName = selectApplicationSiteName()
const siteTitle = selectApplicationSiteTitle()

const validationSchema = Yup.object().shape({
  token: Yup.string().required(sharedMessages.validateRequired),
})

const url = (location, omitQuery = false) => {
  const query = Query.parse(location.search)

  const next = query.n || appRoot

  if (omitQuery) {
    return next.split('?')[0]
  }

  return next
}

const TokenLogin = () => {
  const [error, setError] = useState(undefined)
  const location = useLocation()
  const { token: tokenParam } = Query.parse(location.search)

  const handleSubmit = useCallback(
    async (values, { setSubmitting }) => {
      try {
        setError(undefined)
        await api.account.tokenLogin(values)

        window.location = url(location)
      } catch (error) {
        setError(error)
        setSubmitting(false)
      }
    },
    [location],
  )

  const initialValues = {
    token: tokenParam ? tokenParam : '',
  }

  return (
    <div className={style.form}>
      <IntlHelmet title={sharedMessages.login} />
      <h1 className={style.title}>
        {siteName}
        <br />
        <span className={style.subTitle}>{siteTitle}</span>
      </h1>
      <hr className={style.hRule} />
      <Form
        onSubmit={handleSubmit}
        initialValues={initialValues}
        error={error}
        errorTitle={m.loginFailed}
        validationSchema={validationSchema}
        horizontal={false}
      >
        <Form.Field title={m.loginToken} component={Input} name="token" type="password" required />
        <div className={style.buttons}>
          <Form.Submit
            component={SubmitButton}
            message={sharedMessages.login}
            className={style.submitButton}
          />
        </div>
      </Form>
    </div>
  )
}

export default TokenLogin