username -> displayname
This commit is contained in:
Craig
parent
bcb4ea6641
commit
bf51a3ff3a
@ -4,11 +4,11 @@
|
||||
<template v-for="(message, index) in history">
|
||||
<li :key="index" class="message" v-if="message.type === 'text'">
|
||||
<div class="author" @contextmenu.stop.prevent="onContext($event, { member: member(message.id) })">
|
||||
<img :src="`https://api.adorable.io/avatars/40/${member(message.id).username}.png`" />
|
||||
<img :src="`https://api.adorable.io/avatars/40/${member(message.id).displayname}.png`" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-head">
|
||||
<span>{{ member(message.id).username }}</span>
|
||||
<span>{{ member(message.id).displayname }}</span>
|
||||
<span class="timestamp">{{ timestamp(message.created) }}</span>
|
||||
</div>
|
||||
<neko-markdown class="content-body" :source="message.content" />
|
||||
@ -25,7 +25,7 @@
|
||||
}"
|
||||
>
|
||||
<strong v-if="message.id === id">You</strong>
|
||||
<strong v-else>{{ member(message.id).username }}</strong>
|
||||
<strong v-else>{{ member(message.id).displayname }}</strong>
|
||||
{{ message.content }}
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</div>
|
||||
<form class="message" v-if="!connecting" @submit.stop.prevent="connect">
|
||||
<span>Please Login</span>
|
||||
<input type="text" placeholder="Display Name" v-model="username" />
|
||||
<input type="text" placeholder="Display Name" v-model="displayname" />
|
||||
<input type="password" placeholder="Password" v-model="password" />
|
||||
<button type="submit" @click.stop.prevent="login">
|
||||
Connect
|
||||
@ -150,12 +150,12 @@
|
||||
|
||||
@Component({ name: 'neko-connect' })
|
||||
export default class extends Vue {
|
||||
private username = ''
|
||||
private displayname = ''
|
||||
private password = ''
|
||||
|
||||
mounted() {
|
||||
if (this.$accessor.username !== '' && this.$accessor.password !== '') {
|
||||
this.$accessor.login({ username: this.$accessor.username, password: this.$accessor.password })
|
||||
if (this.$accessor.displayname !== '' && this.$accessor.password !== '') {
|
||||
this.$accessor.login({ displayname: this.$accessor.displayname, password: this.$accessor.password })
|
||||
}
|
||||
}
|
||||
|
||||
@ -164,7 +164,7 @@
|
||||
}
|
||||
|
||||
login() {
|
||||
this.$accessor.login({ username: this.username, password: this.password })
|
||||
this.$accessor.login({ displayname: this.displayname, password: this.password })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
<template slot-scope="child" v-if="child.data">
|
||||
<li class="header">
|
||||
<div class="user">
|
||||
<img :src="`https://api.adorable.io/avatars/25/${child.data.member.username}.png`" />
|
||||
<strong>{{ child.data.member.username }}</strong>
|
||||
<img :src="`https://api.adorable.io/avatars/25/${child.data.member.displayname}.png`" />
|
||||
<strong>{{ child.data.member.displayname }}</strong>
|
||||
</div>
|
||||
</li>
|
||||
<li class="seperator" />
|
||||
@ -163,8 +163,8 @@
|
||||
|
||||
kick(member: Member) {
|
||||
this.$swal({
|
||||
title: `Kick ${member.username}?`,
|
||||
text: `Are you sure you want to kick ${member.username}?`,
|
||||
title: `Kick ${member.displayname}?`,
|
||||
text: `Are you sure you want to kick ${member.displayname}?`,
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Yes',
|
||||
@ -177,8 +177,8 @@
|
||||
|
||||
ban(member: Member) {
|
||||
this.$swal({
|
||||
title: `Ban ${member.username}?`,
|
||||
text: `Are you sure you want to ban ${member.username}? You will need to restart the server to undo this.`,
|
||||
title: `Ban ${member.displayname}?`,
|
||||
text: `Are you sure you want to ban ${member.displayname}? You will need to restart the server to undo this.`,
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Yes',
|
||||
@ -191,8 +191,8 @@
|
||||
|
||||
mute(member: Member) {
|
||||
this.$swal({
|
||||
title: `Mute ${member.username}?`,
|
||||
text: `Are you sure you want to mute ${member.username}?`,
|
||||
title: `Mute ${member.displayname}?`,
|
||||
text: `Are you sure you want to mute ${member.displayname}?`,
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Yes',
|
||||
@ -205,8 +205,8 @@
|
||||
|
||||
unmute(member: Member) {
|
||||
this.$swal({
|
||||
title: `Unmute ${member.username}?`,
|
||||
text: `Are you sure you want to unmute ${member.username}?`,
|
||||
title: `Unmute ${member.displayname}?`,
|
||||
text: `Are you sure you want to unmute ${member.displayname}?`,
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Yes',
|
||||
|
||||
@ -4,18 +4,18 @@
|
||||
<ul class="members-list">
|
||||
<li v-if="member">
|
||||
<div :class="[{ host: member.id === host }, 'self', 'member']">
|
||||
<img :src="`https://api.adorable.io/avatars/50/${member.username}.png`" />
|
||||
<img :src="`https://api.adorable.io/avatars/50/${member.displayname}.png`" />
|
||||
</div>
|
||||
</li>
|
||||
<template v-for="(member, index) in members">
|
||||
<li
|
||||
v-if="member.id !== id && member.connected"
|
||||
:key="index"
|
||||
v-tooltip="{ content: member.username, placement: 'bottom', offset: -15, boundariesElement: 'body' }"
|
||||
v-tooltip="{ content: member.displayname, placement: 'bottom', offset: -15, boundariesElement: 'body' }"
|
||||
>
|
||||
<div :class="[{ host: member.id === host, admin: member.admin }, 'member']">
|
||||
<img
|
||||
:src="`https://api.adorable.io/avatars/50/${member.username}.png`"
|
||||
:src="`https://api.adorable.io/avatars/50/${member.displayname}.png`"
|
||||
@contextmenu.stop.prevent="onContext($event, { member })"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -16,7 +16,7 @@ export abstract class BaseClient extends EventEmitter<BaseEvents> {
|
||||
protected _peer?: RTCPeerConnection
|
||||
protected _channel?: RTCDataChannel
|
||||
protected _timeout?: NodeJS.Timeout
|
||||
protected _username?: string
|
||||
protected _displayname?: string
|
||||
protected _state: RTCIceConnectionState = 'disconnected'
|
||||
protected _id = ''
|
||||
|
||||
@ -40,7 +40,7 @@ export abstract class BaseClient extends EventEmitter<BaseEvents> {
|
||||
return this.peerConnected && this.socketOpen
|
||||
}
|
||||
|
||||
public connect(url: string, password: string, username: string) {
|
||||
public connect(url: string, password: string, displayname: string) {
|
||||
if (this.socketOpen) {
|
||||
this.emit('warn', `attempting to create websocket while connection open`)
|
||||
return
|
||||
@ -51,11 +51,11 @@ export abstract class BaseClient extends EventEmitter<BaseEvents> {
|
||||
return
|
||||
}
|
||||
|
||||
if (username === '') {
|
||||
throw new Error('Must add a username') // TODO: Better handling
|
||||
if (displayname === '') {
|
||||
throw new Error('Must add a displayname') // TODO: Better handling
|
||||
}
|
||||
|
||||
this._username = username
|
||||
this._displayname = displayname
|
||||
this[EVENT.CONNECTING]()
|
||||
|
||||
try {
|
||||
@ -90,7 +90,7 @@ export abstract class BaseClient extends EventEmitter<BaseEvents> {
|
||||
}
|
||||
|
||||
this._state = 'disconnected'
|
||||
this._username = undefined
|
||||
this._displayname = undefined
|
||||
this._id = ''
|
||||
}
|
||||
|
||||
@ -223,7 +223,7 @@ export abstract class BaseClient extends EventEmitter<BaseEvents> {
|
||||
JSON.stringify({
|
||||
event: EVENT.SIGNAL.ANSWER,
|
||||
sdp: d.sdp,
|
||||
username: this._username,
|
||||
displayname: this._displayname,
|
||||
}),
|
||||
)
|
||||
})
|
||||
|
||||
@ -41,13 +41,13 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
|
||||
this.$accessor.chat.reset()
|
||||
}
|
||||
|
||||
login(password: string, username: string) {
|
||||
login(password: string, displayname: string) {
|
||||
const url =
|
||||
process.env.NODE_ENV === 'development'
|
||||
? `ws://${location.host.split(':')[0]}:${process.env.VUE_APP_SERVER_PORT}/`
|
||||
: `${/https/gi.test(location.protocol) ? 'wss' : 'ws'}://${location.host}/`
|
||||
|
||||
this.connect(url, password, username)
|
||||
this.connect(url, password, displayname)
|
||||
}
|
||||
|
||||
logout() {
|
||||
@ -222,7 +222,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
|
||||
this.$vue.$notify({
|
||||
group: 'neko',
|
||||
type: 'info',
|
||||
title: `${member.username} has the controls`,
|
||||
title: `${member.displayname} has the controls`,
|
||||
text: 'But I let them know you wanted it',
|
||||
duration: 5000,
|
||||
speed: 1000,
|
||||
@ -238,7 +238,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
|
||||
this.$vue.$notify({
|
||||
group: 'neko',
|
||||
type: 'info',
|
||||
title: `${member.username} is requesting the controls`,
|
||||
title: `${member.displayname} is requesting the controls`,
|
||||
duration: 5000,
|
||||
speed: 1000,
|
||||
})
|
||||
@ -253,7 +253,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
|
||||
this.$accessor.remote.setHost(member)
|
||||
this.$accessor.chat.newMessage({
|
||||
id,
|
||||
content: `gave the controls to ${member.id == this.id ? 'you' : member.username}`,
|
||||
content: `gave the controls to ${member.id == this.id ? 'you' : member.displayname}`,
|
||||
type: 'event',
|
||||
created: new Date(),
|
||||
})
|
||||
@ -331,7 +331,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
|
||||
|
||||
this.$accessor.chat.newMessage({
|
||||
id,
|
||||
content: `banned ${member.id == this.id ? 'you' : member.username}`,
|
||||
content: `banned ${member.id == this.id ? 'you' : member.displayname}`,
|
||||
type: 'event',
|
||||
created: new Date(),
|
||||
})
|
||||
@ -349,7 +349,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
|
||||
|
||||
this.$accessor.chat.newMessage({
|
||||
id,
|
||||
content: `kicked ${member.id == this.id ? 'you' : member.username}`,
|
||||
content: `kicked ${member.id == this.id ? 'you' : member.displayname}`,
|
||||
type: 'event',
|
||||
created: new Date(),
|
||||
})
|
||||
@ -369,7 +369,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
|
||||
|
||||
this.$accessor.chat.newMessage({
|
||||
id,
|
||||
content: `muted ${member.id == this.id ? 'you' : member.username}`,
|
||||
content: `muted ${member.id == this.id ? 'you' : member.displayname}`,
|
||||
type: 'event',
|
||||
created: new Date(),
|
||||
})
|
||||
@ -389,7 +389,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
|
||||
|
||||
this.$accessor.chat.newMessage({
|
||||
id,
|
||||
content: `unmuted ${member.username}`,
|
||||
content: `unmuted ${member.displayname}`,
|
||||
type: 'event',
|
||||
created: new Date(),
|
||||
})
|
||||
@ -435,7 +435,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
|
||||
|
||||
this.$accessor.chat.newMessage({
|
||||
id,
|
||||
content: `took the controls from ${member.id == this.id ? 'you' : member.username}`,
|
||||
content: `took the controls from ${member.id == this.id ? 'you' : member.displayname}`,
|
||||
type: 'event',
|
||||
created: new Date(),
|
||||
})
|
||||
@ -460,7 +460,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
|
||||
|
||||
this.$accessor.chat.newMessage({
|
||||
id,
|
||||
content: `released the controls from ${member.id == this.id ? 'you' : member.username}`,
|
||||
content: `released the controls from ${member.id == this.id ? 'you' : member.displayname}`,
|
||||
type: 'event',
|
||||
created: new Date(),
|
||||
})
|
||||
@ -480,7 +480,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
|
||||
|
||||
this.$accessor.chat.newMessage({
|
||||
id,
|
||||
content: `gave the controls to ${member.id == this.id ? 'you' : member.username}`,
|
||||
content: `gave the controls to ${member.id == this.id ? 'you' : member.displayname}`,
|
||||
type: 'event',
|
||||
created: new Date(),
|
||||
})
|
||||
|
||||
@ -70,7 +70,7 @@ export interface SignalAnswerMessage extends WebSocketMessage, SignalAnswerPaylo
|
||||
}
|
||||
export interface SignalAnswerPayload {
|
||||
sdp: string
|
||||
username: string
|
||||
displayname: string
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
export interface Member {
|
||||
id: string
|
||||
username: string
|
||||
displayname: string
|
||||
admin: boolean
|
||||
muted: boolean
|
||||
connected?: boolean
|
||||
|
||||
@ -13,7 +13,7 @@ import * as client from './client'
|
||||
import * as emoji from './emoji'
|
||||
|
||||
export const state = () => ({
|
||||
username: get<string>('username', ''),
|
||||
displayname: get<string>('displayname', ''),
|
||||
password: get<string>('password', ''),
|
||||
active: false,
|
||||
connecting: false,
|
||||
@ -26,8 +26,8 @@ export const mutations = mutationTree(state, {
|
||||
state.active = true
|
||||
},
|
||||
|
||||
setLogin(state, { username, password }: { username: string; password: string }) {
|
||||
state.username = username
|
||||
setLogin(state, { displayname, password }: { displayname: string; password: string }) {
|
||||
state.displayname = displayname
|
||||
state.password = password
|
||||
},
|
||||
|
||||
@ -44,7 +44,7 @@ export const mutations = mutationTree(state, {
|
||||
state.connected = connected
|
||||
state.connecting = false
|
||||
if (connected) {
|
||||
set('username', state.username)
|
||||
set('displayname', state.displayname)
|
||||
set('password', state.password)
|
||||
}
|
||||
},
|
||||
@ -73,14 +73,14 @@ export const actions = actionTree(
|
||||
$client.sendMessage(EVENT.ADMIN.UNLOCK)
|
||||
},
|
||||
|
||||
login({ state }, { username, password }: { username: string; password: string }) {
|
||||
accessor.setLogin({ username, password })
|
||||
$client.login(password, username)
|
||||
login({ state }, { displayname, password }: { displayname: string; password: string }) {
|
||||
accessor.setLogin({ displayname, password })
|
||||
$client.login(password, displayname)
|
||||
},
|
||||
|
||||
logout({ state }) {
|
||||
accessor.setLogin({ username: '', password: '' })
|
||||
set('username', '')
|
||||
accessor.setLogin({ displayname: '', password: '' })
|
||||
set('displayname', '')
|
||||
set('password', '')
|
||||
$client.logout()
|
||||
},
|
||||
|
||||
@ -21,7 +21,7 @@ type SignalProvide struct {
|
||||
|
||||
type SignalAnswer struct {
|
||||
Event string `json:"event"`
|
||||
Username string `json:"username"`
|
||||
DisplayName string `json:"displayname"`
|
||||
SDP string `json:"sdp"`
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ package types
|
||||
|
||||
type Member struct {
|
||||
ID string `json:"id"`
|
||||
Name string `json:"username"`
|
||||
Name string `json:"displayname"`
|
||||
Admin bool `json:"admin"`
|
||||
Muted bool `json:"muted"`
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@ func (h *MessageHandler) signalProvide(id string, session types.Session) error {
|
||||
}
|
||||
|
||||
func (h *MessageHandler) signalAnswer(id string, session types.Session, payload *message.SignalAnswer) error {
|
||||
if err := session.SetName(payload.Username); err != nil {
|
||||
if err := session.SetName(payload.DisplayName); err != nil {
|
||||
return err
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user