@dcl-regenesislabs/web-editor 0.0.0-stage → 0.1.0

package/prefabs/admin-tools/scripts/tabs/announcements/ui.tsx

@@ -0,0 +1,37 @@
+import ReactEcs, { Label, UiEntity } from '@dcl/sdk/react-ecs'
+import type { UiTransformProps } from '@dcl/sdk/react-ecs'
+import { Color4 } from '@dcl/sdk/math'
+
+const DISABLED_BACKGROUND = Color4.create(74 / 255, 74 / 255, 74 / 255, 1)
+const DISABLED_TEXT = Color4.create(160 / 255, 155 / 255, 168 / 255, 1)
+
+export function PrimaryButton(props: {
+  label: string
+  disabled?: boolean
+  onClick: () => void
+  uiTransform?: UiTransformProps
+}): ReactEcs.JSX.Element {
+  const disabled = props.disabled === true
+  return (
+    <UiEntity
+      uiTransform={{
+        height: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 12,
+        padding: { left: 20, right: 20 },
+        ...props.uiTransform
+      }}
+      uiBackground={{ color: disabled ? DISABLED_BACKGROUND : Color4.White() }}
+      onMouseDown={() => {
+        if (!disabled) props.onClick()
+      }}
+    >
+      <Label
+        value={`<b>${props.label}</b>`}
+        fontSize={16}
+        color={disabled ? DISABLED_TEXT : Color4.Black()}
+      />
+    </UiEntity>
+  )
+}

package/prefabs/admin-tools/scripts/tabs/moderation/AddUserInput.tsx

