Skip to content

Commit 5ad8fdf

Browse files
tmunzer-AIDEtmunzer-AIDE
committed
add token info
1 parent fa75ae1 commit 5ad8fdf

8 files changed

Lines changed: 444 additions & 130 deletions

File tree

‎angular/src/app/pages/tools/token.component.scss‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
.box-token {
2+
margin: 1em;
3+
}
4+
5+
label.token {
6+
margin: .2em .5em .2em 1em;
7+
display: flex;
8+
flex-direction: row;
9+
align-items: center;
10+
letter-spacing: 0.1em;
11+
}
12+
13+
.token_opt {
14+
display: flex;
15+
flex-direction: column;
16+
width: 100%;
17+
}
18+
19+
.token_opt input {
20+
margin: 1em 0;
21+
padding: 0.5em;
22+
border: 1px solid white;
23+
border-radius: 10px;
24+
background-color: rgba(50, 50, 93, 0.25);
25+
color: white;
26+
}
27+
28+
.token_opt input:focus {
29+
background-color: black;
30+
border-color: #63b4ee;
31+
}
32+
33+
.cloud-container {
34+
display: flex;
35+
flex-direction: column;
36+
user-select: none;
37+
margin: 1em;
38+
}
39+
40+
.cloud-container>.label {
41+
font-weight: 300;
42+
margin-top: 1em;
43+
}
44+
45+
.cloud-container>.value {
46+
font-size: larger;
47+
font-weight: 800;
48+
display: flex;
49+
flex-direction: row;
50+
height: 1em;
51+
}
52+
53+
.text-container {
54+
display: flex;
55+
flex-direction: column;
56+
user-select: none;
57+
}
58+
59+
.text-container>.label {
60+
font-weight: 300;
61+
margin-top: 1em;
62+
63+
}
64+
65+
.text-container>.value {
66+
font-size: large;
67+
font-weight: 800;
68+
}

‎angular/src/app/pages/tools/token_info/info.component.html‎

Lines changed: 81 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,92 @@
1-
<div class="content">
1+
<div class="content full-height" style="padding: 0;">
22
<div class="box-token">
33
<label class="token" for="token">
44
API TOKEN INFO
55
</label>
66
<div class="token_opt">
77
<input type="text" [(ngModel)]="api_token" placeholder="API Token"/>
8-
<button class="stroked xlarge" [disabled]="!api_token">Get Info</button>
8+
<button class="stroked xlarge" [disabled]="!api_token" (click)="check_info()">Get Info</button>
99
</div>
1010
</div>
11-
<div *ngIf="token_type=='org'" class="content no-grow data-container">
12-
<div><span>Cloud: </span><b>{{cloud}}</b></div>
13-
<div><span>Token Type: </span><b>{{cloud}}</b></div>
14-
<div><span>Token Name: </span><b>{{cloud}}</b></div>
15-
<div><span>Last Name: </span><b>{{cloud}}</b></div>
11+
<div class="content no-border info-container">
12+
<div class="info-header">
13+
<div style="margin-bottom: 1em;">
14+
<span class="value">{{info.type | uppercase}}</span>
15+
<span class="cosm"> API Token on </span>
16+
<span class="value">{{info.host}}</span>
17+
<span class="cosm"> (</span>
18+
<span class="value">{{info.cloud}}</span>
19+
<span class="cosm"> )</span>
20+
</div>
21+
<div *ngIf="info.type=='org'"><span class="cosm">Token Name: </span><span class="value">{{info.name}}</span></div>
22+
<div *ngIf="info.type=='user'"><span class="cosm">User Name: </span><span class="value">{{info.name}}</span></div>
23+
</div>
24+
<div class="usage_count">
25+
<div class="text-container">
26+
<div class="label">MSP Access</div>
27+
<div class="value">{{info.msp_count}}</div>
28+
</div>
29+
<div class="text-container">
30+
<div class="label">Org Access</div>
31+
<div class="value">{{info.org_count}}</div>
32+
</div>
33+
<div class="text-container">
34+
<div class="label">Site Access</div>
35+
<div class="value">{{info.site_count}}</div>
36+
</div>
37+
</div>
38+
<div>
39+
<div *ngFor="let p of info.privileges" class="privilege">
40+
<div class="privilege-info row">
41+
<div class="privilege-info-container">
42+
<div class="label">Scope</div>
43+
<div class="value fixed">{{p.scope | uppercase}}</div>
44+
</div>
45+
<div class="privilege-info-container">
46+
<div class="label">Role</div>
47+
<div class="value fixed">{{p.role | uppercase}}</div>
48+
</div>
49+
<div class="copy-button">
50+
<button class="box-cloud-token-button stroked tooltip copy" (click)="copyId(p)">
51+
<img class="icon" src="assets/copy.svg">
52+
<span *ngIf="p.scope=='msp'" class="tooltiptext">Copy MSP ID</span>
53+
<span *ngIf="p.scope=='org'" class="tooltiptext">Copy ORG ID</span>
54+
<span *ngIf="p.scope=='site'" class="tooltiptext">Copy SITE ID</span>
55+
</button>
56+
</div>
57+
</div>
58+
<div *ngIf="p.scope=='msp'" class="privilege-info column">
59+
<div class="privilege-info-container">
60+
<div class="label">Name</div>
61+
<div class="value grow">{{p.name}}</div>
62+
</div>
63+
<div class="privilege-info-container">
64+
<div class="label">MSP ID:</div>
65+
<div class="value">{{p.msp_id}}</div>
66+
</div>
67+
</div>
68+
<div *ngIf="p.scope=='org'" class="privilege-info column">
69+
<div class="privilege-info-container">
70+
<div class="label">Name</div>
71+
<div class="value grow">{{p.name}}</div>
72+
</div>
73+
<div class="privilege-info-container">
74+
<div class="label">ORG ID:</div>
75+
<div class="value">{{p.org_id}}</div>
76+
</div>
77+
</div>
78+
<div *ngIf="p.scope=='site'" class="privilege-info column">
79+
<div class="privilege-info-container">
80+
<div class="label">Name</div>
81+
<div class="value grow">{{p.name}}</div>
82+
</div>
83+
<div class="privilege-info-container">
84+
<div class="label">SITE ID:</div>
85+
<div class="value">{{p.site_id}}</div>
86+
</div>
87+
</div>
88+
</div>
89+
</div>
1690
</div>
1791
<button (click)="close()" class="close">CLOSE</button>
1892
</div>

