username -> displayname

This commit is contained in:
Craig 2020-04-05 01:33:19 +00:00
parent bcb4ea6641
commit bf51a3ff3a
12 changed files with 56 additions and 56 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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',

View File

@ -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>

View File

@ -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,
}),
)
})

View File

@ -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(),
})

View File

@ -70,7 +70,7 @@ export interface SignalAnswerMessage extends WebSocketMessage, SignalAnswerPaylo
}
export interface SignalAnswerPayload {
sdp: string
username: string
displayname: string
}
/*

View File

@ -1,6 +1,6 @@
export interface Member {
id: string
username: string
displayname: string
admin: boolean
muted: boolean
connected?: boolean

View File

@ -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()
},

View File

@ -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"`
}

View File

@ -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"`
}

View File

@ -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
}