Hello, I am Irfan? a friend of Steve Dougherty and he had asked me to further
design his idea for Freenet's security setup. One can view his idea here: https://emu.freenetproject.org/pipermail/devl/2012-July/036466.html In this email I will reiterate Steve's idea and add screenshots of my design of this security setup idea. As seen here, this is what the setup will look like in the beginning: http://cl.ly/image/1U0I1s1z3P18 As you can see, there is a main container with the title "Security Setup" which contains a list with security options. Each option has, to the left of the text, a toggle-switch to turn it on, and a rightward pointing arrow. On click of the right-ward pointing arrow, a description of that option will appear, but more on that later. This is what the setup will look like when an arrow is clicked: http://cl.ly/image/2d1x3r3V0a27 As you can see, when an arrow next to an option is clicked, it turns downward as a pane, that contains a description, slides down from underneath the option's label. Clicking the arrow again causes the description to slide up and the arrow to turn rightward again (as seen in the first screenshot). Here is what the setup will look like when a toggle switch is clicked. http://cl.ly/image/111i2b0X3b3M Now, the html behind the toggle-switches will be radio-buttons. This way only one toggle-switch can be turned on / one security option can be turned on at a time. When a toggle-switch is clicked / radio-button is selected, if not already expanded the description of that security option slides down and the arrow turns downward. This is good because is allows the interface to demonstrate the functionality of the arrows when clicked in addition to a mouseover providing hints. Secondly, the other security options fade-out of the way. They can and will return when the toggle-switch is clicked again or turned off. Thirdly, another pane slides out from underneath the options. This contains the necessary settings for that option and a submit-button at the bottom. Each setting has an input to the right of the setting's label / name. To the left of the label / name is an arrow which provides an explanation / a description for that setting like the arrows of each security option did when clicked. The done button would complete the setup. Javascript and jQuery are already going to be implemented to style the radio-buttons (toggle-switches) on clicked, as there isn't a well supported way to do this in css, and preform the sliding and fading effects. We can also use JS and HTML5 to do useful things like keeping the form valid but turning valid values green and in-valid one's red. Its actually a better UX (User-Experience) to keep valid values the way they are and turning in-valid ones red. Although challenging, this seems like something I would be willing to develop as well. However, before I begin doing so, I would like to know the answer to 2 questions. Would the freenet-devs prefer there to be support for when scripts / javascript is disabled or turned off? An idea to handling this is directing the user to the current setup if so. And secondly, to what IE would the freenet-devs want this to be supported? Meaning should something as low as IE6 support it or is 9 and above fine. In my opinion, it would be easiest and best if we build the setup to be supported in IE9 and above and other modern-browsers (Chrome, Safari, Firefox, and Opera). And then later-on make additions for support in IE8 and below when possible. Thoughts? I appreciate and welcome any and all feedback. Thanks in Advance & Best Regards, Irfan.
