zotero-web-library/lib/libraryUi/widgets/CreateGroup.js

Web library from zotero.org

'use strict';

var log = require('libzotero/lib/Log').Logger('zotero-web-library:recentItems');

var React = require('react');

var CreateGroup = React.createClass({
	displayName: 'CreateGroup',

	componentWillMount: function componentWillMount() {},
	getDefaultProps: function getDefaultProps() {},
	getInitialState: function getInitialState() {
		return {
			name: '',
			type: 'PublicOpen',
			checkingName: false,
			nameValid: null
		};
	},
	changeType: function changeType(evt) {
		this.setState({ type: evt.target.value });
		this.changeName();
	},
	changeName: function changeName(evt) {
		var _this = this;

		if (evt) {
			this.setState({ name: evt.target.value, nameValid: null });
		}

		clearTimeout(this.state.timer);
		var timeout = setTimeout(function () {
			var groupType = J('input[name=group_type]:checked').val();
			// update slug preview text
			if (groupType == 'Private') {
				J('#slugpreview').text('Group URL: ' + Zotero.config.baseZoteroWebsiteUrl + '/' + 'groups/<number>');
			} else {
				J('#slugpreview').text('Group URL: ' + Zotero.config.baseZoteroWebsiteUrl + '/' + 'groups/' + Zotero.utils.slugify(J('input#name').val()));
			}

			if (groupType != 'Private') {
				// Poll the server with the input value
				J.getJSON(Zotero.config.baseWebsiteUrl + '/groups/checkname', { 'input': _this.state.name }, function (data) {
					if (data.valid) {
						_this.setState({ nameValid: true });
					} else {
						_this.setState({ nameValid: false });
					}
				});
			}
		}, 300);
		this.setState({ timer: timeout });
	},
	render: function render() {
		var slugPreview = '';
		if (this.state.type == 'Private') {
			slugPreview = 'Group URL: ' + Zotero.config.baseZoteroWebsiteUrl + '/groups/<number>';
		} else {
			var slug = Zotero.utils.slugify(this.state.name);
			slugPreview = 'Group URL: ' + Zotero.config.baseZoteroWebsiteUrl + '/groups/' + slug;
		}
		var slugStyle = {};
		if (this.state.type != 'Private') {
			if (this.state.nameValid === true) {
				slugStyle.color = 'green';
			} else if (this.state.nameValid === false) {
				slugStyle.color = 'red';
			}
		}

		var sessionKey = Zotero.utils.readCookie(Zotero.config.sessionCookieName);
		return React.createElement(
			'div',
			null,
			React.createElement(
				'h1',
				null,
				'Create a New Group'
			),
			React.createElement(
				'form',
				{ enctype: 'application/x-www-form-urlencoded', 'accept-charset': 'utf-8', method: 'post', className: 'zform', action: '' },
				React.createElement(
					'div',
					{ className: 'row' },
					React.createElement(
						'div',
						{ className: 'col-md-6' },
						React.createElement(
							'div',
							{ className: 'form-group' },
							React.createElement(
								'label',
								{ 'for': 'name', className: 'required' },
								'Group Name'
							),
							React.createElement('input', { className: 'form-control', type: 'text', name: 'name', id: 'name', size: '60', value: this.state.name, onChange: this.changeName }),
							React.createElement(
								'label',
								{ id: 'slugpreview', style: slugStyle },
								slugPreview
							)
						)
					)
				),
				React.createElement(
					'div',
					{ className: 'row' },
					React.createElement(
						'div',
						{ className: 'form-group' },
						React.createElement(
							'legend',
							null,
							'Group Type'
						),
						React.createElement(
							'div',
							{ id: 'public-open', className: 'group-select' },
							React.createElement(
								'h2',
								null,
								'Public, Open Membership'
							),
							React.createElement(
								'p',
								null,
								'Anyone can view your group online and join the group instantly.'
							),
							React.createElement(
								'label',
								{ 'for': 'group_type-PublicOpen' },
								React.createElement('input', { type: 'radio', name: 'group_type', id: 'group_type-PublicOpen', onChange: this.changeType, value: 'PublicOpen', checked: this.state.type == 'PublicOpen' }),
								'Choose a Public, Open Membership'
							)
						),
						React.createElement(
							'div',
							{ id: 'public-closed', className: 'group-select' },
							React.createElement(
								'h2',
								null,
								'Public, Closed Membership'
							),
							React.createElement(
								'p',
								null,
								'Anyone can view your group online, but members must apply or be invited.'
							),
							React.createElement(
								'label',
								{ 'for': 'group_type-PublicClosed' },
								React.createElement('input', { type: 'radio', name: 'group_type', id: 'group_type-PublicClosed', onChange: this.changeType, value: 'PublicClosed', checked: this.state.type == 'PublicClosed' }),
								'Choose Public, Closed Membership'
							)
						),
						React.createElement(
							'div',
							{ id: 'private', className: 'group-select' },
							React.createElement(
								'h2',
								null,
								'Private Membership'
							),
							React.createElement(
								'p',
								null,
								'Only members can view your group online and must be invited to join.'
							),
							React.createElement(
								'label',
								{ 'for': 'group_type-Private' },
								React.createElement('input', { type: 'radio', name: 'group_type', id: 'group_type-Private', onChange: this.changeType, value: 'Private', checked: this.state.type == 'Private' }),
								'Choose Private Membership'
							)
						)
					)
				),
				React.createElement(
					'div',
					{ className: 'row' },
					React.createElement(
						'button',
						{ name: 'submit', id: 'submit', type: 'submit', className: 'btn btn-primary' },
						'Create Group'
					)
				),
				React.createElement('input', { type: 'hidden', name: 'session', value: sessionKey })
			)
		);
	}
});

module.exports = CreateGroup;