TG-117 : remove bootstrap css framework and replace by

angular-material and create login page

frontend/Gruntfile.js

@@ -1,4 +1,4 @@
-// Generated on 2017-01-20 using generator-angular 0.15.1
+// Generated on 2017-02-26 using generator-angular 0.15.1
 'use strict';
 
 // # Globbing
@@ -338,7 +338,7 @@ module.exports = function (grunt) {
     ngtemplates: {
       dist: {
         options: {
-          module: 'clientApp',
+          module: 'frontendApp',
           htmlmin: '<%= htmlmin.dist.options %>',
           usemin: 'scripts/scripts.js'
         },

frontend/app/index.html

@@ -8,7 +8,7 @@
     <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
     <!-- build:css(.) styles/vendor.css -->
     <!-- bower:css -->
-    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
+    <link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
     <!-- endbower -->
     <!-- endbuild -->
     <!-- build:css(.tmp) styles/main.css -->
@@ -20,6 +20,7 @@
       <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
     <![endif]-->
 
+    <!-- Add your site or application content here -->
     <ui-view></ui-view>
 
     <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
@@ -35,20 +36,20 @@
 
     <!-- build:js(.) scripts/vendor.js -->
     <!-- bower:js -->
-    <script src="bower_components/jquery/dist/jquery.js"></script>
     <script src="bower_components/angular/angular.js"></script>
-    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
+    <script src="bower_components/angular-animate/angular-animate.js"></script>
+    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
     <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
+    <script src="bower_components/angular-aria/angular-aria.js"></script>
+    <script src="bower_components/angular-messages/angular-messages.js"></script>
+    <script src="bower_components/angular-material/angular-material.js"></script>
     <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
 
         <!-- build:js({.tmp,app}) scripts/scripts.js -->
         <script src="scripts/app.js"></script>
-        <script src="scripts/controllers/accueil.js"></script>
+        <script src="scripts/controllers/login.js"></script>
-
-        <script src="scripts/services/AuthService.js"></script> 
-        <script src="scripts/services/DataService.js"></script>
         <!-- endbuild -->
 </body>
 </html>

frontend/app/styles/main.css

@@ -7,77 +7,5 @@
 
 body {
   padding: 0;
-}
+  background-color: #DADADA;
-
-/* Everything but the jumbotron gets side spacing for mobile first views */
-.header,
-.marketing,
-.footer {
-  padding-left: 15px;
-  padding-right: 15px;
-}
-
-/* Custom page header */
-.header {
-  border-bottom: 1px solid #e5e5e5;
-  margin-bottom: 10px;
-}
-/* Make the masthead heading the same height as the navigation */
-.header h3 {
-  margin-top: 0;
-  margin-bottom: 0;
-  line-height: 40px;
-  padding-bottom: 19px;
-}
-
-/* Custom page footer */
-.footer {
-  padding-top: 19px;
-  color: #777;
-  border-top: 1px solid #e5e5e5;
-}
-
-.container-narrow > hr {
-  margin: 30px 0;
-}
-
-/* Main marketing message and sign up button */
-.jumbotron {
-  text-align: center;
-  border-bottom: 1px solid #e5e5e5;
-}
-.jumbotron .btn {
-  font-size: 21px;
-  padding: 14px 24px;
-}
-
-/* Supporting marketing content */
-.marketing {
-  margin: 40px 0;
-}
-.marketing p + h4 {
-  margin-top: 28px;
-}
-
-/* Responsive: Portrait tablets and up */
-@media screen and (min-width: 768px) {
-  .container {
-    max-width: 730px;
-  }
-
-  /* Remove the padding we set earlier */
-  .header,
-  .marketing,
-  .footer {
-    padding-left: 0;
-    padding-right: 0;
-  }
-  /* Space out the masthead */
-  .header {
-    margin-bottom: 30px;
-  }
-  /* Remove the bottom border on the jumbotron for visual effect */
-  .jumbotron {
-    border-bottom: 0;
-  }
 }

frontend/app/views/accueil.html

@@ -1,62 +0,0 @@
-    <!-- Add your site or application content here -->
-    <div class="header">
-      <div class="navbar navbar-default" role="navigation">
-        <div class="container">
-          <div class="navbar-header">
-
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
-              <span class="sr-only">Toggle navigation</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
-
-            <a class="navbar-brand" href="#/">client</a>
-          </div>
-
-          <div class="collapse navbar-collapse" id="js-navbar-collapse">
-
-            <ul class="nav navbar-nav">
-              <li class="active"><a href="#/">Home</a></li>
-              <li><a ng-href="#/">About</a></li>
-              <li><a ng-href="#/">Contact</a></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="container">
-      <div class="jumbotron">
-        <h1>'Allo, 'Allo!</h1>
-        <p class="lead">
-          <img src="images/yeoman.png" alt="I'm Yeoman"><br>
-          Always a pleasure scaffolding your apps.
-        </p>
-        <p><a class="btn btn-lg btn-success" ng-href="#/">Splendid!<span class="glyphicon glyphicon-ok"></span></a></p>
-      </div>
-
-      <div class="row marketing">
-        <h4>HTML5 Boilerplate</h4>
-        <p>
-          HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
-        </p>
-
-        <h4>Angular</h4>
-        <p>
-          AngularJS is a toolset for building the framework most suited to your application development.
-        </p>
-
-        <h4>Karma</h4>
-        <p>Spectacular Test Runner for JavaScript.</p>
-      </div>
-    </div>
-
-    <div class="footer">
-      <div class="container">
-        <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
-      </div>
-    </div>
-    
-    
-    

frontend/app/views/login.html

@@ -0,0 +1,25 @@
+<div layout="row" layout-align="center center">
+  <div flex flex-gt-sm="40">
+    <md-card>
+      <md-card-title>
+        <md-card-title-text>
+          <span class="md-headline">Livret de l'alternant</span>
+        </md-card-title-text>
+      </md-card-title>
+
+      <md-card-content>
+        <div layout="column">
+          <md-input-container class="md-block">
+            <label>Email</label>
+            <input type="email" ng-model="email">
+          </md-input-container>
+          <md-input-container class="md-block">
+            <label>Mot de passe</label>
+            <input type="password" ng-model="password">
+          </md-input-container>
+        </div>
+        <md-button class="md-raised md-primary" ng-click="login()">Se connecter</md-button>
+      </md-card-content>
+    </md-card>
+  </div>
+</div>

frontend/bower.json

@@ -1,24 +1,17 @@
 {
-  "name": "client",
+  "name": "frontend",
   "version": "0.0.0",
   "dependencies": {
-    "angular": "^1.6.0",
+    "angular": "^1.4.0",
-    "bootstrap": "^3.2.0",
+    "angular-animate": "^1.4.0",
-    "angular-sanitize": "^1.6.0",
+    "angular-cookies": "^1.4.0",
-    "angular-ui-router": "1.0.0-beta.3"
+    "angular-sanitize": "^1.4.0",
+    "angular-material": "^1.1.3",
+    "angular-ui-router": "^0.4.2"
   },
   "devDependencies": {
-    "angular-mocks": "^1.6.0"
+    "angular-mocks": "^1.4.0"
   },
   "appPath": "app",
-  "moduleName": "clientApp",
+  "moduleName": "clientApp"
-  "overrides": {
-    "bootstrap": {
-      "main": [
-        "less/bootstrap.less",
-        "dist/css/bootstrap.css",
-        "dist/js/bootstrap.js"
-      ]
-    }
-  }
 }

frontend/package.json

@@ -28,7 +28,7 @@
     "jasmine-core": "^2.5.2",
     "jit-grunt": "^0.9.1",
     "jshint-stylish": "^1.0.0",
-    "karma": "^1.4.0",
+    "karma": "^1.5.0",
     "karma-jasmine": "^1.1.0",
     "karma-phantomjs-launcher": "^1.0.2",
     "phantomjs-prebuilt": "^2.1.14",
@@ -39,6 +39,5 @@
   },
   "scripts": {
     "test": "karma start test/karma.conf.js"
-  },
+  }
-  "dependencies": {}
 }

