Browse Source

Merge PR #934

Add a frontend donate amount validation
master
Max Mehl 1 month ago
parent
commit
1b894fc696
Signed by: max.mehl <max.mehl@fsfe.org> GPG Key ID: 2704E4AB371E2E92
6 changed files with 219 additions and 152 deletions
  1. 11
    8
      cgi-bin/promotion.php
  2. 63
    142
      contribute/spreadtheword.en.xhtml
  3. 2
    0
      look/fsfe.less
  4. 2
    2
      look/fsfe.min.css
  5. 107
    0
      look/pages/spreadtheword.less
  6. 34
    0
      scripts/spreadtheword.js

+ 11
- 8
cgi-bin/promotion.php View File

@@ -79,11 +79,11 @@ function send_mail ( $to, $from, $subject, $msg, $bcc = NULL, $att = NULL, $att_
79 79
   if ( $att ) {
80 80
     $separator = md5( time());
81 81
     $att_f = chunk_split( base64_encode( $att ));
82
-    
83
-    $headers .= "MIME-Version: 1.0\n"; 
84
-    $headers .= "Content-Type: multipart/mixed; boundary=\"".$separator."\"\n"; 
82
+
83
+    $headers .= "MIME-Version: 1.0\n";
84
+    $headers .= "Content-Type: multipart/mixed; boundary=\"".$separator."\"\n";
85 85
     $headers .= "Content-Transfer-Encoding: 7bit";
86
-     
86
+
87 87
     // message
88 88
     $message = "This is a MIME encoded message.\n\n";
89 89
 
@@ -92,10 +92,10 @@ function send_mail ( $to, $from, $subject, $msg, $bcc = NULL, $att = NULL, $att_
92 92
     $message .= "Content-Type: text/plain; charset=\"UTF-8\"\n";
93 93
     $message .= "Content-Transfer-Encoding: 8bit\n\n";
94 94
     $message .= $msg."\n";
95
-     
95
+
96 96
     // attachment
97 97
     $message .= "--".$separator."\n";
98
-    $message .= "Content-Type: $att_type; name=\"$att_name\"\n"; 
98
+    $message .= "Content-Type: $att_type; name=\"$att_name\"\n";
99 99
     $message .= "Content-Transfer-Encoding: base64\n";
100 100
     $message .= "Content-Disposition: attachment\n\n";
101 101
     $message .= $att_f."\n";
@@ -107,7 +107,7 @@ function send_mail ( $to, $from, $subject, $msg, $bcc = NULL, $att = NULL, $att_
107 107
     $headers .= "Content-Transfer-Encoding: 8bit";
108 108
     $message = $msg;
109 109
   }
110
-  
110
+
111 111
   return mail( $to, $subject, $message, $headers );
112 112
 }
113 113
 
@@ -228,7 +228,10 @@ if ($_POST['subcd'] == "y") {
228 228
 
229 229
 $test = send_mail ("contact@fsfe.org", $_POST['firstname'] . " " . $_POST['lastname'] . " <" . $_POST['mail'] . ">", $subject, $msg, NULL, file_get_contents($outfile), "application/vnd.oasis.opendocument.text", "letter.odt");
230 230
 
231
-if (isset($_POST['donate']) && ($_POST['donate'] > 0)) {
231
+/**
232
+ * Only process donations starting from 10 euro.
233
+ */
234
+if (isset($_POST['donate']) && ((int) $_POST['donate']) >= 5) {
232 235
   relay_donation($_POST['donationID']);
233 236
 } else {
234 237
   header("Location: http://fsfe.org/contribute/spreadtheword-orderthanks.$lang.html");

+ 63
- 142
contribute/spreadtheword.en.xhtml View File

@@ -3,126 +3,22 @@
3 3
 <html>
4 4
 	<head>
5 5
 		<title>Spread the word</title>
6
-		<meta content="FSFE's Promotion Material" name="description" />
7
-		<meta content="FSFE Graphics Buttons Logo Promotion Sticker Poster Leaflets Flyer Campaigns Free Your Android I cannot read your documents Fellowship Plussy Gnu" name="keywords" />
8
-		
9
-		<style type="text/css">
10
-		    div.two-column {
11
-		      float: left;
12
-		      width: 40%;
13
-		    }
14
-		    
15
-		    h1, h2, h3 {
16
-		      clear: both;
17
-		    }
18
-        
19
-        .noclear {
20
-          clear: none;
21
-        }
22
-		    
23
-		    div#toc {
24
-		      float: right;
25
-		      clear: right;
26
-		      border: solid 1px;
27
-		      margin: .5em;
28
-		      background: rgb(240,240,240);
29
-		      width: 40%;
30
-		      padding: 1em 1.5em 1.5em 1.5em;
31
-		      margin: 1.5em;
32
-		    }
33
-        
34
-        div#toc p {
35
-          text-indent: 0.5em;
36
-          margin-top: 1.5em;
37
-        }
38
-        
39
-        div#toc p.head {
40
-          font-size: 1.15em;
41
-          text-align: center;
42
-          margin-top: 0;
43
-          text-indent: 0;
44
-        }
45
-        
46
-        form#orderpromo {
47
-          clear: both;
48
-          margin: 2em 0 3em 0;
49
-          width: 70%;
50
-        }
51
-        
52
-        form#orderpromo div {
53
-          margin-bottom: 0.7em;
54
-        }
55
-        
56
-        form#orderpromo label {
57
-          font-weight: normal;
58
-        }
59
-        
60
-        form#orderpromo div > label,
61
-        form#orderpromo div > input,
62
-        form#orderpromo div > textarea {
63
-          margin-left: 20px;
64
-        }
65
-        
66
-        div.langselector ul {
67
-          list-style: none;
68
-        }
69
-        
70
-        form#orderpromo input[type="checkbox"],
71
-        form#orderpromo input[type="radio"] {
72
-          margin-right: 0.3em;
73
-        }
74
-        
75
-        div.langselector li {
76
-          display: inline-block;
77
-          width: 9em;
78
-        }
79
-        
80
-        form#orderpromo .reveal {
81
-          opacity: 0;
82
-          max-height: 0;
83
-          overflow: hidden;
84
-          transform: scale(1);
85
-          transition: 0.5s;
86
-        }
87
-        
88
-        form#orderpromo input[type="radio"]:checked ~ .reveal {
89
-          opacity: 1;
90
-          max-height: 300px; /* little bit of a magic number :( */
91
-          overflow: visible;
92
-        }
93
-        
94
-        form#orderpromo fieldset {
95
-          border: 1px groove #aaa !important;
96
-          padding: 1em 1.4em 1.4em 1.4em !important;
97
-          margin: 0 0 1.5em 0 !important;
98
-          -webkit-box-shadow:  0px 0px 0px 0px #000;
99
-                  box-shadow:  0px 0px 0px 0px #000;
100
-        }
101
-
102
-        form#orderpromo fieldset legend {
103
-          font-size: 1.2em !important;
104
-          font-weight: bold !important;
105
-          text-align: left !important;
106
-          width:auto;
107
-          padding:0 10px;
108
-          border-bottom:none;
109
-          margin-bottom: 0;
110
-        }
111
-		    
112
-		  </style>
113
-    
6
+		<meta
7
+        name="description"
8
+        content="FSFE's Promotion Material"/>
9
+		<meta
10
+        name="keywords"
11
+        content="FSFE Graphics Buttons Logo Promotion Sticker Poster Leaflets Flyer Campaigns Free Your Android I cannot read your documents Fellowship Plussy Gnu"/>
114 12
 	</head>
