username -> displayname

client/src/components/chat.vue

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

client/src/components/connect.vue

@@ -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 !== '') {
+      if (this.$accessor.displayname !== '' && this.$accessor.password !== '') {
-        this.$accessor.login({ username: this.$accessor.username, password: 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>

client/src/components/context.vue

@@ -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`" />
+          <img :src="`https://api.adorable.io/avatars/25/${child.data.member.displayname}.png`" />
-          <strong>{{ child.data.member.username }}</strong>
+          <strong>{{ child.data.member.displayname }}</strong>
         </div>
       </li>
       <li class="seperator" />
@@ -163,8 +163,8 @@
 
     kick(member: Member) {
       this.$swal({
-        title: `Kick ${member.username}?`,
+        title: `Kick ${member.displayname}?`,
-        text: `Are you sure you want to kick ${member.username}?`,
+        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}?`,
+        title: `Ban ${member.displayname}?`,
-        text: `Are you sure you want to ban ${member.username}? You will need to restart the server to undo this.`,
+        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}?`,
+        title: `Mute ${member.displayname}?`,
-        text: `Are you sure you want to mute ${member.username}?`,
+        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}?`,
+        title: `Unmute ${member.displayname}?`,
-        text: `Are you sure you want to unmute ${member.username}?`,
+        text: `Are you sure you want to unmute ${member.displayname}?`,
         icon: 'warning',
         showCancelButton: true,
         confirmButtonText: 'Yes',

client/src/components/members.vue

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

client/src/neko/base.ts

@@ -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 === '') {
+    if (displayname === '') {
-      throw new Error('Must add a username') // TODO: Better handling
+      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,
           }),
         )
       })

client/src/neko/index.ts

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

client/src/neko/messages.ts

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

client/src/neko/types.ts

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

client/src/store/index.ts

@@ -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 }) {
+  setLogin(state, { displayname, password }: { displayname: string; password: string }) {
-    state.username = username
+    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 }) {
+    login({ state }, { displayname, password }: { displayname: string; password: string }) {
-      accessor.setLogin({ username, password })
+      accessor.setLogin({ displayname, password })
-      $client.login(password, username)
+      $client.login(password, displayname)
     },
 
     logout({ state }) {
-      accessor.setLogin({ username: '', password: '' })
+      accessor.setLogin({ displayname: '', password: '' })
-      set('username', '')
+      set('displayname', '')
       set('password', '')
       $client.logout()
     },

server/internal/types/message/messages.go

@@ -20,9 +20,9 @@ type SignalProvide struct {
 }
 
 type SignalAnswer struct {
-	Event    string `json:"event"`
+	Event       string `json:"event"`
-	Username string `json:"username"`
+	DisplayName string `json:"displayname"`
-	SDP      string `json:"sdp"`
+	SDP         string `json:"sdp"`
 }
 
 type MembersList struct {

server/internal/types/session.go

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

server/internal/websocket/signal.go

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