version stable

.gitignore

@@ -25,6 +25,8 @@
 
 # dependencies
 /node_modules
+/other
+/public
 
 # IDEs and editors
 /.idea

angular.json

@@ -37,6 +37,9 @@
               },
               {
                 "input": "src/styles.scss"
+              },
+              {
+                "input": "node_modules/videogular2/fonts/videogular.css"
               }
             ],
             "scripts": [{

app.js

@@ -5,27 +5,39 @@ var logger = require('morgan');
 var bodyParser = require('body-parser');
 
 var api = require('./routes/api');
+var faceBK = require('./auth/facebook');
 var app = express();
-
+var session = require('express-session');
 
 //var http = require("http").Server(app).listen(80);
 //console.log("Server Started!");
 //DB
 
 //file
-var upload = require("express-fileupload")
+var upload = require("express-fileupload");
 //var morgan = require('morgan');
 var mongoose = require('mongoose');
 var passport = require('passport');
+//var session = require('express-session');
 var config = require('./config/database');
 
 //DB
 //mongoose.Promise = require('bluebird');
 mongoose.connect(config.database);
-
-
+app.use(function(req, res, next) {
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
+    res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
+    res.setHeader('Access-Control-Allow-Credentials', true);
+    next();
+});
+app.use(session({
+  secret: 's3cr3t',
+  resave: true,
+  saveUninitialized: true
+}));
 app.use(passport.initialize());
-
+app.use(passport.session());
 
 app.use(logger('dev'));
 app.use(bodyParser.json());
@@ -33,12 +45,22 @@ app.use(bodyParser.json());
 // app.use(upload());
 
 app.use(bodyParser.urlencoded({'extended':'false'}));
-app.use(express.static(path.join(__dirname, 'dist')));
+//app.use(express.static(path.join(__dirname, 'dist')));
+app.use(express.static(path.join(__dirname, 'other')));
 //bizarrr
-app.use('/public',express.static(path.join(__dirname, '../public')));
+
+app.use('/public',express.static(path.join(__dirname, './public')));
 app.use('/books', express.static(path.join(__dirname, 'dist')));
-app.use('/api', api);
 
+app.use('/home', express.static(path.join(__dirname, 'dist')));
+app.use('/main/:id', express.static(path.join(__dirname, 'dist')));
+app.use('/login', express.static(path.join(__dirname, 'dist')));
+app.use('/signup', express.static(path.join(__dirname, 'dist')));
+app.use('/download/:id', express.static(path.join(__dirname, 'dist')));
+
+app.use('/api', api);
+app.set('view engine', 'pug');
+//app.use('/api', faceBK);
 // catch 404 and forward to error handler
 app.use(function(req, res, next) {
   var err = new Error('Not Found');

auth/facebook.js

@@ -0,0 +1,117 @@
+var passport = require('passport');
+var FacebookStrategy = require('passport-facebook').Strategy;
+var User = require('../models/user');
+var jwt = require('jsonwebtoken');
+var config = require('../config/database');
+
+var mongoose = require('mongoose');
+
+
+passport.serializeUser((user, done) => {
+    done(null, user.id);
+});
+
+passport.deserializeUser((id, done) => {
+    // console.log(`id: ${id}`);
+    User.findById(id)
+        .then(user => {
+            done(null, user);
+        })
+        .catch(error => {
+            console.log(`Error: ${error}`);
+        });
+});
+
+passport.use(new FacebookStrategy({
+        clientID: "191092458179642",
+        clientSecret: "964e490d7e49a13ee7a77c9b65419fb3",
+        callbackURL: "https://localhost:3000/api/facebook/callback",
+        proxy: true
+    },
+    function(accessToken, refreshToken, profile, done) {
+        console.log('facebook findOneOrCreate'+profile.displayName);
+
+        User.findOne({
+            username: profile.displayName
+        }, function(err, user) {
+            if(user){
+                console.log('findOneOrCreate ok'+user.username);
+                var token = jwt.sign(user.toJSON(), config.secret);
+                // return the information including token as JSON
+                //res.json({success: true, token: });
+                return done(null, user);
+            }else{
+
+                var newUser = new User({
+                    username: profile.displayName,
+                    password: profile.password,
+                    social: true
+                });
+                // save the user
+                newUser.save(function(err) {
+                    if (err) {
+                        console.log('Username already exists.');
+                    }
+                    return done(null, user);
+                });
+            }
+
+        });
+
+        // User.findOneOrCreate(profile.displayName.toString(), function(err, user, req, res) {
+        //     if (err) {
+        //         console.log('findOneOrCreate err');
+        //         console.log(err);
+        //         return done(err);
+        //     }
+        //     console.log('findOneOrCreate ok'+user.displayName);
+        //     //res.json({token: accessToken, user: user.username});
+        //     done(null, user);
+        // });
+        // Page.findOneOrCreate(pageId, (err, page)=>{
+        //     if(err){
+        //         //if theres an error, do something
+        //     }
+        //     //  or do something with the page
+        // })
+        //
+        //
+        // Page.findOneOrCreate(profile.id, (err, page)=>{
+        //     if(err){
+        //         //if theres an error, do something
+        //     }
+        //     //  or do something with the page
+        // })
+    }
+    // function(accessToken, refreshToken, profile, done) {
+    //     console.log('yaaauuu : ' + accessToken + ' ----- ' + profile.displayName + ' ----- ' + profile.id);
+    //     //done(null, {profile, accessToken});
+    //
+    //
+    //     var newUser = new User({
+    //         username: req.body.username,
+    //         password: req.body.password
+    //     });
+    //
+    //     User.save(newUser, function(err, user) {
+    //         if (err) {
+    //             console.log('yaaauuu err : ' + err);
+    //             return done(err);
+    //         }
+    //         console.log('yaaauuu : ');
+    //         done(null, user);
+    //     });
+    //
+    //
+    //
+    //     /*
+    //     User.findOrCreate({username: profile.displayName}, {username: profile.displayName, id: profile.id}, function(err, user) {
+    //         console.log('yaaauuu err : ' + ' ----- ' + err );
+    //
+    //         console.log('yaaauuu user : ' + ' ----- ' + JSON.stringify(user));
+    //         if (err) { return done(err); }
+    //         done(null, user);
+    //     });*/
+    // }
+));
+module.exports = passport;

auth/github.js

@@ -0,0 +1,16 @@
+var passport = require('passport');
+var GitHubStrategy = require('passport-github').Strategy;
+
+passport.use(new GitHubStrategy({
+        clientID: "60a0296da9fce6ca3b7e",
+        clientSecret: "9fb2f52123d9d840c98b98b3b4ffbc5dd77d1de3",
+        callbackURL: "https://localhost:3000/api/github/callback"
+    },
+    function(accessToken, refreshToken, profile, done) {
+        User.findOrCreate({userid: profile.id}, {name: profile.displayName,userid: profile.id}, function (err, user) {
+            return done(err, user);
+        });
+    }
+));
+
+module.exports = passport;

auth/google.js

@@ -0,0 +1,16 @@
+var passport = require('passport');
+var GoogleStrategy = require('passport-google-oauth').OAuth2Strategy;
+
+passport.use(new GoogleStrategy({
+        clientID: "633754977454-7dcfrsfob7sjq5lim47tc63pdjch6imr.apps.googleusercontent.com",
+        clientSecret: "D7lHcUgZbCpmWZtooRlICzAH",
+        callbackURL: "https://localhost:3000/api/google/callback"
+    },
+    function(accessToken, refreshToken, profile, done) {
+        User.findOrCreate({ userid: profile.id }, { name: profile.displayName,userid: profile.id }, function (err, user) {
+            return done(err, user);
+        });
+    }
+));
+
+module.exports = passport;

bin/www

@@ -6,8 +6,11 @@
 
 var app = require('../app');
 var debug = require('debug')('mean-secure:server');
+var https = require('https');
 var http = require('http');
-
+var fs = require('fs');
+var crypto = require('crypto');
+var tls = require('tls');
 /**
  * Get port from environment and store in Express.
  */
@@ -15,11 +18,27 @@ var http = require('http');
 var port = normalizePort(process.env.PORT || '3000');
 app.set('port', port);
 
+
+// certif
+var privateKey = fs.readFileSync('key.pem').toString();
+var certificate = fs.readFileSync('cert.pem').toString();
+
+
+
 /**
  * Create HTTP server.
  */
 
-var server = http.createServer(app);
+var credentials = {
+    key: privateKey,
+    cert: certificate,
+    passphrase: 'titi'
+};
+
+var server = https.createServer(credentials, app);
+//var server = http.createServer(app);
+
+
 
 /**
  * Listen on provided port, on all network interfaces.

cert.pem

@@ -0,0 +1,18 @@
+-----BEGIN CERTIFICATE-----
+MIIC+zCCAeOgAwIBAgIJAO3X6jDQ6/7tMA0GCSqGSIb3DQEBCwUAMBQxEjAQBgNV
+BAMMCWxvY2FsaG9zdDAeFw0xODA2MDYyMDIzMjFaFw0xOTA2MDYyMDIzMjFaMBQx
+EjAQBgNVBAMMCWxvY2FsaG9zdDCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoC
+ggEBANSGX3ctyJLmCMFLsWiw4fMSv+W+XtoQx+oEqmPKEoDWtQbO/nchywYTlIK8
+H9nDBthYMhNSfmvEilxGRBerV7McjU2zKBsvncyFMSnie3LVtAzd39lHUXKNhybI
+6veIEnthau37JblClcKIxVqE6Xk2sQYFWyB1XvioEMKFjrKyx/cHcKknl5Ykwtrl
+B9pkGQ3KMJt+IsnTPUeEiS2uI1kaNLLM0ayosVcVShu1F/x5D6549K55nacrUpHP
+L5npOvWIb2ZS6RhiltAd6/GShkzmDsIMpRQftg+RvfKlFxf1+ORYYpyXMyY/zf99
+lt8kn/1HUAuu6Dp9+bo9vKkqee8CAwEAAaNQME4wHQYDVR0OBBYEFOR+9mbmaift
+SDIznQ9xw2ujOqWZMB8GA1UdIwQYMBaAFOR+9mbmaiftSDIznQ9xw2ujOqWZMAwG
+A1UdEwQFMAMBAf8wDQYJKoZIhvcNAQELBQADggEBAJB2VSmDSAYhb872rH0EYNn0
+13WYkBgO9NNbgkgx1wcTA8qD02544wGsreuuKRtx6sn5JahoUTSpZvMkBE4t9SdQ
+TCneDp/0Bm55b1m5Pu/EwoOoadZq7UGU1yL0BdiMzfVRsokR9zOBxDyIUrbCKWDZ
+6glVHLC0O8ZJAqzkn/8kZPSdHdZ0Ql64k8swVdjFROjkL74sopvtyfpxQVq9vi5r
+CTlxnC+aDtYt8CEYjxjHdsAAhA4NxntTenSO3HPQz/3qGCE5RC/qMgBzU7mf0kxU
+l7qbeudfYQ2MLRGucsR+LwraR93iagi5VMHsYv5mVDA/zWGhXfTNS3tMk4pi6us=
+-----END CERTIFICATE-----

config/passport.js

@@ -1,28 +1,31 @@
-var JwtStrategy = require('passport-jwt').Strategy,
-  ExtractJwt = require('passport-jwt').ExtractJwt;
+var JwtStrategy = require('passport-jwt').Strategy;
+var ExtractJwt = require('passport-jwt').ExtractJwt;
 
 // load up the user model
 var User = require('../models/user');
 var config = require('../config/database'); // get db config file
 
+var FacebookStrategy = require('passport-facebook').Strategy;
+
 module.exports = function(passport) {
-  var opts = {};
-  opts.jwtFromRequest = ExtractJwt.fromAuthHeaderWithScheme("jwt");
-  opts.secretOrKey = config.secret;
-  passport.use(new JwtStrategy(opts, function(jwt_payload, done) {
+    var opts = {};
+    opts.jwtFromRequest = ExtractJwt.fromAuthHeaderWithScheme("jwt");
+    opts.secretOrKey = config.secret;
+
+    passport.use(new JwtStrategy(opts, function(jwt_payload, done) {
 
-    User.findOne({id: jwt_payload.id, username: jwt_payload.username}, function(err, user) {
-      if (err) {
-        return done(err, false);
-      }
-      if (user) {
-        console.log('jwt_payloadddd : ' + JSON.stringify(jwt_payload));
+        User.findOne({id: jwt_payload.id, username: jwt_payload.username}, function(err, user) {
+            if (err) {
+                return done(err, false);
+            }
+            if (user) {
+                console.log('jwt_payloadddd : ' + JSON.stringify(jwt_payload));
 
-        console.log('useruseruser : ' + JSON.stringify(user));
-        done(null, user);
-      } else {
-        done(null, false);
-      }
-    });
-  }));
+                console.log('useruseruser : ' + JSON.stringify(user));
+                done(null, user);
+            } else {
+                done(null, false);
+            }
+        });
+    }));
 };

key.pem

@@ -0,0 +1,30 @@
+-----BEGIN ENCRYPTED PRIVATE KEY-----
+MIIFDjBABgkqhkiG9w0BBQ0wMzAbBgkqhkiG9w0BBQwwDgQI2ageDL+kG3ECAggA
+MBQGCCqGSIb3DQMHBAinTDh5LNEiDgSCBMg390hb8fc1XecIlPO/E/7NnLGvYLn4
+AuQoF/SLkDxLzQj5oeDRxbVNCi9CqEai8VtqyvzBzDd7RlBRH2kwm219/02MzKD2
+Ef3rqx18LLZYXzJhUNGdJ4ShUWhh1CMiSnpM+MK47bXVH9ElBxQve0dmoMx6i/KR
+cfNJb3fvcV+CM7MdYKnozGCODQwe/PHvZ+8lLyq5i/Jw6sWXtt4ud+yHEe4jJVyd
+6hZjvBjEJyX+9cx4/3hKt9g3W8Qkqc7YUO3ujP59Yfdycpapql6XqLTKUt8xZ3Av
+XXS+Mjlhehjm7Qwb/k7LnPRua4JoC/NdA4F5Oj/hF2mjla7Usut5HRhngAf0LjF3
+sGGyUXxh8SxJnvpt2jdpBxvgizEGMuoVtvyAoddmsxeYVs33gV5tYJpWFKt3zndZ
+5hOTh8Pdnhb/BrmCsJkFH972FGRKCRHcetIY/kNih0naJ/kmLVDjKIT3fPTLpGcN
+Tqbfbn+ZTa8InlUYCgouZAwR3Shu0NjllgcdrxRC+cj/e4Of9ikOTZ0B3LqulEU4
+yxsuktLuKwneROE0nUj47l1UaEY3Yjxp4UiUyV5QLlR2NbrI9Dm4Y8H2+HWMd3iw
+jxnk5MgV4EkyEXi4wwevPLzGjhkEMgqk5W0+DQHOkoOFbB5XaIAo4EyCtfemtiV7
+HJPsDe83pTBHxXgvTMRY4NQKcEc3VM5TR5wc4I3TZBjb8fbHjHpYPIafA5ai+mcH
+7xpaCxydaEP5+rftU4Fs+9aC035Tqc5fIpgGE3m2wFplrjmcseI73clsEuq535nx
+KK1kt/i8sYQhrAKgrbQ/G10mFi7fQnDwF9a3bYc4mhSQafSyOtlCh4R+mIhAswa4
+N4rxrjflLerBHesmWlH5GiGGUjxwOQlCIzpC2MrpLEfqvKlYx6LycUTyjXJVLkFe
+8U/ERfuw5I9WYcPe76zWj+bsMp/ADurtHhGpJ+8twF+FyLkpjLjWBQjc9K9VA3mc
+CHkDVkQ/tbABnaEvFIe/wSj3Sfea57G/0mAiJdjkeRA6tP0BUAaGJZ1ZzdfIuZ4D
+OtoC3F5SiRF1165fYIeLRY4YWd3SNk+rg9f3Xmu3+MgGEVU3iGAIgB1LCSBfbX4E
+2wggDcOyqLzAU03Ud06vPHt8jDZZ031vWAnnFgtVfLKbmLmYEIbzDuGdd5R06SiX
+4fVAx5uoumYlceNu26sFt9+K1CD65AQrnFCknLCXnSuSvCaU+Ua/VubaoFVW3Ran
+a1y503pnyuAXQI8bwMjFL82jnVmXL9gSioS2W1kKe2B+K5qs1b+6XUyLhzxv6lqd
+R4h7uJqAaM8lfx9PlVYR0eSAfPYjaWw49fu5NAp13V2au91SdAbr4soXiSMAZ+fG
+PdJfwCNHolhDiwJa4mXEEYQrj9+lc7Q7Zu3OxLh8p1V7he7Vt5X9EZqzWb4W8vx+
+EiK8IkmcVnx/5eeUABedqb+4iih0Y9C6/0Fs0lJo46fzDoyjY/ZFtPQhe2Krou86
+ym0a8vn2sO+nPHI18DP76TQThvqezp5npgaRHBBJI2lWBlPvFKzbzYPgORlKUQSq
+XbZndd/mjLv73pnYkuyY3tInNdge956zQil9ib9tarfdY7EpjZPsnfrO4UNxcOFz
+EVk=
+-----END ENCRYPTED PRIVATE KEY-----

models/ChuckFileSaveMongo.js

@@ -0,0 +1,31 @@
+var mongoose = require('mongoose');
+var Schema = mongoose.Schema;
+
+var ChunkFileSaveMongo = new Schema({
+    uid: {
+        type: String,
+        unique: false
+    },
+    fieldname: {
+        type: String,
+        unique: false
+    },
+    files_id: {
+        type: String,
+        unique: false
+    },
+    n: {
+        type: String,
+        unique: false
+    },
+    data: {
+        type: String,
+        unique: false
+    },
+    id: {
+        type: String,
+        unique: false
+    }
+});
+
+module.exports = mongoose.model('ChunkFileSaveMongo', ChunkFileSaveMongo, 'fs.chunks');

models/ChunkFileSaveMongo.js

@@ -0,0 +1,30 @@
+var mongoose = require('mongoose');
+var Schema = mongoose.Schema;
+
+var ChunkFileSaveMongo = new Schema({
+    uid: {
+        type: String,
+        unique: false
+    },
+    fieldname: {
+        type: String,
+        unique: false
+    },
+    files_id: {
+        type: String,
+        unique: false
+    },
+    n: {
+        type: String,
+        unique: false
+    },
+    data: [{
+        type: String
+    }],
+    id: {
+        type: String,
+        unique: false
+    }
+});
+
+module.exports = mongoose.model('ChunkFileSaveMongo', ChunkFileSaveMongo, 'fs.chunks');

models/FileMongo.js

@@ -2,34 +2,42 @@ var mongoose = require('mongoose');
 var Schema = mongoose.Schema;
 
 var FileMongoShema = new Schema({
-  uid: {
-    type: String,
-    unique: false
-  },
-  name: {
-    type: String,
-    unique: false
-  },
-  path: {
-    type: String,
-    unique: false
-  },
-  extention: {
-    type: String,
-    unique: false
-  },
-  taille: {
-    type: String,
-    unique: false
-  },
-  idUser: {
-    type: String,
-    unique: false
-  },
-  owner: {
-    type: String,
-    unique: false
-  }
+    uid: {
+        type: String,
+        unique: false
+    },
+    name: {
+        type: String,
+        unique: false
+    },
+    path: {
+        type: String,
+        unique: false
+    },
+    type: {
+        type: String,
+        unique: false
+    },
+    taille: {
+        type: String,
+        unique: false
+    },
+    idUser: {
+        type: String,
+        unique: false
+    },
+    owner: {
+        type: String,
+        unique: false
+    },
+    lastDate: {
+        type: String,
+        unique: false
+    },
+    url: {
+      type: String,
+      unique: false
+    }
 });
 
 module.exports = mongoose.model('FileMongo', FileMongoShema);

models/FileSaveMongo.js

@@ -0,0 +1,63 @@
+var mongoose = require('mongoose');
+var Schema = mongoose.Schema;
+
+var FileSaveMongoShema = new Schema({
+    uid: {
+        type: String,
+        unique: false
+    },
+    fieldname: {
+        type: String,
+        unique: false
+    },
+    originalname: {
+        type: String,
+        unique: false
+    },
+    encoding: {
+        type: String,
+        unique: false
+    },
+    mimetype: {
+        type: String,
+        unique: false
+    },
+    id: {
+        type: String,
+        unique: false
+    },
+    filename: {
+        type: String,
+        unique: false
+    },
+    metadata: {
+        type: String,
+        unique: false
+    },
+    bucketName: {
+        type: String,
+        unique: false
+    },
+    chunkSize: {
+        type: String,
+        unique: false
+    },
+    size: {
+        type: String,
+        unique: false
+    },
+    md5: {
+        type: String,
+        unique: false
+    },
+    uploadDate: {
+        type: String,
+        unique: false
+    },
+    contentType: {
+        type: String,
+        unique: false
+    }
+});
+
+module.exports = mongoose.model('FileSaveMongo', FileSaveMongoShema, 'fs.files');

models/FolderMongo.js

@@ -0,0 +1,51 @@
+var mongoose = require('mongoose');
+var Schema = mongoose.Schema;
+
+var FolderMongoShema = new Schema({
+    uid: {
+        type: String,
+        unique: false
+    },
+    name: {
+        type: String,
+        unique: false
+    },
+    path: {
+        type: String,
+        unique: false
+    },
+    taille: {
+        type: String,
+        unique: false
+    },
+    parent: {
+        type: String,
+        unique: false
+    },
+    fileList: {
+        type: [],
+        unique: false
+    },
+    folderList: {
+        type: [],
+        unique: false
+    },
+    idUser: {
+        type: String,
+        unique: false
+    },
+    owner: {
+        type: String,
+        unique: false
+    },
+    lastDate: {
+        type: String,
+        unique: false
+    },
+    createDate: {
+        type: String,
+        unique: false
+    }
+});
+
+module.exports = mongoose.model('FolderMongo', FolderMongoShema);

models/User.js

@@ -3,17 +3,41 @@ var Schema = mongoose.Schema;
 var bcrypt = require('bcrypt-nodejs');
 
 var UserSchema = new Schema({
-  username: {
-    type: String,
-    unique: true,
-    required: true
-  },
-  password: {
-    type: String,
-    required: true
-  }
+
+    name: String,
+    userid: String,
+    updated_at: { type: Date, default: Date.now },
+    username: {
+        type: String,
+        unique: true,
+        required: true
+    },
+    password: {
+        type: String,
+        required: false
+    },
+    social: {
+        type: Boolean,
+        required: false
+    }
 });
 
+// UserSchema.statics.findOrCreate = function findOneOrCreate(condition, callback) {
+//     console.log(JSON.stringify(condition));
+//     const self = this;
+//     self.findOne(condition, (err, result) => {
+//         return result ? callback(err, result) : self.create(condition, (err, result) => {
+//             return callback(err, result)
+//         })
+//     })
+// };
+
+
+UserSchema.statics.findOneOrCreate = function(displayName, cb){
+    console.log('findOneOrCreate'+displayName);
+    return (displayName ? this.find({name: displayName}, cb) : this.findOne({}, cb)).then(page => page ? page : this.create({}, cb))
+};
+
 UserSchema.pre('save', function (next) {
   var user = this;
   if (this.isModified('password') || this.isNew) {
@@ -43,4 +67,4 @@ UserSchema.methods.comparePassword = function (passw, cb) {
   });
 };
 
-module.exports = mongoose.model('User', UserSchema);
+ module.exports = mongoose.model('User', UserSchema);

package.json

@@ -4,12 +4,13 @@
   "license": "custom",
   "scripts": {
     "ng": "ng",
-    "start": "ng build && node ./bin/www",
-    "build": "ng build --prod",
+    "start": "npm run build & concurrently --kill-others \"npm run serve-api\" \"npm run serve\"",
+    "serve": "ng serve --proxy-config proxy.conf.json",
+    "serve-api": "node ./bin/www",
+    "build": "ng build --output-path=other",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "aot:build": "ng build --prod --sm=false --aot=true --output-path=dist",
     "pre-commit": "ng lint"
   },
   "private": true,
@@ -24,6 +25,7 @@
     "@angular/platform-browser": "^6.0.0-rc.1",
     "@angular/platform-browser-dynamic": "^6.0.0-rc.1",
     "@angular/router": "^6.0.0-rc.1",
+    "@schematics/angular": "^0.6.0",
     "@types/form-data": "^2.2.1",
     "bcrypt-nodejs": "0.0.3",
     "bluebird": "^3.5.1",
@@ -32,28 +34,38 @@
     "classlist.js": "1.1.x",
     "core-js": "2.4.x",
     "del": "3.0.x",
+    "dropzone": "^5.4.0",
     "easy-pie-chart": "2.1.x",
     "express": "^4.16.2",
     "express-fileupload": "^0.4.0",
+    "express-session": "^1.15.6",
+    "find-or-create": "^1.1.0",
     "font-awesome": "4.7.x",
     "form-data": "^2.3.2",
     "gulp": "^3.9.1",
     "gulp-rename": "1.2.x",
     "gulp-run": "1.7.x",
     "hammerjs": "2.0.x",
+    "jade": "^1.11.0",
     "jsonwebtoken": "^8.1.1",
     "mongoose": "^5.0.7",
     "morgan": "^1.9.0",
     "multer": "^1.3.0",
     "ng-html-util": "1.0.x",
     "ngm-cli": "0.5.x",
+    "ngx-dropzone-wrapper": "^6.0.0",
     "passport": "^0.4.0",
+    "passport-facebook": "^2.1.1",
+    "passport-github": "^1.1.0",
+    "passport-google-oauth": "^1.0.0",
     "passport-jwt": "^3.0.1",
+    "pug": "^2.0.3",
     "rxjs": "^6.0.0-rc.1",
     "rxjs-compat": "^6.0.0-rc.1",
     "screenfull": "3.3.x",
     "serve-favicon": "^2.4.5",
     "smoothscroll-polyfill": "0.3.x",
+    "videogular2": "^6.1.1",
     "web-animations-js": "2.3.x",
     "zone.js": "0.8.x"
   },

proxy.conf.json

@@ -0,0 +1,6 @@
+{
+  "/api": {
+    "target": "http://localhost:3000",
+    "secure": false
+  }
+}

routes/api.js

@@ -2,200 +2,367 @@ var mongoose = require('mongoose');
 var passport = require('passport');
 var config = require('../config/database');
 require('../config/passport')(passport);
+//require('../auth/facebook')(passport);
 var express = require('express');
 var jwt = require('jsonwebtoken');
 var router = express.Router();
 var User = require("../models/user");
 var FileMongo = require("../models/FileMongo");
+var FolderMongo = require("../models/FolderMongo");
 var Book = require("../models/book");
-
+var fs = require('fs');
 var multer = require('multer');
 var upload = multer({ dest: './public/' });
 
+var passportFacebook = require('../auth/facebook');
+var passportGoogle = require('../auth/google');
+var passportGitHub = require('../auth/github');
+
+
+// recuperer l'extention d'un fichier en fonction de son nom, par exemple : exemple.pdf recupera juste ".pdf"
+getStringExtention = function(monFile){
+    return ( monFile.name.indexOf('.') > 0 ) ? '.' + monFile.name.split('.').pop().toLowerCase() : '';
+};
+
+/* creation Token */
+getToken = function (headers) {
+    if (headers && headers.authorization) {
+        var parted = headers.authorization.split(' ');
+        if (parted.length === 2) {
+            return parted[1];
+        } else {
+            return null;
+        }
+    } else {
+        return null;
+    }
+};
+
+
+
+router.use(function(req, res, next) {
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
+    res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
+    res.setHeader('Access-Control-Allow-Credentials', true);
+    next();
+});
 /* GET home page. */
 router.get('/', function(req, res, next) {
-  res.send('Express RESTful API');
+    res.send('Express RESTful API');
 });
 
-
+//inscription email/password le username est l'email
 router.post('/signup', function(req, res) {
-  if (!req.body.username || !req.body.password) {
-    res.json({success: false, msg: 'Please pass username and password.'});
-  } else {
-    var newUser = new User({
-      username: req.body.username,
-      password: req.body.password
-    });
-    // save the user
-    newUser.save(function(err) {
-      if (err) {
-        return res.json({success: false, msg: 'Username already exists.'});
-      }
-      res.json({success: true, msg: 'Successful created new user.'});
-    });
-  }
+    if (!req.body.username || !req.body.password) {
+        res.json({success: false, msg: 'Please pass username and password.'});
+    } else {
+        var newUser = new User({
+            username: req.body.username,
+            password: req.body.password
+        });
+        // save the user
+        newUser.save(function(err) {
+            if (err) {
+                return res.json({success: false, msg: 'Username already exists.'});
+            }
+            res.json({success: true, msg: 'Successful created new user.'});
+        });
+    }
 });
 
 /* SAVE FILE */
 router.post('/uploadFileMongo', function(req, res, next) {
-  console.log('req.body:  :: ' + req.body.uid);
-  FileMongo.create(req.body, function (err, post) {
-    if (err){
-      console.log('err:  :: ' + err);
-      return next(err);
-    }
-    res.json(post);
-  });
+    FileMongo.create(req.body, function (err, post) {
+        if (err){
+            return next(err);
+        }
+        res.json(post);
+    });
 });
 
-/* DELETE FILE */
-router.post('/deleteFileMongo', function(req, res, next) {
+/* SAVE URL FILE */
+router.post('/saveURLFileMongo', function(req, res, next) {
+    FileMongo.findOneAndUpdate({_id : req.body._id, owner: req.body.owner}, {url: req.body.url},{new: true}).then((data) =>{
+        if(data === null){
+            throw new Error('File Not Found');
+        }
+        res.json({ message: 'File updated!' });
+    }).catch( (error) => {
+        //Deal with all your errors here with your preferred error handle middleware / method
+        res.status(500).json({ message: 'Some Error!' });
+        console.log(error);
+    });
+});
 
-  FileMongo.remove(req.body, function (err, post) {
-    if (err){
-      return next(err);
-    }
-    res.json(post);
-  });
+/* SAVE FOLDER */
+router.post('/createFolder', function(req, res, next) {
+    FolderMongo.create(req.body, function (err, post) {
+        if (err){
+            return next(err);
+        }
+        res.json(post);
+    });
 });
 
-router.post('/signin', function(req, res) {
-  User.findOne({
-    username: req.body.username
-  }, function(err, user) {
-    if (err) throw err;
 
-    if (!user) {
-      res.status(401).send({success: false, msg: 'Authentication failed. User not found.'});
-    } else {
-      // check if password matches
-      user.comparePassword(req.body.password, function (err, isMatch) {
-        if (isMatch && !err) {
-          console.log('req.user.username logggggg ::: ' + JSON.stringify(user));
-          // if user is found and password is right create a token
-          var token = jwt.sign(user.toJSON(), config.secret);
-          // return the information including token as JSON
-          res.json({success: true, token: 'JWT ' + token});
-        } else {
-          res.status(401).send({success: false, msg: 'Authentication failed. Wrong password.'});
+
+/* DELETE FILE */
+router.post('/deleteFileMongo', function(req, res, next) {
+    console.log(JSON.stringify(req.body));
+    FileMongo.remove({_id : req.body._id, name: req.body.name, owner: req.body.owner}, function (err, post) {
+        if (err){
+
+            return next(err);
         }
-      });
-    }
-  });
+        //Delete file multer dans Public
+        fs.unlink('./public/' + req.body._id + getStringExtention(req.body));
+
+        res.json(post);
+
+    });
 });
 
+/* DELETE FOLDER */
+router.post('/deleteFolderMongo', function(req, res, next) {
+    FolderMongo.remove({_id : req.body._id, name: req.body.name, owner: req.body.owner}, function (err, post) {
+        if (err){
+            return next(err);
+        }
+        res.json(post);
 
-router.post('/book', passport.authenticate('jwt', { session: false}), function(req, res) {
-  var token = getToken(req.headers);
-  if (token) {
+    });
+});
 
-    var newBook = new Book({
-      isbn: req.body.isbn,
-      title: req.body.title,
-      author: req.body.author,
-      publisher: req.body.publisher
+/* Rename FOLDER */
+router.post('/renameFolderMongo', function(req, res, next) {
+    FolderMongo.findOneAndUpdate({_id : req.body._id, owner: req.body.owner}, {name: req.body.name},{new: true}).then((data) =>{
+        if(data === null){
+            throw new Error('Folder Not Found');
+        }
+        res.json({ message: 'Folder updated!' });
+    }).catch( (error) => {
+        //Deal with all your errors here with your preferred error handle middleware / method
+        res.status(500).json({ message: 'Some Error!' });
+        console.log(error);
     });
+});
 
-    newBook.save(function(err) {
-      if (err) {
-        return res.json({success: false, msg: 'Save book failed.'});
-      }
-      res.json({success: true, msg: 'Successful created new book.'});
+/* Move Folder */
+router.post('/moveFolder', function(req, res, next) {
+    FolderMongo.findOneAndUpdate({_id : req.body._id, owner: req.body.owner}, {path: req.body.path, parent: req.body.parent},{new: true}).then((data) =>{
+        if(data === null){
+            throw new Error('Folder Not Found');
+        }
+        res.json({ message: 'Folder updated!' });
+    }).catch( (error) => {
+        //Deal with all your errors here with your preferred error handle middleware / method
+        res.status(500).json({ message: 'Some Error!' });
+        console.log(error);
     });
-  } else {
-    return res.status(403).send({success: false, msg: 'Unauthorized.'});
-  }
 });
-/*
-router.post('/book/file', function(req, res) {
-  if(req.files){
-    //var file = req.files.filename;
-    //var filename = req.files.filename.name;
 
-    console.log(req.files);
-  }
+/* Move File */
+router.post('/moveFile', function(req, res, next) {
+    FileMongo.findOneAndUpdate({_id : req.body._id, owner: req.body.owner}, {path: req.body.path},{new: true}).then((data) =>{
+        if(data === null){
+            throw new Error('File Not Found');
+        }
+        res.json({ message: 'File updated!' });
+    }).catch( (error) => {
+        //Deal with all your errors here with your preferred error handle middleware / method
+        res.status(500).json({ message: 'Some Error!' });
+        console.log(error);
+    });
 });
-*/
-const storage = multer.diskStorage({
-  destination: function (req, file, cb) {
-    cb(null, './public/')
-  },
-  filename: function (req, file, cb) {
-    cb(null, file.originalname)
-  }
+
+
+/* Rename FILE */
+router.post('/renameFileMongo', function(req, res, next) {
+    FileMongo.findOneAndUpdate({_id : req.body._id, owner: req.body.owner}, {name: req.body.name},{new: true}).then((data) =>{
+        if(data === null){
+            throw new Error('File Not Found');
+        }
+        res.json({ message: 'File updated!' });
+    }).catch( (error) => {
+        //Deal with all your errors here with your preferred error handle middleware / method
+        res.status(500).json({ message: 'Some Error!' });
+        console.log(error);
+    });
 });
 
-//post qui va stocker la photo du user ajoute dans le register , multer permet de definir le dossier serveur dans lequel seront stockes les photos
-router.post('/upload' , multer({storage: storage}).array("public[]", 12) ,function(req,res,next){
+/* Get Current folder */
+router.post('/getMainFolder', function(req, res) {
+    FolderMongo.findOne({
+        path: req.body.path,
+        owner: req.body.owner
+    }, function(err, folder) {
+        res.json(folder);
+    });
 
-  console.log("req.files[0].fieldname: "+req.files[0].fieldname);//ok
-  console.log("req.files[0].originalname: "+req.files[0].originalname);//ok
-  console.log("req.files.filename: "+req.files[0].filename);//ok
-  console.log("req.files.path: "+req.files[0].path);//ok
-  console.log("req.files.size: "+req.files[0].size);//ok
-  res.send(req.files);
+});
+
+/* Get tout les folders du mainFolder */
+router.post('/getFolderList', function(req, res) {
+    FolderMongo.find({
+        parent: req.body.mainPath,
+        owner: req.body.owner
+    }, function(err, folder) {
+        res.json(folder);
+    });
 
 });
 
-router.get('/allUserFile', passport.authenticate('jwt', { session: false}), function(req, res) {
-  var token = getToken(req.headers);
+/* Get tout les folders du user */
+router.post('/getFolderAppList', function(req, res) {
+    FolderMongo.find({
+        owner: req.body.owner
+    }, function(err, folder) {
+        res.json(folder);
+    });
+});
 
-  if (token) {
-    console.log('oooooo : ' + req.user._id + ' ::: kaka : ' + req.user.username);
+/* Get tout les files du user */
+router.post('/getFileAppList', function(req, res) {
     FileMongo.find({
-      idUser: req.user._id,
-      owner: req.user.username
+        owner: req.body.owner
     }, function(err, file) {
-      console.log('userrrr baa : ' + JSON.stringify(file));
-      res.json(file);
+        res.json(file);
     });
-  } else {
-    return res.status(403).send({success: false, msg: 'Unauthorized.'});
-  }
 });
 
+/* Get tout les files du mainFolder */
+router.post('/getFileList', function(req, res) {
+    FileMongo.find({
+        path: req.body.mainPath,
+        owner: req.body.owner
+    }, function(err, files) {
+        res.json(files);
+    });
 
-router.get('/book', passport.authenticate('jwt', { session: false}), function(req, res) {
-  var token = getToken(req.headers);
+});
+router.post('/getUserById', function(req, res) {
+    User.findOne({
+        _id: req.body.id
+    }, function (err, user) {
+        res.json(user);
 
-  if (token) {
-    console.log('oooooo : ' + req.user._id + ' ::: kaka : ' + req.user.username);
+    });
+});
+router.post('/getFileById', function(req, res) {
+    console.log('yaa' + req.body.id);
     FileMongo.find({
-      idUser: req.user._id,
-      owner: req.user.username
-    }, function(err, file) {
-      console.log('userrrr baa : ' + JSON.stringify(file));
-        });
-    console.log('req.user.username yiiiiii ::: ' + req.user.username);
-    res.json(req.user);
-    /*
-    Book.find(function (err, books) {
-      if (err) return next(err);
-      res.json(books);
-    });*/
-  } else {
-    return res.status(403).send({success: false, msg: 'Unauthorized.'});
-  }
+        _id: req.body.id
+    }, function (err, file) {
+        res.json(file);
+
+    });
 });
+/* Login */
+router.post('/signin', function(req, res) {
+    User.findOne({
+        username: req.body.username
+    }, function(err, user) {
+        if (err) throw err;
 
-router.get('/book/file',  function(req, res) {
+        if (!user) {
+            res.status(401).send({success: false, msg: 'Authentication failed. User not found.'});
+        } else {
+            // check if password matches
+            user.comparePassword(req.body.password, function (err, isMatch) {
+                if (isMatch && !err) {
+                    console.log('user logged : ' + JSON.stringify(user));
+                    // if user is found and password is right create a token
+                    var token = jwt.sign(user.toJSON(), config.secret);
+                    // return the information including token as JSON
+                    res.json({success: true, token: 'JWT ' + token});
+                } else {
+                    res.status(401).send({success: false, msg: 'Authentication failed. Wrong password.'});
+                }
+            });
+        }
+    });
+});
 
-  res.sendFile(__dirname + '/api/book');
+/* config multer dossier cible et nom du file : enregistrement du fichier dans le dossier public*/
+const storage = multer.diskStorage({
+    destination: function (req, file, cb) {
+        cb(null, './public/')
+    },
+    filename: function (req, file, cb) {
+        cb(null, file.originalname)
+    }
+});
 
+/* Multer upload */
+router.post('/upload' , multer({storage: storage, limits: {fileSize: 30000000000}}).array("public[]", 12) ,function(req,res,next){
+    res.send(req.files);
 });
 
+/* Get utilisateur courant */
+router.get('/getCurrentUser', passport.authenticate('jwt'), function(req, res) {
+    var token = getToken(req.headers);
 
-getToken = function (headers) {
-  if (headers && headers.authorization) {
-    var parted = headers.authorization.split(' ');
-    if (parted.length === 2) {
-      return parted[1];
+    if (token) {
+        res.json(req.user);
     } else {
-      return null;
+        return res.status(403).send({success: false, msg: 'Unauthorized.'});
     }
-  } else {
-    return null;
-  }
-};
+});
+
+
+
+
+
+/* GET users listing. */
+router.get('/', ensureAuthenticated, function(req, res, next) {
+    res.render('user', { user: req.user });
+});
+
+function ensureAuthenticated(req, res, next) {
+    if (req.isAuthenticated()) { return next(); }
+    res.redirect('/api/login');
+}
+/* FACEBOOK ROUTER */
+router.get('/facebook', passportFacebook.authenticate('facebook'),
+    function(req, res) {
+        console.log('facebook user : '+ req.user );
+        // Successful authentication, redirect home.
+        res.json({user: req.user});
+});
+
+router.get('/facebook/callback', passportFacebook.authenticate('facebook'),
+    function(req, res) {
+        console.log('facebook user : '+ req.user );
+        JSON.stringify(req.user);
+        var myUser = req.user.toString();
+        //res.json({user: myUser});
+        res.redirect('/main/'+req.user._id);
+        // Successful authentication, redirect home.
+
+});
+
+
+/* GOOGLE ROUTER */
+router.get('/google', passportGoogle.authenticate('google', { scope: 'https://www.google.com/m8/feeds' }));
+
+router.get('/google/callback', passportGoogle.authenticate('google', { successRedirect : '/', failureRedirect: '/login' }), function(req, res) {
+    res.redirect('/');
+});
+router.get('/google',
+    passport.authenticate('google', { scope: ['read_stream', 'publish_actions'] })
+);
+
+/* GITHUB ROUTER */
+router.get('/github', passportGitHub.authenticate('github', { scope: [ 'user:email' ] }));
+
+router.get('/auth/github/callback', passportGitHub.authenticate('github', { successRedirect : '/', failureRedirect: '/login' }), function(req, res) {
+    // Successful authentication, redirect home.
+    res.redirect('/');
+});
+router.get('/github',
+    passport.authenticate('github', { scope: ['read_stream', 'publish_actions'] })
+);
+
 
 module.exports = router;

src/app/app.module.ts

@@ -16,10 +16,44 @@ import { SignupComponent } from './signup/signup.component';
 import { BookComponent } from './book/book.component';
 
 import { RouterModule, Routes } from '@angular/router';
+import { MainComponent } from './main/main.component';
+
+
+import {VgCoreModule} from 'videogular2/core';
+import {VgControlsModule} from 'videogular2/controls';
+import {VgOverlayPlayModule} from 'videogular2/overlay-play';
+import {VgBufferingModule} from 'videogular2/buffering';
+
+// import { DropzoneModule } from 'dropzone';
+// import {SingleMediaPlayer} from './single-media-player';
+
+import { DropzoneModule } from 'ngx-dropzone-wrapper';
+import { DROPZONE_CONFIG } from 'ngx-dropzone-wrapper';
+import { DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
+import { HomeComponent } from './home/home.component';
+import { DownloadLinkComponent } from './download-link/download-link.component';
+
+
+const DEFAULT_DROPZONE_CONFIG: DropzoneConfigInterface = {
+    // Change this to your upload POST address:
+    url: 'https://httpbin.org/post',
+    //acceptedFiles: 'image/*',
+    createImageThumbnails: true
+};
 
 const appRoutes: Routes = [
     {
-        path: 'books/:tokenFromLogin',
+        path: 'home',
+        component: HomeComponent,
+        data: { title: 'home' }
+    },
+    {
+        path: 'main/:id',
+        component: MainComponent,
+        data: { title: 'Main' }
+    },
+    {
+        path: 'books',
         component: BookComponent,
         data: { title: 'Book List' }
     },
@@ -33,39 +67,57 @@ const appRoutes: Routes = [
         component: SignupComponent,
         data: { title: 'Sign Up' }
     },
+    {
+        path: 'download/:id',
+        component: DownloadLinkComponent ,
+        data: { title: 'download' }
+    },
     { path: '',
-        redirectTo: '/login',
+        redirectTo: '/home',
         pathMatch: 'full'
     }
 ];
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    LoginComponent,
-    SignupComponent,
-    BookComponent
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    FormsModule,
-    HttpModule,
-    HttpClientModule,
-    RouterModule.forRoot(
-        appRoutes,
-        { enableTracing: true } // <-- debugging purposes only
-    ),
-    ToastModule.forRoot(),
-    MDBBootstrapModule.forRoot(),
-    MDBBootstrapModulePro.forRoot(),
-    AgmCoreModule.forRoot({
-      // https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en#key
-      apiKey: 'Your_api_key'
-    })
-  ],
-  providers: [MDBSpinningPreloader],
-  bootstrap: [AppComponent],
-  schemas:      [ NO_ERRORS_SCHEMA ]
+    declarations: [
+        AppComponent,
+        HomeComponent,
+        LoginComponent,
+        SignupComponent,
+        MainComponent,
+        BookComponent,
+        DownloadLinkComponent
+    ],
+    imports: [
+        BrowserModule,
+        DropzoneModule,
+        VgCoreModule,
+        VgControlsModule,
+        VgOverlayPlayModule,
+        VgBufferingModule,
+        BrowserAnimationsModule,
+        FormsModule,
+        HttpModule,
+        HttpClientModule,
+        RouterModule.forRoot(
+            appRoutes,
+            { enableTracing: false } // <-- debugging purposes only
+        ),
+        ToastModule.forRoot(),
+        MDBBootstrapModule.forRoot(),
+        MDBBootstrapModulePro.forRoot(),
+        AgmCoreModule.forRoot({
+            // https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en#key
+            apiKey: 'Your_api_key'
+        })
+    ],
+    providers: [
+        MDBSpinningPreloader,
+        {
+            provide: DROPZONE_CONFIG,
+            useValue: DEFAULT_DROPZONE_CONFIG
+        }],
+    bootstrap: [AppComponent],
+    schemas:      [ NO_ERRORS_SCHEMA ]
 })
 export class AppModule { }

src/app/book/book.component.css

@@ -0,0 +1,208 @@
+.topcard {
+    padding-top: 1%;
+}
+
+.topButtons {
+    margin-top: 2%;
+}
+
+.topButtonsRow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.app-title {
+    font-size: 24px;
+}
+
+.box-title {
+    font-size: 20px;
+}
+
+.box-container {
+    /*display: none;*/
+    /*position: fixed;*/
+    box-sizing: border-box;
+    /*margin-left: 2%;*/
+    border-radius: 4px;
+    opacity: 0.7;
+    color: #555;
+    background-color: #eee;
+    box-shadow:
+            0 6px 20px rgba(0, 0, 0, 0.18),
+            0 6px 6px rgba(0, 0, 0, 0.25);
+}
+
+.info-container {
+    padding: 12px 16px;
+
+    line-height: 24px;
+}
+
+.action-container,
+.dropzone {
+    position: relative;
+
+    overflow: auto;
+    height: 75%;
+    min-height: 0;
+    padding: 16px;
+    margin: 8px 16px;
+    border-radius: 4px;
+
+    background-color: #fff;
+}
+
+.action-button {
+    box-sizing: border-box;
+    width: calc(100% - 16px);
+    min-height: 35px;
+    padding: 4px 16px;
+    margin: 8px;
+    border: 1px solid #555;
+    border-radius: 4px;
+
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 14px;
+    text-align: center;
+}
+
+.action-button:hover {
+    color: #fff;
+    background-color: #555;
+}
+
+.dropzone-container {
+    height: 100%;
+}
+
+*::after,
+*::before {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box
+}
+html,
+body {
+    font: 100% 'Arimo', sans-serif;
+}
+.filter-wrapper,
+.keyword-wrapper {
+    display: flex;
+    justify-content: center;
+}
+.filter-wrapper {
+    min-height: 100%;
+    flex-flow: column wrap;;
+    position: relative
+}
+.keyword-wrapper {
+    width: 100%;
+    position: relative;
+}
+#keyword {
+    border: 1px solid #ccc;
+    padding: 10px;
+    font: 1.5em 'Arimo', sans-serif;
+    width: 50%;
+    outline: none;
+    transition: border 0.5s ease-in-out
+}
+#keyword:focus {
+    border-color : rgba(81, 203, 238, 1);;
+}
+#keyword-button {
+    position: absolute;
+    right: 26%;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 1.7em;
+    color: #8DB9ED
+}
+#keyword-button:hover {
+    color: #ccc
+}
+.filter-select {
+    width: 50%;
+    list-style: none;
+    font-size: 1.1em;
+    color: rgb(105, 105, 105);
+    border: 1px solid #ccc;
+    border-top: none;
+    /*so things don't jump around*/
+    position: absolute;
+    left: 25%;
+    top: calc(50% + 25px);
+    max-height: calc(50% - 15px);
+    overflow-y: auto;
+    background: #fff
+}
+.filter-select-list img {
+    margin-right: 30px;
+}
+.tags {
+    font-size: 12px;
+    font-style: italic;
+    color: #c6c6c6;
+    margin-right: 10px;
+    position: relative;
+    top: -10px;
+}
+.filter-select-list:hover .tags {
+    color: #fff;
+}
+.filter-select-list {
+    cursor: pointer;
+    padding: 5px 10px;
+}
+.artist-name {
+    display: inline-block;
+    position: absolute;
+}
+.filter-select-list:hover {
+    background:  #C0C0C0;
+    color: #fff
+}
+.list-highlight,
+.list-highlight:hover {
+    background: rgb(55, 55, 55);
+    color: #fff
+}
+@media only screen and (max-width: 768px) {
+    .filter-select,
+    #keyword {
+        width: 80%;
+    }
+    #keyword {
+        font-size: 1.3em
+    }
+    .filter-select {
+        font-size: 0.9em;
+        left: 10%;
+        top: calc(50% + 23px);
+    }
+    #keyword-button {
+        right: 11%
+    }
+}
+@media only screen and (max-width: 480px) {
+    .filter-select,
+    #keyword {
+        width: 95%;
+    }
+    .filter-select {
+        left: 2.5%;
+    }
+    #keyword-button {
+        right: 3.5%
+    }
+}
+
+#cookiesModal {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+

src/app/book/book.component.html

@@ -1,54 +1,489 @@
-<div class="container">
-  <h1>File Listttt <button class="btn btn-success" (click)="logout()">Logout</button></h1>
-  <table class="table">
+
+
+<div class="container-fluid">
+    <div *ngIf="mainFolder" class="card d-print-inline-flex text-center topcard">
+        <div class="row">
+            <div class="col-md-4 card-text">
+                <p> <strong>Current Folder :</strong> {{mainFolder?.name}}</p>
+            </div>
+            <div class="col-md-4 card-text">
+                <p> <strong>Used space :</strong> {{sizeFile.toString() === '0' ? '0' :  (sizeFile/ ( 1024 * 1024 ) | number : '1.2-2')}} Mo / 30 Go</p>
+            </div>
+            <div class="col-md-4 card-text">
+                <p> <strong>Path :</strong> {{mainFolder?.path}}</p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-12">
+                <div class="box-container align-middle" fxLayout="column" [ngStyle.lt-sm]="'min-height: 400;'">
+                    <dropzone *ngIf="type === 'component'" class="dropzone-container" [config]="config" fxLayout="row" fxLayoutAlign="start strech" fxFlex="auto" [message]="'Click or drag file here to upload'" (error)="onUploadError($event)" (success)="onUploadSuccess($event)"></dropzone>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="topButtons">
+
+        <div class="row topButtonsRow">
+            <div class="col-md-8 align-middle l-flex--center">
+                <button type="button" class="btn  btn-primary btn-sm" mdbTooltip="Back To : {{mainFolder?.parent}}" placement="top" (click)="backToParentFolder()" *ngIf="mainFolder?.path !== 'Home'"><i class="fa fa-chevron-left" aria-hidden="true"></i> {{mainFolder?.parent}}</button>
+
+
+                <button type="button" class="btn btn-primary btn-sm" mdbTooltip="Nouveau dossier" placement="top" (click)="createBool()" *ngIf="isClickCreateFolder === false">
+                    <i class="fa fa-plus-circle" aria-hidden="true"><i class="fa fa-folder-o" aria-hidden="true"></i></i>
+                </button>
+
+
+                <div class="md-form input-group" *ngIf="isClickCreateFolder === true">
+                    <div class="input-group-btn">
+                        <button class="btn btn-primary btn-sm waves-light" mdbTooltip="Créer : {{inputCreateFolder}}" placement="top" type="button" mdbWavesEffect (click)="createFolder()">Créer</button>
+                    </div>
+                    <input type="search" class="form-control" placeholder="Nom du nouveau dossier..." [(ngModel)]="inputCreateFolder">
+                </div>
+
+
+                <label class="btn btn-secondary btn-sm" mdbTooltip="Choose a file" placement="top" >
+                    <i class="fa fa-plus-circle" aria-hidden="true"><i class="fa fa-file-o" aria-hidden="true"></i></i>
+                    <input type="file" style="display: none;" #myPicture name="myPicture" (change)="fileChangeEvent($event)">
+                </label>
+                <button *ngIf="fileChooseName !== 'None'" type="button" class="btn btn-default btn-sm" mdbTooltip="Add File : {{fileChooseName}}" placement="top" (click)="upload()" >Add selected file : {{fileChooseName}}</button>
+            </div>
+
+            <div class="col-md-4 align-middle l-flex--center">
+                <!--<form class="md-form active-pink active-pink-2 mb-3">-->
+                <!--<div class="row">-->
+                <!--<i class="fa fa-search" aria-hidden="true"></i>-->
+                <!--<input #query (keyup)="filter(query.value)" type="text" class="form-control form-control-sm ml-3 w-75" placeholder="Search File" aria-label="Search">-->
+                <!--<div class="list-group" *ngFor="let folder of filterAllUserFolder">-->
+                <!--<a class="list-group-item list-group-item-action waves-light" (click)="openFolder(folder.path)" mdbWavesEffect>-->
+                <!--{{folder.name}}-->
+                <!--<br>-->
+                <!--{{folder?.path}}-->
+                <!--</a>-->
+                <!--</div>-->
+                <!--</div>-->
+                <!--</form>-->
+                <mdb-completer [label]="'Find folder'" initialValue="Find folder" (selected)="openFolder('searchStr')" name="autocomplete" [(ngModel)]="searchStr" [datasource]="dataService" [minSearchLength]="0">
+                </mdb-completer>
+            </div>
+        </div>
+    </div>
+
+
+</div>
+<table class="table">
     <thead>
     <tr>
-      <th>ISBN</th>
-      <th>Title</th>
-      <th>Author</th>
-      <th>Publisher</th>
+        <th>#</th>
+        <th>Name</th>
+        <th>Size</th>
+        <th>Type</th>
+        <th>Date added</th>
     </tr>
     </thead>
     <tbody>
-    <tr *ngFor="let book of books">
-      <td>{{ book.isbn }}</td>
-      <td>{{ book.title }}</td>
-      <td>{{ book.author }}</td>
-      <td>{{ book.publisher }}</td>
+    <tr *ngFor="let folder of allUserFolder; let i = index;">
+        <td class="row">
+            <div class="col-md-4">
+                <i class="fa fa-folder fa-2x" aria-hidden="true"></i>
+            </div>
+            <div class="btn-group d-print-inline-flex text-center">
+
+                <!--Dropdown primary-->
+                <div class="dropdown" dropdown>
+
+                    <!--Trigger-->
+                    <button dropdownToggle class="btn btn-primary y btn-sm dropdown-toggle waves-light" type="button" mdbWavesEffect>
+                        <i class="fa fa fa-folder-open" aria-hidden="true"></i>
+                    </button>
+
+                    <!--Menu-->
+                    <div class="dropdown-menu dropdown-primary">
+                        <a class="dropdown-item" mdbTooltip="Ouvrir : {{folder?.name}}" placement="top" (click)="openFolder(folder?.path)">Open Folder</a>
+                        <a class="dropdown-item" mdbTooltip="Supprimer : {{folder?.name}}" placement="top" (click)="deleteFolder(folder)">Delete Folder</a>
+                        <h6 class="dropdown-header">Rename</h6>
+                        <div class="d-print-inline-flex text-center">
+                            <input type="search" class="form-control col-xs-2" placeholder= "{{folder?.name}}" [(ngModel)]="folder.name">
+                            <button class="btn btn-primary btn-sm waves-light" mdbTooltip="Renommer : {{folder.name}}" placement="top" type="button" mdbWavesEffect (click)="renameFolder(folder)">
+                                <i class="fa fa-pencil prefix"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!--/Dropdown primary-->
+
+
+                <div class="btn-group" dropdown>
+                    <button type="button" dropdownToggle class="btn btn-secondary btn-sm dropdown-toggle-split px-3 waves-light" mdbTooltip="Move : {{folder?.name}}" placement="top"  mdbWavesEffect>
+                        <i class="fa fa-arrows" aria-hidden="true"></i>
+                    </button>
+                    <div class="dropdown-menu dropdown-primary">
+                        <a class="dropdown-item" *ngFor="let folderDest of allUserAppFolder; let i = index;" (click)="moveFolder(folder, folderDest)">{{folderDest?.name}}</a>
+                    </div>
+                </div>
+            </div>
+        </td>
+
+        <td>
+            <label>{{folder.name}}</label>
+        </td>
+        <!--<td>{{ folder.name }}</td>-->
+        <td><label></label></td>
+        <td><label>Folder</label></td>
+        <td><label></label></td>
     </tr>
-    </tbody>
-  </table>
-</div>
+    <tr *ngFor="let file of allUserFile; let i = index;">
+        <td class="row">
+            <div class="col-md-4">
+                <i class="fa fa-file fa-2x" aria-hidden="true"></i>
+            </div>
+            <div class="btn-group d-print-inline-flex text-center">
+                <!--Dropdown primary-->
+                <div class="dropdown" dropdown>
+
+                    <!--Trigger-->
+                    <button dropdownToggle class="btn btn-primary btn-sm dropdown-toggle waves-light" type="button" mdbWavesEffect>
+                        <i class="fa fa-edit" aria-hidden="true"></i>
+                    </button>
+
+                    <!--Menu-->
+                    <div class="dropdown-menu dropdown-primary">
+                        <a class="dropdown-item" href="{{file.data}}" download="{{ file.name.toString()}}">Download</a>
+                        <a class="dropdown-item" mdbTooltip="Supprimer : {{file.name}}" placement="top" (click)="deleteFile(file)">Delete</a>
+                        <a class="dropdown-item" (click)="basicModal.show()" mdbWavesEffect>Preview</a>
+                        <a class="dropdown-item" (click)="linkModal.show()" mdbWavesEffect>Download Link</a>
+                        <div class="divider dropdown-divider"></div>
+                        <h6 class="dropdown-header">Rename</h6>
+                        <div class="d-print-inline-flex text-center">
+                            <input type="search" class="form-control col-xs-2" placeholder= "{{file.name}}" [(ngModel)]="file.name">
+                            <button class="btn btn-primary btn-sm waves-light" mdbTooltip="Renommer : {{file.name}}" placement="top" type="button" mdbWavesEffect (click)="renameFile(file)">
+                                <i class="fa fa-pencil prefix"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!--/Modal-->
+                <div mdbModal #basicModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">
+                    <div class="modal-dialog modal-notify info modal-lg" role="document">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
+                                    <span aria-hidden="true">×</span>
+                                </button>
+                                <h4 class="modal-title w-100" id="myModalLabel">Preview</h4>
+                            </div>
+                            <div class="modal-body img-fluid text-center">
+                                <div *ngIf="file.type === ('image/jpeg')">
+                                    <img [src]=file.urlSafe class="img-fluid" width="350" height="200">
+                                </div>
+                                <div *ngIf="file.type === ('image/png')">
+                                    <img [src]=file.urlSafe class="img-fluid" width="350" height="200">
+                                </div>
+                                <div *ngIf="file.type === ('application/pdf')">
+                                    <!--<i class="fa fa-file-pdf-o" aria-hidden="true"></i>-->
+                                    <object [data]=file.urlSafe type="application/pdf"
+                                            width="350" height="200" typemustmatch>
+                                    </object>
+
+                                </div>
+                                <div *ngIf="file.type === ('video/mp4')">
+                                    <!--<i class="fa fa-file-movie-o" aria-hidden="true"></i>-->
+                                    <vg-player style="height: 200px; width: 350px">
+                                        <video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
+                                            <source [src]=file.urlSafe type="video/mp4">
+                                        </video>
+                                    </vg-player>
+                                </div>
+                                <div *ngIf="file.type === ('text/plain')">
+                                    <!--<div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
+                                      <div>{{test}}</div>
+                                      <a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>-->
+                                    <object [data]=file.urlSafe type="text/plain"
+                                            width="350" height="200" typemustmatch>
+                                    </object>
+                                </div>
+                                <div *ngIf="file.type === ''">
+                                    <i class="fa fa-file-o fa-5x" aria-hidden="true" width="350" height="200"></i>
+                                    <!--<object [data]=file.url type="text/plain"
+                                            width="350" height="200" typemustmatch>
+                                    </object>-->
+                                    <!--<div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
+                                      <div>{{test}}</div>
+                                      <a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>-->
+                                </div>
+                                <div *ngIf="(file.type === ('audio/mp3')) || (file.type === ('audio/mpeg'))">
+                                    <!--<i class="fa fa-file-audio-o" aria-hidden="true"></i>-->
+                                    <vg-player style="height: 50px; width: 350px">
+                                        <vg-controls>
+                                            <vg-play-pause></vg-play-pause>
+                                            <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
+
+                                            <vg-scrub-bar>
+                                                <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
+                                                <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
+                                            </vg-scrub-bar>
+
+                                            <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
+                                            <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
+
+                                            <vg-mute></vg-mute>
+
+                                            <vg-fullscreen></vg-fullscreen>
+                                        </vg-controls>
+
+                                        <audio #media [vgMedia]="media" id="myAudio" preload="auto">
+                                            <source  [src]=file.urlSafe type="audio/mp3">
+                                        </audio>
+                                    </vg-player>
+                                </div>
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-secondary waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
+                                <!--<button type="button" class="btn btn-primary relative waves-light" mdbWavesEffect>Save changes</button>-->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!--/Modal-->
+
+                <!--/Modal-->
+                <div mdbModal #linkModal="mdb-modal" class="modal fade" id="centralModalSuccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+                    <div class="modal-dialog modal-notify modal-info" role="document">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h4 class="modal-title w-100 white-text" id="myModalLabel">Share Link</h4>
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="linkModal.hide()">
+                                    <span aria-hidden="true" class="white-text">×</span>
+                                </button>
+                            </div>
+                            <div class="modal-body text-center">
+                                <div class="container-fluid">
+                                    <div class="col-md-12">
+                                        <div class="col-md-12">
+                                            <i class="fa file-o" aria-hidden="true"></i>
+                                        </div>
+                                        <div class="col-md-12">
+                                            <div *ngIf="file.type === ('image/jpeg')">
+                                                <img [src]=file.urlSafe class="img-fluid" width="350" height="200">
+                                            </div>
+                                            <div *ngIf="file.type === ('image/png')">
+                                                <img [src]=file.urlSafe class="img-fluid" width="350" height="200">
+                                            </div>
+                                            <div *ngIf="file.type === ('application/pdf')">
+                                                <!--<i class="fa fa-file-pdf-o" aria-hidden="true"></i>-->
+                                                <object [data]=file.urlSafe type="application/pdf"
+                                                        width="350" height="200" typemustmatch>
+                                                </object>
 
+                                            </div>
+                                            <div *ngIf="file.type === ('video/mp4')">
+                                                <!--<i class="fa fa-file-movie-o" aria-hidden="true"></i>-->
+                                                <vg-player style="height: 200px; width: 350px">
+                                                    <video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
+                                                        <source [src]=file.urlSafe type="video/mp4">
+                                                    </video>
+                                                </vg-player>
+                                            </div>
+                                            <div *ngIf="file.type === ('text/plain')">
+                                                <!--<div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
+                                                  <div>{{test}}</div>
+                                                  <a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>-->
+                                                <object [data]=file.urlSafe type="text/plain"
+                                                        width="350" height="200" typemustmatch>
+                                                </object>
+                                            </div>
+                                            <div *ngIf="file.type === ''">
+                                                <i class="fa fa-file-o fa-5x" aria-hidden="true" width="350" height="200"></i>
+                                                <!--<object [data]=file.url type="text/plain"
+                                                        width="350" height="200" typemustmatch>
+                                                </object>-->
+                                                <!--<div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
+                                                  <div>{{test}}</div>
+                                                  <a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>-->
+                                            </div>
+                                            <div *ngIf="(file.type === ('audio/mp3')) || (file.type === ('audio/mpeg'))">
+                                                <!--<i class="fa fa-file-audio-o" aria-hidden="true"></i>-->
+                                                <vg-player style="height: 50px; width: 350px">
+                                                    <vg-controls>
+                                                        <vg-play-pause></vg-play-pause>
+                                                        <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
 
+                                                        <vg-scrub-bar>
+                                                            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
+                                                            <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
+                                                        </vg-scrub-bar>
 
-<h1>
-  Hey here, Upload a file here
-</h1>
+                                                        <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
+                                                        <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
 
-<label class="btn btn-info col-sm-2 col-md-2" >
-  Fichier à ajouter<input type="file" style="display: none;" #myPicture name="myPicture" (change)="fileChangeEvent($event)">
-</label>
+                                                        <vg-mute></vg-mute>
 
-<button type="button" class="btn btn-success" (click)="upload()">Ajouter le fichier {{fileChooseName}}</button>
+                                                        <vg-fullscreen></vg-fullscreen>
+                                                    </vg-controls>
 
-<h3> Vous avez choisi : {{fileChooseName}}</h3>
+                                                    <audio #media [vgMedia]="media" id="myAudio" preload="auto">
+                                                        <source  [src]=file.urlSafe type="audio/mp3">
+                                                    </audio>
+                                                </vg-player>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <hr>
+                                    <div class="col-md-12">
+                                        <div class="row">
+                                            <div class="col-md-6">
+                                                <p><strong> {{file.name}} </strong></p>
+                                            </div>
+                                            <div class="col-md-6">
+                                                <p><strong> {{ file.taille / ( 1024 * 1024 ) | number : '1.2-2'}} Mo</strong></p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col-md-12">
+                                        <i class="fa unlock-alt" aria-hidden="true"></i>
+                                        <i class="fa unlock" aria-hidden="true"></i>
+                                        <i class="fa unlock-alt" aria-hidden="true"></i>
+                                        <i class="fa unlock" aria-hidden="true"></i>
+                                        <div class="md-form">
+                                            <input value="https://localhost:3000/download/{{file._id.toString()}}" disabled="disabled" type="text" id="shareLink" class="form-control" mdbInputDirective>
+                                            <label for="shareLink">Link</label>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="modal-footer justify-content-center">
+                                <a type="button" class="btn btn-secondary waves-light" (click)="copyLink(file._id.toString())" mdbWavesEffect>Copy Link <i class="fa fa-copy ml-1" aria-hidden="true"></i></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!--/Modal-->
 
+                <!--/Dropdown primary-->
 
-<div *ngIf="allUserFile">
-  Votre <strong>liste de fichier</strong> ci-dessous:
-  <li *ngFor="let file of allUserFile">
-    nom : {{ file.name }} / owner: {{ file.owner }} / path : {{ file.path }}
-    <!--<img src="../../../public/GOPR0034.jpg">-->
-  </li>
 
+                <div class="btn-group" dropdown>
+                    <!--Trigger-->
+                    <button type="button" dropdownToggle class="btn btn-secondary btn-sm dropdown-toggle-split px-3 waves-light" mdbTooltip="Move : {{file.name}}" placement="top" mdbWavesEffect>
+                        <i class="fa fa-arrows" aria-hidden="true"></i>
+                    </button>
+
+                    <!--Menu-->
+                    <div class="dropdown-menu dropdown-primary">
+                        <a class="dropdown-item" *ngFor="let folder of allUserAppFolder; let i = index;" (click)="moveFile(file, folder)">{{folder.name}}</a>
+                    </div>
+                </div>
+            </div>
+
+        </td>
+        <td>
+            <!--<button class="btn btn-primary btn-sm waves-light" mdbTooltip="Renommer : {{file.name}}" placement="top" type="button" mdbWavesEffect (click)="renameFile(file)">
+                <i class="fa fa-pencil prefix"></i>
+            </button>
+            <input type="search" class="form-control col-xs-2" placeholder= "{{file.name}}" [(ngModel)]="file.name">-->
+            <label>{{file.name}}</label>
+        </td>
+
+        <!--<td>{{ file.name }}</td>-->
+        <td>{{ file.taille / ( 1024 * 1024 ) | number : '1.2-2'}} Mo</td>
+        <td>{{ file.type }}</td>
+        <td>{{ file.lastDate | date: 'MM/dd/yyyy'}}</td>
+    </tr>
+
+    </tbody>
+</table>
+
+
+<!-- Button trigger modal-->
+<button id="openModalButton" type="button" class="btn btn-primary waves-light" [hidden]="true" data-toggle="modal" data-target="#basicExample" (click)="cookies?.show()" mdbWavesEffect>
+    Bottom
+</button>
+<!--Modal: modalCookie-->
+<div mdbModal #cookies="mdb-modal" class="modal fade bottom" id="frameModalBottom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: false}">
+    <div *ngIf="allUserFile?.length === 0" class="modal-dialog modal-frame modal-bottom text-center"  role="document">
+        <div class="modal-content" id="cookiesModal" style="background-color: #7283a7!important;">
+            <div class="modal-body">
+                <div class="row px-4">
+                    <p class="pt-3 pr-2 text-white">Our website use cookies do you agree ?</p>
+                    <button type="button" class="btn btn-outline-white btn-md waves-light" data-dismiss="modal" (click)="cookies.hide()" mdbWavesEffect>Close</button>
+                    <button type="button" class="btn btn-outline-white btn-md waves-light" data-toggle="modal" data-target="#basicExample" (click)="rules.show()" mdbWavesEffect>Read rules</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
+<!--Modal: modalCookie-->
+<!--Modal-->
+<div mdbModal #rules="mdb-modal" class="modal fade" id="basicExample" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="overflow: auto;">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title w-100" id="myModalLabel">Rules</h4>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="rules.hide()">
+                    <span aria-hidden="true">×</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>
+                    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+                    <br>
+                    <br>
+                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+                    <br>
+                    <br>
+                    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+                    <br>
+                    <br>
+                    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+                    <br>
+                    <br>
+                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+                    <br>
+                    <br>
+                    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+                    <br>
+                    <br>
+                    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+                    <br>
+                    <br>
+                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+                    <br>
+                    <br>
+                    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+                    <br>
+                    <br>
+                    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+                    <br>
+                    <br>
+                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+                    <br>
+                    <br>
+                    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+                    <br>
+                    <br>
+                    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+                    <br>
+                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+                    <br>
+                    <br>
+                    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+                    <br>
+                    <br>
+                    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+                    <br>
+                    <br>
+                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+                    <br>
+                    <br>
+                    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+                </p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary waves-light" data-dismiss="modal" (click)="rules.hide()" mdbWavesEffect>Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+<!--Modal-->
+
 
-<!--
-<form enctype="multipart/form-data" method="post" name="fileinfo">
-  <label>Fichier à mettre de côté :</label>
-  <input type="file" name="file" (change)="fileChangeEvent($event)" required />
-  <input type="submit" (click)="upload2()" value="Mettez le fichier de côté." />
-</form>
-<div></div>
-  -->

src/app/book/book.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, Output, Input, EventEmitter } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
@@ -7,125 +7,431 @@ import { of } from 'rxjs/observable/of';
 import {Http} from "@angular/http";
 import {Form} from "@angular/forms";
 import * as formData from 'form-data';
+import {forEach} from '@angular/router/src/utils/collection';
+import {type} from 'os';
+import { DomSanitizer } from '@angular/platform-browser';
+// import { Dropzone } from 'dropzone';
+import { DropzoneComponent , DropzoneDirective,
+    DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
+
+
+import { CompleterService } from '../typescripts/pro';
+
+
 
 @Component({
-  selector: 'app-book',
-  templateUrl: './book.component.html',
-  styleUrls: ['./book.component.css']
+    selector: 'app-book',
+    templateUrl: './book.component.html',
+    styleUrls: ['./book.component.css']
 })
 export class BookComponent implements OnInit, OnDestroy {
-  currentUser: any;
-  allUserFile: any;
-  books: any;
-  filesToUpload: Array<File>;
-  fileChooseName: string;
-  httpOptions: any;
-  tokenFromLogin: any;
-  constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute) {
-
-    this.fileChooseName = 'None';
-    this.filesToUpload = [];
-  }
+    @Input() socialIdUser: String;
+    @Output() setAllUserAppFolder = new EventEmitter<String>();
 
-  ngOnInit() {
+    message: string = 'Hola Mundo!';
+    sizeFile:any;
+    @Output() messageEvent = new EventEmitter<string>();
+    currentUser: any;
+    allUserFile: any;
+    allUserFolder: any;
+    //socialIdUser: String;
+    filterAllUserFolder: any;
+    allUserAppFolder: any;
+    allUserAppFile: any;
+    mainFolder: any;
+    books: any;
+    filesToUpload: Array<File>;
+    fileChooseName: string;
+    httpOptions: any;
+    isClickCreateFolder: boolean;
+    inputCreateFolder: String;
+    reader: FileReader;
+    test: String;
+    previewNode:any;
+    previewTemplate:any;
+    // config: DropzoneConfigInterface;
+    //myDropzone: Dropzone;
+    droptestt:any;
+    allItems: any;
 
-    this.route.params.subscribe(params => {
-      this.tokenFromLogin = params['tokenFromLogin'];
 
-      this.httpOptions = {
-        headers: new HttpHeaders({ 'Authorization': localStorage.getItem('jwtToken') })
-      };
+    searchStr: String;
+    dataService: any;
 
-      this.http.get('/api/book', this.httpOptions).subscribe(user => {
-        this.currentUser  = user;
-        console.log('mothafuka cureent user : ' + JSON.stringify(this.currentUser));
-      }, err => {
-        if (err.status === 401) {
-          this.router.navigate(['login']);
-        }
-      });
+    public type: string = 'component';
+
+    public disabled: boolean = false;
+
+    public config: DropzoneConfigInterface = {
+        clickable: true,
+        maxFiles: 1,
+        autoReset: null,
+        errorReset: null,
+        cancelReset: null
+    };
+
+    @ViewChild(DropzoneComponent) componentRef?: DropzoneComponent;
+    @ViewChild(DropzoneDirective) directiveRef?: DropzoneDirective;
+
+
+    constructor(private completerService: CompleterService, private http: HttpClient, private router: Router, private route: ActivatedRoute, public sanitizer: DomSanitizer) {
+
+
+
+        this.isClickCreateFolder = false;
+        this.fileChooseName = 'None';
+        console.log('this.fileChooseName' + this.fileChooseName);
+        this.filesToUpload = [];
+        this.test = '';
+        this.sizeFile = 0;
+
+
+    }
+    copyLink(val) {
+
+        let selBox = document.createElement('textarea');
+
+        selBox.style.position = 'fixed';
+        selBox.style.left = '0';
+        selBox.style.top = '0';
+        selBox.style.opacity = '0';
+        selBox.value = 'https://localhost:3000/download/' + val;
+
+        document.body.appendChild(selBox);
+        selBox.focus();
+        selBox.select();
+
+        document.execCommand('copy');
+        document.body.removeChild(selBox);
+    }
+
+    sendMessage() {
+        this.messageEvent.emit('caca')
+    }
+    public toggleType(): void {
+        this.type = (this.type === 'component') ? 'directive' : 'component';
+    }
 
-      this.http.get('/api/allUserFile', this.httpOptions).subscribe(files => {
-        this.allUserFile  = files;
-        console.log('mothafuka cureent user : ' + JSON.stringify(this.allUserFile));
-      }, err => {
-        if (err.status === 401) {
-          this.router.navigate(['login']);
+    public toggleDisabled(): void {
+        this.disabled = !this.disabled;
+    }
+
+    public toggleAutoReset(): void {
+        this.config.autoReset = this.config.autoReset ? null : 5000;
+        this.config.errorReset = this.config.errorReset ? null : 5000;
+        this.config.cancelReset = this.config.cancelReset ? null : 5000;
+    }
+
+    public toggleMultiUpload(): void {
+        this.config.maxFiles = this.config.maxFiles ? 0 : 1;
+    }
+
+    public toggleClickAction(): void {
+        this.config.clickable = !this.config.clickable;
+    }
+
+    public resetDropzoneUploads(): void {
+        if (this.type === 'directive' && this.directiveRef) {
+            this.directiveRef.reset();
+        } else if (this.type === 'component' && this.componentRef && this.componentRef.directiveRef) {
+            this.componentRef.directiveRef.reset();
         }
-      });
-    });
+    }
 
+    public onUploadError(args: any): void {
+        console.log('onUploadError:', args);
+    }
+    filter(query: string) {
+        var temp = (this.allUserAppFolder.concat(this.allUserAppFile));
+        this.filterAllUserFolder = (query) ? temp.filter(p => (p.name.toLowerCase()).includes(query.toLowerCase())) : [];
+
+    }
+    public onUploadSuccess(args: any): void {
+        this.filesToUpload = args;
+        this.fileChooseName = args[0].name;
+
+        // var reader = new FileReader();
+        // reader.onload = function() {
+        //     alert(reader.result);
+        // };
+        // reader.readAsText(args[0]);
+
+        this.upload();
+        this.resetDropzoneUploads();
+        this.openFolder(this.mainFolder.path);
+
+    }
+
+    ngOnInit() {
+        this.httpOptions = {
+            headers: new HttpHeaders({
+                'Authorization': localStorage.getItem('jwtToken'),
+                'Access-Control-Allow-Origin' : '*',
+                'Access-Control-Allow-Methods' : 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
+                'Access-Control-Allow-Headers' : 'Origin, X-Requested-With, Content-Type, Accept'
+            }),
+            pathFolder: ''
+        };
+        // this.httpOptions = {
+        //     headers: new HttpHeaders({ 'Authorization': localStorage.getItem('jwtToken'), 'Access-Control-Allow-Origin' : '*'}),
+        //     pathFolder: ''
+        // };
+
+        this.http.get('/api/getCurrentUser', this.httpOptions).subscribe(user => {
+            this.currentUser  = user;
+            this.openFolder('Home');
+        }, err => {
+            if (err.status === 401) {
+                this.router.navigate(['login']);
+            }
+        });
+    }
+
+    deleteFile(fileToDelete) {
+        this.http.post('/api/deleteFileMongo', fileToDelete).subscribe(file => {
+            this.openFolder(this.mainFolder.path);
+        });
+    }
+
+    deleteFolder(folderToDelete) {
+        this.http.post('/api/deleteFolderMongo', folderToDelete).subscribe(folder => {
+            this.openFolder(this.mainFolder.path);
+        });
+    }
+
+
+    renameFolder(folderToRename) {
+        folderToRename.path = this.mainFolder.path + '/' + folderToRename.name;
+
+        this.http.post('/api/renameFolderMongo', folderToRename).subscribe(data => {
+            console.log('data : ' + data);
+        });
+    }
+
+    renameFile(fileToRename){
+        this.http.post('/api/renameFileMongo', fileToRename).subscribe(data => {
+            console.log('data : ' + data);
+        });
+    }
+    saveURLFileMongo(fileToCreateURL){
+        fileToCreateURL.url = '../../../public/' + fileToCreateURL._id.toString() + this.getStringExtention(fileToCreateURL);
+
+        this.http.post('/api/saveURLFileMongo', fileToCreateURL).subscribe(data => {
+            console.log('data : ' + data);
+        });
+    }
+
+    getAllUserAppFiles() {
+        this.http.post('/api/getFileAppList', {owner: this.currentUser.username.toString()}).subscribe(files => {
+            if (files) {
+                this.allUserAppFile = files;
 
-  }
-  ngOnDestroy() {
-    localStorage.removeItem('jwtToken');
-    this.tokenFromLogin = '';
-    this.httpOptions = null;
-    this.currentUser  = null;
-  }
-  upload() {
-
-    this.makeFileRequest('http://localhost:3000/api/upload', [], this.filesToUpload).then((result) => {
-      // var source = 'http://localhost:3000/public/'+result[0].filename;
-      console.log('current USer Filleeee ::: '+ JSON.stringify(this.currentUser));
-      var fileUploadData = { uid: '222', name:result[0].filename.toString(), path: result[0].path.toString(), extention:this.filesToUpload[0].type.toString(), taille:this.filesToUpload[0].size.toString(), idUser: this.currentUser.id };
-      var message = '';
-      //console.log('mothafukaaaaaaaaaaa : ' + JSON.stringify(this.currentUser));
-      //console.log('mothafukaaaaaaaaaaa : ' + this.currentUser._id);
-      console.log('avaaaaanttttt : ' + this.currentUser.username.toString() + '     ----     ' + this.currentUser._id.toString());
-
-      if(this.currentUser.username)
-      this.http.post('api/uploadFileMongo', { name: result[0].filename.toString(), path: result[0].path.toString(), extention: this.filesToUpload[0].type.toString(), taille: this.filesToUpload[0].size.toString(), idUser: this.currentUser._id.toString(), owner: this.currentUser.username.toString() }).subscribe(resp => {
-        console.log('ok db !!' + resp.toString());
-      }, err => {
-        console.log('errrrr : ' + err);
-        message = err.error.msg;
-      });
-      console.log('apres');
-      console.log('fileUploadData: ' + fileUploadData);
-      console.log('fileUploadData.path: ' + fileUploadData.path);
-      console.log('fileUploadData.name: ' + fileUploadData.name);
-      console.log('fileUploadData.taille: ' + fileUploadData.taille);
-      console.log('fileUploadData.extention: ' + fileUploadData.extention);
 
-      console.log('result: ' + result[0].filename);
+                this.allItems = (this.allUserAppFolder.concat(this.allUserAppFile));
+                this.dataService = this.completerService.local(this.allItems, 'name', 'path');
 
 
-    }, (error) => {
-      console.error(error);
-    });
+                for (let f of this.allItems){
+                    console.log(f.name);
+                    //f.fileTab = this.getfiles(f);
+                }
+                // return files;
+            } else {
+                this.allUserAppFile = [];
+            }
+        });
+    }
+
+
+    getfiles() {
+        //var preview = document.querySelector('img');
+
+        this.sizeFile = 0;
+        var meee = this;
+
+        this.http.post('/api/getFileList', {mainPath : this.mainFolder.path, owner: this.currentUser.username.toString()}).subscribe(files => {
+            if (files) {
+
+
+                this.allUserFile = files;
+                for (let f of this.allUserFile) {
+
+                    this.sizeFile += +f.taille;
+                    if(f.type === ('image/jpeg') || f.type === ('image/png')){
+                        f.data = f.url;
+                        f.urlSafe = this.sanitizer.bypassSecurityTrustUrl(f.url);
+                    }else{
+                        f.data = f.url;
+                        f.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(f.url);
+                    }
+              }
+          } else {
+              this.allUserFile = [];
+          }
+          document.getElementById('openModalButton').click();
+      });
   }
 
-  fileChangeEvent(fileInput: any){
-    this.filesToUpload = <Array<File>> fileInput.target.files;
-    this.fileChooseName = this.filesToUpload[0].name;
+  getfolders() {
+        this.http.post('/api/getFolderList', {mainPath : this.mainFolder.path, owner: this.currentUser.username.toString()}).subscribe(folders => {
+          if (folders) {
+              this.allUserFolder = folders;
+          } else {
+              this.allUserFolder = [];
+          }
+      });
   }
+  getAllUserAppFolder(){
+      this.message = '';
+      this.sendMessage();
+      this.http.post('/api/getFolderAppList', {owner: this.currentUser.username.toString()}).subscribe(folders => {
+          if (folders) {
+              this.allUserAppFolder = folders;
 
-  makeFileRequest(url: string, params: Array<string>, files: Array<File>) {
-    return new Promise((resolve, reject) => {
-      var formData: any = new FormData();
-      var xhr = new XMLHttpRequest();
+              this.setAllUserAppFolder.emit(this.currentUser.username.toString());
 
-      formData.append("public[]", files[0], files[0].name);
-      xhr.onreadystatechange = function () {
-        if (xhr.readyState == 4) {
-          if (xhr.status == 200) {
-            resolve(JSON.parse(xhr.response));
+              this.getAllUserAppFiles();
           } else {
-            reject(xhr.response);
+              this.allUserAppFolder = [];
           }
+      });
+  }
+
+    moveFile(fileToMove, folderDest){
+        fileToMove.path = folderDest.path;
+
+        this.http.post('/api/moveFile', fileToMove).subscribe(data => {
+            console.log('data : ' + data);
+            this.getfiles();
+            //this.openFolder(this.mainFolder.path)
+            // this.getAllUserAppFolder();
+            // this.getfiles();
+        });
+    }
+
+    moveFolder(folderToMove, folderDest){
+        var newPath = folderDest.path + '/' + folderToMove.parent.name;
+        folderToMove.path = newPath;
+        folderToMove.parent = folderDest.path;
+
+        this.http.post('/api/moveFolder', folderToMove).subscribe(data => {
+            console.log('data : ' + data);
+            this.getfolders();
+            //this.openFolder(this.mainFolder.path)
+            // this.getAllUserAppFolder();
+            // this.getfiles();
+        });
+    }
+
+    backToParentFolder(){
+        this.openFolder(this.mainFolder.parent);
+    }
+
+
+    openFolder(path: String) {
+
+        if(this.searchStr !== undefined ? path === 'searchStr' : false){
+            path = this.searchStr;
+
         }
-      };
 
-      xhr.open("POST", url, true);
-      xhr.send(formData);
-    });
-  }
+        this.httpOptions.pathFolder = path;
+        this.isClickCreateFolder = false;
+
+        this.http.post('/api/getMainFolder', {path: path, owner: this.currentUser.username.toString()}).subscribe(folder => {
+            if (folder) {
+                this.mainFolder = folder;
+                this.getfolders();
+                this.getAllUserAppFolder();
+                this.getfiles();
+
+            } else {
+                if (path === 'Home'){
+                    this.http.post('api/createFolder', { name: 'Home', parent: '', path: 'Home', taille: 'taiile', idUser: this.currentUser._id.toString(), fileList: [], folderList: [], owner: this.currentUser.username.toString() }).subscribe(resp => {
+                        this.mainFolder = resp;
+                    }, err => {
+                        console.log('err open Folder : ' + err);
+                    });
+                }
+            }
+        });
+    }
+
+    createBool() {
+        this.isClickCreateFolder = true;
+    }
+
+    createFolder() {
+        var newPath = this.mainFolder.path + '/' + this.inputCreateFolder;
+        this.isClickCreateFolder = false;
+
+        this.http.post('api/createFolder', { name: this.inputCreateFolder.toString(), parent: this.mainFolder.path, path: newPath.toString(), taille: 'taiile', idUser: this.currentUser._id.toString(), fileList: [], folderList: [], owner: this.currentUser.username.toString() }).subscribe(resp => {
+            this.getfolders();
+            this.getAllUserAppFolder();
+        }, err => {
+            console.log('err create Folder : ' + err);
+        });
+    }
+
+    ngOnDestroy() {
+        localStorage.removeItem('jwtToken');
+        this.httpOptions = null;
+        this.currentUser  = null;
+    }
+
+    upload() {
+        var me = this;
+        if(this.mainFolder !== undefined){
+            this.http.post('api/uploadFileMongo', { name: this.fileChooseName.toString(), path: this.mainFolder.path.toString(), type: this.filesToUpload[0].type.toString(), taille: this.filesToUpload[0].size.toString(), idUser: this.currentUser._id.toString(), owner: this.currentUser.username.toString(), lastDate: Date.now().toString(), url: ''}).subscribe(resp => {
+                me.saveURLFileMongo(resp);
+                var mee = this;
 
-  logout() {
-    this.httpOptions = null;
-    localStorage.removeItem('jwtToken');
-    this.router.navigate(['login']);
-  }
 
+                ////////
+                me.makeFileRequest('https://localhost:3000/api/upload', [], this.filesToUpload, resp).then((result) => {
+                    mee.getfiles();
+                    mee.filesToUpload = null;
+                    mee.fileChooseName = 'None';
+                }, (error) => {
+                    console.error(error);
+                });
+            }, err => {
+                console.error(err);
+            });
+        }
+    }
+
+    fileChangeEvent(fileInput: any){
+        this.filesToUpload = <Array<File>> fileInput.target.files;
+        this.fileChooseName = this.filesToUpload[0].name;
+    }
+
+
+    makeFileRequest(url: string, params: Array<string>, files: Array<File>, monFile: any) {
+        return new Promise((resolve, reject) => {
+            var formData: any = new FormData();
+            var xhr = new XMLHttpRequest();
+
+            formData.append("public[]", files[0], monFile._id + this.getStringExtention(monFile));
+            xhr.onreadystatechange = function () {
+                if (xhr.readyState == 4) {
+                    if (xhr.status == 200) {
+                        resolve(JSON.parse(xhr.response));
+                    } else {
+                        reject(xhr.response);
+                    }
+                }
+            };
+
+            xhr.open("POST", url, true);
+            xhr.send(formData);
+        });
+    }
+
+
+    getStringExtention(monFile: any){
+        return ( monFile.name.indexOf('.') > 0 ) ? '.' + monFile.name.split('.').pop().toLowerCase() : '';
+    }
 }
+
+

src/app/download-link/download-link.component.html

@@ -0,0 +1,55 @@
+<!--Navbar-->
+<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar indigo">
+  <logo>
+    <a class="logo navbar-brand waves-light" mdbWavesEffect href="#"><strong>SupFile</strong></a>
+  </logo>
+  <links>
+    <ul class="navbar-nav mr-auto">
+    </ul>
+  </links>
+</mdb-navbar>
+
+<section class="view intro-2 mask rgba-gradient">
+  <div class="container-fluid full-bg-img mask rgba-gradient">
+    <!--Grid column-->
+    <div class="col-lg-6 col-md-8">
+
+      <!--Card-->
+      <div class="card text-white card-cascade narrower card-image">
+
+        <div class="text-white text-center align-items-center">
+          <!--Card image-->
+          <div class="card-header text-center">
+            <h2 class="h2-responsive">File Download</h2>
+          </div>
+          <!--/Card image-->
+
+
+          <!--Card content-->
+          <div class="card-body text-center">
+            <div class="col-md-12">
+              <div class="row">
+                <div class="col-md-6">
+                  <i class="fa fa-file fa-4x" aria-hidden="true"></i>
+                </div>
+                <div class="col-md-6">
+                  <p><strong>{{file?.name}}</strong></p>
+                  <p>{{ file?.taille / ( 1024 * 1024 ) | number : '1.2-2'}} Mo</p>
+                </div>
+              </div>
+            </div>
+
+            <hr class="hr-light mb-3 mt-4">
+
+            <button class="btn btn-outline-white wow fadeInleft waves-light"><a class="text-white" href="{{file?.url}}" download="{{ file?.name.toString()}}">Download</a></button>
+          </div>
+          <!--/.Card content-->
+        </div>
+
+      </div>
+      <!--/.Card-->
+
+    </div>
+    <!--Grid column-->
+  </div>
+</section>

src/app/download-link/download-link.component.scss

@@ -0,0 +1,44 @@
+.container-fluid {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.card-body {
+  margin-top: 5rem;
+  margin-bottom: 3rem;
+}
+
+.intro-2 {
+  background: url("http://mdbootstrap.com/img/Photos/Others/img%20(42).jpg")no-repeat center center;
+  background-size: cover;
+  background-attachment: fixed;
+}
+.view {
+  height: 100vh !important;
+}
+
+@media (max-width: 740px) {
+  .full-height,
+  .full-height body,
+  .full-height header,
+  .full-height header .view {
+    height: 1040px;
+  }
+}
+
+.rgba-gradient .full-bg-img {
+  background: linear-gradient(45deg, rgba(83, 125, 210, 0.4), rgba(178, 30, 123, 0.4) 100%);
+}
+.card {
+  background-color: rgba(229, 228, 255, 0.2);
+}
+
+.md-form .prefix {
+  font-size: 1.5rem;
+  margin-top: 1rem;
+}
+.md-form label {
+  color: #ffffff;
+}

src/app/download-link/download-link.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DownloadLinkComponent } from './download-link.component';
+
+describe('DownloadLinkComponent', () => {
+  let component: DownloadLinkComponent;
+  let fixture: ComponentFixture<DownloadLinkComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DownloadLinkComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DownloadLinkComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/download-link/download-link.component.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import {HttpClient} from '@angular/common/http';
+
+
+@Component({
+    selector: 'app-download-link',
+    templateUrl: './download-link.component.html',
+    styleUrls: ['./download-link.component.scss']
+})
+export class DownloadLinkComponent implements OnInit {
+    idFile: String;
+    urlFile: String;
+    file: any;
+
+    constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute) {
+        this.idFile = '';
+        this.urlFile = '';
+        this.route.params.subscribe(params => {
+            this.idFile = params['id'];
+            this.urlFile = 'http://localhost:3000/' + this.idFile;
+            console.log('this.idFile  : ' + this.idFile );
+
+            this.http.post('/api/getFileById', {id: this.idFile.toString()}).subscribe(file => {
+
+                if (file) {
+                    this.file = file[0];
+                    console.log(this.file)
+                } else {
+                    this.file = [];
+                }
+            });
+
+        });
+    }
+
+    ngOnInit() {
+    }
+
+}

src/app/home/home.component.html

@@ -0,0 +1,521 @@
+
+<!--Main Navigation-->
+
+
+  <!--Navbar-->
+  <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar indigo">
+    <logo>
+      <a class="logo navbar-brand waves-light" mdbWavesEffect href="#"><strong>SupFile</strong></a>
+    </logo>
+    <links>
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item waves-light" mdbWavesEffect>
+          <a class="nav-link" mdbPageScroll href="#introSection" [pageScrollDuration]="600">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item waves-light" mdbWavesEffect>
+          <a class="nav-link" mdbPageScroll href="#featuresSection" [pageScrollDuration]="600">Features</a>
+        </li>
+        <li class="nav-item waves-light" mdbWavesEffect>
+          <a class="nav-link" mdbPageScroll href="#priceSection" [pageScrollDuration]="600">Offers</a>
+        </li>
+      </ul>
+    </links>
+  </mdb-navbar>
+
+  <!--Intro Section-->
+  <section class="view intro-2 mask rgba-gradient" id="introSection">
+    <div class="full-bg-img mask rgba-gradient">
+      <div class="container flex-center">
+        <div class="d-flex align-items-center content-height w-100">
+          <div class="row flex-center pt-5 mt-3 w-100">
+            <div class="col-md-6 text-center text-md-left mb-5">
+              <div class="white-text">
+                <h1 class="h1-responsive font-bold wow fadeInLeft" data-wow-delay="0.3s">Sign up right now! </h1>
+                <hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s">
+                <h6 class="wow fadeInLeft" data-wow-delay="0.3s">Easy, secured and accessible everywhere keep and save your data on SupFile !
+                  All kind of files supported (medias, compressed files, …)
+                  <br>
+                  Keep the control on the cloud.
+                  <br>
+                  Accessible from any device.
+                  <br>
+                  Stay organized with a single simple interface.
+                </h6>
+                <br>
+                <a class="btn btn-outline-white wow fadeInLeft waves-light" data-wow-delay="0.3s" mdbPageScroll href="#featuresSection" [pageScrollDuration]="600" mdbWavesEffect>Learn more</a>
+              </div>
+            </div>
+
+            <div class="col-md-6 col-xl-5 offset-xl-1">
+              <!--Form-->
+              <div *ngIf="registerbool===false" class="card wow flipInY" data-wow-delay="0.3s">
+                <div class="card-body">
+                  <!--Header-->
+                  <div class="text-center">
+                    <h3 class="white-text"><i class="fa fa-user white-text"></i> Log in:</h3>
+
+                    <hr class="hr-light">
+                  </div>
+
+                  <!--Body-->
+                  <div class="md-form">
+                    <i class="fa fa-envelope prefix white-text"></i>
+                    <input type="email" id="form2" class="form-control" [(ngModel)]="loginData.username" data-error=" " data-success=" " mdbInputDirective>
+                    <label for="form2">Email</label>
+                  </div>
+
+                  <div class="md-form">
+                    <i class="fa fa-lock prefix white-text"></i>
+                    <input type="password" id="form4" class="form-control" [(ngModel)]="loginData.password" data-error=" " data-success=" " mdbInputDirective>
+                    <label for="form4">Password</label>
+                  </div>
+
+                  <div class="text-center">
+                    <button class="btn btn-primary waves-light" mdbWavesEffect (click)="login()">Log In</button>
+                    <button class="btn btn-secondary waves-light" mdbWavesEffect (click)="showregister()">Sign up</button>
+                    <hr class="hr-light mb-3 mt-4">
+                    <div class="inline-ul text-center d-flex justify-content-center">
+                      <a class="icons-sm fb-ic px-4" (click)="facebook()"><i class="fa fa-facebook white-text"> </i></a>
+                      <a class="icons-sm gplus-ic px-4"><i class="fa fa-google white-text"> </i></a>
+                      <a class="icons-sm px-4"><i class="fa fa-github white-text" aria-hidden="true"></i></a>
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+              <!--/.Form-->
+
+
+
+              <!--Form-->
+              <div *ngIf="registerbool" class="card wow flipInY" data-wow-delay="0.3s">
+                <div class="card-body">
+                  <!--Header-->
+                  <div class="text-center">
+                    <h3 class="white-text"><i class="fa fa-user white-text"></i> Register:</h3>
+                    <hr class="hr-light">
+                  </div>
+
+                  <!--Body-->
+                  <!--<div class="md-form">-->
+                    <!--<i class="fa fa-user prefix white-text"></i>-->
+                    <!--<input type="text" id="form3" class="form-control" data-success=" " data-error=" " mdbInputDirective>-->
+                    <!--<label for="form3">Your name</label>-->
+                  <!--</div>-->
+                  <div class="md-form">
+                    <i class="fa fa-envelope prefix white-text"></i>
+                    <input type="email" id="form2" data-error="wrong email" data-success=" " data-error=" " [(ngModel)]="signupData.username" class="form-control" mdbInputDirective>
+                    <label for="form2">Your email</label>
+                  </div>
+
+                  <div class="md-form">
+                    <i class="fa fa-lock prefix white-text"></i>
+                    <input type="password" id="form4" data-success=" " data-error=" " [(ngModel)]="signupData.password" class="form-control"  mdbInputDirective>
+                    <label for="form4">Your password</label>
+                  </div>
+
+                  <div class="form-check white-text">
+                    <input class="form-check-input" type="checkbox" id="checkbox11" (click)='toggleCheckbox()' mdbInputDirective>
+                    <label class="form-check-label" for="checkbox11">I agree to the terms of this website</label>
+                    <button class="btn btn-sm btn-outline-white waves-light" id="rules" data-toggle="modal" data-target="#basicExample" (click)="rules.show()" mdbWavesEffect>Rules</button>
+                  </div>
+
+                  <!--Modal-->
+                  <div mdbModal #rules="mdb-modal" class="modal fade" id="basicExample" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="overflow: auto;">
+                    <div class="modal-dialog modal-lg" role="document">
+                      <div class="modal-content">
+                        <div class="modal-header">
+                          <h4 class="modal-title w-100" id="myModalLabel">Rules</h4>
+                          <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="rules.hide()">
+                            <span aria-hidden="true">×</span>
+                          </button>
+                        </div>
+                        <div class="modal-body">
+                          <p>
+                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+                            <br>
+                            <br>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+                            <br>
+                            <br>
+                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+                            <br>
+                            <br>
+                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+                            <br>
+                            <br>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+                            <br>
+                            <br>
+                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+                            <br>
+                            <br>
+                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+                            <br>
+                            <br>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+                            <br>
+                            <br>
+                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+                            <br>
+                            <br>
+                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+                            <br>
+                            <br>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+                            <br>
+                            <br>
+                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+                            <br>
+                            <br>
+                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+                            <br>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+                            <br>
+                            <br>
+                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+                            <br>
+                            <br>
+                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+                            <br>
+                            <br>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+                            <br>
+                            <br>
+                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+                          </p>
+                        </div>
+                        <div class="modal-footer">
+                          <button type="button" class="btn btn-primary waves-light" data-dismiss="modal" (click)="rules.hide()" mdbWavesEffect>Close</button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <!--Modal-->
+
+                  <div class="text-center">
+                    <button class="btn btn-primary waves-light" [disabled]='!toggleButton' (click)="signup()" mdbWavesEffect>Register</button>
+                    <button class="btn btn-secondary waves-light" mdbWavesEffect (click)="showregister()">Back to log in</button>
+                    <hr class="hr-light mb-3 mt-4">
+
+                    <div class="inline-ul text-center d-flex justify-content-center">
+                      <a class="icons-sm fb-ic px-4" (click)="facebook()" onclick="location.href='/api/facebook'"><i class="fa fa-facebook white-text"> </i></a>
+                      <a class="icons-sm gplus-ic px-4" onclick="location.href='/api/github'" ><i class="fa fa-google white-text"> </i></a>
+                      <a class="icons-sm px-4" onclick="location.href='/api/google'"><i class="fa fa-github white-text" aria-hidden="true"></i></a>
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+              <!--/.Form-->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+<!--Section: Features v.1-->
+<section class="features text-center" id="featuresSection">
+
+  <div class="container-fluid wow fadeInDown">
+    <!--Section heading-->
+    <h2 class="h1 py-5 font-weight-bold">Why is it so great?</h2>
+    <!--Section description-->
+    <p class="px-5 mb-5 pb-3 lead grey-text">SupFile is the easiest way to access anywhere to your files !</p>
+  </div>
+
+  <!--Grid row-->
+  <div class="row">
+
+    <!--Grid column-->
+    <div class="col-md-4 wow fadeInLeft">
+      <i class="fa fa-share-alt fa-3x pink-text"></i>
+      <h5 class="font-weight-bold mt-3">Simple</h5>
+      <p class="grey-text">With a simple and intuitive interface you are able to have a total control access to your data on SupFile.
+      </p>
+    </div>
+    <!--Grid column-->
+
+    <!--Grid column-->
+    <div class="col-md-4 wow fadeInUp">
+      <i class="fa fa-lock fa-3x cyan-text"></i>
+      <h5 class="font-weight-bold mt-3">Secured</h5>
+      <p class="grey-text">You are the only holder on your files. SupFile is secured to keep your privacy and your datas in total security.
+      </p>
+    </div>
+    <!--Grid column-->
+
+    <!--Grid column-->
+    <div class="col-md-4 wow fadeInRight">
+      <i class="fa fa-comments-o fa-3x purple-text"></i>
+      <h5 class="font-weight-bold mt-3">Accessible</h5>
+      <p class="grey-text">Accès to your cloud on any device. SupFile application is available soon on the PlayStore.
+      </p>
+    </div>
+    <!--Grid column-->
+
+  </div>
+  <!--Grid row-->
+
+</section>
+<!--Section: Features v.1-->
+
+
+<hr class="wow fadeInRight" id="priceSection">
+
+
+<!--Section: Pricing v.2-->
+<section class="text-center pb-3 my-5">
+  <div class="container-fluid wow fadeInDown">
+    <!--Section heading-->
+    <h2 class="h1 py-5">Our pricing plans</h2>
+    <!--Section description-->
+    <p class="grey-text pb-5"><strong>Expand</strong> your horizons</p>
+  </div>
+
+  <!--Grid row-->
+  <div class="row priceList">
+    <!--Grid column-->
+    <div class="col-lg-4 col-md-12 mb-4 wow fadeInRight">
+
+      <!-- Card -->
+      <div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg');">
+
+        <!--Pricing card-->
+        <div class="text-white text-center pricing-card d-flex align-items-center rgba-cyan-strong py-3 px-3 rounded">
+
+          <!--Content-->
+          <div class="card-body">
+            <h5>Basic</h5>
+            <!--Price-->
+            <div class="price pt-0">
+              <h2 class="number">0</h2>
+            </div>
+            <!--Price-->
+            <ul class="striped">
+              <li>
+                <p>
+                  <strong>30</strong> Go</p>
+              </li>
+              <li>
+                <p>
+                  <strong>Limited</strong> Speed</p>
+              </li>
+            </ul>
+            <a class="btn btn-outline-white waves-light" mdbPageScroll href="#introSection" [pageScrollDuration]="600" mdbWavesEffect> Subscribe now</a>
+          </div>
+
+        </div>
+        <!--Pricing card-->
+      </div>
+    </div>
+    <!--Grid column-->
+
+    <!--Grid column-->
+    <div class="col-lg-4 col-md-12 mb-4 wow fadeInDown">
+
+      <!-- Card -->
+      <div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg');">
+
+        <!--Pricing card-->
+        <div class="text-white text-center pricing-card d-flex align-items-center rgba-indigo-strong py-3 px-3 rounded">
+
+          <!--Content-->
+          <div class="card-body">
+            <h5>Pro</h5>
+            <!--Price-->
+            <div class="price pt-0">
+              <h2 class="number">5</h2>
+            </div>
+            <!--Price-->
+            <ul class="striped">
+              <li>
+                <p>
+                  <strong>90</strong> Go</p>
+              </li>
+              <li>
+                <p>
+                  <strong>Fast Download</strong></p>
+              </li>
+            </ul>
+            <a class="btn btn-outline-white waves-light" mdbPageScroll href="#introSection" [pageScrollDuration]="600" mdbWavesEffect> Subscribe now</a>
+          </div>
+
+        </div>
+        <!--Pricing card-->
+      </div>
+    </div>
+    <!--Grid column-->
+
+    <!--Grid column-->
+    <div class="col-lg-4 col-md-12 mb-4 wow fadeInLeft">
+
+      <!-- Card -->
+      <div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg');">
+
+        <!--Pricing card-->
+        <div class="text-white text-center pricing-card d-flex align-items-center rgba-purple-strong py-3 px-3 rounded">
+
+          <!--Content-->
+          <div class="card-body">
+            <h5>Premium</h5>
+            <!--Price-->
+            <div class="price pt-0">
+              <h2 class="number">15</h2>
+            </div>
+            <!--Price-->
+            <ul class="striped">
+              <li>
+                <p>
+                  <strong>Unlimited</strong> Space</p>
+              </li>
+              <li>
+                <p>
+                  <strong>Unlimited</strong> Speed</p>
+              </li>
+            </ul>
+            <a class="btn btn-outline-white waves-light" mdbPageScroll href="#introSection" [pageScrollDuration]="600" mdbWavesEffect> Subscribe now</a>
+          </div>
+
+        </div>
+        <!--Pricing card-->
+      </div>
+    </div>
+    <!--Grid column-->
+
+  </div>
+  <!--Grid row-->
+</section>
+<!--Section: Pricing v.2-->
+
+
+<!--Footer-->
+<footer class="page-footer mdb-color text-center text-md-left pt-4 mt-4">
+
+  <!--Social buttons-->
+  <div class="text-center mb-3">
+
+    <a class="btn-floating btn-small btn-fb waves-light" href="https://www.facebook.com/ArcadiaDev" mdbWavesEffect>
+      <i class="fa fa-facebook"> </i>
+    </a>
+    <a class="btn-floating btn-small btn-tw waves-light" mdbWavesEffect>
+      <i class="fa fa-twitter"> </i>
+    </a>
+    <a class="btn-floating btn-small btn-gplus waves-light" mdbWavesEffect>
+      <i class="fa fa-google-plus"> </i>
+    </a>
+
+  </div>
+  <!--/.Social buttons-->
+
+  <!--Copyright-->
+  <div class="footer-copyright text-center py-3">
+    <div class="container-fluid">
+      © 2018 Copyright:
+      <a href=""> Arcadia </a>
+
+    </div>
+  </div>
+  <!--/.Copyright-->
+
+</footer>
+<!--/.Footer-->
+
+<!--<button (click)="facebook()" class="btn-floating btn-fb"><i class="fa fa-facebook"></i></button>-->
+<!--<a onclick="location.href='/api/facebook'">Login with face</a>-->
+
+<!-- Button trigger modal-->
+<button id="openModalButton" type="button" class="btn btn-primary waves-light" [hidden]="true" data-toggle="modal" data-target="#basicExample" (click)="cookies?.show()" mdbWavesEffect>
+  Bottom
+</button>
+<!--Modal: modalCookie-->
+<div mdbModal #cookies="mdb-modal" class="modal fade bottom" id="frameModalBottom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: false}">
+  <div class="modal-dialog modal-frame modal-bottom text-center"  role="document">
+    <div class="modal-content" id="cookiesModal" style="background-color: #7283a7!important;">
+      <div class="modal-body">
+        <div class="row px-4">
+          <p class="pt-3 pr-2 text-white">Our website use cookies do you agree ?</p>
+          <button type="button" class="btn btn-outline-white btn-md waves-light" data-dismiss="modal" (click)="cookies.hide()" mdbWavesEffect>Close</button>
+          <button type="button" class="btn btn-outline-white btn-md waves-light" data-toggle="modal" data-target="#basicExample" (click)="rules.show()" mdbWavesEffect>Read rules</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!--Modal: modalCookie-->
+<!--Modal-->
+<div mdbModal #rules="mdb-modal" class="modal fade" id="basicExample" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="overflow: auto;">
+  <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title w-100" id="myModalLabel">Rules</h4>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="rules.hide()">
+          <span aria-hidden="true">×</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+          <br>
+          <br>
+          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+          <br>
+          <br>
+          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+          <br>
+          <br>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+          <br>
+          <br>
+          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+          <br>
+          <br>
+          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+          <br>
+          <br>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+          <br>
+          <br>
+          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+          <br>
+          <br>
+          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+          <br>
+          <br>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+          <br>
+          <br>
+          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+          <br>
+          <br>
+          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+          <br>
+          <br>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+          <br>
+          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+          <br>
+          <br>
+          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+          <br>
+          <br>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+          <br>
+          <br>
+          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+          <br>
+          <br>
+          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+        </p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-primary waves-light" data-dismiss="modal" (click)="rules.hide()" mdbWavesEffect>Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+<!--Modal-->
+
+
+

src/app/home/home.component.scss

@@ -0,0 +1,67 @@
+.header {
+  height: 100%;
+}
+
+.features {
+  padding: 5%;
+}
+
+.intro-2 {
+  background: url("http://mdbootstrap.com/img/Photos/Others/img%20(42).jpg")no-repeat center center;
+  background-size: cover;
+  background-attachment: fixed
+}
+.view {
+  height: 100vh !important;
+}
+.navbar.scrolling-navbar.top-nav-collapse {
+  background: indigo;
+}
+.rgba-gradient .full-bg-img {
+  background: linear-gradient(45deg, rgba(83, 125, 210, 0.4), rgba(178, 30, 123, 0.4) 100%);
+}
+.card {
+  background-color: rgba(229, 228, 255, 0.2);
+}
+
+.md-form .prefix {
+  font-size: 1.5rem;
+  margin-top: 1rem;
+}
+.md-form label {
+  color: #ffffff;
+}
+h6 {
+  line-height: 1.7;
+}
+@media (max-width: 740px) {
+  .full-height,
+  .full-height body,
+  .full-height header,
+  .full-height header .view {
+    height: 1040px;
+  }
+}
+
+.form-check {
+  padding-left: 0;
+  padding-top: 1.2rem;
+  padding-bottom: 1rem;
+}
+
+
+.priceList {
+  padding: 10%;
+  padding-top: 0%;
+  padding-bottom: 5%;
+}
+
+#rules {
+  margin-left: 1rem;
+}
+
+#cookiesModal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/app/home/home.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/home.component.ts

@@ -0,0 +1,80 @@
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Router } from "@angular/router";
+import { Observable } from 'rxjs/Observable';
+import { tap, catchError } from 'rxjs/operators';
+import { of } from 'rxjs/observable/of';
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+  registerbool: boolean;
+  toggleButton: boolean
+  signupData = { username:'', password:'' };
+  loginData = { username: '', password: '' };
+  message = '';
+  messageR = '';
+  data: any;
+  test: any;
+
+  constructor(private http: HttpClient, private router: Router) {
+    this.registerbool = false;
+    this.toggleButton = false;
+  }
+
+  showregister() {
+    this.registerbool = !this.registerbool;
+  }
+
+  toggleCheckbox() {
+    this.toggleButton = !this.toggleButton;
+  }
+
+  login() {
+    this.http.post('/api/signin', this.loginData).subscribe(resp => {
+      this.data = resp;
+      localStorage.setItem('jwtToken', this.data.token);
+      this.router.navigate(['main', this.data.token]);
+    }, err => {
+      this.message = err.error.msg;
+    });
+  }
+
+  signup() {
+    this.http.post('/api/signup',this.signupData).subscribe(resp => {
+      this.showregister();
+    }, err => {
+      this.messageR = err.error.msg;
+    });
+  }
+
+    facebook() {
+        console.log('teteeeeeeee');
+        this.http.get('/api/facebook').subscribe(resp => {
+            this.router.navigate(['main']);
+        }, err => {
+            this.message = err.error.msg;
+        });
+    }
+
+
+
+    showCookies() {
+        document.getElementById('openModalButton').click();
+    }
+
+
+
+
+
+
+ngOnInit() {
+    setTimeout(() =>
+        {
+            this.showCookies();
+        }, 1000); ;
+  }
+
+}

src/app/login/login.component.html

@@ -15,3 +15,10 @@
     </p>
   </form>
 </div>
+
+
+
+<button (click)="facebook()" class="btn-floating btn-fb"><i class="fa fa-facebook"></i></button>
+<button onclick="location.href='/api/github'" type="button" class="btn-floating btn-git"><i class="fa fa-github"></i></button>
+<button onclick="location.href='/api/google'" type="button" class="btn-floating btn-gplus"><i class="fa fa-google"></i></button>
+<!--<button type="button" class="btn-floating btn-fb" (click)="facebook()"><i class="fa fa-facebook"></i></button>-->

src/app/login/login.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Router } from "@angular/router";
+import { Router } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
 import { tap, catchError } from 'rxjs/operators';
 import { of } from 'rxjs/observable/of';
@@ -17,15 +17,25 @@ export class LoginComponent implements OnInit {
   constructor(private http: HttpClient, private router: Router) { }
 
   login() {
-    this.http.post('/api/signin',this.loginData).subscribe(resp => {
+    this.http.post('/api/signin', this.loginData).subscribe(resp => {
       this.data = resp;
       localStorage.setItem('jwtToken', this.data.token);
-      this.router.navigate(['books', this.data.token]);
+      this.router.navigate(['main']);
     }, err => {
       this.message = err.error.msg;
     });
   }
 
+    facebook() {
+        console.log('tete')
+        this.http.get('/api/facebook').subscribe(resp => {
+            console.log('tete');
+            this.router.navigate(['main']);
+        }, err => {
+            this.message = err.error.msg;
+        });
+    }
+
   ngOnInit() {
   }
 

src/app/main/main.component.html

@@ -0,0 +1,114 @@
+<body class="indigo-skin">
+
+
+
+
+<!--Double navigation-->
+<header>
+
+  <!-- Sidebar navigation -->
+  <mdb-sidenav #sidenav class="sn-bg-4 fixed" [fixed]="true">
+
+    <logo>
+      <!-- Logo -->
+      <li>
+        <div class="logo-wrapper flex-center waves-light" style="padding-bottom: 5%">
+          <a href="#"><img style="height: 90px; margin-left: 13%;"src="../../assets/logoSupfile.png" class="img-fluid flex-center"></a>
+        </div>
+      </li>
+      <!--/. Logo -->
+    </logo>
+
+    <links>
+      <!--Social-->
+      <li>
+        <ul class="social">
+          <li><a class="icons-sm fb-ic" href="https://www.facebook.com/ArcadiaDev"><i class="fa fa-facebook"> </i></a></li>
+          <li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
+          <li><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
+        </ul>
+      </li>
+      <!--/Social-->
+      <!--Search Form-->
+      <!--<li>-->
+        <!--<form class="search-form" role="search">-->
+          <!--<div class="form-group md-form mt-0 pt-1 waves-light" mdbWavesEffect>-->
+            <!--<input type="text" class="form-control" placeholder="Search">-->
+          <!--</div>-->
+        <!--</form>-->
+      <!--</li>-->
+      <!--/.Search Form-->
+      <!-- Side navigation links -->
+      <li>
+        <div class="container-fluid flex-center" style="padding-top: 5%">
+          <button class="btn-primary btn-sm btn-rounded right-aligned waves-light" mdbWavesEffect (click)="getAllUserAppFolder()"><i class="fa fa-refresh" aria-hidden="true"></i></button>
+        </div>
+        <!--<a class="btn-floating btn-sm blue-gradient waves-light" mdbWavesEffect (click)="getAllUserAppFolder()"><i class="fa fa-refresh" aria-hidden="true"></i></a>-->
+        <ul class="collapsible collapsible-accordion">
+
+          <mdb-squeezebox [multiple]="false" aria-multiselectable="false">
+
+            <!-- Collapsible link  onclick="function(){ getAllUserAppFolder(); }" -->
+            <mdb-item *ngFor="let folder of allUserAppFolder; let i = index;">
+              <mdb-item-head mdbWavesEffect><i class="fa fa-chevron-right"></i>{{folder.name}}</mdb-item-head>
+              <mdb-item-body *ngIf="allUserAppFolder">
+                <ul>
+                  <li><a class="waves-effect" *ngFor="let folderChild of getItemsFolder(folder.name); let i = index;" mdbWavesEffect>{{folderChild.name}}</a></li>
+                  <li><a class="waves-effect" *ngFor="let file of getItems(folder?.path); let i = index;" mdbWavesEffect>{{file.name}}</a></li>
+                </ul>
+              </mdb-item-body>
+            </mdb-item>
+
+          </mdb-squeezebox>
+        </ul>
+      </li>
+      <!--/. Side navigation links -->
+    </links>
+    <div class="sidenav-bg mask-strong"></div>
+  </mdb-sidenav>
+  <!--/. Sidebar navigation -->
+
+  <!-- Navbar -->
+  <mdb-navbar SideClass="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav" [containerInside]="false">
+
+    <navlinks class="navbar-container">
+      <!-- SideNav slide-out button -->
+      <div class="float-left">
+        <a (click)="sidenav.show()" class="button-collapse"><i class="fa fa-bars"></i></a>
+      </div>
+      <!--/. SideNav slide-out button -->
+    </navlinks>
+
+    <logo>
+      <!-- Breadcrumb-->
+      <div class="breadcrumbs breadcrumb-dn mr-auto">
+        <p>Welcome</p>
+      </div>
+      <!--/. Breadcrumb-->
+    </logo>
+
+    <navlinks>
+      <ul class="nav navbar-nav nav-flex-icons ml-auto ie-double-nav">
+        <li class="nav-item">
+          <a class="nav-link waves-light" mdbWavesEffect><i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block"> {{currentUser.username}} </span></a>
+        </li>
+        <li class="nav-item" (click)="logout()">
+          <a class="nav-link waves-light" mdbWavesEffect><i class="fa fa-sign-out mr-1"></i> <span class="clearfix d-none d-sm-inline-block">Log out</span></a>
+        </li>
+      </ul>
+    </navlinks>
+  </mdb-navbar>
+  <!--/. Navbar -->
+
+</header>
+<!--/.Double navigation-->
+
+<!--Main Layout-->
+<main style="margin-left: 0%; margin-right: 0%;">
+  <div class="container-fluid" style="margin:0%; padding: 0%">
+    <app-book [socialIdUser]="socialIdUser"></app-book>
+  </div>
+
+
+</main>
+<!--/Main layout-->

src/app/main/main.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainComponent } from './main.component';
+
+describe('MainComponent', () => {
+  let component: MainComponent;
+  let fixture: ComponentFixture<MainComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MainComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MainComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/main/main.component.ts

@@ -0,0 +1,113 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+
+@Component({
+  selector: 'app-main',
+  templateUrl: './main.component.html',
+  styleUrls: ['./main.component.scss']
+})
+export class MainComponent implements OnInit {
+    httpOptions: any;
+    allUserAppFolder: any;
+    allUserAppFile: any;
+    mainFolder: any;
+    currentUser: any;
+    socialIdUser: String;
+  constructor(private router: Router, private route: ActivatedRoute, private http: HttpClient) { }
+
+    logout() {
+      localStorage.removeItem('jwtToken');
+      this.router.navigate(['home']);
+    }
+
+  ngOnInit() {
+      this.httpOptions = {
+          headers: new HttpHeaders({
+              'Authorization': localStorage.getItem('jwtToken'),
+              'Access-Control-Allow-Origin' : '*',
+              'Access-Control-Allow-Methods' : 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
+              'Access-Control-Allow-Headers' : 'Origin, X-Requested-With, Content-Type, Accept'
+          }),
+          pathFolder: ''
+      };
+
+
+      this.http.get('/api/getCurrentUser', this.httpOptions).subscribe(user => {
+          this.currentUser  = user;
+          if (user) {
+              this.getAllUserAppFolder();
+          }
+      }, err => {
+          if (err.status === 401) {
+              this.router.navigate(['/']);
+          }
+      });
+      // this.httpOptions = {
+      //     headers: new HttpHeaders({ 'Authorization': localStorage.getItem('jwtToken'), 'Access-Control-Allow-Origin' : '*'}),
+      //     pathFolder: ''
+      // };
+
+
+
+  }
+
+
+    getItems(path) {
+      var test = [];
+        if(this.allUserAppFile !== undefined){
+            test = this.allUserAppFile.filter((file) => file.path === path);
+        }
+        return test;
+    }
+
+    setOriginFolder(path) {
+        var pathChunk = path.split('/');
+
+        var origin = pathChunk.length === 1 ? pathChunk[0] : pathChunk[pathChunk.length - 2]
+
+        return origin;
+    }
+
+    getItemsFolder(name) {
+      var tempp;
+        var test = [];
+        if(this.allUserAppFolder !== undefined) {
+            tempp = this.allUserAppFolder;
+            test = tempp.filter((folder) => folder.origin === name);
+
+        }
+        return test;
+    }
+
+    getAllUserAppFiles() {
+        this.http.post('/api/getFileAppList', {owner: this.currentUser.username.toString()}).subscribe(files => {
+            if (files) {
+                this.allUserAppFile = files;
+                // return files;
+            } else {
+                this.allUserAppFile = [];
+            }
+        });
+    }
+
+    getAllUserAppFolder(){
+
+        this.http.post('/api/getFolderAppList', {owner: this.currentUser.username.toString()}).subscribe(folders => {
+            if (folders) {
+
+                this.allUserAppFolder = folders;
+                for (let f of this.allUserAppFolder){
+                    f.origin = this.setOriginFolder(f.path);
+                    //console.log('origin : ' + f.origin);
+                }
+                this.getAllUserAppFiles();
+
+                    } else {
+                this.allUserAppFolder = [];
+            }
+        });
+
+
+    }
+}

src/app/typescripts/pro/autocomplete/components/completer.component.html

@@ -1,4 +1,4 @@
-<div class="completer-holder md-form" mdbCompleter>
+<div class="completer-holder md-form" style="margin-top: 0" mdbCompleter>
   
   <input #mdbInput [attr.id]="inputId.length > 0 ? inputId : null" type="search" class="completer-input form-control mdb-autocomplete" mdbInput [ngClass]="inputClass" 
     [(ngModel)]="searchStr" (ngModelChange)="onChange($event)" [attr.name]="inputName" [placeholder]="placeholder"

src/index.html

@@ -17,6 +17,7 @@
     <mdb-root></mdb-root>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script>
+        <script src="./path/to/dropzone.js"></script>
         <script>
         	new WOW().init();
         </script>

views/error.pug

@@ -0,0 +1,6 @@
+extends layout
+
+block content
+    h1= message
+    h2= error.status
+    pre #{error.stack}

views/index.pug

@@ -0,0 +1,38 @@
+extends layout
+
+block content
+    h1= title
+
+    div(class="col-md-4")
+        h2 Create user
+
+        form(action="/users/create", method="post", class="well")
+            div(class="form-group")
+                label(for="username")
+                    | Username
+                input(type="text", name="username", class="form-control")
+            input(type="submit" class="btn btn-default")
+
+    div(class="col-md-6")
+        h2 Users
+
+        ul
+        each user in users
+            li
+                strong
+                    = user.username
+                |  
+                a(href="/users/" + user.id + "/destroy", class="btn btn-xs btn-warning") delete
+                ul
+                    li
+                        | Create task
+                        form(action="/users/" + user.id + "/tasks/create", method="post", class="form-inline")
+                            div(class="form-group")
+                                input(type="text", name="title", class="input-sm form-control")
+                                input(type="submit", class="btn btn-sm btn-default")
+                    each task in user.Tasks
+                        li
+                            strong
+                                = task.title
+                            |  
+                            a(href="/users/" + user.id + "/tasks/" + task.id + "/destroy",  class="btn btn-xs btn-warning") delete

views/layout.pug

@@ -0,0 +1,8 @@
+doctype html
+html
+    head
+        title= title
+        link(rel='stylesheet', href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css')
+        link(rel='stylesheet', href='/stylesheets/style.css')
+    body
+        block content