115 13
 
116
-	<body>
14
+	<body class="spreadtheword">
117 15
 		<p id="category"><a href="/contribute/">Contribute</a></p>
118
-		
16
+
119 17
 		<h1 id="spread-the-word">Spread the word!</h1>
120
-		
121
-		
122
-		
18
+
123 19
 		<div id="toc">
124 20
 			<p class="head"><strong><a href="#how-to-order">Order now</a></strong></p>
125
-		  
21
+
126 22
 		  <p><strong>Available promotion material</strong></p>
127 23
 		  <ul>
128 24
 		    <li><a href="#fsfe-and-community">FSFE and our community</a></li>
@@ -134,28 +30,33 @@
134 30
 		    <li><a href="#dfd">"Document Freedom Day"- campaign</a></li>
135 31
 
136 32
 		  </ul>
137
-		  <p><strong>Behind the scenes</strong></p>  
33
+		  <p><strong>Behind the scenes</strong></p>
138 34
 		  <ul>
139 35
         <li><a href="#feedback">Any Feedback?</a></li>
140 36
         <li><a href="#archives">Our Archive</a></li>
141 37
         <li><a href="#upcoming">Upcoming promotion and campaigns</a></li>
142 38
 		  </ul>
143 39
 		</div>
144
-		
40
+
145 41
 		<h2 id="promo-material" class="noclear">FSFE Promotion Material</h2>
