changeset 729:273b39f04d8e

browser_side: change login and register panels (makes it more visible and less confusing)
author souliane <souliane@mailoo.org>
date Wed, 21 Oct 2015 14:23:53 +0200
parents 9d35d75566fb
children 108bb9d74fa2
files src/browser/public/libervia.css src/browser/sat_browser/register.py
diffstat 2 files changed, 53 insertions(+), 74 deletions(-) [+]
line wrap: on
line diff
--- a/src/browser/public/libervia.css	Tue Oct 06 16:38:41 2015 +0200
+++ b/src/browser/public/libervia.css	Wed Oct 21 14:23:53 2015 +0200
@@ -416,6 +416,8 @@
 .formWarning { /* used when a form is not valid and must be corrected before submission */
     font-weight: bold;
     color: red !important;
+    height: 30px;
+    text-align: center;
 }
 
 .contactsChooser {
@@ -639,35 +641,28 @@
     box-shadow: 0px 1px 4px #000;
 }
 
-.registerPanel_tabs .gwt-Label {
-    margin: 20px 0px 0px 15px;
-    cursor: pointer;
-    font-size: larger;
-}
-
-.registerPanel_tabs .gwt-TabBarItem div {
-    color: #444;
-}
-
-.registerPanel_tabs .gwt-TabBarItem div:hover {
-    color: #fff;
-}
-
-.registerPanel_tabs .gwt-TabBarItem-selected div {
-    color: #fff;
-}
-
-.registerPanel_tabs .gwt-TabBarRest {
-}
-
 .registerPanel_right_side {
     background: #111 url('media/libervia/register_right.png');
     height: 100%;
     width: 100%;
 }
