Skip to content

Commit 76147d1

Browse files
tmunzer-AIDEtmunzer-AIDE
committed
adding token delete feedback message
1 parent ac1d578 commit 76147d1

File tree

8 files changed

+147
-18
lines changed

8 files changed

+147
-18
lines changed

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎angular/src/app/pages/account/manage/manage.component.html‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<div style="margin: 1em;">This account doesn't have any API Token yet...</div>
66
<div style="margin: 0 2em;">You can go back and create a new API Token directly from this extension!</div>
77
</div>
8-
<div class="token-container" *ngFor="let token of tokens">
8+
<div class="token-container" *ngFor="let token of tokens" [ngClass]="token.deleted == true ? 'deleted' : ''">
99
<div class="token">
1010
<table>
1111
<tr>
@@ -36,13 +36,22 @@
3636
</table>
3737
</div>
3838
<div class="delete">
39-
<button (click)="deleteToken(token.id)" [disabled]="session.domain.includes('mistsys.com')">
39+
<button (click)="deleteToken(token)" [disabled]="session.domain.includes('mistsys.com')">
4040
<img src="assets/delete.svg" alt="delete">
4141
</button>
4242
</div>
4343
</div>
4444
</div>
45+
4546
<div style="display: flex;">
4647
<button (click)="close()" class="xlarge">CLOSE</button>
4748
</div>
49+
</div>
50+
<div class="message-container">
51+
<div class="message success" [ngClass]="success == true ? 'show' : ''">
52+
API Token Deleted
53+
</div>
54+
<div class="message error" [ngClass]="error == true ? 'show' : ''">
55+
Unable to delete the API Token
56+
</div>
4857
</div>

‎angular/src/app/pages/account/manage/manage.component.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@
55
scrollbar-color: var(--primary) var(--background);
66
}
77

8+
.token-container.deleted {
9+
height: 0px;
10+
display: none !important;
11+
}
12+
813
.token-container {
914
margin: 0.5em 0;
1015
display: flex;
@@ -77,7 +82,8 @@
7782
.delete button:not(:disabled) {
7883
cursor: pointer;
7984
}
85+
8086
.delete button:not(:disabled):hover {
8187
background-color: var(--error);
8288
}
83-
}
89+
}

‎angular/src/app/pages/account/manage/manage.component.ts‎

Lines changed: 43 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,17 @@ export interface TokenElement {
99
last_used: number | null,
1010
created_time: number,
1111
key: string
12+
deleted: boolean
1213
}
1314