146
-		
42
+
147 43
 		<p>
148 44
 			Are you going to a Free Software meeting or are you even organising one? Maybe you like to promote Free Software and the work of the FSFE around your friends and colleagues or at some public event? There are various reasons why and when you might like to receive promotion material for Free Software and the FSFE. Whatever it might be, we will be happy to send you our printed promotion material for <strong>no cost</strong>.<br /> On this page, you find an overview about our material and details about each product.</p>
149 45
 
150 46
 
151 47
 		<h2 id="how-to-order" class="noclear">How to order</h2>
152
-		
48
+
153 49
 			<p>
154 50
 			To order promotion material please use the following order form. You can order our default package or individual quantities and tell us explicitly what kind of promotion material you need or prefer. Feel free to decide for yourself. However, please keep in mind, that for postal reasons, in general we just send packages up to 1kg. If you need more, please ask in advance.
155 51
 			</p>
156
-			
157
-      
158
-			<form class="highlight labeledform" id="orderpromo" method="post" action="/cgi-bin/promotion.php" accept-charset="utf-8">
52
+
53
+
54
+			<form
55
+          class="highlight labeledform form-inline"
56
+          id="orderpromo"
57
+          method="post"
58
+          action="/cgi-bin/promotion.php"
59
+          accept-charset="utf-8">
159 60
         <add-language />
160 61
         <h3>Order promotional material</h3>
161 62
         <p>Fields marked with * are mandatory.</p>
@@ -241,9 +142,29 @@
241 142
             <span class="formlabel">Receive the latest Free Software news:</span>
242 143
             <label for="subcd"><input name="subcd" id="subcd" value="y" type="checkbox" />I want to receive occasional information about the FSFE's activities</label>
243 144
           </div>
244
-          <div>
145
+          <div
146
+              id="donate-group"
147
+              class="form-group">
245 148
             <span class="formlabel">Support our work with a voluntary donation*:</span>
246
-            <input type="number" name="donate" value="" min="0" step="5" placeholder="0 or ≥ 10 €" required="required" />€ 
149
+            <div class="input-group">
150
+              <input
151
+                  id="donate"
152
+                  name="donate"
153
+                  type="number"
154
+                  class="form-control "
155
+                  value=""
156
+                  placeholder="0 or ≥ 10 €"
157
+                  min="0"
158
+                  required="required"/>
159
+              <div class="input-group-addon">€</div>
160
+            </div>
161
+            <div
162
+                id="donate-error"
163
+                class="help-block"
164
+                style="display: none;">
165
+              If you want to make a donation please enter at least 10 €.<br />
166
+              If you don't want to donate please enter 0 €.
167
+            </div>
247 168
           </div>
248 169
         </fieldset>
249 170
         <div>
@@ -251,48 +172,48 @@
251 172
           <input type="submit" name="dothis" value="Order now!"/>
252 173
         </div>
253 174
       </form>
254
-                
175
+
255 176
 
256 177
 		<h1 id="available-promotion-material" style="margin-top:3em;">Available promotion material</h1>