frontend/test/karma.conf.js

@@ -1,5 +1,5 @@
 // Karma configuration
-// Generated on 2017-01-20
+// Generated on 2017-02-26
 
 module.exports = function(config) {
   'use strict';
@@ -20,10 +20,13 @@ module.exports = function(config) {
     // list of files / patterns to load in the browser
     files: [
       // bower:js
-      'bower_components/jquery/dist/jquery.js',
       'bower_components/angular/angular.js',
-      'bower_components/bootstrap/dist/js/bootstrap.js',
+      'bower_components/angular-animate/angular-animate.js',
+      'bower_components/angular-cookies/angular-cookies.js',
       'bower_components/angular-sanitize/angular-sanitize.js',
+      'bower_components/angular-aria/angular-aria.js',
+      'bower_components/angular-messages/angular-messages.js',
+      'bower_components/angular-material/angular-material.js',
       'bower_components/angular-ui-router/release/angular-ui-router.js',
       'bower_components/angular-mocks/angular-mocks.js',
       // endbower

frontend/test/spec/controllers/main.js

@@ -3,7 +3,7 @@
 describe('Controller: MainCtrl', function () {
 
   // load the controller's module
-  beforeEach(module('clientApp'));
+  beforeEach(module('frontendApp'));
 
   var MainCtrl,
     scope;