github.com/resonatecoop/id@v1.1.0-43/frontend/src/components/forms/authorize.js (about)

     1  const html = require('choo/html')
     2  const Component = require('choo/component')
     3  const nanostate = require('nanostate')
     4  const icon = require('@resonate/icon-element')
     5  
     6  class Authorize extends Component {
     7    constructor (id, state, emit) {
     8      super(id)
     9  
    10      this.emit = emit
    11      this.state = state
    12  
    13      this.local = state.components[id] = Object.create({
    14        machine: nanostate.parallel({
    15          request: nanostate('idle', {
    16            idle: { start: 'loading' },
    17            loading: { resolve: 'data', reject: 'error', reset: 'idle' },
    18            data: { reset: 'idle', start: 'loading' },
    19            error: { reset: 'idle', start: 'loading' }
    20          }),
    21          loader: nanostate('off', {
    22            on: { toggle: 'off' },
    23            off: { toggle: 'on' }
    24          })
    25        })
    26      })
    27  
    28      this.local.error = {}
    29  
    30      this.local.machine.on('request:error', () => {
    31        if (this.element) this.rerender()
    32      })
    33  
    34      this.local.machine.on('request:loading', () => {
    35        if (this.element) this.rerender()
    36      })
    37  
    38      this.local.machine.on('loader:toggle', () => {
    39        if (this.element) this.rerender()
    40      })
    41  
    42      this.local.machine.on('request:error', () => {
    43        if (this.element) this.rerender()
    44      })
    45  
    46      this.local.machine.transitions.request.event('error', nanostate('error', {
    47        error: { start: 'loading' }
    48      }))
    49  
    50      this.local.machine.on('request:noResults', () => {
    51        if (this.element) this.rerender()
    52      })
    53  
    54      this.local.machine.transitions.request.event('noResults', nanostate('noResults', {
    55        noResults: { start: 'loading' }
    56      }))
    57    }
    58  
    59    createElement (props) {
    60      const input = (props) => {
    61        const attrs = Object.assign({
    62          type: 'submit',
    63          name: 'allow',
    64          class: 'bg-white black ba bw b--dark-gray f5 b pv3 ph3 grow',
    65          value: 'Finish Login'
    66        }, props)
    67  
    68        return html`
    69          <input ${attrs}>
    70        `
    71      }
    72  
    73      const attrs = {
    74        class: 'flex flex-column flex-auto ma0 pa0',
    75        action: '',
    76        method: 'POST'
    77      }
    78  
    79      return html`
    80        <div class="flex flex-column flex-auto">
    81          <form ${attrs}>
    82            <input type="hidden" name="gorilla.csrf.Token" value=${this.state.csrfToken}>
    83  
    84            ${this.state.query.response_type === 'token'
    85            ? html`
    86              <p>How long do you want to authorize <b>${this.state.applicationName}</b> for?</p>
    87              <div class="flex w-100">
    88                <div class="flex items-center flex-auto">
    89                  <input tabindex="-1" type="radio" name="lifetime" id="hour" value="3600">
    90                  <label tabindex="0" class="flex flex-auto items-center justify-center w-100" for="hour">
    91                    <div class="pv3 flex justify-center w-100 flex-auto">
    92                      ${icon('circle', { class: 'fill-white' })}
    93                    </div>
    94                    <div class="pv3 flex w-100 flex-auto">1 hour</div>
    95                  </label>
    96                </div>
    97                <div class="flex items-center flex-auto">
    98                  <input tabindex="-1" type="radio" name="lifetime" id="day" value="86400">
    99                  <label tabindex="0" class="flex flex-auto items-center justify-center w-100" for="day">
   100                    <div class="pv3 flex justify-center w-100 flex-auto">
   101                      ${icon('circle', { class: 'fill-white' })}
   102                    </div>
   103                    <div class="pv3 flex w-100 flex-auto">1 day</div>
   104                  </label>
   105                </div>
   106                <div class="flex items-center flex-auto">
   107                  <input tabindex="-1" type="radio" name="lifetime" id="week" value="604800" checked>
   108                  <label tabindex="0" class="flex flex-auto items-center justify-center w-100" for="week">
   109                    <div class="pv3 flex justify-center w-100 flex-auto">
   110                      ${icon('circle', { class: 'fill-white' })}
   111                    </div>
   112                    <div class="pv3 flex w-100 flex-auto">1 week</div>
   113                  </label>
   114                </div>
   115              </div>`
   116            : ''}
   117  
   118            <p class="lh-copy">Logging in as <b>${this.state.profile.displayName ? this.state.profile.displayName : this.state.profile.email}</b></p>
   119  
   120            <div class="flex">
   121              <div class="mr3">
   122                ${input({
   123                  name: 'allow',
   124                  value: 'Finish Login'
   125                })}
   126              </div>
   127              <div>
   128                ${input({
   129                  name: 'deny',
   130                  class: 'bg-white black f5 bn b pv3 ph3 grow',
   131                  value: 'Cancel'
   132                })}
   133              </div>
   134            </div>
   135          </form>
   136        </div>
   137      `
   138    }
   139  
   140    update () {
   141      return false
   142    }
   143  }
   144  
   145  module.exports = Authorize