+
+
@@ -9,14 +11,21 @@
@@ -33,7 +42,7 @@
.icon {
margin-right: 10px;
- path, circle {
+ path, circle, rect, line {
color: inherit;
}
}
diff --git a/resources/js/views/User/Password.vue b/resources/js/views/User/Password.vue
index e8465731..96a89556 100644
--- a/resources/js/views/User/Password.vue
+++ b/resources/js/views/User/Password.vue
@@ -1,15 +1,5 @@
-
- {{ $t('Personal Access Token') }}
-
- {{ $t("You don't have any created personal access tokens yet.") }}
-
-
-
- {{ $t('Create Token') }}
-
-
{{ $t('user_password.title') }}
@@ -43,7 +33,7 @@
- {{ $t('2fa.settings.title') }}
+ {{ $t('2fa.settings.title') }}
+
+
+ {{ $t('Personal Access Token') }}
+
+ {{ $t("You don't have any created personal access tokens yet.") }}
+
+
+
+
+
+
+
+ {{ $t('Create Token') }}
+
@@ -98,6 +112,7 @@
import PageHeader from '@/components/Others/PageHeader'
import ThemeLabel from '@/components/Others/ThemeLabel'
import {required} from 'vee-validate/dist/rules'
+ import { XIcon } from 'vue-feather-icons'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
import axios from 'axios'
@@ -109,6 +124,7 @@
FormLabel,
PageTab,
InfoBox,
+ XIcon,
ValidationProvider,
ValidationObserver,
UserImageInput,
@@ -131,6 +147,32 @@
}
},
methods: {
+ formatDate(date) {
+ return new Intl.DateTimeFormat('en').format(new Date(date))
+ },
+ confirmDeleteToken(token) {
+ events.$emit('confirm:open', {
+ title: this.$t('Are you sure you want to delete this token?'),
+ message: this.$t('Any applications or scripts using this token will no longer be able to access into your account. You cannot undo this action.'),
+ action: {
+ id: token.id,
+ operation: 'delete-personal-access-token'
+ }
+ })
+ },
+ deleteToken(id) {
+ axios.delete(`/api/user/token/revoke/${id}`)
+ .then(() => {
+
+ this.tokens = this.tokens.filter(tokenItem => tokenItem.id !== id)
+
+ events.$emit('toaster', {
+ type: 'success',
+ message: this.$t('Token was successfully deleted!'),
+ })
+ })
+ .catch(() => this.$isSomethingWrong())
+ },
async resetPassword() {
// Validate fields
@@ -191,6 +233,16 @@
},
created() {
this.getPersonalAccessTokens()
+
+ // Delete personal access token
+ events.$on('action:confirmed', data => {
+
+ if (data.operation === 'delete-personal-access-token') {
+ this.deleteToken(data.id)
+ }
+ })
+
+ events.$on('reload-personal-access-tokens', () => this.getPersonalAccessTokens())
}
}
@@ -200,8 +252,59 @@
@import '@assets/vuefilemanager/_mixins';
@import '@assets/vuefilemanager/_forms';
- .block-form {
- max-width: 100%;
+ .tokens-wrapper {
+ margin-top: 0 !important;
+
+ .token-item {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ padding: 10px 0;
+ border-bottom: 1px solid darken($light_mode_border, 5%);
+ align-items: center;
+
+ &:first-child {
+ padding-top: 0;
+ }
+
+ &:last-child {
+ border-bottom: 0 solid transparent;
+ padding-bottom: 0;
+ }
+ }
+
+ .tokens-details {
+ .name {
+ @include font-size(16);
+ }
+
+ .last-used {
+ @include font-size(12);
+ color: $text-muted;
+ line-height: 1.35;
+ display: block;
+ }
+ }
+
+ .tokens-destroyer {
+ margin-top: 10px;
+
+ .close-icon {
+ opacity: 0.2;
+
+ &:hover {
+ opacity: 1;
+
+ line {
+ color: inherit;
+ }
+ }
+ }
+ }
+
+ .tokens-destroyer {
+ cursor: pointer;
+ }
}
@media only screen and (max-width: 960px) {
@@ -227,7 +330,20 @@
}
@media (prefers-color-scheme: dark) {
+ .tokens-wrapper {
+ margin-top: 0 !important;
+ .token-item {
+ border-color: lighten($dark_mode_foreground, 3%);
+ }
+
+ .tokens-details {
+
+ .last-used {
+ color: $dark_mode_text_secondary;
+ }
+ }
+ }
}
diff --git a/tests/Feature/Accounts/PersonalAccessTokenTest.php b/tests/Feature/Accounts/PersonalAccessTokenTest.php
index 47387c12..b1130e2f 100644
--- a/tests/Feature/Accounts/PersonalAccessTokenTest.php
+++ b/tests/Feature/Accounts/PersonalAccessTokenTest.php
@@ -17,15 +17,13 @@ class PersonalAccessTokenTest extends TestCase
$user = User::factory(User::class)
->create();
- $response = $this
+ $this
->actingAs($user)
->postJson('/api/user/token/create', [
'name' => 'token',
])
->assertStatus(201);
- dd(json_decode($response->content(), true));
-
$this->assertDatabaseHas('personal_access_tokens', [
'tokenable_id' => $user->id,
'name' => 'token',