Skip to content

Commit 7b1f823

Browse files
KB1RDKB1RD
committed
Fix bugs, add title change support, and add new theme
1 parent 02f5f09 commit 7b1f823

File tree

16 files changed

+1094
-661
lines changed

16 files changed

+1094
-661
lines changed

‎components/AddRoomModal.vue‎

Lines changed: 82 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -1,210 +1,151 @@
11
<template>
2-
<a-modal
2+
<b-modal
33
title="Add a Room"
4-
:visible="visible"
5-
:confirm-loading="adding_room"
6-
:closable="!adding_room"
7-
:mask-closable="!adding_room"
8-
:ok-text="type === 'n' ? 'Create' : 'Join'"
9-
:cancel-button-props="{ props: { disabled: adding_room } }"
4+
ref="modal"
5+
:ok-title="type === 'n' ? 'Create' : 'Join'"
6+
:busy="adding_room"
7+
:no-close-on-backdrop="adding_room"
8+
:no-close-on-esc="adding_room"
109
@ok="handleOk"
11-
@cancel="handleCancel"
1210
>
13-
<a-form :form="form" layout="vertical" hide-required-mark>
14-
<a-row :gutter="16">
15-
<a-form-item>
16-
<a-select
17-
v-decorator="[
18-
'type',
19-
{
20-
initialValue: 'n'
21-
}
22-
]"
23-
style="width: 240px"
24-
@change="(v) => (type = v)"
25-
>
26-
<a-select-option value="n">Create a new room</a-select-option>
27-
<a-select-option value="j">Join an existing room</a-select-option>
28-
</a-select>
29-
</a-form-item>
30-
</a-row>
31-
32-
<a-row v-if="type === 'n'" :gutter="16">
33-
<a-form-item>
34-
<a-checkbox
35-
v-decorator="['add_alias']"
36-
@change="(e) => (add_alias = e.target.checked)"
37-
>
38-
Add an alias
39-
</a-checkbox>
40-
</a-form-item>
41-
</a-row>
42-
<a-row v-if="type === 'n' && add_alias" :gutter="16">
43-
<a-form-item>
44-
<a-input
45-
v-decorator="[
46-
'alias',
47-
{
48-
rules: [
49-
{
50-
required: true,
51-
message: 'An alias is required'
52-
},
53-
{
54-
pattern: /^[^#:]*$/gm,
55-
message: 'Enter only the localpart of the alias'
56-
}
57-
]
58-
}
59-
]"
60-
placeholder="Alias"
61-
/>
62-
</a-form-item>
63-
</a-row>
64-
65-
<a-row v-if="type === 'n'" :gutter="16">
66-
<a-form-item>
67-
<a-checkbox
68-
v-decorator="['add_name']"
69-
@change="(e) => (add_name = e.target.checked)"
70-
>
71-
Add a name
72-
</a-checkbox>
73-
</a-form-item>
74-
</a-row>
75-
<a-row v-if="type === 'n' && add_name" :gutter="16">
76-
<a-form-item>
77-
<a-input
78-
v-decorator="[
79-
'name',
80-
{
81-
rules: [
82-
{
83-
required: true,
84-
message: 'A name is required'
85-
}
86-
]
87-
}
88-
]"
89-
placeholder="Name"
90-
/>
91-
</a-form-item>
92-
</a-row>
93-
94-
<a-row v-if="type === 'j'" :gutter="16">
95-
<a-form-item>
96-
<a-input
97-
v-decorator="[
98-
'room',
99-
{
100-
rules: [
101-
{
102-
required: true,
103-
message: 'A room to join is required'
104-
},
105-
{
106-
pattern: /^[!#][^!#:]*:[^!#:]*(:[0-9]+)?$/gm,
107-
message: 'This is not a valid Matrix room ID or alias'
108-
}
109-
]
110-
}
111-
]"
112-
placeholder="!roomid:matrix.org"
11+
<AlertSection ref="alerts" />
12+
<b-form>
13+
<b-tabs v-model="form.tab" content-class="mt-3">
14+
<b-tab title="Create a room" active>
15+
<b-form-group label-for="name-input">
16+
<b-form-input
17+
id="name-input"
18+
v-model="form.name"
19+
:disabled="adding_room"
20+
placeholder="Room Name (optional)"
21+
/>
22+
</b-form-group>
23+
</b-tab>
24+
<b-tab title="Join a room"></b-tab>
25+
</b-tabs>
26+
<b-form-group label-for="alias-input">
27+
<b-input-group prepend="#">
28+
<b-form-input
29+
id="alias-input"
30+
aria-describedby="alias-live-feedback"
31+
v-model="form.alias"
32+
:disabled="adding_room"
33+
:required="type === 'j'"
34+
:state="alias_valid"
35+
:placeholder="type === 'n' ? 'Room Alias (optional)' : 'Room Alias'"
11336
/>
114-
</a-form-item>
115-
</a-row>
116-
</a-form>
117-
</a-modal>
37+
<b-form-invalid-feedback id="alias-live-feedback">
38+
Enter just the localpart of the alias.
39+
</b-form-invalid-feedback>
40+
</b-input-group>
41+
</b-form-group>
42+
</b-form>
43+
</b-modal>
11844
</template>
11945