@@ -0,0 +1,184 @@
+import ReactEcs, { Input, Label, UiEntity } from '@dcl/sdk/react-ecs'
+import type { SceneAdmin } from '../../api'
+import { postSceneAdmin, postSceneBan } from './api'
+import type { ModerationIcons } from './icons'
+import { kickUser } from './kick'
+import { showMessage } from './state'
+import { BADGE_GRAY, Button, ErrorLine, RED, SectionTitle, WHITE } from './ui'
+import { isAdminUser, isValidAddress, looksLikeAddress } from './utils'
+
+export enum PermissionType {
+  ADMIN = 'admin',
+  BAN = 'ban'
+}
+
+interface Props {
+  type: PermissionType
+  icons: ModerationIcons
+  admins: SceneAdmin[]
+  disabled: boolean
+  disabledHint: string
+  allowKick: boolean
+  onChanged: () => void
+}
+
+function BanUserDescription(): ReactEcs.JSX.Element {
+  return (
+    <UiEntity
+      uiTransform={{
+        width: '100%',
+        height: 'auto',
+        flexDirection: 'column',
+        margin: { bottom: 8 }
+      }}
+    >
+      <UiEntity
+        uiTransform={{ width: '100%', height: 'auto', margin: { bottom: 4 } }}
+        uiText={{
+          value:
+            "<b>Banned users CAN'T:</b> See your scene, send messages in the Nearby chat, or be seen by other users.",
+          fontSize: 13,
+          color: WHITE,
+          textAlign: 'top-left'
+        }}
+      />
+      <UiEntity
+        uiTransform={{ width: '100%', height: 'auto' }}
+        uiText={{
+          value:
+            '<b>Banned users CAN still:</b> See other users and see the messages in the Nearby chat.',
+          fontSize: 13,
+          color: WHITE,
+          textAlign: 'top-left'
+        }}
+      />
+    </UiEntity>
+  )
+}
+
+export function AddUserInput(props: Props): ReactEcs.JSX.Element {
+  const [value, setValue] = ReactEcs.useState('')
+  const [error, setError] = ReactEcs.useState('')
+  const [loading, setLoading] = ReactEcs.useState(false)
+
+  const isAdminForm = props.type === PermissionType.ADMIN
+
+  const validate = (raw: string): string | null => {
+    const submitValue = raw.trim()
+    if (submitValue.length <= 2) {
+      setError('Provide a valid address or NAME')
+      return null
+    }
+    if (looksLikeAddress(submitValue) && !isValidAddress(submitValue)) {
+      setError('Provide a valid address format')
+      return null
+    }
+    return submitValue
+  }
+
+  const submit = async (raw: string): Promise<void> => {
+    if (loading || props.disabled) return
+    const submitValue = validate(raw)
+    if (submitValue === null) return
+
+    const byAddress = looksLikeAddress(submitValue)
+
+    if (!isAdminForm && isAdminUser(props.admins, submitValue)) {
+      setError(
+        'Admin users cannot be banned. Please remove this user from the Admin List and try again.'
+      )
+      return
+    }
+
+    setLoading(true)
+    const [failure] = isAdminForm
+      ? await postSceneAdmin(byAddress ? { admin: submitValue } : { name: submitValue })
+      : await postSceneBan(
+          byAddress ? { banned_address: submitValue } : { banned_name: submitValue }
+        )
+    setLoading(false)
+
+    if (failure !== null) {
+      setError('Please try again with a valid NAME or wallet address.')
+      return
+    }
+
+    setError('')
+    setValue('')
+    if (!isAdminForm) kickUser(submitValue, byAddress)
+    showMessage(isAdminForm ? `${submitValue} is now an admin` : `${submitValue} has been banned`)
+    props.onChanged()
+  }
+
+  const kick = (): void => {
+    if (loading || props.disabled) return
+    const submitValue = validate(value)
+    if (submitValue === null) return
+    setError('')
+    setValue('')
+    kickUser(submitValue, looksLikeAddress(submitValue))
+    showMessage(`Kick sent to ${submitValue}`)
+  }
+
+  return (
+    <UiEntity uiTransform={{ width: '100%', height: 'auto', flexDirection: 'column' }}>
+      <SectionTitle text={isAdminForm ? 'Add an Admin' : 'Ban User from Scene'} />
+      {isAdminForm ? null : <BanUserDescription />}
+      <UiEntity
+        uiTransform={{ width: '100%', height: 44, flexDirection: 'row', alignItems: 'center' }}
+      >
+        <Input
+          value={value}
+          placeholder="Enter a NAME or wallet address"
+          fontSize={14}
+          disabled={props.disabled}
+          onChange={(next) => {
+            setError('')
+            setValue(next)
+          }}
+          onSubmit={(next) => {
+            void submit(next)
+          }}
+          uiBackground={{ color: WHITE }}
+          uiTransform={{
+            flexGrow: 1,
+            height: 44,
+            borderWidth: 3,
+            borderRadius: 8,
+            borderColor: error === '' ? WHITE : RED
+          }}
+        />
+        {props.allowKick ? (
+          <Button
+            label="Kick"
+            variant="secondary"
+            disabled={props.disabled || loading}
+            fontSize={15}
+            onClick={kick}
+            uiTransform={{ width: 74, height: 44, margin: { left: 8 } }}
+          />
+        ) : null}
+        <Button
+          label={loading ? '...' : isAdminForm ? 'Add' : 'Ban'}
+          variant={isAdminForm ? 'primary' : 'danger'}
+          disabled={props.disabled || loading}
+          fontSize={16}
+          onClick={() => {
+            void submit(value)
+          }}
+          uiTransform={{ width: 84, height: 44, margin: { left: 8 } }}
+        />
+      </UiEntity>
+      {error === '' ? null : <ErrorLine icon={props.icons.error} text={error} />}
+      {props.disabled && props.disabledHint !== '' ? (
+        <Label
+          value={props.disabledHint}
+          fontSize={13}
+          color={BADGE_GRAY}
+          textAlign="middle-left"
+          uiTransform={{ width: '100%', height: 'auto', margin: { top: 6 } }}
+        />
+      ) : null}
+    </UiEntity>
+  )
+}

package/prefabs/admin-tools/scripts/tabs/moderation/RemoveAdminConfirmation.tsx

