Skip to content
This repository was archived by the owner on Apr 19, 2023. It is now read-only.

Commit db45e74

Browse files
AnandChowdharyAnandChowdhary
committed
✨ Scopes for pages
1 parent ad8fa16 commit db45e74

File tree

7 files changed

+174
-111
lines changed

7 files changed

+174
-111
lines changed

‎components/Manage.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,6 @@ export default class Manage extends Vue {
132132
private getUserMembership() {
133133
const user = this.$store.state.auth.user;
134134
if (user) {
135-
console.log("You are", user.id);
136135
const org = this.$store.state.auth.activeOrganization;
137136
if (org) {
138137
const memberships = this.$store.state.settings.memberships;

‎components/form/CommaList.vue

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,18 @@
55
<tbody>
66
<tr v-for="(item, index) in list" :key="`p_${index}`">
77
<td>
8-
<input
8+
<Input
99
:id="labelId"
1010
:value="item"
1111
:placeholder="placeholder"
1212
:autocomplete="autocomplete"
1313
:required="required"
1414
v-bind="$attrs"
15+
:disabled="disabled"
1516
@input="val => input(index, val)"
1617
/>
1718
</td>
18-
<td class="text text--align-right">
19+
<td v-if="!disabled" class="text text--align-right">
1920
<button
2021
aria-label="Remove"
2122
data-balloon-pos="up"
@@ -33,7 +34,12 @@
3334
</tr>
3435
</tbody>
3536
</table>
36-
<button class="button button--type-icon" type="button" @click.prevent="add">
37+
<button
38+
v-if="!disabled"
39+
class="button button--type-icon"
40+
type="button"
41+
@click.prevent="add"
42+
>
3743
<font-awesome-icon class="icon icon--mr-1" icon="plus" fixed-width />
3844
<span>Add another</span>
3945
</button>
@@ -51,11 +57,13 @@ import { Component, Vue, Prop } from "vue-property-decorator";
5157
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
5258
import { library } from "@fortawesome/fontawesome-svg-core";
5359
import { faTimes, faPlus } from "@fortawesome/free-solid-svg-icons";
60+
import Input from "@/components/form/Input.vue";
5461
library.add(faTimes, faPlus);
5562
5663
@Component({
5764
components: {
58-
FontAwesomeIcon
65+
FontAwesomeIcon,
66+
Input
5967
}
6068
})
6169
export default class CommaList extends Vue {
@@ -65,6 +73,7 @@ export default class CommaList extends Vue {
6573
@Prop() placeholder;
6674
@Prop() help;
6775
@Prop() autocomplete;
76+
@Prop({ default: false }) disabled;
6877
labelId = "";
6978
list = [""];
7079
commaList = "";
@@ -106,7 +115,7 @@ export default class CommaList extends Vue {
106115
margin-bottom: 1rem;
107116
label {
108117
display: block;
109-
margin-bottom: 0.5rem;
118+
margin-bottom: -0.5rem;
110119
}
111120
table {
112121
margin-bottom: 1rem;

‎pages/manage/_team/developer/api-keys/_key.vue

Lines changed: 46 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
<span v-else>Copy</span>
3535
</button>
3636
<button
37+
v-if="!readOnly"
3738
type="button"
3839
class="button button--color-danger"
3940
style="margin-left: 0.5rem"
@@ -42,37 +43,43 @@
4243
<font-awesome-icon class="icon icon--mr-1" icon="trash" />
4344
<span>Delete</span>
4445
</button>
45-
<h2>Edit API key</h2>
46-
<form
47-
v-meta-ctrl-enter="() => (showUpdate = true)"
48-
@submit.prevent="() => (showUpdate = true)"
49-
>
50-
<Input
51-
label="Name"
52-
placeholder="Enter a name for this API key"
53-
:value="apiKey.name"
54-
@input="val => (apiKey.name = val)"
55-
/>
56-
<CheckList
57-
label="API restrictions"
58-
:options="scopes"
59-
:value="apiKey.scopes"
60-
@input="val => (apiKey.scopes = val)"
61-
/>
62-
<CommaList
63-
label="IP restrictions"
64-
:value="apiKey.ipRestrictions"
65-
placeholder="Enter an IP address or CIDR, e.g., 192.168.1.1/42"
66-
@input="val => (apiKey.ipRestrictions = val)"
67-
/>
68-
<CommaList
69-
label="Referrer restrictions"
70-
:value="apiKey.referrerRestrictions"
71-
placeholder="Enter a host name without protocol, e.g., example.com"
72-
@input="val => (apiKey.referrerRestrictions = val)"
73-
/>
74-
<button class="button">Update API key</button>
75-
</form>
46+
<div class="text text--mt-2">
47+
<h2>Edit API key</h2>
48+
<form
49+
v-meta-ctrl-enter="() => (showUpdate = true)"
50+
@submit.prevent="() => (showUpdate = true)"
51+
>
52+
<Input
53+
label="Name"
54+
placeholder="Enter a name for this API key"
55+
:value="apiKey.name"
56+
:disabled="readOnly"
57+
@input="val => (apiKey.name = val)"
58+
/>
59+
<CheckList
60+
label="API restrictions"
61+
:options="scopes"
62+
:value="apiKey.scopes"
63+
:disabled="readOnly"
64+
@input="val => (apiKey.scopes = val)"
65+
/>
66+
<CommaList
67+
label="IP restrictions"
68+
:value="apiKey.ipRestrictions"
69+
placeholder="Enter an IP address or CIDR, e.g., 192.168.1.1/42"
70+
:disabled="readOnly"
71+
@input="val => (apiKey.ipRestrictions = val)"
72+
/>
73+
<CommaList
74+
label="Referrer restrictions"
75+
:value="apiKey.referrerRestrictions"
76+
placeholder="Enter a host name without protocol, e.g., example.com"
77+
:disabled="readOnly"
78+
@input="val => (apiKey.referrerRestrictions = val)"
79+
/>
80+
<button v-if="!readOnly" class="button">Update API key</button>
81+
</form>
82+
</div>
7683
</div>
7784
</div>
7885
<transition name="modal">
@@ -180,11 +187,19 @@ export default class ManageSettings extends Vue {
180187
apiKey: ApiKey | null = null;
181188
scopes = scopes;
182189
copied = false;
190+
loggedInMembership = 3;
183191
184192
private created() {
185193
this.apiKeys = {
186194
...this.$store.getters["manage/apiKeys"](this.$route.params.team)
187195
};
196+
this.loggedInMembership = parseInt(
197+
this.$store.getters["manage/loggedInMembership"](this.$route.params.team)
198+
);
199+
}
200+
201+
get readOnly() {
202+
return this.loggedInMembership === 3 || this.loggedInMembership === 4;
188203
}
189204
190205
private load() {

‎pages/manage/_team/developer/api-keys/index.vue

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -104,24 +104,26 @@
104104
</button>
105105
</div>
106106
</div>
107-
<h2>Create API key</h2>
108-
<p>
109-
You can use API keys to programmatically access Staart in your
110-
applications.
111-
</p>
112-
<form @submit.prevent="createApiKey">
113-
<CheckList
114-
label="API restrictions"
115-
:options="scopes"
116-
:value="newScopes"
117-
placeholder="Enter an IP address or CIDR, e.g., 192.168.1.1/42"
118-
@input="val => (newScopes = val)"
119-
/>
120-
<p class="text text--color-muted text--size-small">
121-
You can add IP and referrer restrictions after creating the API key.
107+
<div v-if="loggedInMembership !== 3 && loggedInMembership !== 4">
108+
<h2>Create API key</h2>
109+
<p>
110+
You can use API keys to programmatically access Staart in your
111+
applications.
122112
</p>
123-
<button class="button">Create API key</button>
124-
</form>
113+
<form @submit.prevent="createApiKey">
114+
<CheckList
115+
label="API restrictions"
116+
:options="scopes"
117+
:value="newScopes"
118+
placeholder="Enter an IP address or CIDR, e.g., 192.168.1.1/42"
119+
@input="val => (newScopes = val)"
120+
/>
121+
<p class="text text--color-muted text--size-small">
122+
You can add IP and referrer restrictions after creating the API key.
123+
</p>
124+
<button class="button">Create API key</button>
125+
</form>
126+
</div>
125127
</div>
126128
<transition name="modal">
127129
<Confirm v-if="showDelete" :on-close="() => (showDelete = null)">
@@ -191,11 +193,15 @@ export default class ManageSettings extends Vue {
191193
loading = "";
192194
newScopes = "orgRead";
193195
scopes = scopes;
196+
loggedInMembership = 3;
194197
195198
private created() {
196199
this.apiKeys = {
197200
...this.$store.getters["manage/apiKeys"](this.$route.params.team)
198201
};
202+
this.loggedInMembership = parseInt(
203+
this.$store.getters["manage/loggedInMembership"](this.$route.params.team)
204+
);
199205
}
200206
201207
private load() {

‎pages/manage/_team/developer/webhooks/_key.vue

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -32,42 +32,49 @@
3232
label="Event"
3333
:options="events"
3434
required
35+
:disabled="readOnly"
3536
@input="val => (webhook.event = val)"
3637
/>
3738
<Input
3839
label="URL"
3940
placeholder="Enter a URL for this webhook"
4041
:value="webhook.url"
42+
:disabled="readOnly"
4143
@input="val => (webhook.url = val)"
4244
/>
4345
<Select
4446
:value="webhook.contentType"
4547
label="Content type"
4648
:options="['application/json', 'application/x-www-form-urlencoded']"
4749
required
50+
:disabled="readOnly"
4851
@input="val => (webhook.contentType = val)"
4952
/>
5053
<Input
5154
label="Secret"
5255
placeholder="Enter a secret key for this webhook"
5356
:value="webhook.secret"
57+
:disabled="readOnly"
5458
@input="val => (webhook.secret = val)"
5559
/>
5660
<Checkbox
5761
:value="webhook.isActive"
5862
label="Activate this webhook"
63+
:disabled="readOnly"
5964
@input="val => (webhook.isActive = val)"
6065
/>
61-
<button class="button">Update webhook</button>
62-
<button
63-
class="button button--color-danger"
64-
type="button"
65-
style="margin-left: 0.5rem"
66-
@click="() => (showDelete = true)"
67-
>
68-
<font-awesome-icon class="icon icon--mr-1" icon="trash" />
69-
<span>Delete webhook</span>
70-
</button>
66+
<div v-if="readOnly">
67+
<button class="button">Update webhook</button>
68+
<button
69+
class="button button--color-danger"
70+
type="button"
71+
style="margin-left: 0.5rem"
72+
@click="() => (showDelete = true)"
73+
>
74+
<font-awesome-icon class="icon icon--mr-1" icon="trash" />
75+
<span>Delete webhook</span>
76+
</button>
77+
</div>
7178
</form>
7279
</div>
7380
</div>
@@ -140,11 +147,19 @@ export default class ManageSettings extends Vue {
140147
webhook: Webhook | null = null;
141148
events = events;
142149
copied = false;
150+
loggedInMembership = 3;
143151
144152
private created() {
145153
this.webhooks = {
146154
...this.$store.getters["manage/webhooks"](this.$route.params.team)
147155
};
156+
this.loggedInMembership = parseInt(
157+
this.$store.getters["manage/loggedInMembership"](this.$route.params.team)
158+
);
159+
}
160+
161+
get readOnly() {
162+
return this.loggedInMembership === 3 || this.loggedInMembership === 4;
148163
}
149164
150165
private load() {

‎pages/manage/_team/developer/webhooks/index.vue

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -105,32 +105,35 @@
105105
</button>
106106
</div>
107107
</div>
108-
<h2>Create webhook</h2>
109-
<p>
110-
You can use webhooks to get access to events in your developer
111-
applications.
112-
</p>
113-
<form v-meta-ctrl-enter="createWebhook" @submit.prevent="createWebhook">
114-
<Select
115-
:value="newHookEvent"
116-
label="Event"
117-
:options="events"
118-
required
119-
@input="val => (newHookEvent = val)"
120-
/>
121-
<Input
122-
:value="newHookUrl"
123-
label="URL"
124-
type="url"
125-
placeholder="Enter the complete URL to your hook"
126-
required
127-
@input="val => (newHookUrl = val)"
128-
/>
129-
<p class="text text--color-muted text--size-small">
130-
You can add a secret key and content type after creating the webhook.
108+
<div v-if="loggedInMembership !== 3 && loggedInMembership !== 4">
109+
<h2>Create webhook</h2>
110+
<p>
111+
You can use webhooks to get access to events in your developer
112+
applications.
131113
</p>
132-
<button class="button">Add webhook</button>
133-
</form>
114+
<form v-meta-ctrl-enter="createWebhook" @submit.prevent="createWebhook">
115+
<Select
116+
:value="newHookEvent"
117+
label="Event"
118+
:options="events"
119+
required
120+
@input="val => (newHookEvent = val)"
121+
/>
122+
<Input
123+
:value="newHookUrl"
124+
label="URL"
125+
type="url"
126+
placeholder="Enter the complete URL to your hook"
127+
required
128+
@input="val => (newHookUrl = val)"
129+
/>
130+
<p class="text text--color-muted text--size-small">
131+
You can add a secret key and content type after creating the
132+
webhook.
133+
</p>
134+
<button class="button">Add webhook</button>
135+
</form>
136+
</div>
134137
</div>
135138
<transition name="modal">
136139
<Confirm v-if="showDelete" :on-close="() => (showDelete = null)">
@@ -198,8 +201,12 @@ export default class ManageSettings extends Vue {
198201
newHookUrl = "";
199202
newHookEvent = "*";
200203
events = events;
204+
loggedInMembership = 3;
201205
202206
private created() {
207+
this.loggedInMembership = parseInt(
208+
this.$store.getters["manage/loggedInMembership"](this.$route.params.team)
209+
);
203210
this.webhooks = {
204211
...this.$store.getters["manage/webhooks"](this.$route.params.team)
205212
};

0 commit comments

Comments
 (0)