completet registration form

ordr/resources/account.py

@@ -1,5 +1,7 @@
 ''' Resources (sub) package, used to connect URLs to views '''
 
+import deform
+
 from pyramid.security import Allow, Everyone, DENY_ALL
 from ordr.schemas.account import RegistrationSchema
 
@@ -23,7 +25,15 @@ class RegistrationResource(BaseChildResource):
     def get_registration_form(self, **kwargs):
         ''' returns the registration form'''
         settings = {
-            'buttons': ('Create account', 'Cancel'),
+            'buttons': (
+                deform.Button(name='create', title='Create Account'),
+                deform.Button(
+                    title='Cancel', 
+                    type='link', 
+                    value=self.request.resource_url(self.request.root), 
+                    css_class='btn btn-secondary'
+                    )
+                ),
             }
         settings.update(kwargs)
         return self._prepare_form(RegistrationSchema, **settings)

ordr/schemas/account.py

@@ -17,16 +17,19 @@ class RegistrationSchema(CSRFSchema):
     username = colander.SchemaNode(
         colander.String(),
         widget=deform.widget.TextInputWidget(
-            readonly=True, 
+            readonly=True
             ),
         description='automagically generated for you',
         validator=deferred_unique_username_validator, 
+        oid='registration_username'
         )
     first_name = colander.SchemaNode(
-        colander.String()
+        colander.String(), 
+        oid='registration_first_name'
         )
     last_name = colander.SchemaNode(
-        colander.String()
+        colander.String(), 
+        oid='registration_last_name'
         )
     email = colander.SchemaNode(
         colander.String(),

ordr/static/scripts.js

@@ -0,0 +1,21 @@
+$(function() {
+
+    function capitalize(s){
+        return s.replace( /\b./g, function(a){ return a.toUpperCase(); } );
+    };
+
+    function generate_user_name() {
+        var first_name = $('#registration_first_name').val();
+        var last_name = $('#registration_last_name').val();
+        var user_name = capitalize(first_name) + capitalize(last_name);
+        return user_name.replace( /[\s-]/g, '')
+    };
+
+  	// autocomplete of the username (registration form)
+    $('#registration_first_name').keyup(function () {
+        $('#registration_username').val( generate_user_name() );
+    });
+    $('#registration_last_name').keyup(function() {
+        $('#registration_username').val( generate_user_name() );
+    });
+});

ordr/templates/layout.jinja2

@@ -78,6 +78,7 @@
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+    <script src="{{request.static_url('ordr:static/scripts.js')}}"></script>
 </body>
 
 </html>

ordr/views/registration.py

@@ -25,9 +25,8 @@ def registration_form(context, request):
     renderer='ordr:templates/account/registration_form.jinja2'
     )
 def registration_form_processing(context, request):
-    if 'Cancel' in request.POST:
-        return HTTPFound(request.resource_url(request.root))
     form = context.get_registration_form()
+    if 'create' in request.POST:    
         data = request.POST.items()
         try:
             appstruct = form.validate(data)