Add Language app layer in top of angular modules

quentinfayet · Nov 15, 2015 · e4d93a6 · e4d93a6
1 parent 1a82ba3
commit e4d93a6
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 61 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" ng-app="language.authentication">
+<html lang="en" ng-app="Language">
     <head>
         <meta charset="utf-8">
         <title>title</title>
@@ -15,8 +15,9 @@
         <script src="js/authentication/services/authentication.service.js"></script>
         <script src="js/authentication/controllers/register.controller.js"></script>
         <script src="js/authentication/authentication.js"></script>
+        <script src="js/language.js"></script>
     </head>
-   <body layout="row" ng-controller="RegistrationController as vm">
+   <body layout="row" ng-controller="RegistrationController as registration">
    <div layout="column" class="relative" layout-fill role="main">
        <md-content flex md-scroll-y>
            <ui-view layout="column" layout-fill layout-padding>
@@ -25,21 +26,25 @@
                         id="tab1-content"
                         aria-labelledby="tab1"
                         layout="row" layout-align="center center">
-                       <md-card flex-gt-sm="90" flex-gt-md="60" flex-gt-lg="30" class="login">
+                       <md-card flex-gt-sm="90" flex-gt-md="60" flex-gt-lg="30" class="login-card">
                            <md-card-content>
-                               <div class="login__header">
-                                   <div class="user_avatar"></div>
+                               <div class="login-card__header">
+                                   <div class="login-card__user-avatar"></div>
                                </div>
                                <form action="">
+                                   <md-input-container>
+                                       <label>Email</label>
+                                       <input type="email" ng-model="registration.email" required>
+                                   </md-input-container>
                                    <md-input-container>
                                        <label>Username</label>
-                                       <input type="text" required>
+                                       <input type="text" ng-model="registration.username" maxlength="20" required>
                                    </md-input-container>
                                    <md-input-container>
                                        <label>Password</label>
-                                       <input type="password" required>
+                                       <input type="password" ng-model="registration.password" required>
                                    </md-input-container>
-                                   <md-button class="md-raised md-primary">Login</md-button>
+                                   <md-button class="md-raised md-primary">Register</md-button>
                                </form>
                            </md-card-content>
                        </md-card>

diff --git a/client/static/js/authentication/authentication.js b/client/static/js/authentication/authentication.js
@@ -1,18 +1 @@
-angular.module('language.authentication', ['language.authentication.controllers', 'ngMaterial'])
-    .config(function($mdThemingProvider) {
-        var customBlueMap = 		$mdThemingProvider.extendPalette('light-blue', {
-            'contrastDefaultColor': 'light',
-            'contrastDarkColors': ['50'],
-            '50': 'ffffff'
-        });
-        $mdThemingProvider.definePalette('customBlue', customBlueMap);
-        $mdThemingProvider.theme('default')
-            .primaryPalette('customBlue', {
-                'default': '500',
-                'hue-1': '50'
-            })
-            .accentPalette('pink');
-        $mdThemingProvider.theme('input', 'default')
-            .primaryPalette('grey')
-    }
-);
+angular.module('Language.Authentication', ['Language.Authentication.controllers', 'ngMaterial']);
diff --git a/client/static/js/authentication/controllers/register.controller.js b/client/static/js/authentication/controllers/register.controller.js
@@ -8,5 +8,5 @@ function RegistrationController ($location, $scope, Authentication) {
     }
 }
 
-angular.module('language.authentication.controllers', ['language.authentication.services'])
+angular.module('Language.Authentication.controllers', ['Language.Authentication.services'])
 .controller('RegistrationController', ['$location', '$scope', 'Authentication', RegistrationController]);
diff --git a/client/static/js/authentication/services/authentication.service.js b/client/static/js/authentication/services/authentication.service.js
@@ -1,7 +1,3 @@
-angular
-    .module('language.authentication.services', ['ngCookies'])
-    .factory('Authentication', ['$cookies', '$http', Authentication]);
-
 function Authentication($cookies, $http) {
     var authentication = {
         register: register,
@@ -59,3 +55,6 @@ function Authentication($cookies, $http) {
     }
 }
 
+angular
+    .module('Language.Authentication.services', ['ngCookies'])
+    .factory('Authentication', ['$cookies', '$http', Authentication]);
diff --git a/client/static/js/language.js b/client/static/js/language.js
@@ -0,0 +1,17 @@
+angular.module('Language', ['Language.Authentication'])
+    .config(function($mdThemingProvider) {
+    var customBlueMap = 		$mdThemingProvider.extendPalette('light-blue', {
+        'contrastDefaultColor': 'light',
+        'contrastDarkColors': ['50'],
+        '50': 'ffffff'
+    });
+    $mdThemingProvider.definePalette('customBlue', customBlueMap);
+    $mdThemingProvider.theme('default')
+        .primaryPalette('customBlue', {
+            'default': '500',
+            'hue-1': '50'
+        })
+        .accentPalette('pink');
+    $mdThemingProvider.theme('input', 'default')
+        .primaryPalette('grey')
+});
diff --git a/client/static/sass/components/login-card.scss b/client/static/sass/components/login-card.scss
@@ -0,0 +1,30 @@
+md-card.login-card {
+
+  > md-card-content {
+
+    > .login-card__header {
+      text-align: center;
+      margin-bottom: 32px;
+
+      > .login-card__user-avatar {
+        width: 64px;
+        height: 64px;
+        display: inline-block;
+        text-align: center;
+        border-radius: 50%;
+        background-image: url(../images/avatars/user.png);
+        background-repeat: no-repeat;
+        background-color: rgba(0, 0, 0, .085);
+        background-position: 50% 1px;
+      }
+    }
+
+    > form {
+
+      > .md-button {
+        margin: 6px 0px;
+        width: 100%;
+      }
+    }
+  }
+}
diff --git a/client/static/sass/components/md-card.scss b/client/static/sass/components/md-card.scss
@@ -1,34 +1,4 @@
 md-card {
-    background-color: #fff;
-    margin: 0;
-
-    &.login {
-        > md-card-content {
-            > .login__header {
-                text-align: center;
-                margin-bottom: 32px;
-
-                > .user_avatar {
-                    width: 64px;
-                    height: 64px;
-                    display: inline-block;
-                    text-align: center;
-                    border-radius: 50%;
-                    background-image: url(../images/avatars/user.png);
-                    background-repeat: no-repeat;
-                    background-color: rgba(0, 0, 0, .085);
-                    background-position: 50% 1px;
-                }
-            }
-            > form {
-                > .md-button {
-                    margin: 6px 0px;
-                    width: 100%;
-                }
-            }
-        }
-    }
-
     > md-card-content {
         &.md-card--large-padding {
             padding: 24px 35px;

diff --git a/client/static/sass/main.scss b/client/static/sass/main.scss
@@ -1,5 +1,6 @@
 @import 'layout/body';
 
 @import 'components/md-card';
+@import 'components/login-card';
 @import 'components/md-content';