src/templates/signup.html - Issue 29646555: Issue 6210 - Implement Subscription (Double-opt-in) template for newsletter

Delta Between Two Patch Sets: src/templates/signup.html

Issue 29646555: Issue 6210 - Implement Subscription (Double-opt-in) template for newsletter (Closed)

Left Patch Set: Update with specification changes Created Jan. 12, 2018, 1:19 p.m.

Right Patch Set: Addressed comments #20 Created Jan. 23, 2018, 8:47 a.m.

Left:
Right:

Use n/p to move between diff chunks; N/P to move between comments.

Jump to:

Left: Side by side diff | Download
Right: Side by side diff | Download

LEFT	RIGHT
1 <!--************************************************************************** *	1 <!--************************************************************************** *

2 * Sign Up Page	2 * Sign Up Page

3 ****************************************************************************** - ->	3 ****************************************************************************** - ->

4 <!doctype html>	4 <!doctype html>

5 <html lang="en" dir="ltr">	5 <html lang="en" dir="ltr">

6 <head>	6 <head>

7 <!-- website-defaults/includes/meta/standard -->	7 <!-- website-defaults/includes/meta/standard -->

8 <meta charset="utf-8">	8 <meta charset="utf-8">

9 <meta http-equiv="x-ua-compatible" content="ie=edge">	9 <meta http-equiv="x-ua-compatible" content="ie=edge">

10 <meta name="viewport" content="width=device-width, initial-scale=1">	10 <meta name="viewport" content="width=device-width, initial-scale=1">

11 <title>Newsletter Signup</title>	11 <title>Newsletter Signup</title>

12 <meta name="description" content="A newsletter sign up form, so users can stay up to date with all things related to Adblock Plus.">	12 <meta name="description" content="A newsletter sign up form, so users can stay up to date with all things related to Adblock Plus.">

13	13

14 <!-- styles:start -->	14 <!-- styles:start -->

15 <!-- styles:end -->	15 <!-- styles:end -->

16	16

17 <!--FILTER-COMMENTS-->	17 <!--FILTER-COMMENTS-->

18 </head>	18 </head>

19 <body>	19 <body>

20 <div class="outer-container">	20 <div class="outer-container">

21 <div class="container phone-width content">	21 <div class="container phone-width content">

22	22

23 <header id="page-header">	23 <header id="page-header">

24 <figure>	24 <figure>

25 <img src="https://eyeo.com/images/backclick/abp-logo.png" srcset="http s://eyeo.com/images/backclick/abp-logo.svg 2x" alt="ABP inside red octagon">	25 <img src="https://eyeo.com/images/backclick/abp-logo.png" srcset="http s://eyeo.com/images/backclick/abp-logo.svg 2x" alt="ABP inside red octagon">

26 <figcaption>Adblock <strong>Plus</strong></figcaption>	26 <figcaption>Adblock <strong>Plus</strong></figcaption>
juliandoucette 2018/01/22 19:47:55 This appears on two lines when I test? This appears on two lines when I test? ire 2018/01/23 08:48:12 You mean the "Plus" appears on a second line? I ca Show quoted text On 2018/01/22 19:47:55, juliandoucette wrote: > This appears on two lines when I test? You mean the "Plus" appears on a second line? I can't seem to reproduce this. Any ideas why it's happening for you? Also, is it also happening on the demo site? juliandoucette 2018/01/23 17:00:47 Yes. It seems to be because there is not enough sp Show quoted text On 2018/01/23 08:48:12, ire wrote: > You mean the "Plus" appears on a second line? I can't seem to reproduce this. > Any ideas why it's happening for you? Also, is it also happening on the demo > site? Yes. It seems to be because there is not enough space for the words inside the container in which they are bound. e.g. if you change the figcaption padding from 0 0.5em to 0 0 0 0.5em then there is enough space. --- I discovered this issue by running an http server in the dist directory (were you doing it differently?) and confirmed that it occurs in the demo just-now. I sent you a screenshot.
27 </figure>	27 </figure>

28	28

29 <!--NEW-USER-->	29 <!--NEW-USER-->

30 <h1>Sign up for the Adblock Plus Newsletter</h1>	30 <h1>Sign up for the Adblock Plus Newsletter</h1>

31 <p>Stay up to date with all things Adblock Plus</p>	31 <p>Stay up to date with all things Adblock Plus</p>