12046
<script>
12147
import { debug } from '@/plugins/debug'
48+
import AlertSection from '@/components/AlertSection'
12249
12350
export default {
51+
components: { AlertSection },
12452
data() {
12553
return {
126-
form: this.$form.createForm(this),
54+
form: {
55+
alias: '',
56+
name: '',
57+
tab: 0
58+
},
12759
128-
type: 'n',
129-
add_alias: false,
130-
add_name: false,
131-
132-
visible: false,
13360
adding_room: false
13461
}
13562
},
13663
64+
computed: {
65+
type() {
66+
return this.form.tab === 0 ? 'n' : 'j'
67+
},
68+
alias_valid() {
69+
const res = /^[^#:]*$/gm.exec(this.form.alias)
70+
return this.form.alias.length || this.type === 'j'
71+
? (res && res.index === 0) || false
72+
: undefined
73+
}
74+
},
75+
13776
methods: {
13877
show() {
139-
this.visible = true
78+
this.$refs.modal.show()
14079
},
14180
hide() {
142-
this.visible = false
81+
this.$refs.modal.hide()
14382
},
14483
14584
onFormSubmit(values) {
14685
if (!this.$matrix.client) {
14786
return
14887
}
14988
89+
const alias = values.alias.trim()
90+
const name = values.name
91+
this.adding_room = true
15092
if (this.type === 'n') {
151-
this.adding_room = true
152-
const hide = this.$message.loading('Creating room...', 0)
15393
this.$matrix.client
15494
.createRoom({
155-
room_alias_name: values.add_alias ? values.alias : undefined,
156-
name: values.add_name ? values.name : undefined
95+
room_alias_name: alias !== '' ? alias : undefined,
96+
name: name !== '' ? name : undefined
15797
})
15898
.then(
15999
({ room_id }) => {
160-
this.$message.success('Room created')
161100
if (room_id) {
162101
this.$router.replace('/edit/' + encodeURIComponent(room_id))
163102
}
103+
this.hide()
164104
},
165105
(e) => {
166106
debug.error('Failed to create room', e)
167-
this.$message.error('Failed to create room!')
107+
this.$refs.alerts.alert({
108+
variant: 'danger',
109+
contents: 'Failed to create room!'
110+
})
168111
}
169112
)
170113
.then(() => {
171114
this.adding_room = false
172-
hide()
173115
})
174116
} else if (this.type === 'j') {
175-
this.adding_room = true
176-
const hide = this.$message.loading('Joining room...', 0)
177117
this.$matrix.client
178118
.joinRoom(values.room, { syncRoom: false })
179119
.then(
180120
({ roomId }) => {
181-
this.$message.success('Room joined')
182121
if (roomId) {
183122
this.$router.replace('/edit/' + encodeURIComponent(roomId))
184123
}
124+
this.hide()
185125
},
186126
(e) => {
187127
debug.error('Failed to join room', e)
188-
this.$message.error('Failed to join room!')
128+
this.$refs.alerts.alert({
129+
variant: 'danger',
130+
contents: 'Failed to join room!'
131+
})
189132
}
190133
)
191134
.then(() => {
192135
this.adding_room = false
193-
hide()
194136
})
195137
}
196138
},
197139
198140
handleOk(e) {
199-
const self = this
200-
this.form.validateFields((err, values) => {
201-
if (!err) {
202-
self.onFormSubmit(values)
203-
}
204-
})
205-
},
206-
handleCancel(e) {
207-
this.visible = false
141+
e.preventDefault()
142+
if (
143+
this.alias_valid === false ||
144+
(!this.alias_valid && this.type === 'j')
145+
) {
146+
return
147+
}
148+
this.onFormSubmit(this.form)
208149
}
209150
}
210151
}

‎components/AlertSection.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<div>
3+
<b-alert
4+
v-for="a in alerts"
5+
:key="a.contents"
6+
:dismissible="a.dismissible"
7+
:variant="a.variant"
8+
show
9+
>
10+
{{ a.contents }}
11+
</b-alert>
12+
</div>
13+
</template>
14+
15+
<script>
16+
export default {
17+
data() {
18+
return {
19+
alerts: []
20+
}
21+
},
22+
methods: {
23+
alert({ variant, dismissible = true, contents = '' }) {
24+
this.alerts.push({ variant, dismissible, contents })
25+
}
26+
}
27+
}
28+
</script>

0 commit comments

Comments
 (0)