@@ -0,0 +1,93 @@
+import ReactEcs, { Label, UiEntity } from '@dcl/sdk/react-ecs'
+import type { SceneAdmin } from '../../api'
+import { deleteSceneAdmin } from './api'
+import type { ModerationIcons } from './icons'
+import { moderationView, ModerationView, openView, showMessage } from './state'
+import { BADGE_GRAY, Button, ErrorLine, WHITE } from './ui'
+import { displayName } from './utils'
+
+interface Props {
+  admin: SceneAdmin
+  icons: ModerationIcons
+  onChanged: () => void
+}
+
+export function RemoveAdminConfirmation(props: Props): ReactEcs.JSX.Element {
+  const label = displayName(props.admin)
+
+  const confirm = async (): Promise<void> => {
+    if (moderationView.removing) return
+    moderationView.removing = true
+    const [failure] = await deleteSceneAdmin(props.admin.address)
+    moderationView.removing = false
+    if (failure !== null) {
+      moderationView.removeError = failure
+      return
+    }
+    showMessage(`${label} is no longer an admin`)
+    openView(ModerationView.ADMIN_LIST)
+    props.onChanged()
+  }
+
+  return (
+    <UiEntity
+      uiTransform={{
+        width: '100%',
+        height: 'auto',
+        flexDirection: 'column',
+        alignItems: 'center'
+      }}
+    >
+      <UiEntity
+        uiTransform={{ width: '100%', height: 'auto' }}
+        uiText={{
+          value: `Are you sure you want to remove <b><color=#FF2D55>${label}</color></b> from the Admin list?`,
+          fontSize: 16,
+          color: WHITE,
+          textAlign: 'top-left'
+        }}
+      />
+      <Label
+        value="If you proceed, they will lose access to the Admin Tools for this scene."
+        fontSize={13}
+        color={BADGE_GRAY}
+        textAlign="middle-left"
+        uiTransform={{ width: '100%', height: 'auto', margin: { top: 10, bottom: 16 } }}
+      />
+      <UiEntity
+        uiTransform={{
+          width: '100%',
+          height: 42,
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'center'
+        }}
+      >
+        <Button
+          label="Cancel"
+          variant="secondary"
+          disabled={moderationView.removing}
+          onClick={() => openView(ModerationView.ADMIN_LIST)}
+          uiTransform={{ width: 120, height: 40, margin: { right: 12 } }}
+        />
+        <Button
+          label={moderationView.removing ? 'Removing...' : 'Remove'}
+          variant="danger"
+          color={WHITE}
+          disabled={moderationView.removing}
+          onClick={() => {
+            void confirm()
+          }}
+          uiTransform={{ width: 160, height: 40 }}
+        />
+      </UiEntity>
+      {moderationView.removeError === '' ? null : (
+        <ErrorLine
+          icon={props.icons.error}
+          text={moderationView.removeError}
+          uiTransform={{ margin: { top: 14 } }}
+        />
+      )}
+    </UiEntity>
+  )
+}

package/prefabs/admin-tools/scripts/tabs/moderation/UsersList.tsx

