Auth.vue
1 <template lang='pug'> 2 #auth(v-if='!confirmed') 3 .mainbg(v-if='$store.state.loader.reqStatus === "pending"') 4 img.gear(src='../assets/images/gear.svg') 5 .authbox.centertitle(v-if='err') 6 .warning {{err}} 7 .authbox 8 h2.centertitle New Account 9 .input-container 10 input.input-effect(type='text', v-model='namenew', autocapitalize="none", autocomplete="off", autocorrect="off", @keyup.enter='createAccount' :class='{"has-content":!!name}') 11 label alias 12 span.focus-border 13 button(@click="createAccount") enter 14 h2.centertitle Login 15 .flexrow 16 .inputhalf 17 .input-container 18 input.input-effect(type='text', v-model='name', autocapitalize="none", autocomplete="username", autocorrect="off", @keyup.enter='createAccount' :class='{"has-content":!!name}') 19 label name 20 span.focus-border 21 .inputhalf 22 .input-container 23 input.input-effect#password(type='password', v-model='pass', autocapitalize="none", autocomplete="off", autocorrect="off", @keyup.enter='createSession' :class='{"has-content":!!pass}') 24 label password 25 span.focus-border 26 button(@click="createSession") login 27 div.featurelist 28 div.featureorbug 29 img(src='../assets/images/gear.svg') 30 span account settings 31 div.featureorbug 32 img(src='../assets/images/doge.svg') 33 span view accounts, click to go there 34 div.featureorbug 35 img(src='../assets/images/clipboard.svg') 36 span click text of card to copy 37 div.featureorbug 38 img(src='../assets/images/hourglass.svg') 39 span mark in progress to record time 40 div.featureorbug 41 img(src='../assets/images/trash.svg') 42 span delete a card drag to bottom right (remove only works if single account present) 43 div.featureorbug 44 img(src='../assets/images/xmark.svg') 45 img(src='../assets/images/mark.svg') 46 span cards checked multiple times keep a tally 47 div.featureorbug 48 img(src='../assets/images/timecube.svg') 49 span view on calendar, accumulate recursively. Drag to day to schedule 50 div.featureorbug 51 img(src='../assets/images/badge.svg') 52 span pin in progress things for quick access 53 div.featureorbug 54 img(src='../assets/images/completed.svg') 55 span completing a card stores it under the completed switch 56 div.featureorbug 57 img(src='../assets/images/lightning.svg') 58 span collect payment record and create invoices 59 div.featureorbug 60 img(src='../assets/images/bull.svg') 61 span connect resources and trigger with fob reader, button, and payment 62 div 63 div 64 div 65 div 66 div 67 div 68 img(src='../assets/images/sunglasses.svg') 69 div 70 div 71 </template> 72 73 <script> 74 75 import request from 'superagent' 76 import cryptoUtils from '../crypto' 77 78 const HARDCODED_DEV_URL = 'http://localhost:8003' 79 80 let ao_server 81 82 if (import.meta.env.DEV) { 83 // In dev, refer to the backend location 84 ao_server = HARDCODED_DEV_URL 85 } else { 86 // When built, default to / 87 ao_server = '' 88 } 89 90 91 export default { 92 name: 'Auth', 93 data(){ 94 return { 95 waitingLogin: false, 96 existing: false, 97 name: '', 98 namenew: '', 99 pass: '', 100 err: '' 101 } 102 }, 103 computed: { 104 confirmed(){ 105 return this.$store.getters.isLoggedIn 106 }, 107 }, 108 methods: { 109 toggleExisting(){ 110 this.existing = !this.existing 111 this.err = '' 112 }, 113 createAccount(){ 114 request.get(ao_server + '/newaccount/' + this.namenew) 115 .end((err, res) => { 116 console.log({err,res}) 117 if (err) { 118 return this.err = err.message 119 } 120 121 console.log('resbody?', res.body) 122 123 const { token, session } = res.body 124 125 this.setAuth(token, session) 126 127 //setTimeout(()=> window.location.reload(true), 101) 128 }) 129 }, 130 async createSession(){ 131 let session = crypto.randomUUID() 132 let hashpass = cryptoUtils.buf2hex(await cryptoUtils.createHash(this.pass)) 133 let sessionKey = cryptoUtils.buf2hex(await cryptoUtils.createHash(session + hashpass)) 134 cryptoUtils.HMAC(sessionKey, session).then(token => { 135 request 136 .post(ao_server + '/session') 137 .set('authorization', token) 138 .set('session', session) 139 .set('name', this.name) 140 .end( err =>{ 141 if (err) { 142 this.pass = '' 143 return this.err = err.message 144 } 145 this.setAuth(token, session) 146 }) 147 }) 148 }, 149 setAuth(token, session){ 150 this.pass = "" 151 this.$store.commit('setAuth', { 152 token, 153 session, 154 }) 155 156 if (token && session){ 157 window.localStorage.setItem("token", token) 158 window.localStorage.setItem("session", session) 159 160 this.waitingLogin = true 161 this.$store.dispatch('loadCurrent') 162 } 163 } 164 } 165 } 166 </script> 167 168 <style lang='stylus' scoped> 169 170 @import '../styles/colours' 171 @import '../styles/button' 172 @import '../styles/switch' 173 @import '../styles/input' 174 @import '../styles/spinners' 175 176 button 177 background: #2e7232; 178 width: 7.77em; 179 180 div.featurelist 181 align-items: center 182 justify-content: center 183 display: flex 184 flex-direction: row 185 flex-wrap: wrap 186 187 div.featureorbug 188 background: wrexgreen 189 margin: 1em 190 padding: 1em 191 display: flex 192 flex-direction: row 193 align-items: center 194 width: 240px 195 196 ul 197 text-align:right 198 position: relative 199 right: 1em 200 201 .authbox 202 background: lightGrey 203 padding: 1.3em 3em 3em 3em 204 border-style: solid 205 margin-bottom: 2.2em 206 207 .flexrow 208 display: flex 209 .inputhalf 210 flex-grow: 1 211 212 .mainbg 213 background: #40404090; 214 text-align: center; 215 position: fixed; 216 width: 100%; 217 height: 100%; 218 top: 0; 219 left: 0; 220 z-index: 10; 221 display: flex; 222 align-items: center; 223 justify-content: center; 224 225 @keyframes spin { 226 from {transform:rotate(0deg);} 227 to {transform:rotate(360deg);} 228 } 229 230 img.gear 231 height: 10em; 232 animation: spin 3s infinite linear 233 234 .center 235 text-align: center 236 237 .existing 238 background: main 239 color: lightGrey 240 241 .existing:hover span 242 text-decoration: underline 243 244 .centertitle 245 text-align: center 246 font-weight: bolder 247 font-size: 1.2em 248 margin-bottom: 0 249 250 .five.grid.center 251 padding: .77em 252 text-align: center; 253 254 .switcher 255 margin-top: 1.3em 256 margin-bottom: 1.3em 257 cursor: pointer 258 display: flex 259 260 .five 261 flex-grow: 5 262 263 .two 264 flex-grow: 2 265 text-align: center 266 267 .notethis 268 margin-top: 1em 269 270 .featureorbug img 271 height: 3em 272 padding: 1em 273 274 .warning 275 position: absolute; 276 left: 1em; 277 278 .foge 279 height: 5em 280 float: left 281 </style>