257 178
 
258 179
 <!-- START ITEMIZE TESTING -->
259 180
 
260 181
 		<h2 id="fsfe-and-community" class="left break">FSFE and our community</h2>
261
-		
182
+
262 183
 		<dynamic-content type="fsfe"/>
263
-		
184
+
264 185
 		<h2 id="freedom" class="left break">Free Software and User Freedom</h2>
265
-		
186
+
266 187
 		<dynamic-content type="freedom"/>
267 188
         <dynamic-content type="hackingforfreedom"/>
268
-        
189
+
269 190
         <h2 id="pmpc" class="left break">Public Money, Public Code</h2>
270 191
         <dynamic-content type="pmpc"/>
271
-		
192
+
272 193
 		<h2 id="f-droid" class="left break">Free Your Android</h2>
273
-		
194
+
274 195
 		<dynamic-content type="f-droid"/>
275
-		
196
+
276 197
 		<h2 id="ilovefs" class="left break">I love Free Software</h2>
277
-		
198
+
278 199
 		<dynamic-content type="ilovefs"/>
279
-		
200
+
280 201
 		<h2 id="nocloud" class="left break">There is no cloud</h2>
281
-		
202
+
282 203
 		<dynamic-content type="nocloud"/>
283
-				
204
+
284 205
 		<h2 id="dfd" class="left break">Document Freedom Day</h2>
285
-        		
206
+
286 207
 		<dynamic-content type="dfd"/>
287
-		
288 208
 
289
-		
209
+
210
+
290 211
 <!-- END ITEMIZE TESTING -->
291 212
 
292 213
 	<h2 id="feedback" class="left break">Any feedback?</h2>
293 214
 	<p class="left break">
294 215
 		Did you experience any trouble with your order, found a typo in our text, you have a remark or an idea for upcoming promotion material? Or you just like to send us a motivating message? Please <a href="mailto:contact@fsfe.org">share your feedback</a> with us.</p>
295
-		
216
+
296 217
 		<p class="left break">We are always eager to hear some nice stories or to see pictures that you have with our promotion material. Many people also share their experience and pictures via social media with us. </p>
297 218
 
298 219
 
@@ -304,16 +225,16 @@
304 225
 	and still download older material in our <a
305 226
 	href="/contribute/promotion-materials-archive">promotion material
306 227
 	archive.</a></p>
307
-		
228
+
308 229
 
309 230
 	<h2 id="upcoming" class="left break">Upcoming promotion and campaigns</h2>
310 231
 
311 232
 	<p class="left break">From time to time, have a look at this page again for new promotional material - we will continue to update it. If you would like to help making new designs or improve old ones, join the <a href="/contribute/designers/designers">designers team</a>. Or if you would like to add translations of pages or materials, join the <a href="/contribute/translators/translators">translators team</a>.
312 233
 	</p>
313 234
 
314
-	</body>
315
-
235
+  <script src="/scripts/spreadtheword.js"></script>
316 236
 
237
+	</body>
317 238
 </html>
318 239
 <!--
319 240
 Local Variables: ***

+ 2
- 0
look/fsfe.less View File

@@ -1217,3 +1217,5 @@ video#freeyourandroid {
1217 1217
 .home-newsletter-label {
1218 1218
     margin-top: 30px;
1219 1219
 }
1220
+
1221
+@import "pages/spreadtheword";

+ 2
- 2
look/fsfe.min.css
File diff suppressed because it is too large
View File


+ 107
- 0
look/pages/spreadtheword.less View File