32 <p><span class="color-secondary">*</span> Indicated required details</p>	32 <p><span class="color-secondary">*</span> Indicated required details</p>

33 <!--/NEW-USER-->	33 <!--/NEW-USER-->

34	34

35 <!--UNCONFIRMED--><!--SUCCESS-->	35 <!--UNCONFIRMED--><!--SUCCESS-->
juliandoucette 2018/01/22 19:47:54 NIT: It's inconvenient that these are all visible NIT: It's inconvenient that these are all visible on the frontend without backclick. It would be nice if they were all disabled by default and we could enable them via a simple interface e.g. the browser console without having to change our code for production e.g. by using the <!-- --> comments to apply classes that change state. ire 2018/01/23 08:48:10 I agree that it's inconvenient, but I don't think Show quoted text On 2018/01/22 19:47:54, juliandoucette wrote: > NIT: It's inconvenient that these are all visible on the frontend without > backclick. It would be nice if they were all disabled by default and we could > enable them via a simple interface e.g. the browser console without having to > change our code for production e.g. by using the <!-- --> comments to apply > classes that change state. I agree that it's inconvenient, but I don't think it's necessarily worth our time to dynamically add/remove these (particularly considering the urgency of this issue). Also, unless we plan to also update the input fields so they look like actual input fields, it may not be really worth it. I update the backclick demo with each new patchset so I think that should work for now. juliandoucette 2018/01/23 17:00:48 I agree with you in the short-term (hence NIT). An Show quoted text On 2018/01/23 08:48:10, ire wrote: > On 2018/01/22 19:47:54, juliandoucette wrote: > > NIT: It's inconvenient that these are all visible on the frontend without > > backclick. It would be nice if they were all disabled by default and we could > > enable them via a simple interface e.g. the browser console without having to > > change our code for production e.g. by using the <!-- --> comments to apply > > classes that change state. > > I agree that it's inconvenient, but I don't think it's necessarily worth our > time to dynamically add/remove these (particularly considering the urgency of > this issue). Also, unless we plan to also update the input fields so they look > like actual input fields, it may not be really worth it. > > I update the backclick demo with each new patchset so I think that should work > for now. I agree with you in the short-term (hence NIT). And I don't know about the long term. I would do it anyway if it's easy. If not, then we can consider it again after updating this template 2 more times in the future.
36 <h1>Confirm your email</h1>	36 <h1>Confirm your email</h1>

37 <p>You should have received an email with a confirmation link. Please cl ick the link to confirm your email and subscribe</p>	37 <p>You should have received an email with a confirmation link. Please cl ick the link to confirm your email and subscribe.</p>
juliandoucette 2018/01/22 19:47:55 NIT: Missing period according to spec NIT: Missing period according to spec ire 2018/01/23 08:48:11 Done. Show quoted text On 2018/01/22 19:47:55, juliandoucette wrote: > NIT: Missing period according to spec Done.
38 <!--/SUCCESS--><!--/UNCONFIRMED-->	38 <!--/SUCCESS--><!--/UNCONFIRMED-->

39	39

40 <!--CONFIRMED--><!--SUCCESS-->	40 <!--CONFIRMED--><!--SUCCESS-->

41 <h1>Thank you for subscribing to the <strong>Adblock Plus</strong> newsl etter</h1>	41 <h1>Thank you for subscribing to the <strong>Adblock Plus</strong> newsl etter.</h1>
juliandoucette 2018/01/22 19:47:55 NIT: Missing period according to spec NIT: Missing period according to spec ire 2018/01/23 08:48:11 Done. Show quoted text On 2018/01/22 19:47:55, juliandoucette wrote: > NIT: Missing period according to spec Done.
42 <p>We look forward to sharing our updates with you</p>	42 <p>We look forward to sharing our updates with you.</p>

43 <!--/SUCCESS--><!--/CONFIRMED-->	43 <!--/SUCCESS--><!--/CONFIRMED-->

44 </header>	44 </header>

45	45

46 <!--NEW-USER-->	46 <!--NEW-USER-->

47 <form name="abonnenten_anmeldung" action="web.subscribe?tid=14&mid=0" meth od="post" id="sign-up">	47 <form name="abonnenten_anmeldung" action="web.subscribe?tid=14&mid=0" meth od="post" id="sign-up">

48	48

49 <div>	49 <div>

