2021-02-11 11:43:02 +01:00
|
|
|
import { __ } from 'i18n';
|
2020-12-03 13:40:30 +01:00
|
|
|
import { api } from "@converse/headless/core";
|
2021-04-14 22:56:59 +02:00
|
|
|
import { html } from "lit";
|
2020-09-26 13:13:50 +02:00
|
|
|
|
2022-02-06 16:15:04 +01:00
|
|
|
export default (el) => {
|
2020-09-26 13:13:50 +02:00
|
|
|
const i18n_nickname = __('Nickname');
|
2022-02-06 16:15:04 +01:00
|
|
|
const i18n_join = el.model?.isEntered() ? __('Change nickname') : __('Enter groupchat');
|
2020-09-26 13:13:50 +02:00
|
|
|
const i18n_heading = api.settings.get('muc_show_logs_before_join') ?
|
|
|
|
__('Choose a nickname to enter') :
|
|
|
|
__('Please choose your nickname');
|
|
|
|
|
2022-02-06 16:15:04 +01:00
|
|
|
const validation_message = el.model?.get('nickname_validation_message');
|
2021-03-13 11:37:07 +01:00
|
|
|
|
2020-09-26 13:13:50 +02:00
|
|
|
return html`
|
2021-03-13 11:37:07 +01:00
|
|
|
<div class="chatroom-form-container muc-nickname-form"
|
2022-02-06 16:15:04 +01:00
|
|
|
@submit=${ev => el.submitNickname(ev)}>
|
2020-09-26 13:13:50 +02:00
|
|
|
<form class="converse-form chatroom-form converse-centered-form">
|
|
|
|
<fieldset class="form-group">
|
|
|
|
<label>${i18n_heading}</label>
|
2021-03-13 11:37:07 +01:00
|
|
|
<p class="validation-message">${validation_message}</p>
|
2020-10-23 16:19:16 +02:00
|
|
|
<input type="text"
|
|
|
|
required="required"
|
|
|
|
name="nick"
|
2022-02-06 16:15:04 +01:00
|
|
|
value="${el.model?.get('nick') || ''}"
|
2021-03-13 11:37:07 +01:00
|
|
|
class="form-control ${validation_message ? 'error': ''}"
|
2020-10-23 16:19:16 +02:00
|
|
|
placeholder="${i18n_nickname}"/>
|
2020-09-26 13:13:50 +02:00
|
|
|
</fieldset>
|
|
|
|
<fieldset class="form-group">
|
|
|
|
<input type="submit" class="btn btn-primary" name="join" value="${i18n_join}"/>
|
|
|
|
</fieldset>
|
|
|
|
</form>
|
|
|
|
</div>`;
|
|
|
|
}
|