@@ -0,0 +1,107 @@
1
+.spreadtheword {
2
+  h1, h2, h3 {
3
+    clear: both;
4
+  }
5
+
6
+  .noclear {
7
+    clear: none;
8
+  }
9
+
10
+  div#toc {
11
+    float: right;
12
+    clear: right;
13
+    border: solid 1px;
14
+    margin: .5em;
15
+    background: rgb(240, 240, 240);
16
+    width: 40%;
17
+    padding: 1em 1.5em 1.5em 1.5em;
18
+    margin: 1.5em;
19
+  }
20
+
21
+  div#toc p {
22
+    text-indent: 0.5em;
23
+    margin-top: 1.5em;
24
+  }
25
+
26
+  div#toc p.head {
27
+    font-size: 1.15em;
28
+    text-align: center;
29
+    margin-top: 0;
30
+    text-indent: 0;
31
+  }
32
+
33
+  form#orderpromo {
34
+    clear: both;
35
+    margin: 2em 0 3em 0;
36
+    width: 70%;
37
+  }
38
+
39
+  form#orderpromo div {
40
+    margin-bottom: 0.7em;
41
+  }
42
+
43
+  form#orderpromo label {
44
+    font-weight: normal;
45
+  }
46
+
47
+  form#orderpromo div > label,
48
+  form#orderpromo div > input,
49
+  form#orderpromo div > textarea {
50
+    margin-left: 20px;
51
+  }
52
+
53
+  div.langselector ul {
54
+    list-style: none;
55
+  }
56
+
57
+  form#orderpromo input[type="checkbox"],
58
+  form#orderpromo input[type="radio"] {
59
+    margin-right: 0.3em;
60
+  }
61
+
62
+  div.langselector li {
63
+    display: inline-block;
64
+    width: 9em;
65
+  }
66
+
67
+  form#orderpromo .reveal {
68
+    opacity: 0;
69
+    max-height: 0;
70
+    overflow: hidden;
71
+    transform: scale(1);
72
+    transition: 0.5s;
73
+  }
74
+
75
+  form#orderpromo input[type="radio"]:checked ~ .reveal {
76
+    opacity: 1;
77
+    max-height: 300px; /* little bit of a magic number :( */
78
+    overflow: visible;
79
+  }
80
+
81
+  form#orderpromo fieldset {
82
+    border: 1px groove #aaa !important;
83
+    padding: 1em 1.4em 1.4em 1.4em !important;
84
+    margin: 0 0 1.5em 0 !important;
85
+    -webkit-box-shadow: 0px 0px 0px 0px #000;
86
+    box-shadow: 0px 0px 0px 0px #000;
87
+  }
88
+
89
+  form#orderpromo fieldset legend {
90
+    font-size: 1.2em !important;
91
+    font-weight: bold !important;
92
+    text-align: left !important;
93
+    width: auto;
94
+    padding: 0 10px;
95
+    border-bottom: none;
96
+    margin-bottom: 0;
97
+  }
98
+
99
+  form#orderpromo .help-block {
100
+    font-size: 16px;
101
+    padding-left: 19px;
102
+  }
103
+
104
+  form#orderpromo .input-group-addon {
105
+    padding: 6px 12px 6px 30px;
106
+  }
107
+}

+ 34
- 0
scripts/spreadtheword.js View File

@@ -0,0 +1,34 @@
1
+// This file contains JavaScript for the "spreadtheword" page
2
+
3
+(function() {
4
+    // Validate the donation field.
5
+    // Shows a validation error if one of the following conditions match
6
+    // - the donate field is empty
7
+    // - the donate field value is below 10
8
+
9
+    var form = document.getElementById('orderpromo');
10
+    var donationAmountInput = document.getElementById('donate');
11
+    var donationErrorElement = document.getElementById('donate-error');
12
+    var donateGroup = document.getElementById('donate-group');
13
+
14
+    /**
15
+     * Sets the donate field to the error state.
16
+     */
17
+    function setDonateError() {
18
+        donateGroup.classList.add('has-error');
19
+        donationErrorElement.style.display = 'block';
20
+    }
21
+
22
+    form.addEventListener('submit', function (event) {
23
+        var value = donationAmountInput.value.trim();
24
+
25
+        if (value !== '') {
26
+            var parsedValue = parseInt(value, 10);
27
+
28
+            if (parsedValue > 0 && parsedValue < 10) {
29
+                setDonateError();
30
+                event.preventDefault();
31
+            }
32
+        }
33
+    });
34
+})();

Loading…
Cancel
Save