2019-05-09 18:54:39 +12:00
< div class = "cover" >
< h1 class = "zone xl margin-bottom-large margin-top" >
2019-09-27 06:47:48 +12:00
Account
2019-05-09 18:54:39 +12:00
< / h1 >
< / div >
< div class = "zone xl" >
2019-05-09 20:23:22 +12:00
< ul class = "phases clear" data-ui-phases data-selected = "{{router.params.tab}}" >
2019-05-09 18:54:39 +12:00
< li data-state = "/console/account" >
2019-08-08 17:09:49 +12:00
< div
data-service="account.get"
data-scope="console"
data-name="account"
data-event="load"
data-failure="trigger"
data-failure-param-trigger-events="logout">
2019-05-09 18:54:39 +12:00
2019-09-27 06:47:48 +12:00
< h2 > < span class = "number" > < i class = "icon-user" > < / i > < / span > Overview< / h2 >
2019-05-09 18:54:39 +12:00
< div class = "row responsive" >
< div class = "col span-9" >
< div class = "box margin-bottom-xl" >
< div >
2019-08-08 17:09:49 +12:00
< form name = "account.update"
data-service="account.updateName"
data-scope="console"
data-event="submit"
data-success="trigger,alert"
data-success-param-alert-text="Your name was updated successfully"
data-success-param-trigger-events="account.update,modal-close"
data-failure="alert"
2019-08-09 01:43:24 +12:00
data-failure-param-alert-text="Failed to update your name"
data-failure-param-alert-classname="error">
2019-05-09 18:54:39 +12:00
2019-09-27 06:47:48 +12:00
< label for = "name" > Name< / label >
2019-05-09 18:54:39 +12:00
< div class = "row" >
< div class = "col span-8" >
2019-05-10 04:15:51 +12:00
< input name = "name" id = "name" type = "text" autocomplete = "off" data-ls-bind = "{{account.name}}" required class = "margin-bottom-no" >
2019-05-09 18:54:39 +12:00
< / div >
< div class = "col span-4" >
2019-09-27 06:47:48 +12:00
< button type = "submit" class = "fill reverse" > Update Name< / button >
2019-05-09 18:54:39 +12:00
< / div >
< / div >
< footer class = "clear" >
< / footer >
< / form >
< / div >
< hr / >
2019-08-08 17:09:49 +12:00
< form name = "update-email"
data-service="account.updateEmail"
data-scope="console"
data-event="submit"
data-success="trigger,alert"
data-success-param-alert-text="Email address updated successfully"
data-success-param-trigger-events="account-update,modal-close"
data-failure="alert"
2019-08-09 01:43:24 +12:00
data-failure-param-alert-text="Failed updating email address"
data-failure-param-alert-classname="error">
2019-05-09 18:54:39 +12:00
2019-09-27 06:47:48 +12:00
< label > Email< / label >
2019-05-09 18:54:39 +12:00
< div class = "row" >
< div class = "col span-8" >
2019-05-10 04:15:51 +12:00
< input name = "email" type = "email" class = "margin-bottom-no" autocomplete = "off" placeholder = "me@example.com" data-ls-bind = "{{account.email}}" required >
2019-05-09 18:54:39 +12:00
< / div >
< div class = "col span-4" >
2019-09-27 06:47:48 +12:00
< div data-ui-modal class = "modal close width-small height-small" data-button-text = "Update Email" data-button-class = "fill reverse" >
< label > Password< / label >
2019-05-09 18:54:39 +12:00
< input name = "password" type = "password" class = "full-width" autocomplete = "off" placeholder = "" required >
< footer >
2019-09-27 06:47:48 +12:00
< button type = "submit" > Update< / button > < button data-ui-modal-close = "" type = "button" class = "reverse" > Cancel< / button >
2019-05-09 18:54:39 +12:00
< / footer >
< / div >
< / div >
< / div >
< / form >
< hr / >
2019-09-27 06:47:48 +12:00
< div data-ui-modal class = "modal close width-small" data-button-text = "Update Password" data-button-class = "reverse" >
< h1 > Update Password< / h1 >
2019-05-09 18:54:39 +12:00
2019-08-08 17:09:49 +12:00
< form name = "update-password"
data-service="account.updatePassword"
data-scope="console"
data-event="submit"
data-success="trigger,alert"
data-success-param-trigger-events="account-update,modal-close"
data-success-param-alert-text="Password updated successfully"
data-failure="alert"
2019-08-09 01:43:24 +12:00
data-failure-param-alert-text="Failed updating password"
data-failure-param-alert-classname="error">
2019-05-09 18:54:39 +12:00
2019-09-27 06:47:48 +12:00
< label > Current Password< / label >
2019-05-09 18:54:39 +12:00
< input name = "oldPassword" type = "password" class = "full-width" autocomplete = "off" placeholder = "" required >
2019-09-27 06:47:48 +12:00
< label > New Password< / label >
2019-05-09 18:54:39 +12:00
< input name = "password" type = "password" class = "full-width" autocomplete = "off" placeholder = "" required data-forms-password-meter >
< footer >
2019-09-27 06:47:48 +12:00
< button type = "submit" > Update Password< / button > < button data-ui-modal-close = "" type = "button" class = "reverse" > Cancel< / button >
2019-05-09 18:54:39 +12:00
< / footer >
< / form >
< / div >
< hr / >
2019-08-08 17:09:49 +12:00
< form class = "margin-top"
data-service="auth.logout"
data-scope="console"
data-event="submit"
data-success="trigger"
data-success-param-trigger-events="logout"
data-failure="alert"
2019-08-09 01:43:24 +12:00
data-failure-param-alert-text="Logout failed"
data-failure-param-alert-classname="error">
2019-09-27 06:47:48 +12:00
< button class = "fill danger icon fill" > < i class = "icon-login" > < / i > Logout< / button >
2019-05-09 18:54:39 +12:00
< / form >
< / div >
< / div >
2019-08-12 09:52:36 +12:00
< div class = "col span-3 text-align-center" >
2019-08-09 17:03:41 +12:00
< img src = "" data-ls-attrs = "src={{account|gravatar}}" data-size = "200" height = "150" alt = "User Avatar" class = "avatar huge huge margin-bottom-small" / >
2019-05-09 18:54:39 +12:00
< br / >
2019-09-27 06:47:48 +12:00
< a href = "https://en.gravatar.com/gravatars/new/" rel = "noopener" class = "button margin-bottom-small" target = "_blank" > < i class = "icon-upload" > < / i > Upload< / a >
2019-05-09 18:54:39 +12:00
< br / >
2019-09-27 06:47:48 +12:00
< small class = "text-size-small" > (via < a href = "https://gravatar.com/" target = "_blank" rel = "noopener" > gravatar.com < i class = "icon-link-ext" > < / i > < / a > )< / small >
2019-05-09 18:54:39 +12:00
< / div >
< / div >
< div class = "row responsive" >
< div class = "col span-9" >
2019-09-27 06:47:48 +12:00
< h3 class = "text-danger" > Danger Zone< / h3 >
2019-05-09 18:54:39 +12:00
< div class = "box danger" >
2019-09-27 06:47:48 +12:00
< p > This is the area where you can delete your account.< / p >
2019-05-09 18:54:39 +12:00
2019-09-27 06:47:48 +12:00
< p > By deleting your account you will lose access to any of your teams and shared data.< / p >
2019-05-09 18:54:39 +12:00
2020-01-12 13:20:35 +13:00
< p > PLEASE NOTE: Account deletion is irreversible.< / p >
2019-05-09 18:54:39 +12:00
2019-08-08 17:09:49 +12:00
< form class = "inline"
data-service="account.deactivate"
data-scope="console"
data-event="submit"
data-confirm="Are you sure you want to delete your account?"
data-success="trigger"
data-success-param-trigger-events="deactivated"
data-failure="alert"
2019-08-09 01:43:24 +12:00
data-failure-param-alert-text="Account deactivation failed"
data-failure-param-alert-classname="error">
2019-09-27 06:47:48 +12:00
< button class = "danger reverse" > Delete Account< / button >
2019-05-09 18:54:39 +12:00
< / form >
< / div >
< / div >
< div class = "col span-3" > < / div >
< / div >
< / div >
< / li >
< li data-state = "/console/account/security" >
2019-09-27 06:47:48 +12:00
< h2 > < span class = "number" > < i class = "icon-shield" > < / i > < / span > Security< / h2 >
2019-05-09 18:54:39 +12:00
2019-09-27 06:47:48 +12:00
< h3 > Devices and Sessions< / h3 >
2019-05-09 18:54:39 +12:00
2019-08-08 17:09:49 +12:00
< div class = "box margin-bottom"
data-service="account.getSessions"
data-scope="console"
data-name="sessions"
2019-08-08 18:10:57 +12:00
data-event="load,session-delete">
2019-05-09 18:54:39 +12:00
< ul data-ls-loop = "sessions" data-ls-as = "session" class = "list" >
< li class = "clear" >
2019-08-07 00:22:54 +12:00
< span data-ls-if = "true != {{session.current}}" style = "display: none;" >
<!-- From remote session ( - logout event) -->
2019-08-08 17:09:49 +12:00
< form class = "pull-end"
data-service="auth.logoutBySession"
data-scope="console"
data-event="submit"
2019-09-27 06:52:57 +12:00
data-loading="Loading..."
2019-08-08 17:09:49 +12:00
data-success="trigger"
2019-08-08 18:10:57 +12:00
data-success-param-trigger-events="session-delete"
2019-08-08 17:09:49 +12:00
data-failure="alert"
2019-09-27 06:47:48 +12:00
data-failure-param-alert-text="Logout from Session Failed"
2019-08-09 01:43:24 +12:00
data-failure-param-alert-classname="error">
2019-08-07 08:38:47 +12:00
< input type = "hidden" name = "id" data-ls-bind = "{{session.id}}" >
2019-09-27 06:47:48 +12:00
< button class = "danger" > Logout< / button >
2019-05-09 18:54:39 +12:00
< / form >
< / span >
2019-08-07 00:22:54 +12:00
< span data-ls-if = "true == {{session.current}}" style = "display: none;" >
<!-- From current session (+logout event) -->
2019-08-08 17:09:49 +12:00
< form class = "pull-end"
data-service="auth.logoutBySession"
data-scope="console"
data-event="submit"
2019-09-27 06:52:57 +12:00
data-loading="Loading..."
2019-08-08 17:09:49 +12:00
data-success="trigger,redirect"
data-success-param-trigger-events="logout"
data-success-param-redirect-url="/"
data-failure="alert"
2019-09-27 06:47:48 +12:00
data-failure-param-alert-text="Logout from Session Failed"
2019-08-09 01:43:24 +12:00
data-failure-param-alert-classname="error">
2019-08-07 08:38:47 +12:00
< input type = "hidden" name = "id" data-ls-bind = "{{session.id}}" >
2019-09-27 06:47:48 +12:00
< button class = "danger" > Logout< / button >
2019-05-09 18:54:39 +12:00
< / form >
< / span >
2019-12-07 08:54:23 +13:00
< img data-ls-attrs = "src={{env.API}}/avatars/browsers/{{session.client.short_name|lowercase}}?width=120&height=120&project={{env.PROJECT}},title={{session.client.name}},alt={{session.client.name}}" class = "avatar trans pull-start margin-end" / >
2019-05-09 18:54:39 +12:00
2019-05-10 04:15:51 +12:00
< span data-ls-bind = "{{session.client.name}}" > < / span > < span data-ls-bind = "{{session.client.version}}" > < / span > on < span data-ls-bind = "{{session.model}}" > < / span > < span data-ls-bind = "{{session.OS.name}}" > < / span > < span data-ls-bind = "{{session.OS.version}}" > < / span >
2019-05-09 18:54:39 +12:00
< span data-ls-if = "true == {{session.current}}" style = "display: none;" >
2019-09-27 06:47:48 +12:00
< span class = "tag green" > Current Session< / span >
2019-05-09 18:54:39 +12:00
< / span >
2019-08-24 07:07:17 +12:00
< div class = "margin-top-small" >
2019-12-07 08:54:23 +13:00
< img data-ls-attrs = "src={{env.API}}/avatars/flags/{{session.geo.isoCode}}?width=80&height=80&project={{env.PROJECT}}" class = "avatar xs margin-end-small inline" / >
2019-05-10 04:15:51 +12:00
< small data-ls-bind = "{{session.ip}}" > < / small > / < small data-ls-bind = "{{session.geo.country}}" > < / small >
2019-05-09 18:54:39 +12:00
< / div >
< / li >
< / ul >
< / div >
2019-08-08 17:09:49 +12:00
< form class = "inline margin-bottom-large"
data-service="auth.logoutBySession"
data-scope="console"
data-event="submit"
data-success="trigger,redirect"
2019-08-08 18:10:57 +12:00
data-success-param-trigger-events="session-delete"
2019-10-11 06:18:22 +13:00
data-success-param-redirect-url="/"
2019-08-08 17:09:49 +12:00
data-failure="alert"
2019-09-27 06:47:48 +12:00
data-failure-param-alert-text="Logout from All Sessions Failed"
2019-08-09 01:43:24 +12:00
data-failure-param-alert-classname="error">
2019-08-07 08:38:47 +12:00
< input type = "hidden" name = "id" value = "0" >
2019-09-27 06:47:48 +12:00
< button class = "danger" > Logout from all devices< / button >
2019-05-09 18:54:39 +12:00
< / form >
2019-08-28 11:02:19 +12:00
< / li >
< li data-state = "/console/account/activity" >
< h2 > Activity< / h2 >
2019-05-09 18:54:39 +12:00
2019-08-28 11:02:19 +12:00
< div
2019-08-08 17:09:49 +12:00
data-service="account.getSecurity"
data-scope="console"
data-name="securityLogs"
data-event="load">
2019-05-09 18:54:39 +12:00
< div class = "box" >
< table class = "vertical small" >
< thead >
2019-08-07 00:22:54 +12:00
< tr >
2019-09-27 06:47:48 +12:00
< th width = "140" > Date< / th >
< th width = "175" > Event< / th >
< th > Client< / th >
< th width = "90" > Location< / th >
< th width = "90" > IP< / th >
2019-08-07 00:22:54 +12:00
< / tr >
2019-05-09 18:54:39 +12:00
< / thead >
< tbody data-ls-loop = "securityLogs" data-ls-as = "log" >
2019-08-07 00:22:54 +12:00
< tr >
2019-09-27 06:47:48 +12:00
< td data-title = "Date: " > < span data-ls-bind = "{{log.time|date-time}}" > < / span > < / td >
< td data-title = "Event: " > < span data-ls-bind = "{{log.event}}" > < / span > < / td >
< td data-title = "Client: " >
2019-12-07 08:54:23 +13:00
< img data-ls-attrs = "src={{env.API}}/avatars/browsers/{{log.client.short_name|lowercase}}?width=80&height=80&project={{env.PROJECT}},title={{log.client.name}},alt={{log.client.name}}" class = "avatar xs inline margin-end-small" / >
2019-08-07 00:22:54 +12:00
< span data-ls-bind = "{{log.client.name}} {{log.client.version}} on {{log.model}} {{log.OS.name}} {{log.OS.version}}" > < / span >
< / td >
2019-09-27 06:47:48 +12:00
< td data-title = "Location: " >
2019-12-07 08:54:23 +13:00
< img data-ls-attrs = "src={{env.API}}/avatars/flags/{{log.geo.isoCode}}?width=80&height=80&project={{env.PROJECT}}" class = "avatar xs inline margin-end-small" / >
2019-08-07 00:22:54 +12:00
< span data-ls-bind = "{{log.geo.country}}" > < / span >
< / td >
2019-09-27 06:47:48 +12:00
< td data-title = "IP: " > < span data-ls-bind = "{{log.ip}}" > < / span > < / td >
2019-08-07 00:22:54 +12:00
< / tr >
2019-05-09 18:54:39 +12:00
< / tbody >
< / table >
< / div >
< / div >
< / li >
< / ul >
< / div >