‎angular/src/app/pages/tools/token_info/info.component.scss‎

Lines changed: 83 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,96 @@
1+
.info-container {
2+
height: 50vh;
3+
padding: 0;
4+
max-height: 50vh;
5+
border-radius: 0;
6+
overflow: auto;
7+
scrollbar-width: thin;
8+
scrollbar-color: #63b4ee #202836;
9+
}
10+
11+
.info-header {
12+
font-size: larger;
13+
user-select: none;
14+
}
15+
.info-header .cosm {
16+
font-weight: 200;
17+
}
18+
.info-header .value {
19+
font-weight: 500;
20+
}
21+
22+
.usage_count {
23+
display: flex;
24+
justify-content: space-between;
25+
margin: 1em;
26+
}
127

2-
label.token {
3-
margin: .2em .5em .2em 1em;
28+
.privilege {
29+
display: flex;
30+
align-items: stretch;
31+
flex-direction: column;
32+
border: 1px solid #4f5560;
33+
box-shadow: 0 3px 6px 0 rgba(99, 99, 99, 0.1);
34+
border-radius: 15px;
35+
background-color: #161c26;
36+
padding: 1em;
37+
margin: 1em 0;
38+
}
39+
40+
.privilege-info.row {
441
display: flex;
542
flex-direction: row;
6-
align-items: center;
7-
letter-spacing: 0.1em;
43+
justify-content: flex-start;
844
}
945

10-
.token_opt {
46+
.privilege-info.column {
1147
display: flex;
1248
flex-direction: column;
49+
}
50+
51+
.privilege-info-container {
52+
margin: 0 0 .5em 0;
53+
}
54+
55+
.privilege-info-container>.label {
56+
font-weight: 300;
57+
user-select: none;
58+
}
59+
60+
.privilege-info-container>.value {
61+
font-size: larger;
62+
font-weight: 700;
63+
}
64+
65+
.privilege-info-container>.value.fixed {
66+
width: 4em;
67+
}
68+
69+
.copy-button {
1370
width: 100%;
71+
display: flex;
72+
align-items: center;
73+
align-content: center;
74+
justify-content: flex-end;
1475
}
1576

16-
.token_opt input {
17-
margin: 1em 0;
18-
padding: 0.5em;
19-
border: 1px solid white;
20-
border-radius: 10px;
21-
background-color: rgba(50, 50, 93, 0.25);
22-
color: white;
77+
.copy-button button {
78+
border-radius: 60px;
79+
height: 3em;
80+
width: 3em;
81+
margin: 0;
82+
}
83+
84+
.copy-button button img {
85+
filter: invert(42%) brightness(1000%) contrast(100%);
2386
}
2487

25-
.token_opt input:focus {
26-
background-color: black;
27-
border-color: #63b4ee;
88+
.copy-button button span.tooltiptext {
89+
top: 10px;
90+
right: 40px;
91+
font-size: smaller;
92+
font-weight: 100;
93+
background-color: #161c26;
94+
border: 1px solid #4f5560;
95+
border-radius: 15px;
2896
}

0 commit comments

Comments
 (0)