+
+.registerPanel_right_side .gwt-StackPanelItem {
+    margin: 15px;
+    height: auto;
+    text-align: center;
+    cursor: pointer;
+    color: #fff;
+	display: block;
+	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.2);
+}
+
+.registerPanel_right_side .gwt-StackPanelItem-selected {
+    display: none;
+}
+
 .registerPanel_content {
-    margin-left: 50px;
-    margin-top: 30px;
+    margin: auto 50px;
 }
 
 .registerPanel_content div {
@@ -675,7 +670,7 @@
     margin-left: 10px;
     margin-top: 15px;
     font-weight: bold;
-    color: #888;
+    color: #aaa;
 }
 
 .registerPanel_content input {
@@ -696,12 +691,12 @@
 
 .registerPanel_content .button, .registerPanel_content .button:visited {
     background: #222 url('media/libervia/gradient.png') repeat-x;
-    display: inline-block;
+    display: block;
     text-decoration: none;
     border-radius: 6px 6px 6px 6px;
     border-bottom: 1px solid rgba(0,0,0,0.25);
     cursor: pointer;
-    margin-top: 30px;
+    margin: 30px auto;
 }
 
 /* Fix for Opera */
--- a/src/browser/sat_browser/register.py	Tue Oct 06 16:38:41 2015 +0200
+++ b/src/browser/sat_browser/register.py	Wed Oct 21 14:23:53 2015 +0200
@@ -26,8 +26,7 @@
 from pyjamas.ui.SimplePanel import SimplePanel
 from pyjamas.ui.VerticalPanel import VerticalPanel
 from pyjamas.ui.HorizontalPanel import HorizontalPanel
-from pyjamas.ui.TabPanel import TabPanel
-from pyjamas.ui.TabBar import TabBar
+from pyjamas.ui.StackPanel import StackPanel
 from pyjamas.ui.PasswordTextBox import PasswordTextBox
 from pyjamas.ui.TextBox import TextBox
 from pyjamas.ui.FormPanel import FormPanel
@@ -61,22 +60,18 @@
         left_side = Image("media/libervia/register_left.png")
         main_panel.add(left_side)
 
-        ##TabPanel##
-        tab_bar = TabBar()
-        tab_bar.setStyleName('registerPanel_tabs')
-        self.right_side = TabPanel(tab_bar)
-        self.right_side.setStyleName('registerPanel_right_side')
+        ##StackPanel##
+        self.right_side = StackPanel(StyleName='registerPanel_right_side')
         main_panel.add(self.right_side)
         main_panel.setCellWidth(self.right_side, '100%')
 
-        ##Login tab##
-        login_tab = SimplePanel()
-        login_tab.setStyleName('registerPanel_content')
+        ##Login stack##
+        login_stack = SimplePanel()
+        login_stack.setStyleName('registerPanel_content')
         login_vpanel = VerticalPanel()
-        login_tab.setWidget(login_vpanel)
+        login_stack.setWidget(login_vpanel)
 
-        self.login_warning_msg = Label('')
-        self.login_warning_msg.setVisible(False)
+        self.login_warning_msg = HTML('')
         self.login_warning_msg.setStyleName('formWarning')
         login_vpanel.add(self.login_warning_msg)
 
@@ -102,14 +97,13 @@
         self.submit_type = Hidden('submit_type')
         login_vpanel.add(self.submit_type)
 
-        ##Register tab##
-        register_tab = SimplePanel()
-        register_tab.setStyleName('registerPanel_content')
+        ##Register stack##
+        register_stack = SimplePanel()
+        register_stack.setStyleName('registerPanel_content')
         register_vpanel = VerticalPanel()
-        register_tab.setWidget(register_vpanel)
+        register_stack.setWidget(register_vpanel)
 
         self.register_warning_msg = HTML('')
-        self.register_warning_msg.setVisible(False)
         self.register_warning_msg.setStyleName('formWarning')
         register_vpanel.add(self.register_warning_msg)
 
@@ -132,29 +126,25 @@
         register_vpanel.add(register_pass_label)
         register_vpanel.add(self.register_pass_box)
 
-        register_but = Button("Register", getattr(self, "onRegister"))
+        register_but = Button("Register a new account", getattr(self, "onRegister"))
         register_but.setStyleName('button')
         register_but.addStyleName('red')
         register_vpanel.add(register_but)
 
-        self.right_side.add(login_tab, 'Login')
-        self.right_side.add(register_tab, 'Register')
-        self.right_side.addTabListener(self)
-        self.right_side.selectTab(1)
-        login_tab.setWidth(None)
-        register_tab.setWidth(None)
+        self.right_side.add(login_stack, 'Return to the login screen')
+        self.right_side.add(register_stack, 'No account yet? Create a new one!')
+        self.right_side.addStackChangeListener(self)
+        login_stack.setWidth(None)
+        register_stack.setWidth(None)
 
         self.add(main_panel)
         self.addFormHandler(self)
         self.setAction('register_api/login')
 
-    def onBeforeTabSelected(self, sender, tabIndex):
-        return True
-
-    def onTabSelected(self, sender, tabIndex):
-        if tabIndex == 0:
+    def onStackChanged(self, sender, index):
+        if index == 0:
             self.login_box.setFocus(True)
-        elif tabIndex == 1:
+        elif index == 1:
             self.register_login_box.setFocus(True)
 
     def onKeyPress(self, sender, keycode, modifiers):
@@ -183,7 +173,6 @@
     def onLogin(self, button):
         if not re.match(r'^[a-z0-9_-]+$', self.login_box.getText(), re.IGNORECASE):
             self.login_warning_msg.setText('Invalid login, valid characters are a-z A-Z 0-9 _ -')
-            self.login_warning_msg.setVisible(True)
         else:
             self.submit_type.setValue('login')
             self.submit(None)
@@ -193,15 +182,12 @@
         self.register_login_box.setText(self.register_login_box.getText().lower())
         if not re.match(r'^[a-z0-9_-]+$', self.register_login_box.getText(), re.IGNORECASE):
             self.register_warning_msg.setHTML(_('Invalid login, valid characters<br>are a-z A-Z 0-9 _ -'))
-            self.register_warning_msg.setVisible(True)
         elif not re.match(r'^.+@.+\..+', self.email_box.getText(), re.IGNORECASE):
             self.register_warning_msg.setHTML(_('Invalid email address'))
-            self.register_warning_msg.setVisible(True)
         elif len(self.register_pass_box.getText()) < C.PASSWORD_MIN_LENGTH:
-            self.register_warning_msg.setHTML(_('Your password must contain<br>at least %d characters') % C.PASSWORD_MIN_LENGTH)
-            self.register_warning_msg.setVisible(True)
+            self.register_warning_msg.setHTML(_('Your password must contain<br>at least %d characters.') % C.PASSWORD_MIN_LENGTH)
         else:
-            self.register_warning_msg.setVisible(False)
+            self.register_warning_msg.setHTML("")
             self.submit_type.setValue('register')
             self.submit(None)
 
@@ -211,33 +197,31 @@
     def onSubmitComplete(self, event):
         result = event.getResults()
         if result == C.PROFILE_AUTH_ERROR:
-            Window.alert(_('Your login and/or password is incorrect. Please try again'))
+            self.login_warning_msg.setHTML(_('Your login and/or password is incorrect. Please try again.'))
         elif result == C.XMPP_AUTH_ERROR:
             # TODO: call stdui action CHANGE_XMPP_PASSWD_ID as it's done in primitivus
             Window.alert(_(u'Your SàT profile has been authenticated but the associated XMPP account failed to connect. Please use another SàT frontend to set another XMPP password.'))
         elif result == C.PROFILE_LOGGED:
             self.callback()
         elif result == C.SESSION_ACTIVE:
-            Window.alert(_('Session already active, this should not happen, please contact the author to fix it'))
+            Window.alert(_('Session already active, this should not happen, please contact the author to fix it.'))
         elif result == C.NO_REPLY:
-            Window.alert(_("Did not receive a reply (the timeout expired or the connection is broken)"))
+            Window.alert(_("Did not receive a reply (the timeout expired or the connection is broken)."))
         elif result == C.ALREADY_EXISTS:
-            self.register_warning_msg.setHTML(_('This login already exists,<br>please choose another one'))
-            self.register_warning_msg.setVisible(True)
+            self.register_warning_msg.setHTML(_('This login already exists,<br>please choose another one.'))
         elif result == C.INTERNAL_ERROR:
-            self.register_warning_msg.setHTML(_('SERVER ERROR: something went wrong during registration process, please contact the server administrator'))
-            self.register_warning_msg.setVisible(True)
+            self.register_warning_msg.setHTML(_('An registration error occurred, please contact the server administrator.'))
         elif result == C.REGISTRATION_SUCCEED:
-            self.login_warning_msg.setVisible(False)
-            self.register_warning_msg.setVisible(False)
+            self.login_warning_msg.setHTML("")
+            self.register_warning_msg.setHTML("")
             self.login_box.setText(self.register_login_box.getText())
             self.login_pass_box.setText('')
             self.register_login_box.setText('')
             self.register_pass_box.setText('')
             self.email_box.setText('')
-            self.right_side.selectTab(0)
+            self.right_side.showStack(0)
             self.login_pass_box.setFocus(True)
-            Window.alert(_('An email has been sent to you with your login informations\nPlease remember that this is ONLY A TECHNICAL DEMO'))
+            Window.alert(_('An email has been sent to you with your login informations\nPlease remember that this is ONLY A TECHNICAL DEMO.'))
         else:
             Window.alert(_('Submit error: %s' % result))