Skip to content

Commit a03eaba

Browse files
julien-ncjulien-nc
committed
improve settings
Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
1 parent 697641c commit a03eaba

2 files changed

Lines changed: 81 additions & 100 deletions

File tree

‎src/components/AdminSettings.vue‎

Lines changed: 51 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -8,61 +8,60 @@
88
<DropboxIcon class="icon" />
99
{{ t('integration_dropbox', 'Dropbox integration') }}
1010
</h2>
11-
<NcNoteCard type="info">
12-
<p>
11+
<div id="dropbox-content">
12+
<NcNoteCard type="info">
1313
{{ t('integration_dropbox', 'If you want your Nextcloud users to authenticate to Dropbox using your Dropbox OAuth app, create one in Dropbox.') }}
14-
</p>
15-
<a href="https://www.dropbox.com/developers/apps" class="external" target="_blank">
16-
{{ t('integration_dropbox', 'Dropbox developer settings') }}
17-
</a>
18-
<p>
14+
<br>
15+
<a href="https://www.dropbox.com/developers/apps" class="external" target="_blank">
16+
{{ t('integration_dropbox', 'Dropbox developer settings') }}
17+
</a>
18+
<br>
1919
{{ t('integration_dropbox', 'Make sure your give those permissions to your app:') }}
20-
</p>
21-
<p>
20+
<br>
2221
<strong>account_info.read - files.metadata.read - files.content.read</strong>
23-
</p>
24-
<p>
22+
<br>
2523
{{ t('integration_dropbox', 'No need to add any redirect URI.') }}
2624
{{ t('integration_dropbox', 'Then set the app key and app secret below.') }}
27-
</p>
28-
</NcNoteCard>
29-
<div id="dropbox-content">
30-
<div class="line">
31-
<label for="dropbox-client-id">
32-
<KeyIcon :size="20" class="icon" />
33-
{{ t('integration_dropbox', 'App key') }}
34-
</label>
35-
<input id="dropbox-client-id"
36-
v-model="state.client_id"
37-
type="password"
38-
:readonly="readonly"
39-
:placeholder="t('integration_dropbox', 'Your Dropbox application key')"
40-
@input="onInput"
41-
@focus="readonly = false">
42-
</div>
43-
<div class="line">
44-
<label for="dropbox-client-secret">
45-
<KeyIcon :size="20" class="icon" />
46-
{{ t('integration_dropbox', 'App secret') }}
47-
</label>
48-
<input id="dropbox-client-secret"
49-
v-model="state.client_secret"
50-
type="password"
51-
:readonly="readonly"
52-
:placeholder="t('integration_dropbox', 'Your Dropbox application secret')"
53-
@input="onInput"
54-
@focus="readonly = false">
55-
</div>
25+
</NcNoteCard>
26+
<NcTextField
27+
v-model="state.client_id"
28+
type="password"
29+
:label="t('integration_dropbox', 'App key')"
30+
:placeholder="t('integration_dropbox', 'Your Dropbox application key')"
31+
:readonly="readonly"
32+
:show-trailing-button="!!state.client_id"
33+
@trailing-button-click="state.client_id = ''; onInput()"
34+
@focus="readonly = false"
35+
@update:model-value="onInput">
36+
<template #icon>
37+
<KeyOutlineIcon :size="20" />
38+
</template>
39+
</NcTextField>
40+
<NcTextField
41+
v-model="state.client_secret"
42+
type="password"
43+
:label="t('integration_dropbox', 'App secret')"
44+
:placeholder="t('integration_dropbox', 'Your Dropbox application secret')"
45+
:readonly="readonly"
46+
:show-trailing-button="!!state.client_secret"
47+
@trailing-button-click="state.client_secret = ''; onInput()"
48+
@focus="readonly = false"
49+
@update:model-value="onInput">
50+
<template #icon>
51+
<KeyOutlineIcon :size="20" />
52+
</template>
53+
</NcTextField>
5654
</div>
5755
</div>
5856
</template>
5957

