1  <template lang='pug'>
  2  
  3  #settings
  4      .row
  5          .six.columns
  6              select(v-model='change.field', @change='empty')
  7                  option(value='name') name
  8                  option(value='secret') password
  9                  option(value='fob') fob
 10              .input-container
 11                  input.input-effect(:type='inputType' v-model='change.newfield'  :class='{"has-content":!!change.newfield}')
 12                  label new value
 13                  span.focus-border
 14              .input-container(v-if='inputType === "password"')
 15                  .row
 16                      .six.columns
 17                          input.input-effect(:type='inputType', v-model='change.confirmNewfield'  :class='{"has-content":!!change.confirmNewfield}')
 18                          label repeat
 19                          span.focus-border
 20                      .check.six.columns(v-if='inputType === "password"')
 21                          button(@click='update'  v-if='change.newfield  && change.confirmNewfield.length > 0 && matched') update password
 22                          span(v-else)
 23                              img.checkmark(v-if='matched', src='../assets/images/completed.svg')
 24                              img.checkmark(v-else, src='../assets/images/uncompleted.svg')
 25                              span - repeat correctly
 26              .aligncenter
 27                  button(@click='update'  v-if='inputType !== "password"') change
 28          .six.columns
 29              .check.click(@click='toggleStacks')
 30                  img.checkmark(v-if='$store.getters.member.stacks === 5', src='../assets/images/completed.svg')
 31                  img.checkmark(v-else, src='../assets/images/uncompleted.svg')
 32                  span.space colors
 33              div &nbsp;
 34              .aligncenter
 35                  button(@click='logout') log out
 36      .breathing
 37  </template>
 38  
 39  <script>
 40  import cryptoUtils from '../crypto'
 41  import Current from './Current.vue'
 42  import Lightning from './Lightning.vue'
 43  import MemberRow from './MemberRow.vue'
 44  import Connect from './Connect.vue'
 45  
 46  export default {
 47      components: {Current, MemberRow, Lightning, Connect},
 48      data() {
 49        return {
 50          change: {
 51              field: 'name',
 52              newfield: '',
 53              confirmNewfield: ''
 54          },
 55          member: {
 56            name: '',
 57            pass: '',
 58            fob: '',
 59          },
 60        }
 61      },
 62      methods: {
 63          logout(){
 64              this.$store.dispatch('makeEvent', {
 65                  type: 'session-killed',
 66                  session: this.$store.state.loader.session,
 67              })
 68              setTimeout(()=>{
 69                  location.reload()
 70              }, 123)
 71          },
 72          toggleStacks(){
 73              let newfield = 5
 74              if (this.$store.getters.member.stacks === 5){
 75                  newfield = 1
 76              }
 77              this.$store.dispatch('makeEvent', {
 78                  type: "member-field-updated",
 79                  field: 'stacks',
 80                  newfield,
 81                  memberId: this.$store.getters.member.memberId
 82              })
 83          },
 84          toggleMuted(){
 85              this.$store.dispatch('makeEvent', {
 86                  type: "member-field-updated",
 87                  field: 'muted',
 88                  newfield: !this.$store.getters.member.muted,
 89                  memberId: this.$store.getters.member.memberId
 90              })
 91          },
 92          toggleGuides(){
 93              this.$store.dispatch('makeEvent', {
 94                  type: "member-field-updated",
 95                  field: 'guides',
 96                  newfield: !this.$store.getters.member.guides,
 97                  memberId: this.$store.getters.member.memberId
 98              })
 99          },
100          toggleTooltips(){
101              this.$store.dispatch('makeEvent', {
102                  type: "member-field-updated",
103                  field: 'tooltips',
104                  newfield: !this.$store.getters.member.tooltips,
105                  memberId: this.$store.getters.member.memberId
106              })
107          },
108          empty(){
109              this.change.newfield = ''
110              this.change.confirmNewfield = ''
111          },
112          async update(){
113              this.$store.dispatch('makeEvent', await this.changeReq)
114              this.empty()
115          },
116          async newMember() {
117              /* TODO delete these async calls */
118              this.$store.dispatch('makeEvent', await this.memberReq)
119          },
120      },
121      computed:{
122        matched(){
123            if (this.change.field === "secret"){
124                let x = this.change.newfield
125                let y = this.change.confirmNewfield
126                return x === y
127            } else {
128                return true
129            }
130        },
131        async changeReq(){
132            if (this.change.field === 'secret'){
133                  const hashbuf = await cryptoUtils.createHash(this.change.newfield)
134                  const data = {
135                      type: "member-field-updated",
136                      field: this.change.field,
137                      newfield: cryptoUtils.buf2hex(hashbuf),
138                      memberId: this.$store.getters.member.memberId
139                  }
140  
141                  console.log('change data', data)
142                  return data
143            }
144            return {
145                type: "member-field-updated",
146                field: this.change.field,
147                newfield: this.change.newfield,
148                memberId: this.$store.getters.member.memberId
149            }
150        },
151        inputType(){
152            if (this.change.field === 'secret'){
153                return 'password'
154            } else if (this.change.field === 'muted') {
155                return 'boolean'
156            } else {
157                return 'text'
158            }
159        },
160        async memberReq(){
161            let name, secret
162            name = this.member.name
163            if (name){
164                const hashbuf = await cryptoUtils.createHash(name)
165                secret = await cryptoUtils.buf2hex(hashbuf)
166            }
167            return {
168                type: "member-created",
169                name,
170                secret,
171                fob: this.member.fob,
172            }
173            },
174        nonMembers(){
175            return this.sortedMembers
176              .filter(m => m.active <= 0)
177        },
178        coreMembers(){
179            return this.sortedMembers
180              .filter(m => m.active > 0 && this.$store.state.tasks[this.$store.state.hashMap[m.memberId]].boost > 0)
181        },
182        pendingDeactivations(){
183            return this.sortedMembers
184              .filter(m => m.active > 0 && this.$store.state.tasks[this.$store.state.hashMap[m.memberId]].boost <= 0)
185        },
186        sortedMembers(){
187                let sortedMembers = this.$store.state.members.slice()
188                sortedMembers.sort((a, b) => {
189                    let cardA = this.$store.state.tasks[this.$store.state.hashMap[a.memberId]]
190                    let cardB = this.$store.state.tasks[this.$store.state.hashMap[b.memberId]]
191                    if(cardA.deck.length < cardB.deck.length) return 1
192                    if(cardA.deck.length === cardB.deck.length) return 0
193                    return -1
194                })
195                return sortedMembers.filter(m => m.memberId !== this.$store.getters.member.memberId)
196          },
197        activeAccounts(){
198              let a = 0
199              this.$store.state.members.forEach(m => {
200                  if (m.active > 0) {
201                      a ++
202                  }
203              })
204              return a
205          }
206      }
207  }
208  </script>
209  
210  <style lang='stylus' scoped>
211  
212  @import '../styles/colours'
213  @import '../styles/skeleton'
214  @import '../styles/breakpoints'
215  @import '../styles/button'
216  @import '../styles/input'
217  
218  #settings
219      overflow-y: scroll
220      max-height: 100vh;
221  
222  input:-webkit-autofill {
223      -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
224      -webkit-text-fill-color: #333;
225  }
226  input:-webkit-autofill:focus {
227      -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
228      -webkit-text-fill-color: #333;
229  }
230  
231  .bg
232      background: lightGrey
233      padding: 0.33em
234      border-radius: 3%
235  
236  .aligncenter
237      text-align: center
238      margin-bottom: 1.1234566em
239  
240  button
241      background: softGrey
242      color: white
243      max-width: 13em
244  
245  .breathing
246      height: 1.12em
247  
248  .section
249      color:main
250      font-size: 1.14em
251      font-weight: bold
252      margin-bottom: .9em
253  
254  .fw
255      width: 100%
256  .padding
257      padding: 1.987654321em
258  .cross
259      text-decoration: line-through
260  .inline
261      display:inline-block
262      margin:15px
263  .menu
264      color: softGrey
265      font-size: 2em
266  h1
267  		margin-bottom: 1em
268  li
269      color:white
270      font-size:18px
271      font-family: 'Open Sans', light, sans-serif
272  h3
273      font-family: 'Open Sans', light, sans-serif
274      font-size:1.6em
275  .space
276      padding-left: .654321em
277  .click
278      cursor: pointer
279  img
280      float: left
281      height: 3em
282      position: relative
283      right: 0
284  .checkmark
285      height: 1.58em
286  .check
287      padding: 0.5em
288  input, select
289      z-index:123123
290  .activelabel
291      font-size: 1.2em
292      margin-bottom: 1em
293      clear: both
294  .fl
295      float: left
296  .mt
297      margin-top: -1em
298  li
299      margin-left: 1em
300  
301  </style>