@@ -0,0 +1,228 @@
+import ReactEcs, { Label, UiEntity } from '@dcl/sdk/react-ecs'
+import type { Key } from '@dcl/sdk/react-ecs'
+import type { SceneAdmin, SceneBanUser } from '../../api'
+import { deleteSceneBan } from './api'
+import type { ModerationIcons } from './icons'
+import {
+  clampPage,
+  moderationView,
+  ModerationView,
+  openView,
+  pageCount,
+  showMessage,
+  USERS_PER_PAGE
+} from './state'
+import {
+  ADDRESS_GRAY,
+  BADGE_GRAY,
+  BLACK,
+  Button,
+  DANGER,
+  Divider,
+  ListHeader,
+  WHITE
+} from './ui'
+import { addressOf, displayName, userName } from './utils'
+
+export enum UserListType {
+  ADMIN = 'admin',
+  BAN = 'ban'
+}
+
+interface Props {
+  type: UserListType
+  users: Array<SceneAdmin | SceneBanUser>
+  icons: ModerationIcons
+  canManage: boolean
+  onChanged: () => void
+}
+
+function counterText(type: UserListType, count: number): string {
+  if (type === UserListType.ADMIN) return `(${count} ${count === 1 ? 'admin' : 'admins'})`
+  return `(${count} ${count === 1 ? 'user' : 'users'})`
+}
+
+function canRemove(user: SceneAdmin | SceneBanUser): boolean {
+  return 'canBeRemoved' in user ? user.canBeRemoved : true
+}
+
+function UserRow(props: {
+  key?: Key
+  user: SceneAdmin | SceneBanUser
+  type: UserListType
+  icons: ModerationIcons
+  canManage: boolean
+  onAction: (user: SceneAdmin | SceneBanUser) => void
+}): ReactEcs.JSX.Element {
+  const name = userName(props.user)
+  const address = addressOf(props.user)
+  const isOwner = props.type === UserListType.ADMIN && !canRemove(props.user)
+  const showAction = props.canManage && (props.type === UserListType.BAN || canRemove(props.user))
+  return (
+    <UiEntity uiTransform={{ width: '100%', height: 'auto', flexDirection: 'column' }}>
+      <UiEntity
+        uiTransform={{
+          width: '100%',
+          height: 46,
+          flexDirection: 'row',
+          alignItems: 'center',
+          padding: { left: 4, right: 4 }
+        }}
+      >
+        <UiEntity
+          uiTransform={{ width: 24, height: 24, flexShrink: 0, margin: { right: 8 } }}
+          uiBackground={{
+            textureMode: 'stretch',
+            texture: { src: props.icons.person },
+            color: WHITE
+          }}
+        />
+        <UiEntity
+          uiTransform={{ flexGrow: 1, height: '100%', flexDirection: 'column', justifyContent: 'center' }}
+        >
+          {name === '' ? null : (
+            <UiEntity uiTransform={{ height: 18, flexDirection: 'row', alignItems: 'center' }}>
+              <Label value={`<b>${name}</b>`} fontSize={14} color={WHITE} />
+              {name.includes('#') ? null : (
+                <UiEntity
+                  uiTransform={{ width: 13, height: 13, flexShrink: 0, margin: { left: 4 } }}
+                  uiBackground={{
+                    textureMode: 'stretch',
+                    texture: { src: props.icons.verified },
+                    color: WHITE
+                  }}
+                />
+              )}
+              {isOwner ? (
+                <UiEntity
+                  uiTransform={{
+                    height: 18,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: 4,
+                    margin: { left: 8 },
+                    padding: { left: 5, right: 5 }
+                  }}
+                  uiBackground={{ color: BADGE_GRAY }}
+                >
+                  <Label value="<b>Owner</b>" fontSize={11} color={BLACK} />
+                </UiEntity>
+              ) : null}
+            </UiEntity>
+          )}
+          <Label
+            value={address}
+            fontSize={name === '' ? 13 : 11}
+            color={name === '' ? WHITE : ADDRESS_GRAY}
+            textAlign="middle-left"
+            uiTransform={{ height: 16 }}
+          />
+        </UiEntity>
+        {showAction ? (
+          <Button
+            label={props.type === UserListType.ADMIN ? 'Remove' : 'Unban'}
+            variant="text"
+            color={DANGER}
+            fontSize={14}
+            onClick={() => props.onAction(props.user)}
+            uiTransform={{ width: 78, height: 32, flexShrink: 0 }}
+          />
+        ) : null}
+      </UiEntity>
+      <Divider uiTransform={{ margin: { top: 0, bottom: 0 } }} />
+    </UiEntity>
+  )
+}
+
+export function UsersList(props: Props): ReactEcs.JSX.Element {
+  const page = clampPage(props.users.length)
+  const pages = pageCount(props.users.length)
+  const start = (page - 1) * USERS_PER_PAGE
+  const visible = props.users.slice(start, start + USERS_PER_PAGE)
+  const isAdminList = props.type === UserListType.ADMIN
+
+  const onAction = (user: SceneAdmin | SceneBanUser): void => {
+    if (isAdminList) {
+      moderationView.adminToRemove = 'address' in user ? user : null
+      moderationView.view = ModerationView.CONFIRM_REMOVE
+      return
+    }
+    const address = addressOf(user)
+    const label = displayName(user)
+    void deleteSceneBan(address).then(([failure]) => {
+      showMessage(
+        failure === null
+          ? `${label} has been unbanned from your scene`
+          : 'We were unable to unban this user'
+      )
+      if (failure === null) props.onChanged()
+    })
+  }
+
+  return (
+    <UiEntity uiTransform={{ width: '100%', height: 'auto', flexDirection: 'column' }}>
+      <ListHeader
+        icon={isAdminList ? props.icons.verified : props.icons.ban}
+        title={isAdminList ? 'ADMIN LIST' : 'SCENE BAN LIST'}
+        counter={counterText(props.type, props.users.length)}
+        closeIcon={props.icons.close}
+        onClose={() => openView(ModerationView.MAIN)}
+      />
+      {props.users.length === 0 ? (
+        <Label
+          value={isAdminList ? 'No admins yet.' : 'Nobody is banned from this scene.'}
+          fontSize={14}
+          color={BADGE_GRAY}
+          textAlign="middle-left"
+          uiTransform={{ width: '100%', height: 40 }}
+        />
+      ) : null}
+      {visible.map((user) => (
+        <UserRow
+          key={addressOf(user)}
+          user={user}
+          type={props.type}
+          icons={props.icons}
+          canManage={props.canManage}
+          onAction={onAction}
+        />
+      ))}
+      {props.users.length > USERS_PER_PAGE ? (
+        <UiEntity
+          uiTransform={{
+            width: '100%',
+            height: 44,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            margin: { top: 10 }
+          }}
+        >
+          <Button
+            label="Prev"
+            variant="secondary"
+            icon={props.icons.chevronBack}
+            disabled={page <= 1}
+            fontSize={14}
+            onClick={() => {
+              moderationView.page = page - 1
+            }}
+            uiTransform={{ width: 104, height: 36 }}
+          />
+          <Label value={`${page} / ${pages}`} fontSize={14} color={WHITE} />
+          <Button
+            label="Next"
+            variant="secondary"
+            iconRight={props.icons.chevronForward}
+            disabled={page >= pages}
+            fontSize={14}
+            onClick={() => {
+              moderationView.page = page + 1
+            }}
+            uiTransform={{ width: 104, height: 36 }}
+          />
+        </UiEntity>
+      ) : null}
+    </UiEntity>
+  )
+}