50 <label for="email">Email Address <abbr title="required" class="color-s econdary">*</abbr></label>	50 <label for="email">Email Address <abbr title="required" class="color-s econdary">*</abbr></label>

51	51

52 <?GIS EMAIL params="id='email' type='email' class='<!--ERROR:INCORRECT -EMAIL-->invalid<!--/ERROR:INCORRECT-EMAIL--><!--ERROR:NO-EMAIL-->invalid<!--/ER ROR:NO-EMAIL--><!--ALREADY-CONFIRMED--><!--ERROR-->invalid<!--/ERROR--><!--/ALRE ADY-CONFIRMED--><!--ERROR:ALREADY-ON-10-->invalid<!--/ERROR:ALREADY-ON-10-->' re quired" mandatory?>	52 <?GIS EMAIL params="id='email' type='email' class='<!--ERROR:INCORRECT -EMAIL-->invalid<!--/ERROR:INCORRECT-EMAIL--><!--ERROR:NO-EMAIL-->invalid<!--/ER ROR:NO-EMAIL--><!--ALREADY-CONFIRMED--><!--ERROR-->invalid<!--/ERROR--><!--/ALRE ADY-CONFIRMED--><!--ERROR:ALREADY-ON-10-->invalid<!--/ERROR:ALREADY-ON-10-->' re quired" mandatory?>

(...skipping 12 matching lines...) Expand all Loading...
65	65

66 <!--ALREADY-CONFIRMED--><!--ERROR-->	66 <!--ALREADY-CONFIRMED--><!--ERROR-->

67 <div class="error-message">You have already subscribed to this newslet ter</div>	67 <div class="error-message">You have already subscribed to this newslet ter</div>

68 <!--/ERROR--><!--/ALREADY-CONFIRMED-->	68 <!--/ERROR--><!--/ALREADY-CONFIRMED-->

69 </div>	69 </div>

70	70

71 <div>	71 <div>

72 <label for="fullname">Full name</label>	72 <label for="fullname">Full name</label>

73 <?GIS FULLNAME params="id='fullname'"?>	73 <?GIS FULLNAME params="id='fullname'"?>

74 </div>	74 </div>

75

76 <!--ERROR:NO-PASSWORD-->
juliandoucette 2018/01/22 19:47:56 If we are going to include these then I think we s If we are going to include these then I think we should at-least make them useful e.g. ask the user to email us if they occur. ire 2018/01/23 08:48:12 Since they aren't in the spec I'll remove them for Show quoted text On 2018/01/22 19:47:56, juliandoucette wrote: > If we are going to include these then I think we should at-least make them > useful e.g. ask the user to email us if they occur. Since they aren't in the spec I'll remove them for now. juliandoucette 2018/01/23 17:00:47 Acknowledged. Show quoted text On 2018/01/23 08:48:12, ire wrote: > On 2018/01/22 19:47:56, juliandoucette wrote: > > If we are going to include these then I think we should at-least make them > > useful e.g. ask the user to email us if they occur. > > Since they aren't in the spec I'll remove them for now. Acknowledged.
77 <p>Error: No Password</p><br>

78 <!--/ERROR:NO-PASSWORD-->

79

80 <!--ERROR:WRONG-PASSWORD-->

81 <p>Error: Wrong Password</p><br>

82 <!--/ERROR:WRONG-PASSWORD-->

83

84 <!--ERROR:INCORRECT-PASSWORD-->

85 <p>Error: Incorrect Password</p><br>

86 <!--/ERROR:INCORRECT-PASSWORD-->

87	75

88 <?GIS NEWSLETTER 10 checked hidden?>	76 <?GIS NEWSLETTER 10 checked hidden?>

89	77

90 <button type="submit" class="secondary">Sign Up</button>	78 <button type="submit" class="secondary">Sign Up</button>

91 </form>	79 </form>

92 <footer id="page-footer">	80 <footer id="page-footer">

93 <a href="https://eyeo.com/en/privacy" target="_blank" class="color-secon dary">Privacy Policy</a>	81 <a href="https://eyeo.com/en/privacy" target="_blank" class="color-secon dary">Privacy Policy</a>

94 </footer>	82 </footer>

95 <!--/NEW-USER-->	83 <!--/NEW-USER-->

96	84

97 </div>	85 </div>

98 </div>	86 </div>

99 </body>	87 </body>

100 </html>	88 </html>

LEFT	RIGHT