1415
@Component({
1516
selector: 'app-account-manage',
1617
templateUrl: 'manage.component.html',
1718
styleUrls: [
18-
'manage.component.scss',
19+
'../../../scss/button.component.scss',
20+
'../../../scss/message.component.scss',
1921
'../../../scss/popup.component.scss',
20-
'../../../scss/button.component.scss'
22+
'manage.component.scss',
2123
],
2224
changeDetection: ChangeDetectionStrategy.OnPush
2325
})
@@ -36,6 +38,8 @@ export class AccountManageComponent {
3638
tokens = [];
3739
now: number;
3840
do_manage: boolean = false;
41+
success: boolean = false;
42+
error: boolean = false;
3943

4044
ngOnInit() {
4145
this.now = new Date().getTime();
@@ -66,12 +70,43 @@ export class AccountManageComponent {
6670
}
6771
}
6872

69-
deleteToken(token_id: string): void {
70-
let url = "https://" + this.session.api_host + "/api/v1/self/apitokens/" + token_id
71-
this._http.delete(url, { headers: { "X-CSRFTOKEN": this.session.csrftoken } }).subscribe(() => {
72-
this.session.requests += 1;
73-
this.getTokens();
74-
})
73+
deleteToken(token: TokenElement): void {
74+
let url = "https://" + this.session.api_host + "/api/v1/self/apitokens/" + token.id
75+
this._http.delete(url, { headers: { "X-CSRFTOKEN": this.session.csrftoken }, observe: 'response' })
76+
.subscribe({
77+
next: data => {
78+
this.session.requests += 1;
79+
if (data.status == 200) {
80+
this.delete_success(token);
81+
} else {
82+
this.delete_error(data);
83+
}
84+
}, error: err => {
85+
this.delete_error(err);
86+
}
87+
})
88+
}
89+
90+
private delete_success(token: TokenElement) {
91+
this.session.requests += 1;
92+
token.deleted = true;
93+
this.success = true;
94+
this._cd.detectChanges()
95+
setTimeout(() => {
96+
this.success = false;
97+
this._cd.detectChanges()
98+
}, 2000);
99+
}
100+
101+
private delete_error(err:any) {
102+
this.session.requests += 1;
103+
console.log(err);
104+
this.error = true;
105+
this._cd.detectChanges()
106+
setTimeout(() => {
107+
this.error = false;
108+
this._cd.detectChanges()
109+
}, 3000);
75110
}
76111

77112
close(): void {

‎angular/src/app/pages/account/manage_org/manage_org.component.html‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
<div style="margin: 1em;">This Org doesn't have any API Token yet...</div>
3333
<div style="margin: 0 2em;">You can go back and create a new API Token directly from this extension!</div>
3434
</div>
35-
<div class="token-container" *ngFor="let token of tokens">
35+
<div class="token-container" *ngFor="let token of tokens" [ngClass]="token.deleted == true ? 'deleted' : ''">
3636
<div class="token">
3737
<table>
3838
<tr>
@@ -71,7 +71,7 @@
7171
</table>
7272
</div>
7373
<div class="delete">
74-
<button (click)="deleteToken(token.id)">
74+
<button (click)="deleteToken(token)">
7575
<img src="assets/delete.svg" alt="delete">
7676
</button>
7777
</div>
@@ -81,4 +81,12 @@
8181
<div style="display: flex;">
8282
<button (click)="close()" class="xlarge">CLOSE</button>
8383
</div>
84+
</div>
85+
<div class="message-container">
86+
<div class="message success" [ngClass]="success == true ? 'show' : ''">
87+
API Token Deleted
88+
</div>
89+
<div class="message error" [ngClass]="error == true ? 'show' : ''">
90+
Unable to delete the API Token
91+
</div>
8492
</div>

‎angular/src/app/pages/account/manage_org/manage_org.component.ts‎

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,15 @@ export interface TokenElement {
1111
last_used: number | null,
1212
created_time: number,
1313
key: string
14+
deleted: boolean
1415
}
1516

1617
@Component({
1718
selector: 'app-account-manage-org',
1819
templateUrl: 'manage_org.component.html',
1920
styleUrls: [
2021
'../../../scss/button.component.scss',
22+
'../../../scss/message.component.scss',
2123
'../../../scss/popup.component.scss',
2224
'../../../scss/select.component.scss',
2325
'./manage_org.component.scss',
@@ -46,6 +48,8 @@ export class AccountManageOrgComponent implements OnInit {
4648
org_loading: boolean = false;
4749
org_id: string;
4850
do_manage: boolean = false;
51+
success: boolean = false;
52+
error: boolean = false;
4953

5054
ngOnInit() {
5155
this.now = new Date().getTime();
@@ -92,14 +96,45 @@ export class AccountManageOrgComponent implements OnInit {
9296
}
9397
}
9498

95-
deleteToken(token_id: string): void {
96-
let url = "https://" + this.session.api_host + "/api/v1/orgs/" + this.org_id + "/apitokens/" + token_id
97-
this._http.delete(url, { headers: { "X-CSRFTOKEN": this.session.csrftoken } }).subscribe(() => {
98-
this.session.requests += 1;
99-
this.getTokens();
99+
deleteToken(token: TokenElement): void {
100+
let url = "https://" + this.session.api_host + "/api/v1/orgs/" + this.org_id + "/apitokens/" + token.id
101+
this._http.delete(url, { headers: { "X-CSRFTOKEN": this.session.csrftoken }, observe: 'response' })
102+
.subscribe({
103+
next: data => {
104+
this.session.requests += 1;
105+
if (data.status == 200) {
106+
this.delete_success(token);
107+
} else {
108+
this.delete_error(data);
109+
}
110+
}, error: err => {
111+
this.delete_error(err);
112+
}
100113
})
101114
}
102115

116+
private delete_success(token: TokenElement) {
117+
this.session.requests += 1;
118+
token.deleted = true;
119+
this.success = true;
120+
this._cd.detectChanges()
121+
setTimeout(() => {
122+
this.success = false;
123+
this._cd.detectChanges()
124+
}, 2000);
125+
}
126+
127+
private delete_error(err:any) {
128+
this.session.requests += 1;
129+
console.log(err);
130+
this.error = true;
131+
this._cd.detectChanges()
132+
setTimeout(() => {
133+
this.error = false;
134+
this._cd.detectChanges()
135+
}, 3000);
136+
}
137+
103138
close(): void {
104139
this._cd.detectChanges();
105140
this.closeManageTokens.emit();

‎angular/src/app/scss/message.component.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
2+
.message-container {
3+
position: absolute;
4+
top: 0;
5+
width: 100%;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
10+
.message {
11+
width: 75%;
12+
text-align: center;
13+
padding: 1em 2em;
14+
border-radius: 30px;
15+
margin: 2em auto;
16+
user-select: none;
17+
opacity: 0;
18+
display: none;
19+
transition: all 0.5s linear;
20+
transition-behavior: allow-discrete;
21+
}
22+
.message.success {
23+
background: var(--success);
24+
color: black;
25+
26+
}
27+
.message.error {
28+
background: var(--error);
29+
color: black;
30+
}
31+
.message.show {
32+
display: unset;
33+
opacity: 1;
34+
}
35+
}

‎angular/src/styles.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,7 @@ body {
220220
--disabled: #F6F8FF;
221221
--warning: #FFB74D;
222222
--error: #ff0000d7;
223+
--success: #18c956d7;
223224
--disabled-inner: #E1E6F9;
224225
--progress-warning: #ff6969;
225226
--progress-background: #698bc750;

0 commit comments

Comments
 (0)