From 3a2a32ad2e6e2acd21d4ab3481c5ad1c56945385 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Zanghelini?= <an_dz@simutrans-forum>
Date: Sun, 2 Apr 2017 22:17:03 -0300
Subject: [PATCH] noscript support

Add support for environments without scripts
---
 less/noscript.less                        | 34 +++++++++++++++++++++++
 templates/category.tpl                    |  3 +-
 templates/header.tpl                      |  1 +
 templates/login.tpl                       |  4 ++-
 templates/partials/menu.tpl               | 25 ++++++++++++++---
 templates/partials/noscript/warning.tpl   |  2 +-
 templates/partials/topic/quickreply.tpl   | 12 +++++---
 templates/partials/topic/reply-button.tpl |  3 +-
 8 files changed, 72 insertions(+), 12 deletions(-)

diff --git a/less/noscript.less b/less/noscript.less
index 706238c..d1f3d2b 100644
--- a/less/noscript.less
+++ b/less/noscript.less
@@ -80,4 +80,38 @@ noscript {
 			}
 		}
 	}
+}
+.noscript {
+	display: none !important;
+}
+#user-control-list-check:checked + #user-control-list {
+	display: block;
+}
+label.dropdown-toggle {
+	cursor: pointer;
+}
+.dropdown-menu > li > form > button {
+	text-align: left;
+	width: 100%;
+	background: none;
+	border: none;
+	display: block;
+	padding: 3px 20px;
+	clear: both;
+	font-weight: normal;
+	line-height: @line-height-base;
+	color: @dropdown-link-color;
+	white-space: nowrap; // prevent links from randomly breaking onto new lines
+
+	&:hover,
+	&:focus {
+		text-decoration: none;
+		color: @dropdown-link-hover-color;
+		background-color: @dropdown-link-hover-bg;
+	}
+}
+html[data-dir="rtl"] {
+	.dropdown-menu > li > form > button {
+		text-align: right;
+	}
 }
\ No newline at end of file
diff --git a/templates/category.tpl b/templates/category.tpl
index 7056c7d..4b55e9c 100644
--- a/templates/category.tpl
+++ b/templates/category.tpl
@@ -8,7 +8,8 @@
 
 		<div class="clearfix">
 			<!-- IF privileges.topics:create -->
-			<button component="category/post" id="new_topic" class="btn btn-primary">[[category:new_topic_button]]</button>
+			<a href="{config.relative_path}/compose?cid={cid}" component="category/post" id="new_topic_no_script" class="btn btn-primary noscript">[[category:new_topic_button]]</a>
+			<button component="category/post" id="new_topic" class="btn btn-primary yescript">[[category:new_topic_button]]</button>
 			<!-- ELSE -->
 				<!-- IF !loggedIn -->
 				<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
diff --git a/templates/header.tpl b/templates/header.tpl
index 555159a..fd9f385 100644
--- a/templates/header.tpl
+++ b/templates/header.tpl
@@ -5,6 +5,7 @@
 	<!-- BEGIN metaTags -->{function.buildMetaTag}<!-- END metaTags -->
 	<link rel="stylesheet" type="text/css" href="{relative_path}/assets/stylesheet.css?{config.cache-buster}" />
 	<!-- IF bootswatchCSS --><link id="bootswatchCSS" href="{bootswatchCSS}" rel="stylesheet" media="screen"><!-- ENDIF bootswatchCSS -->
+	<noscript><style type="text/css">.noscript{display:block!important}.noscript.btn{display:inline-block!important}.yescript{display:none!important}</style></noscript>
 	<!-- BEGIN linkTags -->{function.buildLinkTag}<!-- END linkTags -->
 
 	<script>
diff --git a/templates/login.tpl b/templates/login.tpl
index 75d56cc..ffc083e 100644
--- a/templates/login.tpl
+++ b/templates/login.tpl
@@ -10,7 +10,7 @@
 				<p>{error}</p>
 			</div>
 
