2020-08-11 00:49:26 +10:00
< style >
2020-11-15 18:08:50 +11:00
h1 {
font - size : 32 px ;
}
h2 {
font - size : 24 px ;
}
mini - br {
border - width : 0.1 em ;
}
unselectable {
- webkit - user - select : none ; /* Safari */
- moz - user - select : none ; /* Firefox */
- ms - user - select : none ; /* IE10+/Edge */
user - select : none ; /* Standard */
}
. vertical {
margin : 0 ;
position : absolute ;
top : 50 % ;
left : 50 % ;
- ms - transform : translate ( - 50 % , - 50 % ) ;
transform : translate ( - 50 % , - 50 % ) ;
}
. emoji {
height : 1 em ;
width : 1 em ;
margin : 0 .05 em 0 .1 em ;
vertical - align : - 0.1 em ;
}
blockquote {
border - left : 8 px solid # bab7b7 ;
padding : 1 rem ;
}
. modal . animation - content . modal - card {
overflow - y : scroll ;
scrollbar - width : none ;
- ms - overflow - style : none ;
}
. modal . animation - content . modal - card : : - webkit - scrollbar {
width : 0 ;
height : 0 ;
}
. modal - card - body {
overflow : visible ! important ;
}
2020-08-11 00:49:26 +10:00
< / style >
2020-08-07 12:36:34 +10:00
< template >
2020-08-19 20:10:29 +10:00
< div id = 'app' >
2020-10-11 18:48:07 +11:00
< div >
2020-11-15 18:08:50 +11:00
< confirm -modal
v - model = 'showConfirmModal'
@ confirm = 'deleteAccount'
color = 'is-danger'
text = 'Send email'
2020-11-15 21:52:07 +11:00
style = "z-index: 101"
2020-11-15 18:08:50 +11:00
>
< div class = "card-content" >
When submitting this , you will receive an email sent to your email address to proceed with account deletion .
< / div >
< / c o n f i r m - m o d a l >
< modal -window v -model = ' settings.account.showLogoutModal ' style = 'z-index: 100' width = '25rem' : no -padding = ' true ' :is-error ="true" >
< div slot = "header" >
You have been logged out .
< / div >
< div slot = 'main' >
< p style = 'margin: 1rem;' > You have been logged out , please login with your new username , or email . < / p >
< / div >
< button
slot = 'footer'
class = 'button is-info'
style = 'z-index: 100; width: 100%;'
@ click = 'showLoginModal = false'
ref = 'ajaxErrorsModalButton'
>
Okay
< / button >
< / m o d a l - w i n d o w >
2020-11-22 22:30:31 +11:00
< modal -window v -model = ' logoutModal ' :can-cancel ="true" :active ="logoutModal" @ update : active = "value => logoutModal = value" style = 'z-index: 100' >
< template class = "modal-card column box" >
< div slot = "header" >
Logging out of { { $store . state . username } }
< / div >
< div slot = "main" >
< p style = 'margin: 1rem;' > If you want to logout , press Logout , if you want to log out of all logged in accounts , press the Logout All button in the user dropdown menu . < / p >
< / div >
< / template >
< button
slot = 'footer'
class = 'button is-info'
style = 'z-index: 100; width: 100%;'
@ click = 'logout(false)'
ref = 'ajaxErrorsModalButton'
>
Logout
< / button >
< / m o d a l - w i n d o w >
2020-11-15 18:08:50 +11:00
< modal -window v -model = ' settings.account.emailCheckDelete ' style = 'z-index: 100' width = '25rem' : no -padding = ' true ' :is-error ="true" >
< div slot = "header" >
You ' ve got mail
< / div >
< div slot = 'main' >
< p style = 'margin: 1rem;' > An email has been sent to delete your account , and to confirm that you ' re the true owner of the account . < / p >
< / div >
< button
slot = 'footer'
class = 'button is-info'
style = 'z-index: 100; width: 100%;'
@ click = 'emailCheckDelete = false'
ref = 'ajaxErrorsModalButton'
>
Okay
< / button >
< / m o d a l - w i n d o w >
2020-10-01 17:36:46 +10:00
< modal -window v -model = ' showAjaxErrorsModal ' style = 'z-index: 100' width = '25rem' : no -padding = ' true ' :is-error ="true" >
< div slot = "header" >
Oh uh !
< / div >
2020-09-29 23:06:27 +10:00
< div slot = 'main' >
< p : key = 'error' v -for = ' error in this. $ store.state.ajaxErrors ' style = 'margin: 1rem;' > { { error } } < / p >
< / div >
< button
slot = 'footer'
2020-10-01 17:36:46 +10:00
class = 'button is-info'
style = 'z-index: 100; width: 100%;'
2020-09-29 23:06:27 +10:00
@ click = 'showAjaxErrorsModal = false'
ref = 'ajaxErrorsModalButton'
>
2020-10-01 17:36:46 +10:00
Okay
2020-09-29 23:06:27 +10:00
< / button >
< / m o d a l - w i n d o w >
2020-11-15 18:08:50 +11:00
< b -modal style = "z-index: 200" :can-cancel ="false" :active ="connModal" @ update : active = "value => connModal = value" v -model = " connModal " full -screen >
2020-09-29 23:06:27 +10:00
< div class = "modal-card" style = "width: auto" >
< section class = "vertical" >
< center >
2020-11-15 21:52:07 +11:00
< sync -loader color = "#445159" :size ="20" > < / s y n c - l o a d e r >
2020-09-29 23:06:27 +10:00
< h1 > Connecting to Kaverti ... < / h1 >
< p > Taking a while ? Check the < a href = "https://status.troplo.com" > service status < / a > , or alert us on < a href = "https://twitter.com/Kaverti" > Twitter < / a > ! < / p >
< / center >
< / section >
< / div >
< / b - m o d a l >
2020-11-15 18:08:50 +11:00
< b -modal :active ="settingsModal" v-model ="settingsModal" >
< div class = "modal-card" style = "width: auto" >
< template >
< div class = 'route_container section route_container--settings' >
< div class = 'column box' >
< tab -view
2020-11-18 01:04:25 +11:00
: tabs = '["General", "Account", "Privacy", "Experiments", "About"]'
2020-11-15 18:08:50 +11:00
v - model = "showSettingTab"
padding = 'true'
slot = 'main'
>
< template slot = "General" >
< div class = 'route_container' >
< h1 > General settings < / h1 >
< div >
< h2 > About me < / h2 >
< h4 >
Description
< / h4 >
< b -input type = "textarea"
: placeholder = '"Hi, I am " + $store.state.username'
maxlength = "256"
v - model = 'settings.general.description.value'
: error = 'settings.general.description.error'
> < / b - i n p u t >
< b -button
class = 'button is-info'
: loading = 'settings.general.description.loading'
@ click = 'saveDescription'
>
Save description
< / b - b u t t o n >
< / div >
< div >
< h2 > Preferences < / h2 >
< b -switch class = "is-info" v-model ="settings.general.preferences.developerMode" > Developer Mode and get beta features first < / b -switch > < br >
< b -button
class = 'button is-info'
: loading = 'settings.general.preferences.loading'
@ click = 'savePreferences'
>
Save preferences
< / b - b u t t o n >
< / div >
< / div >
< / template >
< template slot = "Account" >
< div class = 'route_container' >
< h1 > Account settings < / h1 >
< br >
< div >
< h2 > Change your password < / h2 >
< p class = 'p--condensed' >
For security , enter your current password
< / p >
< div >
< fancy -input
placeholder = 'Current password'
2020-11-15 21:52:07 +11:00
autocomplete = "current-password"
2020-11-15 18:08:50 +11:00
v - model = 'settings.account.password.current'
: error = 'settings.account.password.errors["current password"]'
type = 'password'
> < / f a n c y - i n p u t >
< / div >
< div >
< fancy -input
placeholder = 'New password'
2020-11-15 21:52:07 +11:00
autocomplete = "new-password"
2020-11-15 18:08:50 +11:00
v - model = 'settings.account.password.new'
: error = 'settings.account.password.errors["new password"]'
type = 'password'
> < / f a n c y - i n p u t >
< / div >
< b -button
class = 'button is-success'
@ click = 'savePassword'
: loading = 'settings.account.password.loading'
> Change password < / b - b u t t o n >
< / div >
< div >
< h2 > Change your username < / h2 >
< b >
Changing your username will cost 200 Koins !
< / b >
< div >
< fancy -input
placeholder = 'Current password'
v - model = 'settings.account.username.password'
: error = 'settings.account.username.errors["password"]'
type = 'password'
> < / f a n c y - i n p u t >
< / div >
< div >
< fancy -input
placeholder = 'New username'
v - model = 'settings.account.username.username'
: error = 'settings.account.username.errors["username"]'
> < / f a n c y - i n p u t >
< / div >
< b -button
class = 'button is-success'
2020-11-15 21:52:07 +11:00
autocomplete = "username"
2020-11-15 18:08:50 +11:00
@ click = 'saveUsername'
: loading = 'settings.account.username.loading'
> Change username < / b - b u t t o n >
< / div >
< div >
< br >
< h2 > Change your email address < / h2 >
< p > Your email is currently : { { $store . state . email } } < / p >
< p v-if ="$store.state.emailVerified" > Your email is verified ! < / p >
< p v-if ="!$store.state.emailVerified" > Your email is not verified , you may lose some functionality in the future with an unverified email address , if you entered your email wrong , you can change it here , or resend it. < / p >
< b -button @ click = 'verifyEmailResend' : loading = 'settings.account.email.loading' v-if ="!$store.state.emailVerified" > Resend Verification Email < / b -button >
< p v-if ="$store.state.emailVerified == null" > Connecting... < / p >
< p v-if ="$store.state.emailVerified == undefined" > Connecting... < / p >
< div >
< fancy -input
placeholder = 'New email'
2020-11-15 21:52:07 +11:00
autocomplete = "email"
2020-11-15 18:08:50 +11:00
v - model = 'settings.account.email.new'
: error = 'settings.account.email.errors["new email"]'
type = 'email'
> < / f a n c y - i n p u t >
< / div >
< div >
< fancy -input
placeholder = 'Current password'
2020-11-15 21:52:07 +11:00
autocomplete = "current-password"
2020-11-15 18:08:50 +11:00
v - model = 'settings.account.email.currentPassword'
: error = 'settings.account.email.errors["email current password"]'
type = 'password'
> < / f a n c y - i n p u t >
< / div >
< b -button
class = 'button is-success'
@ click = 'saveEmail'
: loading = 'settings.account.email.loadingChange'
> Change email address < / b - b u t t o n >
< / div >
< div >
< br >
< h2 > Enable 2 Factor Authentication < trpl -para > ( Highly Recommended ) < / t r p l - p a r a > < / h 2 >
< p class = 'p--condensed' >
For security , enter your current password
< / p >
< b -button
class = 'button is-success'
@ click = 'save2FA'
: loading = 'settings.account.totp.loading'
> Enable 2 FA < / b - b u t t o n >
< / div >
< div >
< br >
< h2 > Dangerous Options ! < / h2 >
< h3 > Kill all sessions < / h3 >
< p >
You ' ll be immediately logged out , along with all active sessions , this is useful if you think someone else is using your account , changing your password will also invalidate all sessions .
< / p >
< b -button
class = 'button is-danger'
: loading = 'settings.account.invalidateSessionLoading'
@ click = 'invalidateSession()'
> Invalidate sessions < / b - b u t t o n >
< h3 > Delete your account < / h3 >
< p >
Once this is done , your account < strong > cannot < / strong > be restored < br / >
Your current posts however will be retained , and will show up as the [ deleted ] user .
< / p >
< b -button
class = 'button is-danger'
: loading = 'settings.account.deleteAccountLoading'
@ click = 'showConfirmModal = true'
> Delete my account < / b - b u t t o n >
< / div >
< / div >
< / template >
< template slot = "Privacy" >
< div >
< center >
< h1 > Privacy < / h1 >
< br >
< div >
< h2 > Opt out of user walls < / h2 >
< b -switch
type = 'is-info'
v - model = "settings.privacy.wall"
>
Toggle
< / b - s w i t c h >
< / div >
< br >
< b -button
class = 'button is-info'
: loading = 'settings.privacy.loading'
@ click = 'savePrivacy()'
>
Save privacy preferences
< / b - b u t t o n >
< / center >
< / div >
< / template >
< template slot = "Experiments" >
< div v-if ="$store.state.developerMode" >
< center >
< h1 > Experiments < / h1 >
< p > Experiments are features that aren ' t ready to be public , but if you want to try them early , you can ( expect bugs ) , experiments may require a refresh or a route change to take effect . < / p >
< div class = "box" >
2020-11-16 23:04:23 +11:00
< h2 > Dark Theme ( Remote , Default : Light ) < / h2 >
2020-11-15 18:08:50 +11:00
< b -switch
passive - type = 'is-warning'
type = 'is-dark'
false - value = "light"
true - value = "dark"
v - model = "settings.experiments.theme"
v - if = "$store.state.developerMode" >
Toggle
< / b - s w i t c h >
< / div >
< div class = "box" >
2020-11-16 23:04:23 +11:00
< h2 > Relationships ( Local , Default : Disabled ) < / h2 >
2020-11-15 18:08:50 +11:00
< b -switch
v - model = "settings.experiments.relationships"
v - if = "$store.state.developerMode" >
Toggle
< / b - s w i t c h >
< / div >
< div class = "box" >
2020-11-16 23:04:23 +11:00
< h2 > Teams ( Local , Default : Disabled ) < / h2 >
2020-11-15 18:08:50 +11:00
< b -switch
v - model = "settings.experiments.teams"
v - if = "$store.state.developerMode" >
Toggle
< / b - s w i t c h >
< / div >
< div class = "box" >
2020-11-16 23:04:23 +11:00
< h2 > Marketplace ( Local , Default : Disabled ) < / h2 >
2020-11-15 18:08:50 +11:00
< b -switch
v - model = "settings.experiments.marketplace"
v - if = "$store.state.developerMode" >
Toggle
< / b - s w i t c h >
< / div >
2020-11-16 23:04:23 +11:00
< div class = "box" >
< h2 > New Settings Redesign ( Local , Default : Enabled ) < / h2 >
< b -switch
v - model = "settings.experiments.newsettings"
v - if = "$store.state.developerMode" >
Toggle
< / b - s w i t c h >
< / div >
2020-11-15 18:08:50 +11:00
< b -button
class = 'button is-info'
: loading = 'settings.experiments.loading'
@ click = 'doBoth()'
>
Save experiment preferences
< / b - b u t t o n >
< / center >
< / div >
< div v-else >
< center >
< h2 > Please enable Integration Developer Mode to gain access to experiments . < / h2 >
< p > It ' s easy ! Just go to Settings > General , flip the switch and save ! < / p >
< / center >
< / div >
< / template >
< template slot = "About" >
< div >
< center >
< img src = "https://cdn.kaverti.com/icon.png" width = "10%" >
< h1 > Kaverti v { { this . $store . state . clientVersion } } < / h1 >
< p > Latest client version : v { { this . $store . state . latestClientVersion } } < / p >
< p > API version : v { { this . $store . state . latestAPIVersion } } < / p >
< / center >
< / div >
< / template >
< / t a b - v i e w >
< / div >
< / div >
< / template >
< / div >
< / b - m o d a l >
2020-09-29 23:06:27 +10:00
< modal -window
2020-11-15 18:08:50 +11:00
full - screen
2020-09-29 23:06:27 +10:00
v - model = 'showAccountModal'
@ input = 'closeAccountModal'
2020-10-08 02:46:30 +11:00
style = "z-index: 99"
2020-09-29 23:06:27 +10:00
: no - padding = 'true'
: hide - footer = 'true'
2020-10-01 17:36:46 +10:00
: hide - header = "true"
2020-09-08 00:30:51 +10:00
>
2020-09-29 23:06:27 +10:00
< tab -view
2020-11-18 01:04:25 +11:00
: tabs = '["Register", "Login", "Recovery"]'
2020-09-29 23:06:27 +10:00
v - model = "showAccountTab"
padding = 'true'
slot = 'main'
>
< template slot = 'Register' >
2020-10-25 02:09:32 +11:00
< p style = 'margin-top: 0;' >
2020-09-29 23:06:27 +10:00
Sign up to { { name } } today !
< br / > It ' s fast and easy .
< / p >
< br / >
< form @ submit.prevent = ' createAccount ' >
< fancy -input
2020-10-25 02:09:32 +11:00
ref = 'input'
v - model = 'input'
2020-11-15 21:52:07 +11:00
autocomplete = "username"
2020-09-29 23:06:27 +10:00
: label - position = "kavelabelPosition"
: error = 'signup.errors.username'
placeholder = 'Username'
width = '100%'
2020-08-19 20:10:29 +10:00
>
2020-09-29 23:06:27 +10:00
< / f a n c y - i n p u t >
< fancy -input
v - model = 'signup.email'
2020-11-15 21:52:07 +11:00
autocomplete = "email"
2020-09-29 23:06:27 +10:00
: label - position = "kavelabelPosition"
: error = 'signup.errors.email'
placeholder = 'Email'
width = '100%'
type = "email"
2020-08-16 23:46:27 +10:00
>
2020-09-29 23:06:27 +10:00
< / f a n c y - i n p u t >
< fancy -input
v - model = 'signup.password'
2020-11-15 21:52:07 +11:00
autocomplete = "new-password"
2020-09-29 23:06:27 +10:00
: label - position = "kavelabelPosition"
: error = 'signup.errors.hash'
placeholder = 'Password'
type = 'password'
width = '100%'
2020-08-16 23:46:27 +10:00
>
2020-09-29 23:06:27 +10:00
< / f a n c y - i n p u t >
< fancy -input
v - model = 'signup.confirmPassword'
2020-11-15 21:52:07 +11:00
autocomplete = "new-password"
2020-09-29 23:06:27 +10:00
: label - position = "kavelabelPosition"
: error = 'signup.errors.confirmPassword'
placeholder = 'Confirm Password'
type = 'password'
width = '100%'
>
< / f a n c y - i n p u t >
By pressing the "Register" button , you agree to the Kaverti < router -link to = "/legal/tos" v -on :click.native ="closeAccountModal" > Terms of Service < / r o u t e r - l i n k > , a n d h a v e r e a d t h e < r o u t e r - l i n k t o = " / l e g a l / p r i v a c y " v - o n : c l i c k . n a t i v e = " c l o s e A c c o u n t M o d a l " > P r i v a c y P o l i c y < / r o u t e r - l i n k > .
< div style = 'margin-top: 0.5rem;' >
< b -button
class = 'is-info'
style = "width: 55%"
: loading = 'signup.loading'
@ click = 'createAccount'
v - if = '!$store.state.meta.RegistrationsDisabled'
>
Register
< / b - b u t t o n >
< b -button
class = 'is-info disabled'
disabled = "disabled"
style = "width: 55%"
: loading = 'signup.loading'
@ click = 'closeAccountModal'
v - if = '$store.state.meta.RegistrationsDisabled'
>
Disabled
< / b - b u t t o n >
& nbsp ;
< b -button style = "float: right" class = "is-danger-passive" @ click = 'closeAccountModal' >
Cancel
< / b - b u t t o n >
< / div >
< / form >
< / template >
2020-10-25 02:09:32 +11:00
< template slot = 'TCreate' >
< p style = 'margin-top: 0;' >
Sign up to { { name } } today !
< br / > It ' s fast and easy .
< / p >
< br / >
< form @ submit.prevent = ' createAccount ' >
< fancy -input
ref = 'input'
v - model = 'tcreate.username'
: label - position = "kavelabelPosition"
: error = 'tcreate.errors.username'
placeholder = 'Username'
width = '100%'
>
< / f a n c y - i n p u t >
< fancy -input
v - model = 'tcreate.name'
: label - position = "kavelabelPosition"
: error = 'tcreate.errors.name'
placeholder = 'Name'
width = '100%'
type = "email"
>
< / f a n c y - i n p u t >
By pressing the "Register" button , you agree to the Kaverti < router -link to = "/legal/tos" v -on :click.native ="closeAccountModal" > Terms of Service < / r o u t e r - l i n k > , a n d h a v e r e a d t h e < r o u t e r - l i n k t o = " / l e g a l / p r i v a c y " v - o n : c l i c k . n a t i v e = " c l o s e A c c o u n t M o d a l " > P r i v a c y P o l i c y < / r o u t e r - l i n k > .
< div style = 'margin-top: 0.5rem;' >
< b -button
class = 'is-info'
style = "width: 55%"
: loading = 'tcreate.loading'
@ click = 'createTeam'
v - if = '!$store.state.meta.RegistrationsDisabled'
>
Register
< / b - b u t t o n >
< b -button
class = 'is-info disabled'
disabled = "disabled"
style = "width: 55%"
: loading = 'signup.loading'
@ click = 'closeAccountModal'
v - if = '$store.state.meta.RegistrationsDisabled'
>
Disabled
< / b - b u t t o n >
& nbsp ;
< b -button style = "float: right" class = "is-danger-passive" @ click = 'closeAccountModal' >
Cancel
< / b - b u t t o n >
< / div >
< / form >
< / template >
2020-09-29 23:06:27 +10:00
< template slot = 'Login' >
< p style = 'margin-top: 0;' >
2020-11-22 22:30:31 +11:00
Login to { { name } }
2020-09-29 23:06:27 +10:00
< / p >
2020-11-22 22:30:31 +11:00
< form @ submit.prevent = ' doLogin ' v-if ="loginAs !== 'limit'" >
2020-09-29 23:06:27 +10:00
< fancy -input
v - model = 'login.username'
2020-11-15 21:52:07 +11:00
autocomplete = "username"
2020-09-29 23:06:27 +10:00
: error = 'login.errors.username'
2020-10-13 21:57:36 +11:00
placeholder = 'Username or Email'
2020-09-29 23:06:27 +10:00
width = '100%'
>
< / f a n c y - i n p u t >
< fancy -input
v - model = 'login.password'
2020-11-15 21:52:07 +11:00
autocomplete = "current-password"
2020-09-29 23:06:27 +10:00
: error = 'login.errors.hash'
placeholder = 'Password'
type = 'password'
width = '100%'
>
< / f a n c y - i n p u t >
< div style = 'margin-top: 0.5rem;' >
< b -button
class = 'is-info'
style = "width: 55%"
: loading = 'login.loading'
@ click = 'doLogin'
>
Login
< / b - b u t t o n >
& nbsp ;
< b -button style = "float: right" class = "is-danger-passive" @ click = 'closeAccountModal' >
Cancel
< / b - b u t t o n >
< / div >
< / form >
2020-11-22 22:30:31 +11:00
< div v-else >
< p > Oh uh you have reached the account limit , please log out of an account to continue . < / p >
< / div >
2020-09-29 23:06:27 +10:00
< / template >
2020-10-01 17:36:46 +10:00
< template slot = 'Recovery' >
< p style = 'margin-top: 0;' >
{ { name } } Account Recovery
< / p >
< form @ submit.prevent = ' doRecovery ' >
< fancy -input
v - model = 'recovery.email'
: error = 'recovery.errors.email'
placeholder = 'Email'
width = '100%'
>
< / f a n c y - i n p u t >
< div style = 'margin-top: 0.5rem;' >
< b -button
class = 'is-info'
style = "width: 55%"
: loading = 'recovery.loading'
@ click = 'doRecovery'
>
Send email
< / b - b u t t o n >
& nbsp ;
< b -button style = "float: right" class = "is-danger-passive" @ click = 'closeAccountModal' >
Cancel
< / b - b u t t o n >
< / div >
< / form >
< / template >
2020-09-29 23:06:27 +10:00
< / t a b - v i e w >
< / m o d a l - w i n d o w >
2020-11-15 18:08:50 +11:00
< template >
< section v -if = ' $ store.state.clientVersion ! = = $ store.state.latestClientVersion ' class = "hero is-info" >
< div class = "hero-body" style = "padding: 1rem 1rem !important;" >
< div class = "mobile-container" >
< div class = "container" >
< p style = "text-align: center;" > You are using an outdated client , refresh to update . < / p >
< / div >
< / div >
< / div >
< / section >
< section v -if = ' ! $ store.state.emailVerified & & $ store.state.username ' class = "hero is-danger" >
< div class = "hero-body" style = "padding: 1rem 1rem !important;" >
< div class = "mobile-container" >
< div class = "container" >
< p style = "text-align: center;" > < b > Your email is not verified . < / b > You will have limited access to Kaverti until you verify your email in < router -link style = "color: #ffffff;" to = "/settings/account" > User Settings < / r o u t e r - l i n k > < / p >
< / div >
< / div >
< / div >
< / section >
2020-11-17 18:28:05 +11:00
< section v-if ="settings.experiments.corrupt" class="hero is-danger" >
< div class = "hero-body" style = "padding: 1rem 1rem !important;" >
< div class = "mobile-container" >
< div class = "container" >
< p style = "text-align: center;" > It has been detected that your Kaverti Experiments options have been corrupted , this may lead to issues when browsing Kaverti . < a @click ="resetExperimentsStore()" style = "color: #FFFFFF;" > Reset experiment options < / a > < / p >
< / div >
< / div >
< / div >
< / section >
2020-11-15 18:08:50 +11:00
< section v -if = ' $ store.state.meta.bannerText & & ! $ store.state.username ' class = "hero is-info" >
< div class = "hero-body" style = "padding: 1rem 1rem !important;" >
< div class = "mobile-container" >
< div class = "container" >
< p style = "text-align: center;" > { { $store . state . meta . bannerText } } < / p >
< / div >
< / div >
< / div >
< / section >
< b -navbar >
2020-11-18 20:32:21 +11:00
< template slot = "brand" >
2020-09-29 23:06:27 +10:00
< b -navbar -item tag = "router-link" : to = "{ path: '/' }" >
2020-09-08 21:59:50 +10:00
< img
2020-10-10 23:20:44 +11:00
: src = $store . state . meta . icon
2020-09-08 21:59:50 +10:00
>
2020-10-10 23:20:44 +11:00
< h2 style = "padding-left: 3px;" > { { name } } < / h2 >
2020-09-29 23:06:27 +10:00
< / b - n a v b a r - i t e m >
< / template >
< template slot = "start" >
< b -navbar -item tag = "router-link" : to = "{ path: '/forums' }" > < b >
Forums
< / b > < / b - n a v b a r - i t e m >
< b -navbar -item tag = "router-link" : to = "{ path: '/users' }" > < b >
Users
< / b > < / b - n a v b a r - i t e m >
< b -navbar -item tag = "router-link" : to = "{ path: '/marketplace' }" > < b >
Marketplace
< / b > < / b - n a v b a r - i t e m >
< b -navbar -item tag = "router-link" : to = "{ path: '/teams' }" > < b >
Teams
< / b > < / b - n a v b a r - i t e m >
< div class = "navbar-item has-dropdown is-hoverable is-info" type = "is-info" >
< a class = "navbar-link" >
< b > More < / b >
2020-08-18 23:20:16 +10:00
< / a >
2020-09-29 23:06:27 +10:00
< div class = "navbar-dropdown is-boxed" >
< router -link class = "navbar-item" to = '/blog' > Blog < / r o u t e r - l i n k >
< a class = "navbar-item" href = "https://twitter.com/Kaverti" >
Twitter
< / a >
< a class = "navbar-item" href = "https://discord.gg/3jN5RAX" >
Discord
2020-08-18 23:20:16 +10:00
< / a >
2020-09-29 23:06:27 +10:00
< router -link class = "navbar-item" to = '/developers' > Developers < / r o u t e r - l i n k >
< router -link class = "navbar-item is-active" to = '/premium' > Upgrade < / r o u t e r - l i n k >
< router -link class = "navbar-item" to = '/licenses' > Credits and Licenses < / r o u t e r - l i n k >
< router -link class = "navbar-item" to = '/contributors' > Contributors < / r o u t e r - l i n k >
2020-10-08 02:46:30 +11:00
< router -link class = "navbar-item is-active" to = '/jobs' > We ' re Hiring ! < / r o u t e r - l i n k >
2020-09-29 23:06:27 +10:00
< / div >
< / div >
< / template >
< template slot = "end" v -if = ' $ store.state.username ' >
< b -navbar -item @click ="dailyReward()" v-if ="$store.state.koins" > < b >
{ { $store . state . koins } } Koins
< / b > < / b - n a v b a r - i t e m >
< b -navbar -item v-if ="!$store.state.koins" > < b >
< i class = "fas fa-circle-notch fa-spin" > < / i > Loading ...
< / b > < / b - n a v b a r - i t e m >
2020-11-22 22:30:31 +11:00
< b -navbar -item style = "background: transparent; " >
2020-11-15 18:08:50 +11:00
< NotificationButton class = "is-hidden-mobile" > < / NotificationButton >
2020-11-22 22:30:31 +11:00
< / b - n a v b a r - i t e m >
< b -navbar -item tag = "div" >
2020-09-29 23:06:27 +10:00
< div >
< div class = "navbar-item has-dropdown is-hoverable is-info" >
< a class = "navbar-link" >
2020-11-22 22:30:31 +11:00
< b > { { $store . state . username } } < / b >
2020-08-18 23:20:16 +10:00
< / a >
2020-09-29 23:06:27 +10:00
< div class = "navbar-dropdown is-boxed" >
2020-10-07 03:22:06 +11:00
< router -link class = "navbar-item" : to = '"/u/" + this.$store.state.username' > My Profile < / r o u t e r - l i n k >
2020-11-16 23:04:23 +11:00
< a class = "navbar-item is-hidden-mobile" v-if ="$store.state.experimentsStore.newsettings" @click="settingsModal = true" > Settings < / a >
< router -link class = "navbar-item is-hidden-desktop is-hidden-tablet" to = '/settings' v-if ="$store.state.experimentsStore.newsettings" > Settings < / router -link >
< router -link class = "navbar-item " to = '/settings' v-if ="!$store.state.experimentsStore.newsettings" > Settings < / router -link >
2020-11-18 20:32:21 +11:00
< router -link to = '/inventory' class = "navbar-item" > Inventory < / r o u t e r - l i n k >
< router -link to = '/transactions' class = "navbar-item" > Transactions < / r o u t e r - l i n k >
2020-10-08 22:17:15 +11:00
< router -link class = "navbar-item is-hidden-desktop" to = '/notifications' > Notifications < / r o u t e r - l i n k >
2020-09-29 23:06:27 +10:00
< router -link to = '/admin' class = "navbar-item" v -if = ' $ store.state.admin ' > Admin Panel < / r o u t e r - l i n k >
< router -link class = "navbar-item is-active" to = '/premium' > Upgrade < / r o u t e r - l i n k >
2020-11-22 22:30:31 +11:00
< a class = "navbar-item" @ click = 'logoutModal = true' >
2020-09-29 23:06:27 +10:00
Log out
< / a >
< / div >
2020-08-18 23:20:16 +10:00
< / div >
< / div >
2020-11-22 22:30:31 +11:00
< div class = "navbar-item has-dropdown is-hoverable is-info" >
< a class = "navbar-link" >
< b > Accounts < / b >
< / a >
< div class = "navbar-dropdown is-boxed" >
< b -navbar -item @click ="switchUser('user1')" v-if ="$store.state.availableUsers.user1.username" > {{ $ store.state.availableUsers.user1.username }} < / b -navbar -item >
< b -navbar -item @click ="switchUser('user2')" v-if ="$store.state.availableUsers.user2.username" > {{ $ store.state.availableUsers.user2.username }} < / b -navbar -item >
< b -navbar -item @click ="switchUser('user3')" v-if ="$store.state.availableUsers.user3.username" > {{ $ store.state.availableUsers.user3.username }} < / b -navbar -item >
< b -navbar -item @click ="showAccountModalTab(1)" > Add another user < / b -navbar -item >
< b -navbar -item @click ="logoutAll" > Logout all users < / b -navbar -item >
< b -navbar -item @click ="reload()" > Not seeing any users ? < / b -navbar -item >
< / div >
< / div >
< / b - n a v b a r - i t e m >
< b -navbar -item style = "background: transparent; " >
2020-11-15 18:08:50 +11:00
< search -box class = "kave-search" header -bar = ' true ' > < / s e a r c h - b o x >
2020-09-29 23:06:27 +10:00
< / b - n a v b a r - i t e m >
< / template >
< template slot = "end" v-else >
< b -navbar -item tag = "div" >
< div class = "buttons" >
< a class = "button is-info" @click ="showAccountModalTab(0)" >
< strong > Sign up < / strong >
< / a >
< a class = "button is-light" @click ="showAccountModalTab(1)" >
Log in
< / a >
< / div >
< / b - n a v b a r - i t e m >
< / template >
< / b - n a v b a r >
< / template >
< not -found v -show = ' $ store.state.show404Page ' > < / n o t - f o u n d >
< transition name = 'fade' >
2020-10-08 22:17:15 +11:00
< router -view id = "main" v -show = ' ! $ store.state.show404Page ' > < / r o u t e r - v i e w >
2020-09-29 23:06:27 +10:00
< / transition >
2020-11-15 18:08:50 +11:00
< footer >
2020-10-06 16:18:38 +11:00
< div class = "content has-text-centered" >
2020-10-25 02:09:32 +11:00
< br >
2020-10-06 16:18:38 +11:00
< p >
< strong > Kaverti < / strong > by < a href = "https://troplo.com" > Troplo < / a > and < router -link to = "/contributors" > Contributors < / r o u t e r - l i n k >
< br / >
Be sure to read the < router -link to = "/legal/tos" > Terms of Service < / r o u t e r - l i n k > a n d < r o u t e r - l i n k t o = " / l e g a l / p r i v a c y " > P r i v a c y P o l i c y < / r o u t e r - l i n k >
< / p >
2020-10-25 02:09:32 +11:00
< br >
2020-10-06 16:18:38 +11:00
< / div >
2020-11-15 18:08:50 +11:00
< / footer >
2020-10-11 18:48:07 +11:00
< / div >
2020-08-12 23:54:25 +10:00
< / div >
2020-08-07 12:36:34 +10:00
< / template >
2020-08-09 01:32:27 +10:00
< style >
2020-11-15 18:08:50 +11:00
@ import 'https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css' ;
2020-08-09 01:32:27 +10:00
< / style >
< style lang = "scss" >
2020-11-15 18:08:50 +11:00
$primary : # 007 aff ;
$navbar - dropdown - arrow : # 007 aff ;
2020-08-09 01:32:27 +10:00
< / style >
2020-08-07 12:36:34 +10:00
< script >
2020-11-15 18:08:50 +11:00
import ModalWindow from './components/ModalWindow'
import TabView from './components/TabView'
import FancyInput from './components/FancyInput'
import NotificationButton from './components/NotificationButton'
import SearchBox from './components/SearchBox'
import { SyncLoader } from '@saeris/vue-spinners'
import NotFound from './components/routes/NotFound'
import ConfirmModal from './components/ConfirmModal'
import AjaxErrorHandler from './assets/js/errorHandler'
import axios from "axios" ;
export default {
name : 'app' ,
components : {
ModalWindow ,
TabView ,
FancyInput ,
NotificationButton ,
SearchBox ,
NotFound ,
SyncLoader ,
ConfirmModal
} ,
data ( ) {
Object . assign ( axios . defaults , { headers : { Authorization : this . $store . state . sessToken } } )
return {
kavelabelPosition : 'on-border' ,
2020-11-22 22:30:31 +11:00
logoutModal : false ,
loginAs : 'user1' ,
2020-11-15 18:08:50 +11:00
signup : {
username : '' ,
password : '' ,
email : '' ,
confirmPassword : '' ,
passkey : '' ,
loading : false ,
errors : {
2020-08-19 20:10:29 +10:00
username : '' ,
2020-08-09 01:32:27 +10:00
email : '' ,
2020-11-15 18:08:50 +11:00
hash : '' ,
confirmPassword : ''
}
} ,
tcreate : {
username : '' ,
name : '' ,
2020-08-07 12:36:34 +10:00
2020-11-15 18:08:50 +11:00
loading : false ,
2020-08-07 12:36:34 +10:00
2020-11-15 18:08:50 +11:00
errors : {
2020-10-25 02:09:32 +11:00
username : '' ,
2020-11-15 18:08:50 +11:00
name : ''
}
} ,
login : {
username : '' ,
password : '' ,
2020-10-25 02:09:32 +11:00
2020-11-15 18:08:50 +11:00
loading : false ,
2020-10-25 02:09:32 +11:00
2020-11-15 18:08:50 +11:00
errors : {
2020-08-19 20:10:29 +10:00
username : '' ,
2020-11-15 18:08:50 +11:00
hash : ''
}
} ,
recovery : {
email : '' ,
2020-10-01 17:36:46 +10:00
2020-11-15 18:08:50 +11:00
loading : false ,
2020-10-01 17:36:46 +10:00
2020-11-15 18:08:50 +11:00
errors : {
email : ''
2020-09-08 21:59:50 +10:00
}
} ,
2020-11-15 18:08:50 +11:00
settings : {
menuItems : [
{ name : 'General' , route : 'general' , icon : 'cog' } ,
{ name : 'Account' , route : 'account' , icon : 'user' } ,
{ name : 'Privacy' , route : 'privacy' , icon : 'lock' } ,
{ name : 'Experiments' , route : 'experiments' , icon : 'flask' } ,
{ name : 'About' , route : 'about' , icon : 'info-circle' } ,
] ,
general : {
description : {
value : '' ,
loading : false ,
error : ''
} ,
preferences : {
theme : '' ,
developerMode : '' ,
loading : false ,
error : ''
} ,
2020-10-25 02:09:32 +11:00
} ,
2020-11-15 18:08:50 +11:00
privacy : {
wall : false ,
loading : false
2020-10-25 02:09:32 +11:00
} ,
2020-11-15 18:08:50 +11:00
experiments : {
2020-11-15 21:52:07 +11:00
theme : 'light' ,
2020-11-15 18:08:50 +11:00
loading : false ,
error : '' ,
2020-11-15 21:52:07 +11:00
relationships : false ,
wall : false ,
marketplace : false ,
teams : false ,
2020-11-16 23:04:23 +11:00
newsettings : true ,
2020-11-17 18:28:05 +11:00
corrupt : false ,
2020-11-15 18:08:50 +11:00
local : [ ]
2020-10-25 02:09:32 +11:00
} ,
2020-11-15 18:08:50 +11:00
account : {
showLogoutModal : false ,
password : {
loading : false ,
current : '' ,
new : '' ,
errors : {
'new password' : '' ,
'current password' : ''
}
} ,
email : {
loading : false ,
loadingChange : false ,
currentPassword : '' ,
new : '' ,
errors : {
'new password' : '' ,
'email current password' : ''
}
} ,
username : { username : '' ,
password : '' ,
errors : {
'username' : '' ,
'password' : '' ,
} ,
loading : false ,
} ,
deleteAcc : {
loading : false ,
password : '' ,
errors : {
'current password' : ''
}
} ,
totp : { loading : false
} ,
deleteAccountLoading : false ,
invalidateSessionLoading : false ,
emailCheckDelete : false ,
showLoginModal : false
2020-09-29 23:06:27 +10:00
}
} ,
2020-11-15 18:08:50 +11:00
selected : 0 ,
input : '' ,
2020-11-16 23:04:23 +11:00
experimentsTemp : { "wall" : false , "theme" : "light" , "relationships" : false , "teams" : false , "marketplace" : false , "newsettings" : true } ,
2020-11-15 18:08:50 +11:00
loadingLogout : false ,
showMenu : false ,
connModal : true ,
settingsModal : false ,
showConfirmModal : false ,
ajaxErrorHandler : AjaxErrorHandler ( this . $store )
}
} ,
computed : {
name ( ) {
return this . $store . state . meta . name
} ,
logo ( ) {
if ( this . $store . state . meta . logo ) {
this . $store . state . meta . logo
}
return "https://cdn.kaverti.com/logo.png" ;
} ,
theme ( ) {
return this . $store . state . theme
} ,
showAccountModal : {
get ( ) {
return this . $store . state . accountModal
2020-09-08 00:30:51 +10:00
} ,
2020-11-15 18:08:50 +11:00
set ( val ) {
this . $store . commit ( 'setAccountModalState' , val ) ;
}
} ,
showAjaxErrorsModal : {
get ( ) {
return this . $store . state . ajaxErrorsModal
2020-08-19 20:10:29 +10:00
} ,
2020-11-15 18:08:50 +11:00
set ( val ) {
this . $store . commit ( 'setAjaxErrorsModalState' , val )
2020-08-19 20:10:29 +10:00
}
} ,
2020-11-15 18:08:50 +11:00
showConnModal : {
get ( ) {
return this . $store . state . connModal
2020-10-25 02:09:32 +11:00
} ,
2020-11-15 18:08:50 +11:00
set ( val ) {
this . $store . commit ( 'setConnModal' , val ) ;
}
} ,
showOutLinkModal : {
get ( ) {
return this . $store . state . showOutLinkModal
2020-10-24 01:07:21 +11:00
} ,
2020-11-15 18:08:50 +11:00
set ( val ) {
this . $store . commit ( 'setOutLinkModalState' , val )
}
} ,
showAccountTab : {
get ( ) {
return this . $store . state . accountTabs
2020-10-08 22:17:15 +11:00
} ,
2020-11-15 18:08:50 +11:00
set ( index ) {
this . $store . commit ( 'setAccountTabs' , index )
}
} ,
showSettingTab : {
get ( ) {
return this . $store . state . settingsTabs
2020-10-10 03:50:29 +11:00
} ,
2020-11-15 18:08:50 +11:00
set ( index ) {
this . $store . commit ( 'setSettingsTabs' , index )
}
} ,
categories ( ) {
return this . $store . state . meta . categories
}
} ,
methods : {
2020-11-22 22:30:31 +11:00
reload ( ) {
this . $router . go ( '/' ) ;
} ,
switchUser ( user ) {
if ( JSON . parse ( localStorage . getItem ( 'currentUser' ) ) ) {
localStorage . removeItem ( 'currentUser' )
}
localStorage . setItem ( 'currentUser' , JSON . stringify ( user ) ) ;
this . $store . commit ( 'setUser' , user )
if ( ! JSON . parse ( localStorage . getItem ( 'currentUser' ) ) ) {
localStorage . setItem ( 'currentUser' , JSON . stringify ( "user1" ) ) ;
} else if ( JSON . parse ( localStorage . getItem ( 'currentUser' ) ) === "user1" ) {
this . $store . commit ( 'setSessionToken' , JSON . parse ( localStorage . getItem ( 'accessToken' ) ) )
} else if ( JSON . parse ( localStorage . getItem ( 'currentUser' ) ) === "user2" ) {
this . $store . commit ( 'setSessionToken' , JSON . parse ( localStorage . getItem ( 'accessToken2' ) ) )
} else if ( JSON . parse ( localStorage . getItem ( 'currentUser' ) ) === "user3" ) {
this . $store . commit ( 'setSessionToken' , JSON . parse ( localStorage . getItem ( 'accessToken3' ) ) )
} else {
this . $store . commit ( 'setSessionToken' , JSON . parse ( localStorage . getItem ( 'accessToken' ) ) )
}
Object . assign ( axios . defaults , { headers : { Authorization : this . $store . state . sessToken } } )
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'userinfo' )
. then ( res => {
this . $store . commit ( 'setUsername' , res . data . username )
this . $store . commit ( 'setEmail' , res . data . email )
this . $store . commit ( 'setEmailVerified' , res . data . emailVerified )
this . $store . commit ( 'setAdmin' , res . data . admin )
this . $store . commit ( 'setKoins' , res . data . koins )
this . $store . commit ( 'setTheme' , res . data . theme )
this . $store . commit ( 'setExecutive' , res . data . executive )
this . $store . commit ( 'setUserId' , res . data . id )
this . $store . commit ( 'setBot' , res . data . bot )
if ( res . data . theme === "dark" ) {
this . darkTheme ( )
}
this . closeConn ( )
} ) . catch ( err => {
this . showConn ( )
this . pollConn ( )
if ( err . response . data . errors [ 0 ] . name === 'noSettings' ) {
this . showConn ( )
this . pollConn ( )
} else {
this . showConn ( )
this . pollConn ( )
}
} )
} ,
2020-11-17 18:28:05 +11:00
experimentCheck ( ) {
try {
JSON . parse ( localStorage . getItem ( 'experimentsStore' ) )
} catch ( e ) {
this . settings . experiments . corrupt = true
console . log ( "Corrupted experimentsStore, Please reset experimentsStore localStorage" )
}
} ,
resetExperimentsStore ( ) {
localStorage . removeItem ( 'experimentsStore' )
this . localExperiments ( )
this . setExperimentsStore ( )
} ,
2020-11-15 18:08:50 +11:00
doBoth ( ) {
this . saveExperiments ( )
this . localExperiments ( )
this . setExperimentsStore ( )
} ,
localExperiments ( ) {
2020-11-16 23:04:23 +11:00
localStorage . setItem ( 'experimentsStore' , JSON . stringify ( { wall : this . settings . experiments . wall , theme : this . settings . experiments . theme , newsettings : this . settings . experiments . newsettings , relationships : this . settings . experiments . relationships , teams : this . settings . experiments . teams , marketplace : this . settings . experiments . marketplace } ) ) ;
2020-11-15 18:08:50 +11:00
this . setExperimentsStore ( )
} ,
saveExperiments ( ) {
this . settings . experiments . error = ''
this . settings . experiments . loading = true
2020-10-08 22:17:15 +11:00
2020-11-15 18:08:50 +11:00
this . axios
. put ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'users/experiments' , {
theme : this . settings . experiments . theme
2020-10-25 02:09:32 +11:00
} )
2020-11-15 18:08:50 +11:00
. then ( ( ) => {
this . settings . experiments . loading = false
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'userinfo' )
. then ( res => {
this . $store . commit ( 'setUsername' , res . data . username )
this . $store . commit ( 'setEmail' , res . data . email )
this . $store . commit ( 'setEmailVerified' , res . data . emailVerified )
this . $store . commit ( 'setAdmin' , res . data . admin )
this . $store . commit ( 'setDevMode' , res . data . developerMode )
this . $store . commit ( 'setTheme' , res . data . theme )
} )
2020-09-16 23:09:38 +10:00
} )
2020-11-15 18:08:50 +11:00
. catch ( e => {
this . settings . experiments . loading = false
AjaxErrorHandler ( this . $store ) ( e )
} )
} ,
saveDescription ( ) {
this . settings . general . description . error = ''
this . settings . general . description . loading = true
this . axios
. put ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'users/preferences' , {
description : this . settings . general . description . value
} )
. then ( ( ) => {
this . settings . general . description . loading = false
} )
. catch ( e => {
this . settings . general . description . loading = false
AjaxErrorHandler ( this . $store ) ( e )
} )
} ,
savePreferences ( ) {
this . settings . general . preferences . error = ''
this . settings . general . preferences . loading = true
this . axios
. put ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'users/preferences' , {
developerMode : this . settings . general . preferences . developerMode
} )
. then ( ( ) => {
this . settings . general . preferences . loading = false
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'userinfo' )
. then ( res => {
this . $store . commit ( 'setUsername' , res . data . username )
this . $store . commit ( 'setEmail' , res . data . email )
this . $store . commit ( 'setEmailVerified' , res . data . emailVerified )
this . $store . commit ( 'setAdmin' , res . data . admin )
this . $store . commit ( 'setDevMode' , res . data . developerMode )
2020-10-24 01:07:21 +11:00
} )
2020-11-15 18:08:50 +11:00
} )
. catch ( e => {
this . settings . general . preferences . loading = false
AjaxErrorHandler ( this . $store ) ( e )
} )
} ,
capitalizeFirstLetter ( value ) {
return value . toUpperCase ( )
} ,
savePrivacy ( ) {
this . settings . privacy . error = ''
this . settings . privacy . loading = true
2020-08-12 23:54:25 +10:00
2020-11-15 18:08:50 +11:00
this . axios
. put ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'users/preferences' , {
userWallOptOut : this . settings . privacy . wall
} )
. then ( ( ) => {
this . settings . privacy . loading = false
2020-10-25 02:09:32 +11:00
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'userinfo' )
. then ( res => {
this . $store . commit ( 'setUsername' , res . data . username )
this . $store . commit ( 'setEmail' , res . data . email )
this . $store . commit ( 'setEmailVerified' , res . data . emailVerified )
this . $store . commit ( 'setAdmin' , res . data . admin )
this . $store . commit ( 'setDevMode' , res . data . developerMode )
this . $store . commit ( 'setTheme' , res . data . theme )
} )
2020-11-15 18:08:50 +11:00
} )
. catch ( e => {
this . settings . privacy . loading = false
AjaxErrorHandler ( this . $store ) ( e )
} )
} ,
savePassword ( ) {
this . settings . account . password . errors [ 'current password' ] = ''
this . settings . account . password . errors [ 'new password' ] = ''
2020-10-01 17:36:46 +10:00
2020-11-15 18:08:50 +11:00
if ( ! this . settings . account . password . current . length ) {
this . settings . account . password . errors [ 'current password' ] = 'Cannot be blank'
return
}
if ( ! this . settings . account . password . new . length ) {
this . settings . account . password . errors [ 'new password' ] = 'Cannot be blank'
return
}
2020-08-19 20:10:29 +10:00
2020-11-15 18:08:50 +11:00
this . settings . account . password . loading = true
2020-08-19 20:10:29 +10:00
2020-11-15 18:08:50 +11:00
this . axios
. put ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'user/' + this . $store . state . username , {
currentPassword : this . settings . account . password . current ,
newPassword : this . settings . account . password . new
} )
. then ( ( ) => {
this . settings . account . password . loading = false
this . settings . account . email . loading = false
2020-10-25 02:09:32 +11:00
2020-11-15 18:08:50 +11:00
this . settings . account . password . current = ''
this . settings . account . password . new = ''
} )
. catch ( e => {
this . settings . account . password . loading = false
this . settings . account . email . loading = false
2020-10-25 02:09:32 +11:00
2020-11-15 18:08:50 +11:00
console . log ( e )
2020-10-25 02:09:32 +11:00
2020-11-15 18:08:50 +11:00
AjaxErrorHandler ( this . $store ) ( e , error => {
if ( error . path === 'hash' ) {
this . settings . account . password . errors [ 'new password' ] = error . message
2020-10-25 02:09:32 +11:00
}
} )
} )
2020-11-15 18:08:50 +11:00
} ,
saveEmail ( ) {
this . settings . account . email . errors [ 'email current password' ] = ''
this . settings . account . email . errors [ 'new email' ] = ''
2020-08-19 20:10:29 +10:00
2020-11-15 18:08:50 +11:00
if ( ! this . settings . account . email . currentPassword . length ) {
this . settings . account . email . errors [ 'email current password' ] = 'Cannot be blank'
return
}
if ( ! this . settings . account . email . new . length ) {
this . settings . account . email . errors [ 'new email' ] = 'Cannot be blank'
return
}
2020-08-19 20:10:29 +10:00
2020-11-15 18:08:50 +11:00
this . settings . account . email . loadingChange = true
2020-09-30 23:35:38 +10:00
2020-11-15 18:08:50 +11:00
this . axios
. put ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'user/' + this . $store . state . username , {
emailCurrentPassword : this . settings . account . email . currentPassword ,
newEmail : this . settings . account . email . new
} )
. then ( ( ) => {
this . settings . account . email . currentPassword = ''
this . settings . account . email . newEmail = ''
this . axios
. post ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'users/email-verify/send' )
. then ( ( ) => {
this . settings . account . email . loadingChange = false
AjaxErrorHandler ( "Success, your email has been changed, and a verification email has been sent to your new email: " + this . $store . state . email )
} )
. catch ( e => {
this . settings . account . email . loadingChange = false
AjaxErrorHandler ( this . $store ) ( e )
} )
2020-10-12 22:03:09 +11:00
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'userinfo' )
2020-09-30 23:35:38 +10:00
. then ( res => {
this . $store . commit ( 'setUsername' , res . data . username )
this . $store . commit ( 'setEmail' , res . data . email )
this . $store . commit ( 'setEmailVerified' , res . data . emailVerified )
this . $store . commit ( 'setAdmin' , res . data . admin )
2020-11-15 18:08:50 +11:00
} )
} )
. catch ( e => {
this . settings . account . email . loadingChange = false
2020-08-19 20:10:29 +10:00
2020-11-15 18:08:50 +11:00
console . log ( e )
AjaxErrorHandler ( this . $store ) ( e )
2020-08-19 20:10:29 +10:00
} )
2020-11-15 18:08:50 +11:00
. catch ( e => {
this . showConn ( e )
} )
} ,
2020-10-01 17:36:46 +10:00
2020-11-15 18:08:50 +11:00
save2FA ( ) {
this . totp . loading = true
this . axios
. put ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'users/preferences' , {
twoFactorGetCode : true
} )
. then ( ( ) => {
this . totp . loading = false
} )
. catch ( e => {
this . totp . loading = false
AjaxErrorHandler ( this . $store ) ( e )
} )
} ,
invalidateSession ( ) {
this . settings . account . invalidateSessionLoading = true
this . axios
. put ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'users/preferences' , {
invalidateSession : true
} )
. then ( ( ) => {
this . settings . account . invalidateSessionLoading = false
} )
. catch ( e => {
this . settings . account . invalidateSessionLoading = false
AjaxErrorHandler ( this . $store ) ( e )
} )
} ,
saveUsername ( ) {
this . username . errors [ 'username' ] = ''
2020-10-01 17:36:46 +10:00
2020-11-15 18:08:50 +11:00
if ( ! this . username . username . length ) {
this . username . errors [ 'username' ] = 'Cannot be blank'
return
}
2020-10-01 17:36:46 +10:00
2020-11-15 18:08:50 +11:00
this . username . loading = true
2020-10-01 17:36:46 +10:00
2020-11-15 18:08:50 +11:00
this . axios
. put ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'users/preferences' , {
username : this . username . username ,
password : this . username . password ,
changeUsername : true
} )
. then ( ( ) => {
this . username . username = ''
this . username . loading = false
localStorage . removeItem ( 'accessToken' ) ;
this . $store . commit ( 'setSessionToken' , '' )
Object . assign ( axios . defaults , { headers : { Authorization : this . $store . state . sessToken } } )
2020-10-12 22:03:09 +11:00
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'userinfo' )
2020-10-01 17:36:46 +10:00
. then ( res => {
this . $store . commit ( 'setUsername' , res . data . username )
this . $store . commit ( 'setEmail' , res . data . email )
this . $store . commit ( 'setEmailVerified' , res . data . emailVerified )
this . $store . commit ( 'setAdmin' , res . data . admin )
this . $store . commit ( 'setKoins' , res . data . koins )
2020-10-01 23:33:26 +10:00
this . $store . commit ( 'setDevMode' , res . data . developerMode )
2020-10-08 22:17:15 +11:00
this . $store . commit ( 'setTheme' , res . data . theme )
2020-10-10 23:20:44 +11:00
this . $store . commit ( 'setExecutive' , res . data . executive )
2020-10-15 22:29:30 +11:00
this . $store . commit ( 'setUserId' , res . data . id )
2020-11-15 18:08:50 +11:00
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'kaverti/state' )
. then ( res => {
this . $store . commit ( 'setSettings' , res . data )
this . $store . dispatch ( 'setTitle' , this . $store . state . meta . title )
this . $store . commit ( 'setAPIVersion' , res . data . latestAPIVersion )
this . $store . commit ( 'setLatestVersion' , res . data . latestStableVersion )
this . closeConn ( )
} ) . catch ( err => {
if ( err . response . data . errors [ 0 ] . name === 'noSettings' ) {
this . showConn ( )
} else {
this . showConn ( )
}
} )
} )
this . showLoginModal = true
} )
. catch ( e => {
this . username . loading = false
AjaxErrorHandler ( this . $store ) ( e )
} )
. catch ( e => {
this . showConn ( e )
} )
} ,
deleteAccount ( ) {
this . settings . account . deleteAccountLoading = true
this . axios
. put ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'users/delete' )
. then ( ( ) => {
this . settings . account . deleteAccountLoading = false
this . settings . account . emailCheckDelete = true
} )
. catch ( e => {
this . settings . account . deleteAccountLoading = false
console . log ( e )
AjaxErrorHandler ( this . $store ) ( e )
} )
} ,
verifyEmailResend ( ) {
this . settings . account . email . loading = true
this . axios
. post ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'users/email-verify/send' )
. then ( ( ) => {
this . settings . account . email . loading = false
} )
. catch ( e => {
this . settings . account . email . loading = false
AjaxErrorHandler ( this . $store ) ( e )
} )
} ,
inputHandler ( e ) {
//tab, space or enter
if (
e . keyCode === 8 &&
! this . signup . username . length &&
this . selected . length
) {
this . signup . username = this . selected . pop ( ) . username ;
//Down
} else if ( e . keyCode === 40 ) {
this . setSelectionFocus ( 1 ) ;
//Up
} else if ( e . keyCode === 38 ) {
this . setSelectionFocus ( - 1 ) ;
}
} ,
authHeader ( ) {
let user = JSON . parse ( localStorage . getItem ( 'accessToken' ) ) ;
if ( user && user . accessToken ) {
return { 'Authorization' : 'Bearer ' + user . accessToken } ;
} else {
return { } ;
}
} ,
darkTheme ( ) {
let darkThemeLinkEl = document . createElement ( "link" ) ;
darkThemeLinkEl . setAttribute ( "rel" , "stylesheet" ) ;
darkThemeLinkEl . setAttribute ( "href" , "https://cdn.kaverti.com/css/dark.css" ) ;
darkThemeLinkEl . setAttribute ( "id" , "dark-theme" ) ;
let docHead = document . querySelector ( "head" ) ;
docHead . append ( darkThemeLinkEl ) ;
} ,
setExperimentsStore ( ) {
if ( localStorage . getItem ( 'experimentsStore' ) ) {
2020-11-15 21:52:07 +11:00
this . experimentsTemp = JSON . parse ( localStorage . getItem ( 'experimentsStore' ) )
this . settings . experiments = JSON . parse ( localStorage . getItem ( 'experimentsStore' ) )
this . $store . commit ( 'setExperimentsStore' , this . experimentsTemp )
2020-11-15 18:08:50 +11:00
} else {
2020-11-16 23:04:23 +11:00
console . log ( "No experimentsStore, forcing default experiments to avoid route failure." )
localStorage . setItem ( 'experimentsStore' , JSON . stringify ( { wall : this . settings . experiments . wall , theme : this . settings . experiments . theme , relationships : this . settings . experiments . relationships , teams : this . settings . experiments . teams , marketplace : this . settings . experiments . marketplace , newsettings : this . settings . experiments . newsettings } ) ) ;
this . setExperimentsStore ( )
2020-11-15 18:08:50 +11:00
}
} ,
disableDarkTheme ( ) {
let darkThemeLinkEl = document . removeElement ( "dark-theme" ) ;
let docHead = document . querySelector ( "head" ) ;
docHead . append ( darkThemeLinkEl ) ;
} ,
recaptcha ( ) {
this . $recaptcha ( 'login' ) . then ( ( token ) => {
console . log ( token ) // Will print the token
} )
} ,
showAccountModalTab ( index ) {
this . toggleMenu ( )
this . showAccountModal = true
this . showAccountTab = index
} ,
toggleMenu ( ) {
this . showMenu = ! this . showMenu
} ,
dailyReward ( ) {
2020-11-22 22:30:31 +11:00
this . loading = true
2020-11-15 18:08:50 +11:00
this . axios . get (
process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'users/reward'
) . then ( res => {
this . $store . commit ( 'setKoins' , res . data . koins )
} ) . catch ( err => {
this . loadingLogout = false
this . ajaxErrorHandler ( err )
} )
} ,
koinLimit ( ) {
this . ajaxErrorHandler ( "Koin limit" )
} ,
2020-11-22 22:30:31 +11:00
logoutAll ( ) {
2020-11-15 18:08:50 +11:00
localStorage . removeItem ( 'accessToken' ) ;
2020-11-22 22:30:31 +11:00
localStorage . removeItem ( 'accessToken2' ) ;
localStorage . removeItem ( 'accessToken3' ) ;
this . switchUser ( 'user1' )
this . $store . commit ( 'setUsername' , '' )
} ,
logout ( logoutAll ) {
this . toggleMenu ( )
if ( ! JSON . parse ( localStorage . getItem ( 'currentUser' ) ) ) {
localStorage . setItem ( 'currentUser' , JSON . stringify ( "user1" ) ) ;
} else if ( JSON . parse ( localStorage . getItem ( 'currentUser' ) ) === "user1" ) {
localStorage . removeItem ( 'accessToken' ) ;
if ( JSON . parse ( localStorage . getItem ( 'currentUser' ) ) === "user1" && localStorage . getItem ( 'accessToken2' ) ) {
this . switchUser ( 'user2' )
} else if ( JSON . parse ( localStorage . getItem ( 'currentUser' ) ) === "user1" && localStorage . getItem ( 'accessToken3' ) && ! localStorage . getItem ( 'accessToken3' ) ) {
this . switchUser ( 'user3' )
}
} else if ( JSON . parse ( localStorage . getItem ( 'currentUser' ) ) === "user2" ) {
localStorage . removeItem ( 'accessToken2' ) ;
if ( JSON . parse ( localStorage . getItem ( 'currentUser' ) ) === "user2" && localStorage . getItem ( 'accessToken' ) ) {
this . switchUser ( 'user1' )
} else if ( JSON . parse ( localStorage . getItem ( 'currentUser' ) ) === "user2" && localStorage . getItem ( 'accessToken3' ) && ! localStorage . getItem ( 'accessToken' ) ) {
this . switchUser ( 'user3' )
}
} else if ( JSON . parse ( localStorage . getItem ( 'currentUser' ) ) === "user3" ) {
localStorage . removeItem ( 'accessToken3' ) ;
if ( JSON . parse ( localStorage . getItem ( 'currentUser' ) ) === "user3" && localStorage . getItem ( 'accessToken' ) ) {
this . switchUser ( 'user1' )
} else if ( JSON . parse ( localStorage . getItem ( 'currentUser' ) ) === "user3" && localStorage . getItem ( 'accessToken2' ) && ! localStorage . getItem ( 'accessToken' ) ) {
this . switchUser ( 'user2' )
} else if ( logoutAll ) {
localStorage . removeItem ( 'accessToken' ) ;
localStorage . removeItem ( 'accessToken2' ) ;
localStorage . removeItem ( 'accessToken3' ) ;
this . switchUser ( 'user1' )
}
}
2020-11-15 18:08:50 +11:00
Object . assign ( axios . defaults , { headers : { Authorization : this . $store . state . sessToken } } )
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'userinfo' )
. then ( res => {
this . $store . commit ( 'setUsername' , res . data . username )
this . $store . commit ( 'setEmail' , res . data . email )
this . $store . commit ( 'setEmailVerified' , res . data . emailVerified )
this . $store . commit ( 'setAdmin' , res . data . admin )
this . $store . commit ( 'setKoins' , res . data . koins )
this . $store . commit ( 'setDevMode' , res . data . developerMode )
this . $store . commit ( 'setTheme' , res . data . theme )
this . $store . commit ( 'setExecutive' , res . data . executive )
this . $store . commit ( 'setUserId' , res . data . id )
this . $store . commit ( 'setBot' , res . data . bot )
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'kaverti/state' )
. then ( res => {
this . $store . commit ( 'setSettings' , res . data )
this . $store . dispatch ( 'setTitle' , this . $store . state . meta . title )
this . $store . commit ( 'setAPIVersion' , res . data . latestAPIVersion )
this . $store . commit ( 'setLatestVersion' , res . data . latestStableVersion )
2020-10-01 17:36:46 +10:00
this . closeConn ( )
} ) . catch ( err => {
2020-11-15 18:08:50 +11:00
if ( err . response . data . errors [ 0 ] . name === 'noSettings' ) {
2020-10-01 17:36:46 +10:00
this . showConn ( )
} else {
this . showConn ( )
}
} )
} )
2020-11-15 18:08:50 +11:00
} ,
botLogout ( ) {
if ( this . $store . state . bot ) {
this . $socket . emit ( 'accountEvent' )
this . $router . push ( '/' )
this . toggleMenu ( )
localStorage . removeItem ( 'accessToken' ) ;
this . $store . commit ( 'setSessionToken' , '' )
Object . assign ( axios . defaults , { headers : { Authorization : this . $store . state . sessToken } } )
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'userinfo' )
. then ( res => {
this . $store . commit ( 'setUsername' , res . data . username )
this . $store . commit ( 'setEmail' , res . data . email )
this . $store . commit ( 'setEmailVerified' , res . data . emailVerified )
this . $store . commit ( 'setAdmin' , res . data . admin )
this . $store . commit ( 'setKoins' , res . data . koins )
this . $store . commit ( 'setDevMode' , res . data . developerMode )
this . $store . commit ( 'setTheme' , res . data . theme )
this . $store . commit ( 'setExecutive' , res . data . executive )
this . $store . commit ( 'setUserId' , res . data . id )
this . $store . commit ( 'setBot' , res . data . bot )
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'kaverti/state' )
. then ( res => {
this . $store . commit ( 'setSettings' , res . data )
this . $store . dispatch ( 'setTitle' , this . $store . state . meta . title )
this . $store . commit ( 'setAPIVersion' , res . data . latestAPIVersion )
this . $store . commit ( 'setLatestVersion' , res . data . latestStableVersion )
this . closeConn ( )
} ) . catch ( err => {
if ( err . response . data . errors [ 0 ] . name === 'noSettings' ) {
this . showConn ( )
} else {
this . showConn ( )
}
} )
} )
2020-08-19 20:10:29 +10:00
}
} ,
2020-11-15 18:08:50 +11:00
clearSignup ( ) {
this . signup . username = ''
this . signup . password = ''
this . signup . confirmPassword = ''
this . signup . email = ''
this . signup . passkey = ''
this . $store . commit ( 'setToken' , null )
this . $store . commit ( 'setPassKey' , null )
} ,
clearSignupErrors ( ) {
this . signup . errors . username = ''
this . signup . errors . hash = ''
this . signup . errors . confirmPassword = ''
this . signup . errors . email = ''
this . signup . errors . passkey = ''
} ,
clearRecovery ( ) {
this . recovery . email = ''
this . $store . commit ( 'setToken' , null )
this . $store . commit ( 'setPassKey' , null )
} ,
clearRecoveryErrors ( ) {
this . recovery . errors . email = ''
} ,
pollConn ( ) {
this . polling = setInterval ( ( ) => {
this . retryConnection ( )
} , 5000 )
this . botLogout ( )
} ,
pollConnAlt ( ) {
this . polling = setInterval ( ( ) => {
this . retryConnection ( )
} , 25000 )
this . botLogout ( )
} ,
clearLogin ( ) {
this . login . username = ''
this . login . password = ''
} ,
clearLoginErrors ( ) {
this . login . errors . username = ''
this . login . errors . hash = ''
} ,
retryConnection ( ) {
2020-10-12 22:03:09 +11:00
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'userinfo' )
2020-08-19 20:10:29 +10:00
. then ( res => {
2020-09-29 23:06:27 +10:00
this . $store . commit ( 'setUsername' , res . data . username )
this . $store . commit ( 'setEmail' , res . data . email )
this . $store . commit ( 'setEmailVerified' , res . data . emailVerified )
this . $store . commit ( 'setAdmin' , res . data . admin )
this . $store . commit ( 'setKoins' , res . data . koins )
2020-10-01 23:33:26 +10:00
this . $store . commit ( 'setDevMode' , res . data . developerMode )
2020-10-08 22:17:15 +11:00
this . $store . commit ( 'setTheme' , res . data . theme )
2020-10-10 23:20:44 +11:00
this . $store . commit ( 'setExecutive' , res . data . executive )
2020-10-15 22:29:30 +11:00
this . $store . commit ( 'setUserId' , res . data . id )
2020-10-25 02:09:32 +11:00
this . $store . commit ( 'setBot' , res . data . bot )
2020-11-15 18:08:50 +11:00
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'kaverti/state' )
. then ( res => {
this . $store . commit ( 'setSettings' , res . data )
this . $store . dispatch ( 'setTitle' , this . $store . state . meta . title )
this . $store . commit ( 'setAPIVersion' , res . data . latestAPIVersion )
this . $store . commit ( 'setLatestVersion' , res . data . latestStableVersion )
this . closeConn ( )
} ) . catch ( err => {
if ( err . response . data . errors [ 0 ] . name === 'noSettings' ) {
this . showConn ( )
} else {
this . showConn ( )
}
} )
this . botLogout ( )
} )
2020-10-12 22:03:09 +11:00
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'kaverti/state' )
2020-09-07 02:30:52 +10:00
. then ( res => {
2020-09-29 23:06:27 +10:00
this . $store . commit ( 'setSettings' , res . data )
this . $store . dispatch ( 'setTitle' , this . $store . state . meta . title )
2020-09-30 23:15:41 +10:00
this . $store . commit ( 'setAPIVersion' , res . data . latestAPIVersion )
this . $store . commit ( 'setLatestVersion' , res . data . latestStableVersion )
2020-10-12 22:03:09 +11:00
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'userinfo' )
2020-09-29 23:06:27 +10:00
. then ( res => {
this . $store . commit ( 'setUsername' , res . data . username )
this . $store . commit ( 'setEmail' , res . data . email )
this . $store . commit ( 'setEmailVerified' , res . data . emailVerified )
this . $store . commit ( 'setAdmin' , res . data . admin )
this . $store . commit ( 'setKoins' , res . data . koins )
2020-11-15 18:08:50 +11:00
this . $store . commit ( 'setDevMode' , res . data . developerMode )
2020-10-08 22:17:15 +11:00
this . $store . commit ( 'setTheme' , res . data . theme )
2020-10-10 23:20:44 +11:00
this . $store . commit ( 'setExecutive' , res . data . executive )
2020-10-15 22:29:30 +11:00
this . $store . commit ( 'setUserId' , res . data . id )
2020-10-25 02:09:32 +11:00
this . $store . commit ( 'setBot' , res . data . bot )
2020-09-29 23:06:27 +10:00
this . closeConn ( )
} ) . catch ( err => {
this . showConn ( )
2020-11-15 18:08:50 +11:00
if ( err . response . data . errors [ 0 ] . name === 'noSettings' ) {
2020-09-29 23:06:27 +10:00
this . showConn ( )
} else {
this . showConn ( )
}
} )
2020-11-15 18:08:50 +11:00
} )
} ,
closeAccountModal ( ) {
this . showAccountModal = false
this . clearLogin ( )
this . clearSignup ( )
this . clearLoginErrors ( )
this . clearSignupErrors ( )
} ,
showConn ( ) {
this . connModal = true
} ,
closeConn ( ) {
this . connModal = false
} ,
createAccount ( ) {
this . clearSignupErrors ( )
let postParams = {
username : this . signup . username ,
password : this . signup . password ,
email : this . signup . email ,
passkey : this . signup . passkey
}
if ( this . $store . state . token ) {
postParams . admin = true
postParams . token = this . $store . state . token
}
if ( this . $store . state . passkey ) {
postParams . passkey = this . $store . state . passkey
}
2020-10-07 01:19:24 +11:00
2020-11-15 18:08:50 +11:00
if ( this . signup . password !== this . signup . confirmPassword ) {
this . signup . errors . confirmPassword = 'Passwords must match'
} else {
this . signup . loading = true
this . axios . post ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + ` / ` + ` passkey/ ${ this . $store . state . passkey } ` , postParams ) . then ( res => {
this . signup . loading = false
this . $store . commit ( 'setUsername' , res . data . username )
this . $store . commit ( 'setAdmin' , res . data . admin )
this . closeAccountModal ( )
this . $socket . emit ( 'accountEvent' )
this . axios
. post ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'users/email-verify/send' )
. then ( ( ) => {
this . settings . account . email . loading = false
} )
. catch ( e => {
this . settings . account . email . loading = false
AjaxErrorHandler ( this . $store ) ( e )
} )
} ) . catch ( e => {
this . signup . loading = false
this . ajaxErrorHandler ( e , ( error ) => {
let path = error . path
if ( this . signup . errors [ path ] !== undefined && this . signup . errors [ path ] !== undefined ) {
this . signup . errors [ path ] = error . message
}
2020-10-06 16:18:38 +11:00
} )
2020-11-15 18:08:50 +11:00
} )
}
} ,
createTeam ( ) {
this . clearSignupErrors ( )
let postParams = {
username : this . tcreate . username ,
name : this . tcreate . name
}
this . tcreate . loading = true
this . axios . post ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + ` / ` + ` teams/create ` , postParams ) . then ( res => {
this . signup . loading = false
this . $store . commit ( 'setUsername' , res . data . username )
this . closeAccountModal ( )
} ) . catch ( e => {
this . tcreate . loading = false
this . ajaxErrorHandler ( e , ( error ) => {
let path = error . path
if ( this . tcreate . errors [ path ] !== undefined && this . tcreate . errors [ path ] !== undefined ) {
this . tcreate . errors [ path ] = error . message
}
} )
} )
} ,
2020-11-22 22:30:31 +11:00
calculateLogin ( ) {
if ( ! JSON . parse ( localStorage . getItem ( 'accessToken' ) ) && ! JSON . parse ( localStorage . getItem ( 'accessToken2' ) ) && ! JSON . parse ( localStorage . getItem ( 'accessToken3' ) ) ) {
this . loginAs = 'user1'
} else if ( JSON . parse ( localStorage . getItem ( 'accessToken' ) ) && ! JSON . parse ( localStorage . getItem ( 'accessToken2' ) ) ) {
this . loginAs = 'user2'
} else if ( JSON . parse ( localStorage . getItem ( 'accessToken' ) ) && JSON . parse ( localStorage . getItem ( 'accessToken2' ) ) && JSON . parse ( localStorage . getItem ( 'accessToken2' ) ) && ! JSON . parse ( localStorage . getItem ( 'accessToken3' ) ) ) {
this . loginAs = 'user3'
} else if ( ! JSON . parse ( localStorage . getItem ( 'accessToken' ) ) && JSON . parse ( localStorage . getItem ( 'accessToken2' ) ) && JSON . parse ( localStorage . getItem ( 'accessToken2' ) ) && ! JSON . parse ( localStorage . getItem ( 'accessToken3' ) ) ) {
this . loginAs = 'user1'
} else if ( ! JSON . parse ( localStorage . getItem ( 'accessToken' ) ) && ! JSON . parse ( localStorage . getItem ( 'accessToken2' ) ) && JSON . parse ( localStorage . getItem ( 'accessToken2' ) ) && ! JSON . parse ( localStorage . getItem ( 'accessToken3' ) ) ) {
this . loginAs = 'user1'
} else if ( JSON . parse ( localStorage . getItem ( 'accessToken' ) ) && ! JSON . parse ( localStorage . getItem ( 'accessToken2' ) ) && JSON . parse ( localStorage . getItem ( 'accessToken2' ) ) && ! JSON . parse ( localStorage . getItem ( 'accessToken3' ) ) ) {
this . loginAs = 'user2'
} else {
this . loginAs = 'limit'
}
} ,
2020-11-15 18:08:50 +11:00
doLogin ( ) {
2020-11-22 22:30:31 +11:00
this . calculateLogin ( )
2020-11-15 18:08:50 +11:00
this . clearSignupErrors ( )
if ( ! this . login . username . trim ( ) . length ) {
this . login . errors . username = 'Username must not be blank'
return
}
this . login . loading = true
this . axios . post ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + ` /users/login ` , {
username : this . login . username ,
password : this . login . password
} ) . then ( res => {
this . login . loading = false
this . $store . commit ( 'setUsername' , res . data . username )
this . $store . commit ( 'setAdmin' , res . data . admin )
2020-11-22 22:30:31 +11:00
if ( this . loginAs === 'user1' ) {
localStorage . setItem ( 'accessToken' , JSON . stringify ( res . data . accessToken ) ) ;
this . switchUser ( 'user1' )
} else if ( this . loginAs === 'user2' ) {
localStorage . setItem ( 'accessToken2' , JSON . stringify ( res . data . accessToken ) ) ;
this . switchUser ( 'user2' )
} else if ( this . loginAs === 'user3' ) {
localStorage . setItem ( 'accessToken3' , JSON . stringify ( res . data . accessToken ) ) ;
this . switchUser ( 'user3' )
} else {
console . log ( 'Limit Reached' )
}
2020-11-15 18:08:50 +11:00
Object . assign ( axios . defaults , { headers : { Authorization : this . $store . state . sessToken } } )
if ( localStorage . getItem ( 'accessToken' ) ) {
this . $store . commit ( 'setSessionToken' , JSON . parse ( localStorage . getItem ( 'accessToken' ) ) )
}
Object . assign ( axios . defaults , { headers : { Authorization : this . $store . state . sessToken } } )
this . closeAccountModal ( )
this . $socket . emit ( 'accountEvent' )
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'userinfo' )
. then ( res => {
this . $store . commit ( 'setUsername' , res . data . username )
this . $store . commit ( 'setEmail' , res . data . email )
this . $store . commit ( 'setEmailVerified' , res . data . emailVerified )
this . $store . commit ( 'setAdmin' , res . data . admin )
this . $store . commit ( 'setKoins' , res . data . koins )
this . $store . commit ( 'setDevMode' , res . data . developerMode )
this . $store . commit ( 'setTheme' , res . data . theme )
this . $store . commit ( 'setExecutive' , res . data . executive )
this . $store . commit ( 'setUserId' , res . data . id )
this . $store . commit ( 'setBot' , res . data . bot )
2020-11-22 22:30:31 +11:00
2020-11-15 18:08:50 +11:00
this . closeConn ( )
} ) . catch ( err => {
2020-09-29 23:06:27 +10:00
this . showConn ( )
this . pollConn ( )
2020-11-15 18:08:50 +11:00
if ( err . response . data . errors [ 0 ] . name === 'noSettings' ) {
this . showConn ( )
this . pollConn ( )
} else {
this . showConn ( )
this . pollConn ( )
}
this . botLogout ( )
2020-11-22 22:30:31 +11:00
this . calculateLogin ( )
2020-11-15 18:08:50 +11:00
} )
} ) . catch ( e => {
this . login . loading = false
this . ajaxErrorHandler ( e , ( error ) => {
let path = error . path
if ( this . signup . errors [ path ] !== undefined && this . signup . errors [ path ] !== undefined ) {
this . signup . errors [ path ] = error . message
}
} )
2020-09-07 02:30:52 +10:00
} )
2020-11-22 22:30:31 +11:00
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'userinfo' , {
headers : {
'Authorization' : this . $store . state . availableUsers . user1 . sessToken
}
} )
. then ( res => {
this . $store . commit ( 'setMultiUser1' , res . data )
this . closeConn ( )
} ) . catch ( err => {
this . showConn ( )
this . pollConn ( )
if ( err . response . data . errors [ 0 ] . name === 'noSettings' ) {
this . showConn ( )
this . pollConn ( )
} else {
this . showConn ( )
this . pollConn ( )
}
} )
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'userinfo' , {
headers : {
'Authorization' : this . $store . state . availableUsers . user2 . sessToken
}
} )
. then ( res => {
this . $store . commit ( 'setMultiUser2' , res . data )
this . closeConn ( )
} ) . catch ( err => {
this . showConn ( )
this . pollConn ( )
if ( err . response . data . errors [ 0 ] . name === 'noSettings' ) {
this . showConn ( )
this . pollConn ( )
} else {
this . showConn ( )
this . pollConn ( )
}
} )
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'userinfo' , {
headers : {
'Authorization' : this . $store . state . availableUsers . user3 . sessToken
}
} )
. then ( res => {
this . $store . commit ( 'setMultiUser3' , res . data )
this . closeConn ( )
} ) . catch ( err => {
this . showConn ( )
this . pollConn ( )
if ( err . response . data . errors [ 0 ] . name === 'noSettings' ) {
this . showConn ( )
this . pollConn ( )
} else {
this . showConn ( )
this . pollConn ( )
}
} )
2020-11-15 18:08:50 +11:00
} ,
doRecovery ( ) {
this . clearRecoveryErrors ( )
2020-08-19 20:10:29 +10:00
2020-11-15 18:08:50 +11:00
if ( ! this . recovery . email . trim ( ) . length ) {
this . recovery . errors . email = 'Email must not be blank'
return
}
this . recovery . loading = true
this . axios . post ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + ` / ` + ` users/recovery/send ` , {
email : this . recovery . email
} ) . then ( res => {
this . recovery . loading = false
this . $store . commit ( 'setUsername' , res . data . username )
this . $store . commit ( 'setAdmin' , res . data . admin )
this . closeAccountModal ( )
2020-08-19 20:10:29 +10:00
2020-11-15 18:08:50 +11:00
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'userinfo' )
. then ( res => {
this . $store . commit ( 'setUsername' , res . data . username )
this . $store . commit ( 'setEmail' , res . data . email )
this . $store . commit ( 'setEmailVerified' , res . data . emailVerified )
this . $store . commit ( 'setAdmin' , res . data . admin )
this . $store . commit ( 'setKoins' , res . data . koins )
this . $store . commit ( 'setDevMode' , res . data . developerMode )
this . $store . commit ( 'setTheme' , res . data . theme )
this . $store . commit ( 'setExecutive' , res . data . executive )
this . $store . commit ( 'setUserId' , res . data . id )
this . $store . commit ( 'setBot' , res . data . bot )
this . closeConn ( )
} ) . catch ( err => {
this . showConn ( )
this . pollConn ( )
if ( err . response . data . errors [ 0 ] . name === 'noSettings' ) {
this . showConn ( )
this . pollConn ( )
} else {
this . showConn ( )
this . pollConn ( )
2020-08-19 20:10:29 +10:00
}
} )
2020-11-15 18:08:50 +11:00
} ) . catch ( e => {
this . recovery . loading = false
this . ajaxErrorHandler ( e )
} )
}
} ,
mounted ( ) {
2020-11-22 22:30:31 +11:00
console . log ( JSON . parse ( localStorage . getItem ( 'currentUser' ) ) )
this . $store . commit ( 'setMultiUser1Sess' , JSON . parse ( localStorage . getItem ( 'accessToken' ) ) )
this . $store . commit ( 'setMultiUser2Sess' , JSON . parse ( localStorage . getItem ( 'accessToken2' ) ) )
this . $store . commit ( 'setMultiUser3Sess' , JSON . parse ( localStorage . getItem ( 'accessToken3' ) ) )
if ( ! JSON . parse ( localStorage . getItem ( 'currentUser' ) ) ) {
localStorage . setItem ( 'currentUser' , JSON . stringify ( "user1" ) ) ;
} else if ( JSON . parse ( localStorage . getItem ( 'currentUser' ) ) === "user1" ) {
this . $store . commit ( 'setSessionToken' , JSON . parse ( localStorage . getItem ( 'accessToken' ) ) )
} else if ( JSON . parse ( localStorage . getItem ( 'currentUser' ) ) === "user2" ) {
this . $store . commit ( 'setSessionToken' , JSON . parse ( localStorage . getItem ( 'accessToken2' ) ) )
} else if ( JSON . parse ( localStorage . getItem ( 'currentUser' ) ) === "user3" ) {
this . $store . commit ( 'setSessionToken' , JSON . parse ( localStorage . getItem ( 'accessToken3' ) ) )
} else {
this . $store . commit ( 'setSessionToken' , JSON . parse ( localStorage . getItem ( 'accessToken' ) ) )
}
Object . assign ( axios . defaults , { headers : { Authorization : this . $store . state . sessToken } } )
2020-11-17 18:28:05 +11:00
this . experimentCheck ( )
2020-11-22 22:30:31 +11:00
this . calculateLogin ( )
2020-11-15 18:08:50 +11:00
console . log ( '%cStop!' , 'color: red; font-size: 60px; font-weight: bold;' ) ;
console . log ( '%cIf you have been told to enter something in here, its most likely malicious! Someone might be trying to gain access to your ' + this . name + ' account! Please do not enter anything in here unless you know what you\'re doing' , 'font-size: 16px; font-weight: bold;' ) ;
console . log ( '%cStop!' , 'color: red; font-size: 60px; font-weight: bold;' ) ;
console . log ( '%cIf you have been told to enter something in here, its most likely malicious! Someone might be trying to gain access to your ' + this . name + ' account! Please do not enter anything in here unless you know what you\'re doing' , 'font-size: 16px; font-weight: bold;' ) ;
2020-11-22 22:30:31 +11:00
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'userinfo' , {
headers : {
'Authorization' : this . $store . state . availableUsers . user1 . sessToken
}
} )
2020-11-15 18:08:50 +11:00
. then ( res => {
2020-11-22 22:30:31 +11:00
this . $store . commit ( 'setMultiUser1' , res . data )
this . closeConn ( )
} ) . catch ( err => {
this . showConn ( )
this . pollConn ( )
if ( err . response . data . errors [ 0 ] . name === 'noSettings' ) {
this . showConn ( )
this . pollConn ( )
} else {
this . showConn ( )
this . pollConn ( )
}
} )
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'userinfo' , {
headers : {
'Authorization' : this . $store . state . availableUsers . user2 . sessToken
}
} )
. then ( res => {
this . $store . commit ( 'setMultiUser2' , res . data )
this . closeConn ( )
} ) . catch ( err => {
this . showConn ( )
this . pollConn ( )
if ( err . response . data . errors [ 0 ] . name === 'noSettings' ) {
this . showConn ( )
this . pollConn ( )
} else {
this . showConn ( )
this . pollConn ( )
}
} )
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'userinfo' , {
headers : {
'Authorization' : this . $store . state . availableUsers . user3 . sessToken
}
} )
. then ( res => {
this . $store . commit ( 'setMultiUser3' , res . data )
2020-11-15 18:08:50 +11:00
this . closeConn ( )
} ) . catch ( err => {
this . showConn ( )
this . pollConn ( )
if ( err . response . data . errors [ 0 ] . name === 'noSettings' ) {
this . showConn ( )
this . pollConn ( )
} else {
this . showConn ( )
this . pollConn ( )
}
} )
this . axios
. get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'userinfo' )
. then ( res => {
this . settings . general . description . value = res . data . description || ''
this . settings . general . preferences . developerMode = res . data . developerMode
this . settings . general . preferences . theme = res . data . theme || ''
this . settings . privacy . wall = res . data . userWallOptOut || ''
this . settings . experiments . theme = res . data . theme || ''
} )
. catch ( e => {
AjaxErrorHandler ( this . $store ) ( e )
} )
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'kaverti/state' )
. then ( res => {
this . $store . commit ( 'setSettings' , res . data )
this . $store . dispatch ( 'setTitle' , this . $store . state . meta . title )
this . $store . commit ( 'setAPIVersion' , res . data . latestAPIVersion )
this . $store . commit ( 'setLatestVersion' , res . data . latestStableVersion )
this . closeConn ( )
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'userinfo' )
. then ( res => {
this . $store . commit ( 'setUsername' , res . data . username )
this . $store . commit ( 'setEmail' , res . data . email )
this . $store . commit ( 'setEmailVerified' , res . data . emailVerified )
this . $store . commit ( 'setAdmin' , res . data . admin )
this . $store . commit ( 'setKoins' , res . data . koins )
this . $store . commit ( 'setTheme' , res . data . theme )
this . $store . commit ( 'setExecutive' , res . data . executive )
this . $store . commit ( 'setUserId' , res . data . id )
this . $store . commit ( 'setBot' , res . data . bot )
if ( res . data . theme === "dark" ) {
this . darkTheme ( )
}
this . closeConn ( )
} ) . catch ( err => {
this . showConn ( )
this . pollConn ( )
if ( err . response . data . errors [ 0 ] . name === 'noSettings' ) {
this . showConn ( )
this . pollConn ( )
} else {
this . showConn ( )
this . pollConn ( )
}
} )
this . axios . get (
process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'users/reward'
2020-10-25 02:09:32 +11:00
2020-11-15 18:08:50 +11:00
) . then ( res => {
this . $store . commit ( 'setKoins' , res . data . koins )
} )
} ) . catch ( err => {
this . showConn ( )
this . pollConn ( )
if ( err . response . data . errors [ 0 ] . name === 'noSettings' ) {
this . showConn ( )
this . pollConn ( )
} else {
this . showConn ( )
this . pollConn ( )
}
} )
2020-11-22 22:30:31 +11:00
console . log ( this . $store . state . sessToken + 'IDENTIFY' )
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'userinfo' , {
headers : {
'Authorization' : this . $store . state . sessToken
}
} )
. then ( res => {
this . $store . commit ( 'setUsername' , res . data . username )
this . $store . commit ( 'setEmail' , res . data . email )
this . $store . commit ( 'setEmailVerified' , res . data . emailVerified )
this . $store . commit ( 'setAdmin' , res . data . admin )
this . $store . commit ( 'setKoins' , res . data . koins )
this . $store . commit ( 'setDevMode' , res . data . developerMode )
this . $store . commit ( 'setTheme' , res . data . theme )
this . $store . commit ( 'setExecutive' , res . data . executive )
this . $store . commit ( 'setUserId' , res . data . id )
this . $store . commit ( 'setBot' , res . data . bot )
this . closeConn ( )
} ) . catch ( err => {
this . showConn ( )
this . pollConn ( )
if ( err . response . data . errors [ 0 ] . name === 'noSettings' ) {
this . showConn ( )
this . pollConn ( )
} else {
this . showConn ( )
this . pollConn ( )
}
} )
2020-11-15 18:08:50 +11:00
this . axios . get ( process . env . VUE _APP _APIENDPOINT + process . env . VUE _APP _APIVERSION + '/' + 'forums/category' )
. then ( res => {
this . $store . commit ( 'addCategories' , res . data )
if ( ! this . $store . state . meta . title . length && this . $route . params . category ) {
let selectedCategory = this . $route . params . category . toUpperCase ( )
let category = this . categories . find ( c => c . value === selectedCategory )
this . $store . dispatch ( 'setTitle' , category . name )
2020-08-19 20:10:29 +10:00
}
2020-11-15 18:08:50 +11:00
} )
this . setExperimentsStore ( )
this . pollConnAlt ( )
console . log ( '%cStop!' , 'color: red; font-size: 60px; font-weight: bold;' ) ;
console . log ( '%cIf you have been told to enter something in here, its most likely malicious! Someone might be trying to gain access to your ' + this . name + ' account! Please do not enter anything in here unless you know what you\'re doing' , 'font-size: 16px; font-weight: bold;' ) ;
console . log ( '%cStop!' , 'color: red; font-size: 60px; font-weight: bold;' ) ;
console . log ( '%cIf you have been told to enter something in here, its most likely malicious! Someone might be trying to gain access to your ' + this . name + ' account! Please do not enter anything in here unless you know what you\'re doing' , 'font-size: 16px; font-weight: bold;' ) ;
this . botLogout ( )
} ,
watch : {
input ( ) {
let input = this . input . trim ( ) ;
if ( input ) {
this . axios
. get ( '/api/v1/user/' + input )
. then ( res => {
this . signup . username . errors = 'Username is taken'
res ( )
} )
. catch ( e => {
this . signup . username . errors = 'Username is available'
e ( )
} )
}
} ,
$route ( ) {
this . showMenu = false
} ,
'$store.state.ajaxErrorsModal' : function ( val ) {
if ( val ) {
this . $refs . ajaxErrorsModalButton . focus ( )
}
} ,
2020-08-19 20:10:29 +10:00
}
2020-11-15 18:08:50 +11:00
}
2020-08-07 12:36:34 +10:00
< / script >
< style lang = 'scss' >
2020-11-15 18:08:50 +11:00
@ import url ( 'https://fonts.googleapis.com/css?family=Lato:400,400i,500,500i,700' ) ;
@ import './assets/scss/variables.scss' ;
@ import './assets/scss/transitions.scss' ;
@ import url ( 'https://fonts.googleapis.com/css?family=Lato:400,700&subset=latin-ext' ) ;
* {
box - sizing : border - box ;
}
html , body , # app {
font - family : $font - family ;
height : 100 % ;
margin : 0 ;
padding : 0 ;
width : 100 % ;
}
$primary : # 0 ba8e6 ;
$colors : (
"primary" : # 0 ba8e6
) ;
html , body {
width : 100 % ;
height : 100 % ;
margin : 0 ;
padding : 0 ;
color : $color _ _text -- primary ;
@ include text ;
}
* {
box - sizing : border - box ;
}
. route _container {
width : 90 % ;
max - width : 1500 px ;
margin : 0 auto ;
margin - top : 2 rem ;
padding - bottom : 2 rem ;
}
. logo {
@ include text ( $font -- role - emphasis , 2 rem , 600 ) ;
@ include user - select ( none ) ;
cursor : pointer ;
background : none ;
white - space : nowrap ;
overflow : hidden ;
text - overflow : ellipsis ;
max - width : 20 rem ;
& : hover , & : visited , & : active {
outline : none ;
color : $color _ _text -- primary ;
}
}
2020-10-15 22:29:30 +11:00
2020-11-15 18:08:50 +11:00
@ media ( max - width : 870 px ) {
. route _container {
width : calc ( 100 % - 2 rem ) ;
margin : 0 1 rem ;
margin - top : 0 rem ;
2020-10-15 22:29:30 +11:00
}
2020-11-15 18:08:50 +11:00
. logo {
position : relative ;
z - index : 2 ;
max - width : calc ( 100 vw - 7 rem ) ;
2020-10-15 22:29:30 +11:00
}
2020-08-19 20:10:29 +10:00
2020-11-15 18:08:50 +11:00
. header _ _menu _button {
display : inline - block ;
cursor : pointer ;
2020-08-19 20:10:29 +10:00
}
2020-11-15 18:08:50 +11:00
. header _ _overlay -- show {
pointer - events : all ;
opacity : 1 ;
2020-08-19 20:10:29 +10:00
}
2020-11-15 18:08:50 +11:00
. header _ _group : first - child {
margin - left : 1 rem ;
2020-08-19 20:10:29 +10:00
}
2020-11-15 18:08:50 +11:00
. header _ _group : nth - child ( 2 ) {
position : fixed ;
padding - top : 1.5 rem ;
width : 17 rem ;
display : flex ;
flex - direction : column ;
z - index : 2 ;
background : # fff ;
top : 0 ;
left : calc ( - 100 % - 2 rem ) ;
height : 100 % ;
box - shadow : none ;
transition : left 0.4 s cubic - bezier ( 0.4 , 0 , 0.2 , 1 ) , box - shadow 0.4 s ease - in ;
2020-08-19 20:10:29 +10:00
2020-11-15 18:08:50 +11:00
> . button {
width : 100 % ;
border - radius : 0 ;
margin : 0 ;
margin - bottom : 1 rem ;
}
2020-08-19 20:10:29 +10:00
2020-11-15 18:08:50 +11:00
& : : before {
position : absolute ;
top : 0 ;
left : 0 ;
width : 100 % ;
height : 0.3 rem ;
content : '' ;
background : linear - gradient ( to right , hsl ( 200 , 98 % , 43 % ) , hsla ( 193 , 98 % , 48 % , 1 ) ) ;
2020-08-19 20:10:29 +10:00
}
}
2020-11-15 18:08:50 +11:00
. header _ _group : nth - child ( 2 ) . header _ _group -- show {
left : 0 ;
box - shadow : 0 0 1 rem rgba ( 0 , 0 , 0 , 0.4 ) ;
}
. search _box {
margin : 0 ;
display : inline - block ;
}
}
. route _container -- settings {
display : flex ;
align - items : flex - start
}
. settings _menu {
width : 15 rem ;
padding : 1 rem ;
border - radius : 0.25 rem ;
@ at - root # { & } _ _title {
cursor : default ;
font - weight : 500 ;
font - variant : small - caps ;
font - size : 1.125 rem ;
padding - left : 0.25 rem ;
margin - bottom : 0.5 rem ;
}
2020-08-19 20:10:29 +10:00
2020-11-15 18:08:50 +11:00
@ at - root # { & } _ _item {
padding : 0.5 rem 1 rem ;
margin - bottom : 0.25 rem ;
padding - right : 0 ;
transition : background - color 0.2 s ;
cursor : pointer ;
position : relative ;
border - radius : 0.25 rem ;
2020-08-19 20:10:29 +10:00
2020-11-15 18:08:50 +11:00
& : first - child { margin - top : 0.5 rem ; }
& : last - child { margin - bottom : 0.5 rem ; }
2020-08-19 20:10:29 +10:00
2020-11-15 18:08:50 +11:00
& : : before {
content : '' ;
2020-08-19 20:10:29 +10:00
display : inline - block ;
2020-11-15 18:08:50 +11:00
width : 0.25 rem ;
z - index : 1 ;
height : 100 % ;
position : absolute ;
left : 0 ;
border - radius : 0.25 rem 0 0 0.25 em ;
top : 0 ;
opacity : 0 ;
transition : opacity 0.2 s ;
2020-08-19 20:10:29 +10:00
}
2020-11-15 18:08:50 +11:00
span {
color : $color _ _text -- secondary ;
margin - right : 0.5 rem ;
2020-08-19 20:10:29 +10:00
}
2020-11-15 18:08:50 +11:00
@ at - root # { & } -- selected {
background - color : $color _ _lightgray -- darker ;
color : $color _ _text -- primary ;
span {
color : $color _ _text -- primary ;
}
& : hover { background - color : $color _ _lightgray -- darker ; }
& : : before {
opacity : 1 ;
}
2020-08-19 20:10:29 +10:00
}
2020-11-15 18:08:50 +11:00
}
}
. settings _page {
width : calc ( 100 % - 15 rem ) ;
border - radius : 0.25 rem ;
margin - left : 2 rem ;
}
@ media ( max - width : $breakpoint -- tablet ) and ( min - width : $breakpoint -- phone ) {
div . settings _menu , div . settings _page {
width : calc ( 100 % - 4 rem ) ;
margin : 0.5 rem 2 rem ;
padding : 1 rem ;
}
}
2020-08-19 20:10:29 +10:00
2020-11-15 18:08:50 +11:00
@ media ( max - width : $breakpoint -- tablet ) {
. route _container -- settings {
flex - direction : column ;
}
. settings _menu {
width : 100 % ;
@ at - root # { & } _ _items {
2020-08-19 20:10:29 +10:00
display : flex ;
2020-11-15 18:08:50 +11:00
align - items : baseline ;
}
2020-08-19 20:10:29 +10:00
2020-11-15 18:08:50 +11:00
@ at - root # { & } _ _item {
width : 7 rem ;
margin - right : 0.5 rem ;
color : $color _ _text -- primary ;
& : first - child , & : last - child {
margin - bottom : 0 ;
margin - top : 0 ;
2020-08-19 20:10:29 +10:00
}
& : : before {
2020-11-15 18:08:50 +11:00
height : 0.2 rem ;
2020-08-19 20:10:29 +10:00
width : 100 % ;
2020-11-15 18:08:50 +11:00
left : 0 ;
border - radius : 0 0 1 rem 1 rem ;
top : auto ;
bottom : 0 ;
2020-08-19 20:10:29 +10:00
}
}
}
2020-11-15 18:08:50 +11:00
. settings _page {
width : 100 % ;
margin : 0 ;
margin - top : 1 rem ;
}
}
2020-08-07 12:36:34 +10:00
< / style >