6058
<script>
61-
import KeyIcon from 'vue-material-design-icons/KeyOutline.vue'
59+
import KeyOutlineIcon from 'vue-material-design-icons/KeyOutline.vue'
6260
6361
import DropboxIcon from './icons/DropboxIcon.vue'
6462
6563
import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
64+
import NcTextField from '@nextcloud/vue/components/NcTextField'
6665
6766
import { loadState } from '@nextcloud/initial-state'
6867
import { generateUrl } from '@nextcloud/router'
@@ -76,8 +75,9 @@ export default {
7675
7776
components: {
7877
DropboxIcon,
79-
KeyIcon,
78+
KeyOutlineIcon,
8079
NcNoteCard,
80+
NcTextField,
8181
},
8282
8383
props: [],
@@ -128,33 +128,18 @@ export default {
128128

129129
<style scoped lang="scss">
130130
#dropbox_prefs {
131-
#dropbox-content{
132-
margin-left: 40px;
133-
}
134-
135-
h2,
136-
.line,
137-
.settings-hint {
131+
h2 {
138132
display: flex;
139133
align-items: center;
140-
.icon {
141-
margin-right: 4px;
142-
}
134+
justify-content: start;
135+
gap: 8px;
143136
}
144-
145-
h2 .icon {
146-
margin-right: 8px;
147-
}
148-
149-
.line {
150-
> label {
151-
width: 300px;
152-
display: flex;
153-
align-items: center;
154-
}
155-
> input {
156-
width: 250px;
157-
}
137+
#dropbox-content{
138+
margin-left: 40px;
139+
display: flex;
140+
flex-direction: column;
141+
gap: 4px;
142+
max-width: 800px;
158143
}
159144
}
160145
</style>

‎src/components/PersonalSettings.vue‎

Lines changed: 30 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,16 @@
88
<DropboxIcon />
99
{{ t('integration_dropbox', 'Dropbox data migration') }}
1010
</h2>
11-
<NcNoteCard v-if="!isAdminConfigured" type="info">
12-
{{ t('integration_dropbox', 'Your administrator has not yet configured this integration.') }}
13-
</NcNoteCard>
11+
<div v-if="!isAdminConfigured" class="dropbox-content">
12+
<NcNoteCard type="info">
13+
{{ t('integration_dropbox', 'Your administrator has not yet configured this integration.') }}
14+
</NcNoteCard>
15+
</div>
1416
<div v-else class="dropbox-content">
15-
<h3>{{ t('integration_dropbox', 'Authentication') }}</h3>
1617
<div v-if="!connected">
17-
<br>
18-
<p class="settings-hint">
19-
<span v-if="codeFailed" class="line">
20-
<InformationOutlineIcon />
21-
{{ t('integration_dropbox', 'If you have trouble authenticating, ask your Nextcloud administrator to check Dropbox admin settings.') }}
22-
</span>
23-
</p>
24-
<br>
18+
<NcNoteCard v-if="codeFailed" type="info">
19+
{{ t('integration_dropbox', 'If you have trouble authenticating, ask your Nextcloud administrator to check Dropbox admin settings.') }}
20+
</NcNoteCard>
2521
<a target="_blank"
2622
:href="oauthUrl">
2723
<NcButton :class="{ loading: codeLoading }"
@@ -32,20 +28,18 @@
3228
{{ t('integration_dropbox', 'Connect to Dropbox to get an access code') }}
3329
</NcButton>
3430
</a>
35-
<br><br>
36-
<div class="line">
37-
<label for="dropbox-code">
38-
<KeyIcon />
39-
{{ t('integration_dropbox', 'Dropbox access code') }}
40-
</label>
41-
<input id="dropbox-code"
42-
v-model="accessCode"
43-
type="text"
44-
:class="{ loading: codeLoading }"
45-
:disabled="codeLoading === true"
46-
:placeholder="t('integration_dropbox', 'Access code')"
47-
@input="onAccessCodeInput">
48-
</div>
31+
<br>
32+
<NcTextField
33+
v-model="accessCode"
34+
:label="t('integration_dropbox', 'Dropbox access code')"
35+
:placeholder="t('integration_dropbox', 'Access code')"
36+
:class="{ loading: codeLoading }"
37+
:disabled="codeLoading === true"
38+
@update:model-value="onAccessCodeInput">
39+
<template #icon>
40+
<KeyOutlineIcon :size="20" />
41+
</template>
42+
</NcTextField>
4943
</div>
5044
<div v-else>
5145
<div class="line">
@@ -120,18 +114,18 @@
120114
</template>
121115

122116
<script>
123-
import InformationOutlineIcon from 'vue-material-design-icons/InformationOutline.vue'
124117
import CheckIcon from 'vue-material-design-icons/Check.vue'
125118
import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
126119
import PencilIcon from 'vue-material-design-icons/PencilOutline.vue'
127120
import CloseIcon from 'vue-material-design-icons/Close.vue'
128121
import FolderIcon from 'vue-material-design-icons/FolderOutline.vue'
129-
import KeyIcon from 'vue-material-design-icons/KeyOutline.vue'
122+
import KeyOutlineIcon from 'vue-material-design-icons/KeyOutline.vue'
130123
131124
import DropboxIcon from './icons/DropboxIcon.vue'
132125
133126
import NcButton from '@nextcloud/vue/components/NcButton'
134127
import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
128+
import NcTextField from '@nextcloud/vue/components/NcTextField'
135129
136130
import { loadState } from '@nextcloud/initial-state'
137131
import { generateUrl } from '@nextcloud/router'
@@ -147,13 +141,13 @@ export default {
147141
DropboxIcon,
148142
NcButton,
149143
NcNoteCard,
144+
NcTextField,
150145
OpenInNewIcon,
151146
PencilIcon,
152147
CloseIcon,
153148
FolderIcon,
154-
KeyIcon,
149+
KeyOutlineIcon,
155150
CheckIcon,
156-
InformationOutlineIcon,
157151
},
158152
159153
props: [],
@@ -354,17 +348,19 @@ export default {
354348
355349
<style scoped lang="scss">
356350
#dropbox_prefs {
357-
358351
h2 {
359352
display: flex;
360353
align-items: center;
361-
span {
362-
margin-right: 8px;
363-
}
354+
justify-content: start;
355+
gap: 8px
364356
}
365357
366358
.dropbox-content {
367359
margin-left: 40px;
360+
display: flex;
361+
flex-direction: column;
362+
gap: 4px;
363+
max-width: 800px;
368364
369365
h3 {
370366
font-weight: bold;

0 commit comments

Comments
 (0)