-			<form class="form-horizontal" role="form" method="post" target="login" id="login-form">
+			<form class="form-horizontal" role="form" method="post" id="login-form">
 				<div class="form-group">
 					<label for="username" class="col-lg-2 control-label">{allowLoginWith}</label>
 					<div class="col-lg-10">
@@ -32,6 +32,8 @@
 						</div>
 					</div>
 				</div>
+				<input type="hidden" name="_csrf" value="{config.csrf_token}" />
+				<input type="hidden" name="noscript" id="noscript" value="true" />
 				<div class="form-group">
 					<div class="col-lg-offset-2 col-lg-10">
 						<button class="btn btn-primary btn-lg btn-block" id="login" type="submit">[[global:login]]</button>
diff --git a/templates/partials/menu.tpl b/templates/partials/menu.tpl
index 0be4ccd..d0b1977 100644
--- a/templates/partials/menu.tpl
+++ b/templates/partials/menu.tpl
@@ -26,7 +26,10 @@
 
 				<ul id="logged-in-menu" class="nav navbar-nav navbar-right">
 					<li class="notifications dropdown text-center hidden-xs" component="notifications">
-						<a href="#" title="[[global:header.notifications]]" class="dropdown-toggle" data-toggle="dropdown" id="notif_dropdown">
+						<a href="{relative_path}/notifications" title="[[global:header.notifications]]" class="dropdown-toggle noscript" data-toggle="dropdown" id="notif_dropdown_no_script">
+							<i component="notifications/icon" class="fa fa-fw fa-bell-o" data-content="0"></i>
+						</a>
+						<a href="#" title="[[global:header.notifications]]" class="dropdown-toggle yescript" data-toggle="dropdown" id="notif_dropdown">
 							<i component="notifications/icon" class="fa fa-fw fa-bell-o" data-content="0"></i>
 						</a>
 						<ul class="dropdown-menu" aria-labelledby="notif_dropdown">
@@ -44,7 +47,10 @@
 
 					<!-- IF !config.disableChat -->
 					<li class="chats dropdown">
-						<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="[[global:header.chats]]" id="chat_dropdown" component="chat/dropdown">
+						<a class="dropdown-toggle noscript" data-toggle="dropdown" href="{relative_path}/user/{user.userslug}/chats" title="[[global:header.chats]]" id="chat_dropdown_no_script" component="chat/dropdown">
+							<i component="chat/icon" class="fa fa-comment-o fa-fw"></i> <span class="visible-xs-inline">[[global:header.chats]]</span>
+						</a>
+						<a class="dropdown-toggle yescript" data-toggle="dropdown" href="#" title="[[global:header.chats]]" id="chat_dropdown" component="chat/dropdown">
 							<i component="chat/icon" class="fa fa-comment-o fa-fw"></i> <span class="visible-xs-inline">[[global:header.chats]]</span>
 						</a>
 						<ul class="dropdown-menu" aria-labelledby="chat_dropdown">
@@ -62,11 +68,17 @@
 					<!-- ENDIF !config.disableChat -->
 
 					<li id="user_label" class="dropdown">
-						<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="user_dropdown" title="[[global:header.profile]]">
+						<a class="dropdown-toggle yescript" data-toggle="dropdown" href="#" id="user_dropdown" title="[[global:header.profile]]">
 							<img component="header/userpicture" src="{user.picture}" alt="{user.username}"<!-- IF !user.picture --> style="display: none;"<!-- ENDIF !user.picture --> />
 							<div component="header/usericon" class="user-icon" style="background-color: {user.icon:bgColor};<!-- IF user.picture --> display: none;"<!-- ENDIF user.picture -->">{user.icon:text}</div>
 							<span id="user-header-name" class="visible-xs-inline">{user.username}</span>
 						</a>
