1  <template lang='pug'>
  2  
  3  .app
  4    .container(v-if='!$store.getters.isLoggedIn')
  5        auth
  6    router-view(v-else)
  7  
  8  </template>
  9  
 10  <script>
 11  import Panels from './components/Panels.vue'
 12  import Auth from './components/Auth.vue'
 13  import Helm from './components/Helm.vue'
 14  
 15  export default {
 16      mounted() {
 17          let token = window.localStorage.token
 18          let session = window.localStorage.session
 19          if (token && session){
 20              this.$store.commit('setAuth', {token, session})
 21          } else {
 22              const params = new URLSearchParams(window.location.search)
 23              token = params.get('token') 
 24              console.log('got token from params', token)
 25              if (token) this.$store.commit('setAuth', {token})
 26          }
 27          this.$store.dispatch('loadCurrent')
 28          window.addEventListener('keypress', this.alwaysFocus)
 29          window.addEventListener('keydown', this.alwaysFocusDown)
 30      },
 31      components: {
 32          Auth, Helm, Panels 
 33      },
 34      methods: {
 35          alwaysFocus(anypass){
 36              if (anypass.target.id === "card" && !this.$store.state.upgrades.create){
 37                  this.$store.commit('toggleCreate')
 38              }
 39              if (anypass.target.id === "card" || anypass.target.type === "text" || anypass.target.type === "password"){
 40                  this.$store.commit('focus', '')
 41                  return // skip focus
 42              }
 43              this.$store.commit('focus', anypass.key)
 44          },
 45          alwaysFocusDown(anypass){
 46              if (anypass.key === 'Backspace'){
 47                  if (anypass.target.id === "card" || anypass.target.type === "text" || anypass.target.type === "password"){
 48                      return // skip focus
 49                  }
 50                  this.$store.commit('focus', anypass.key)
 51              }
 52          }
 53      }
 54  }
 55  
 56  </script>
 57  
 58  <style lang="stylus">
 59  
 60  @import "./styles/normalize";
 61  @import "./styles/skeleton";
 62  @import "./styles/colours";
 63  
 64  
 65  .reqStatus
 66      background: blue
 67      color: black
 68      position: absolute;
 69      bottom: 3em
 70      left: 3em
 71      font-size: 2em
 72  
 73  .cb
 74      text-align: center
 75      font-weight: bolder;
 76      font-size: 1.4em
 77  p
 78      display: inline
 79      margin: 0
 80      padding: 0
 81      img
 82          max-width: 100%
 83  iframe
 84      max-width: 100%
 85  
 86  .four.columns.plac
 87      text-align: center
 88      .placmage
 89          height: 3em
 90  
 91  .app
 92      background: #28432c
 93      background-image: url('/src/assets/images/torii.jpg')
 94      background-attachment: fixed;
 95      background-size: cover;
 96      color: main
 97      min-height: 100vh
 98      font-family: "Open Sans", sans-serif;
 99  
100  .statement
101      margin: 2em
102      padding: 2em
103      background: lightGrey
104      div
105          margin-bottom: 0.987em
106  
107  .statement.dark
108      background: main
109      color: lightGrey
110  .container
111      padding-top: 4em 
112  
113  </style>