package/prefabs/admin-tools/scripts/tabs/moderation/api.ts

@@ -0,0 +1,35 @@
+// The comms-gatekeeper calls this tab needs on top of scripts/api.ts. The host and
+// the signedFetch wrapper come from there; only the request shapes the shared module
+// does not expose (admin-by-NAME, the /scene-bans writes) are declared here.
+import { ENDPOINTS, request, type Result } from '../../api'
+
+export type AdminRef = { admin: string } | { name: string }
+export type BanRef = { banned_address: string } | { banned_name: string }
+
+export async function postSceneAdmin(ref: AdminRef): Promise<Result<unknown>> {
+  return request({
+    url: ENDPOINTS.sceneAdmin(),
+    init: { method: 'POST', headers: {}, body: JSON.stringify(ref) }
+  })
+}
+
+export async function deleteSceneAdmin(address: string): Promise<Result<unknown>> {
+  return request({
+    url: ENDPOINTS.sceneAdmin(),
+    init: { method: 'DELETE', headers: {}, body: JSON.stringify({ admin: address }) }
+  })
+}
+
+export async function postSceneBan(ref: BanRef): Promise<Result<unknown>> {
+  return request({
+    url: ENDPOINTS.sceneBans(),
+    init: { method: 'POST', headers: {}, body: JSON.stringify(ref) }
+  })
+}
+
+export async function deleteSceneBan(address: string): Promise<Result<unknown>> {
+  return request({
+    url: ENDPOINTS.sceneBans(),
+    init: { method: 'DELETE', headers: {}, body: JSON.stringify({ banned_address: address }) }
+  })
+}

package/prefabs/admin-tools/scripts/tabs/moderation/icons.ts

@@ -0,0 +1,23 @@
+import { iconPath } from '../../icons'
+
+export interface ModerationIcons {
+  verified: string
+  person: string
+  ban: string
+  close: string
+  chevronBack: string
+  chevronForward: string
+  error: string
+}
+
+export function moderationIcons(base: string): ModerationIcons {
+  return {
+    verified: iconPath(base, 'moderation/admin-panel-verified-user.png'),
+    person: iconPath(base, 'moderation/person-outline.png'),
+    ban: iconPath(base, 'moderation/ban.png'),
+    close: iconPath(base, 'moderation/close.png'),
+    chevronBack: iconPath(base, 'moderation/chevron-back.png'),
+    chevronForward: iconPath(base, 'moderation/chevron-forward.png'),
+    error: iconPath(base, 'moderation/error.png')
+  }
+}

