Added homepage and create community station functionality.

frontend/app/js/components/CustomInput.jsx

@@ -56,6 +56,25 @@ const dictionary = {
 			format: t("general:invalidCodeFormat"),
 		},
 	},
+	stationDisplayName: {
+		inputType: "text",
+		minLength: 2,
+		maxLength: 32,
+		regex: regex.azAZ09_,
+		errors: {
+			//format: t("general:invalidUsernameFormat", { characters: `a-z, A-Z, 0-9${ t("general:and") } _` }),
+			format: "Invalid display name format",
+		},
+	},
+	stationDescription: {
+		inputType: "text",
+		minLength: 2,
+		maxLength: 200,
+		errors: {
+			//format: t("general:invalidUsernameFormat", { characters: `a-z, A-Z, 0-9${ t("general:and") } _` }),
+			format: "Invalid description format",
+		},
+	},
 };
 
 export default class CustomInput extends Component {
@@ -186,7 +205,7 @@ export default class CustomInput extends Component {
 		const info = dictionary[this.props.type];
 		const value = this.state.value;
 		if (!isLength(value, info.minLength, info.maxLength)) errors.push((info.errors.length) ? info.errors.length : t("general:valueMustBeBetween", { min: info.minLength, max: info.maxLength }));
-		if (!info.regex.test(value)) errors.push(info.errors.format);
+		if (info.regex && !info.regex.test(value)) errors.push(info.errors.format);
 		this.setState({
 			errors,
 			valid: errors.length === 0,

frontend/app/js/views/Home/index.jsx

@@ -15,6 +15,7 @@ import config from "config";
 	user: {
 		userId: state.user.get("userId"),
 	},
+	loggedIn: state.user.get("loggedIn"),
 }))
 
 @translate(["homepage"], { wait: true })
@@ -37,6 +38,9 @@ export default class Homepage extends Component {
 				official: [],
 				community: [],
 			},
+			createStation: {
+				private: false,
+			}
 		};
 
 		io.getSocket(socket => {
@@ -121,9 +125,41 @@ export default class Homepage extends Component {
 		return stations;
 	};
 
+	togglePrivate = () => {
+		this.setState({
+			createStation: {
+				private: !this.state.createStation.private,
+			},
+		});
+	};
+
+	createCommunity = () => {
+		this.messages.clearErrorSuccess();
+		if (CustomInput.hasInvalidInput(this.input)) {
+			this.messages.clearAddError(this.props.t("general:someFieldsAreIncorrectError"));
+		} else {
+			io.getSocket(socket => {
+				socket.emit("stations.create", {
+					name: this.input.title.getValue().toLowerCase(),
+					type: "community",
+					displayName: this.input.title.getValue(),
+					description: this.input.description.getValue(),
+				}, res => {
+					if (res.status === "success") {
+						location.href = "/community/" + this.input.title.getValue().toLowerCase();//TODO Remove
+					} else {
+						this.messages.addError(res.message);
+					}
+				});
+			});
+		}
+	};
+
 	render() {
 		const { t } = this.props;
 
+		//TODO Make this not re-render a lot
+
 		return (
 			<main id="homepage">
 				<h1>{ t("homepage:title") }</h1>
@@ -131,6 +167,17 @@ export default class Homepage extends Component {
 				<h2>Official Stations</h2>
 				{ this.listStations("official") }
 				<h2>Community Stations</h2>
+				{ (this.props.loggedIn) ? (
+					<div className="station-card">
+						<div className="station-media">
+							<img style={{width: "64px"}} src="/assets/images/notes-transparent.png"/>
+						</div>
+						<CustomInput type="stationDisplayName" name="title" label="Title" placeholder="Title" onRef={ ref => (this.input.title = ref) } />
+						<CustomInput type="stationDescription" name="description" label="Description" placeholder="Description" onRef={ ref => (this.input.description = ref) } />
+						<span onClick={this.togglePrivate}>Private</span>
+						<button onClick={this.createCommunity}>Add</button>
+					</div>
+				) : null }
 				{ this.listStations("community") }
 			</main>
 		);