+						<label class="dropdown-toggle noscript" data-toggle="dropdown" id="user_dropdown" title="[[global:header.profile]]" for="user-control-list-check">
+							<img component="header/userpicture" src="{user.picture}" alt="{user.username}"<!-- IF !user.picture --> style="display: none;"<!-- ENDIF !user.picture --> />
+							<div component="header/usericon" class="user-icon" style="background-color: {user.icon:bgColor};<!-- IF user.picture --> display: none;"<!-- ENDIF user.picture -->">{user.icon:text}</div>
+							<span id="user-header-name" class="visible-xs-inline">{user.username}</span>
+						</label>
+						<input type="checkbox" class="hidden" id="user-control-list-check">
 						<ul id="user-control-list" component="header/usercontrol" class="dropdown-menu" aria-labelledby="user_dropdown">
 							<li>
 								<a component="header/profilelink" href="{relative_path}/user/{user.userslug}">
@@ -123,7 +135,12 @@
 							<!-- ENDIF showModMenu -->
 							<li role="presentation" class="divider"></li>
 							<li component="user/logout">
-								<a href="#"><i class="fa fa-fw fa-sign-out"></i><span> [[global:logout]]</span></a>
+								<form class="noscript" method="post" action="{relative_path}/logout">
+									<input type="hidden" name="_csrf" value="{config.csrf_token}">
+									<input type="hidden" name="noscript" value="true">
+									<button type="submit"><i class="fa fa-fw fa-sign-out"></i><span> [[global:logout]]</span></button>
+								</form>
+								<a href="#" class="yescript"><i class="fa fa-fw fa-sign-out"></i><span> [[global:logout]]</span></a>
 							</li>
 						</ul>
 					</li>
diff --git a/templates/partials/noscript/warning.tpl b/templates/partials/noscript/warning.tpl
index 64dc5da..94528cb 100644
--- a/templates/partials/noscript/warning.tpl
+++ b/templates/partials/noscript/warning.tpl
@@ -1,7 +1,7 @@
 	<noscript>
 		<div class="alert alert-danger">
 			<p>
-				Your browser does not seem to support JavaScript. As a result, your viewing experience will be diminished, and you have been placed in <strong>read-only mode</strong>.
+				Your browser does not seem to support JavaScript. As a result, your viewing experience will be diminished, and you may not be able to execute some actions.
 			</p>
 			<p>
 				Please download a browser that supports JavaScript, or enable it if it's disabled (i.e. NoScript).
diff --git a/templates/partials/topic/quickreply.tpl b/templates/partials/topic/quickreply.tpl
index 41345f4..4fc785a 100644
--- a/templates/partials/topic/quickreply.tpl
+++ b/templates/partials/topic/quickreply.tpl
@@ -10,9 +10,13 @@
 			<i component="user/status" class="fa fa-circle status {loggedInUser.status}" title="[[global:{loggedInUser.status}]]"></i>
 		</a>
 	</div>
-	<div class="quickreply-message">
-		<textarea component="topic/quickreply/text" class="form-control" rows="5"></textarea>
-	</div>
-	<button component="topic/quickreply/button" class="btn btn-primary pull-right">Post quick reply</button>
+	<form method="post" action="{config.relative_path}/compose">
+		<input type="hidden" name="tid" value="{tid}" />
+		<input type="hidden" name="_csrf" value="{config.csrf_token}" />
+		<div class="quickreply-message">
+			<textarea name="content" component="topic/quickreply/text" class="form-control" rows="5"></textarea>
+		</div>
+		<button type="submit" component="topic/quickreply/button" class="btn btn-primary pull-right">Post quick reply</button>
+	</form>
 </div>
 <!-- ENDIF loggedIn -->
\ No newline at end of file
diff --git a/templates/partials/topic/reply-button.tpl b/templates/partials/topic/reply-button.tpl
index b464a1e..c3ee61d 100644
--- a/templates/partials/topic/reply-button.tpl
+++ b/templates/partials/topic/reply-button.tpl
@@ -1,5 +1,6 @@
 <div component="topic/reply/container" class="btn-group action-bar <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">
-	<button class="btn btn-primary" component="topic/reply">[[topic:reply]]</button>
+	<a href="{config.relative_path}/compose?tid={tid}&title={title}" component="topic/reply" class="btn btn-primary noscript">[[topic:reply]]</a>
+	<button class="btn btn-primary yescript" component="topic/reply">[[topic:reply]]</button>
 	<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
 		<span class="caret"></span>
 	</button>