package/prefabs/admin-tools/scripts/tabs/moderation/kick.ts

@@ -0,0 +1,95 @@
+// Kick: `moderationControl.kickCoordinates` is a scene-relative spot the creator
+// authors in the inspector, and a scene can only move ITS OWN player. So a kick is a
+// comms command — the targeted client is the one that calls movePlayerTo on itself.
+//
+// The listener is registered at module load (admin.tsx imports the tab statically),
+// not when the tab mounts: the player being kicked is by definition not the admin
+// looking at the panel, so nothing of the panel UI is mounted on their client.
+//
+// Trust: the receiver re-reads /scene-admin and checks the sender against it rather
+// than the panel's cached list, which only admins ever populate. Sending goes
+// through communicationsController.send() for the same reason as message-bus.ts —
+// MessageBus.emit()'s internal flush queue drops follow-up messages.
+import { engine } from '@dcl/sdk/ecs'
+import { MessageBus } from '@dcl/sdk/message-bus'
+import { getPlayer } from '@dcl/sdk/players'
+import { send as commsSend } from '~system/CommunicationsController'
+import { movePlayerTo } from '~system/RestrictedActions'
+import { getSceneAdmins, isPreview, toSceneAdmins } from '../../api'
+import { AdminTools } from '../../components'
+
+const KICK = 'admin:kick'
+
+interface KickTarget {
+  address: string
+  name: string
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+function readTarget(payload: unknown): KickTarget | null {
+  if (!isRecord(payload)) return null
+  const address = typeof payload.address === 'string' ? payload.address.toLowerCase() : ''
+  const name = typeof payload.name === 'string' ? payload.name.toLowerCase() : ''
+  if (address === '' && name === '') return null
+  return { address, name }
+}
+
+function isLocalPlayer(target: KickTarget): boolean {
+  const player = getPlayer()
+  if (player === null) return false
+  if (target.address !== '' && player.userId.toLowerCase() === target.address) return true
+  return target.name !== '' && player.name.toLowerCase() === target.name
+}
+
+function kickCoordinates(): { x: number; y: number; z: number } | null {
+  for (const [, config] of engine.getEntitiesWith(AdminTools)) {
+    if (!config.moderationControl.isEnabled) return null
+    const { x, y, z } = config.moderationControl.kickCoordinates
+    return { x, y, z }
+  }
+  return null
+}
+
+async function senderIsAdmin(sender: string): Promise<boolean> {
+  if (isPreview()) return true
+  if (sender === 'self') return false
+  const [error, response] = await getSceneAdmins()
+  if (error !== null) return false
+  return toSceneAdmins(response).some((admin) => admin.address === sender.toLowerCase())
+}
+
+async function handleKick(payload: unknown, sender: string): Promise<void> {
+  const target = readTarget(payload)
+  if (target === null || !isLocalPlayer(target)) return
+  const position = kickCoordinates()
+  if (position === null) return
+  if (!(await senderIsAdmin(sender))) return
+  try {
+    await movePlayerTo({ newRelativePosition: position })
+  } catch (error) {
+    console.log('admin-tools: kick could not move the player', error)
+  }
+}
+
+// Constructed on first listen, never at module load: MessageBus subscribes to
+// the legacy comms event, which the Multiplayer Server does not implement — and
+// this module loads on the server too, where the constructor would throw
+// "not implemented" and take the rest of the scene's construction with it.
+let receiver: MessageBus | null = null
+
+/** Client only. Arms the kick listener; a second call is a no-op. */
+export function listenForKicks(): void {
+  if (receiver !== null) return
+  receiver = new MessageBus()
+  receiver.on(KICK, (payload: unknown, sender: string) => {
+    void handleKick(payload, sender)
+  })
+}
+
+export function kickUser(value: string, byAddress: boolean): void {
+  const payload = byAddress ? { address: value } : { name: value }
+  commsSend({ message: JSON.stringify({ message: KICK, payload }) }).catch(() => {})
+}