Merge branch 'anis' of ssh://git.marbelium.com:10023/Viiciouss/Sup_File into anis

.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,8 +5,9 @@ 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!");
@@ -17,15 +18,20 @@ 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(session({
+  secret: 's3cr3t',
+  resave: true,
+  saveUninitialized: true
+}));
 app.use(passport.initialize());
-
+app.use(passport.session());
 
 app.use(logger('dev'));
 app.use(bodyParser.json());
@@ -33,20 +39,26 @@ 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('/books', express.static(path.join(__dirname, 'dist')));
 app.use('/api', api);
 
+//app.use('/api', faceBK);
 // catch 404 and forward to error handler
 app.use(function(req, res, next) {
   var err = new Error('Not Found');
   err.status = 404;
   next(err);
 });
-
+app.use(session({
+    secret: 's3cr3t',
+    resave: true,
+    saveUninitialized: true
+}));
 // error handler
 app.use(function(err, req, res, next) {
   // set locals, only providing error in development

auth/facebook.js

@@ -0,0 +1,37 @@
+var passport = require('passport');
+var FacebookStrategy = require('passport-facebook').Strategy;
+var User = require('../models/user');
+// module.exports = function(passport){
+//
+// };
+
+passport.use(new FacebookStrategy({
+        clientID: "191092458179642",
+        clientSecret: "964e490d7e49a13ee7a77c9b65419fb3",
+        callbackURL: "http://127.0.0.1:3000/api/facebook/callback"
+    },
+    function(accessToken, refreshToken, profile, done) {
+        console.log('yaaauuu : ' + accessToken + ' ----- ' + profile.displayName + ' ----- ' + profile.id);
+        done(null, {profile, accessToken});
+        // User.findOrCreate({username: profile.displayName}, {username: profile.displayName, id: profile.id}, 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;

config/passport.js

@@ -1,14 +1,35 @@
-var JwtStrategy = require('passport-jwt').Strategy,
+var JwtStrategy = require('passport-jwt').Strategy;
-  ExtractJwt = require('passport-jwt').ExtractJwt;
+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 FacebookStrategy({
+            clientID: "191092458179642",
+            clientSecret: "964e490d7e49a13ee7a77c9b65419fb3",
+            callbackURL: "http://localhost:3000/api/facebook/callback"
+        },
+        function(accessToken, refreshToken, profile, done) {
+            console.log('yaaauuu : ' + accessToken + ' ----- ' + profile.displayName);
+
+            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);
+            });
+        }
+    ));
+*/
     passport.use(new JwtStrategy(opts, function(jwt_payload, done) {
 
         User.findOne({id: jwt_payload.id, username: jwt_payload.username}, function(err, user) {
@@ -24,5 +45,9 @@ module.exports = function(passport) {
                 done(null, false);
             }
         });
+
+
+
+
     }));
 };

models/FileMongo.js

@@ -14,7 +14,7 @@ var FileMongoShema = new Schema({
         type: String,
         unique: false
     },
-  extention: {
+    type: {
         type: String,
         unique: false
     },
@@ -33,6 +33,10 @@ var FileMongoShema = new Schema({
     lastDate: {
         type: String,
         unique: false
+    },
+    url: {
+      type: String,
+      unique: false
     }
 });
 

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

@@ -14,6 +14,8 @@ var UserSchema = new Schema({
   }
 });
 
+UserSchema.statics.findOrCreate = require("find-or-create");
+
 UserSchema.pre('save', function (next) {
   var user = this;
   if (this.isModified('password') || this.isNew) {

package.json

@@ -4,12 +4,13 @@
   "license": "custom",
   "scripts": {
     "ng": "ng",
-    "start": "ng build && node ./bin/www",
+    "start": "npm run build & concurrently --kill-others \"npm run serve-api\" \"npm run serve\"",
-    "build": "ng build --prod",
+    "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,
@@ -33,9 +34,12 @@
     "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",
@@ -48,13 +52,18 @@
     "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",
     "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,16 +2,53 @@ 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');
+
+//var router = express.Router([options]);
+
+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;
+    }
+};
+
+/* config multer dossier cible et nom du file */
+const storage = multer.diskStorage({
+    destination: function (req, file, cb) {
+        cb(null, './public/')
+    },
+    filename: function (req, file, cb) {
+        cb(null, file.originalname)
+    }
+});
+
+
 /* GET home page. */
 router.get('/', function(req, res, next) {
     res.send('Express RESTful API');
@@ -38,27 +75,169 @@ router.post('/signup', function(req, res) {
 
 /* 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);
     });
 });
 
+/* 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);
+    });
+});
+
+/* SAVE FOLDER */
+router.post('/createFolder', function(req, res, next) {
+    FolderMongo.create(req.body, function (err, post) {
+        if (err){
+            return next(err);
+        }
+        res.json(post);
+    });
+});
+
+
+
 /* DELETE FILE */
 router.post('/deleteFileMongo', function(req, res, next) {
+    console.log('nana : ' + JSON.stringify(req.body));
+    FileMongo.remove({_id : req.body._id, name: req.body.name, owner: req.body.owner}, function (err, post) {
+        if (err){
+            console.log('nana err : ' + err);
 
-  FileMongo.remove(req.body, function (err, post) {
+            return next(err);
+        }
+        //Delete file multer dans Public
+        console.log('this.getStringExtention(req.body) : ' + getStringExtention(req.body));
+        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);
+
     });
 });
 
+/* 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);
+    });
+});
+
+/* 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);
+    });
+});
+
+/* 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);
+    });
+});
+
+
+/* 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);
+    });
+});
+
+/* 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);
+    });
+
+});
+
+/* 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);
+    });
+
+});
+
+/* Get tout les folders du user */
+router.post('/getFolderAppList', function(req, res) {
+    FolderMongo.find({
+        owner: req.body.owner
+    }, function(err, folder) {
+        res.json(folder);
+    });
+});
+
+/* 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);
+    });
+
+});
+
+/* Login */
 router.post('/signin', function(req, res) {
     User.findOne({
         username: req.body.username
@@ -71,7 +250,7 @@ router.post('/signin', function(req, res) {
             // check if password matches
             user.comparePassword(req.body.password, function (err, isMatch) {
                 if (isMatch && !err) {
-          console.log('req.user.username logggggg ::: ' + JSON.stringify(user));
+                    console.log('req.user.username log : ' + 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
@@ -85,117 +264,120 @@ router.post('/signin', function(req, res) {
 });
 
 
-router.post('/book', passport.authenticate('jwt', { session: false}), function(req, res) {
+/* Multer upload */
-  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
-    });
-
-    newBook.save(function(err) {
-      if (err) {
-        return res.json({success: false, msg: 'Save book failed.'});
-      }
-      res.json({success: true, msg: 'Successful created new book.'});
-    });
-  } 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);
-  }
-});
-*/
-const storage = multer.diskStorage({
-  destination: function (req, file, cb) {
-    cb(null, './public/')
-  },
-  filename: function (req, file, cb) {
-    cb(null, file.originalname)
-  }
-});
-
-//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, limits: {fileSize: 30000000000}}).array("public[]", 12) ,function(req,res,next){
-
-  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);
-
 });
 
-router.get('/allUserFile', passport.authenticate('jwt', { session: false}), function(req, res) {
+/* Get utilisateur courant */
+router.get('/getCurrentUser', passport.authenticate('jwt', { session: false}), function(req, res) {
     var token = getToken(req.headers);
 
     if (token) {
-    console.log('oooooo : ' + req.user._id + ' ::: kaka : ' + req.user.username);
-    FileMongo.find({
-      idUser: req.user._id,
-      owner: req.user.username
-    }, function(err, file) {
-      console.log('userrrr baa : ' + JSON.stringify(file));
-      res.json(file);
-    });
-  } else {
-    return res.status(403).send({success: false, msg: 'Unauthorized.'});
-  }
-});
-
-
-router.get('/book', passport.authenticate('jwt', { session: false}), function(req, res) {
-  var token = getToken(req.headers);
-
-  if (token) {
-    console.log('oooooo : ' + req.user._id + ' ::: kaka : ' + req.user.username);
-    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.'});
     }
 });
 
-router.get('/book/file',  function(req, res) {
 
-  res.sendFile(__dirname + '/api/book');
 
+////////////
+
+
+
+/* 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'));
+
+
+///////////////////
+router.get('/facebook/callback',
+    passportFacebook.authenticate('facebook', { failureRedirect: 'api/' }),
+    function(req, res) {
+        console.log('faceeeeboookk !!');
+        // Successful authentication, redirect home.
+        res.redirect('/api/main');
+    });
+// router.get('/facebook/callback/:id', passport.authenticate('facebook'), function(req, res, err, user, info){
+//     console.log('faceeeeboookk !!');
+//
+//     //console.log('faceeeeboookk !!' + JSON.stringify(req));
+//     //console.log('faceeeeboookk !!' + JSON.stringify(res));
+//     //console.log('faceeeeboookk !!' + next);
+//
+//     // console.log('yaaaaaaTTTTa ' + JSON.stringify(user));
+//     // if(err){
+//     //     console.log('errrrooor  : ' + err);
+//     //     //if(res){
+//     //         //res.json({ error: err });
+//     //     return next(err);
+//     //     //}
+//     //
+//     // }
+//     // console.log('req.user.username log : ' + err + info);
+//     // // Successful authentication, redirect home.
+//     // if(user){
+//     //     User.findOne({username: user.profile.displayName},function(err,result){
+//     //         if(!result){
+//     //             var newUser = new User({username: user.profile.displayName, id: user.profile.id, password: 'couille'});
+//     //             // save the user
+//     //             console.log('rererer : '+ JSON.stringify(newUser));
+//     //             newUser.save(function(err) {
+//     //                 if (err) {
+//     //                     console.log('err already exists.' + err);
+//     //                 }
+//     //                 console.log('Successful created new user.');
+//     //                 return req.res.redirect('/main');
+//     //
+//     //             });
+//     //         }else{
+//     //             return next(err);
+//     //         }
+//     //     });
+//     // }else{
+//     //     return req.res.redirect('/login');
+//     // }
+//
+//
+//
+// });
+
+
+
+// router.get('/facebook',
+//     passportFacebook.authenticate('facebook', { scope: ['read_stream', 'publish_actions'] })
+// );
+
+/* 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'] })
+);
 
-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;
-  }
-};
 
 module.exports = router;

src/app/app.module.ts

@@ -18,11 +18,38 @@ 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';
+
+
+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: 'home',
+        component: HomeComponent,
+        data: { title: 'home' }
+    },
     {
         path: 'main',
         component: MainComponent,
-        data: { title: 'Home Main' }
+        data: { title: 'Main' }
     },
     {
         path: 'books',
@@ -40,7 +67,7 @@ const appRoutes: Routes = [
         data: { title: 'Sign Up' }
     },
     { path: '',
-        redirectTo: '/login',
+        redirectTo: '/home',
         pathMatch: 'full'
     }
 ];
@@ -48,6 +75,7 @@ const appRoutes: Routes = [
 @NgModule({
   declarations: [
     AppComponent,
+    HomeComponent,
     LoginComponent,
     SignupComponent,
     MainComponent,
@@ -55,6 +83,11 @@ const appRoutes: Routes = [
   ],
   imports: [
     BrowserModule,
+    DropzoneModule,
+    VgCoreModule,
+    VgControlsModule,
+    VgOverlayPlayModule,
+    VgBufferingModule,
     BrowserAnimationsModule,
     FormsModule,
     HttpModule,
@@ -71,7 +104,12 @@ const appRoutes: Routes = [
       apiKey: 'Your_api_key'
     })
   ],
-  providers: [MDBSpinningPreloader],
+  providers: [
+      MDBSpinningPreloader,
+      {
+          provide: DROPZONE_CONFIG,
+          useValue: DEFAULT_DROPZONE_CONFIG
+      }],
   bootstrap: [AppComponent],
   schemas:      [ NO_ERRORS_SCHEMA ]
 })

src/app/book/book.component.css

@@ -0,0 +1,68 @@
+.app-title {
+    font-size: 24px;
+}
+
+.box-title {
+    font-size: 20px;
+}
+
+.box-container {
+    display: none;
+    position: fixed;
+    box-sizing: border-box;
+    height: 90%;
+    width: 80%;
+    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%;
+}

src/app/book/book.component.html

@@ -1,14 +1,39 @@
-  <div class="container-fluid">
+<div class="box-container align-middle" fxLayout="column" [ngStyle.lt-sm]="'min-height: 400;'">
+    <dropzone *ngIf="type === 'component'" class="dropzone-container" [config]="config" [disabled]="disabled" fxLayout="row" fxLayoutAlign="start strech" fxFlex="auto" [message]="'Click or drag file here to upload'" (error)="onUploadError($event)" (success)="onUploadSuccess($event)"></dropzone>
+</div>
 
-    <label class="btn btn-danger col-sm-2 col-md-2" >
+<div class="container-fluid">
-      Fichier à ajouter<input type="file" style="display: none;" #myPicture name="myPicture" (change)="fileChangeEvent($event)">
+    <div *ngIf="mainFolder">
-    </label>
+        <p> Path : {{mainFolder.path}}</p>
-
+        <p> Vous êtes dans le dossier : {{mainFolder.name}}</p>
-    <button type="button" class="btn btn-warning" (click)="upload()">Ajouter le fichier {{fileChooseName}}</button>
+        <button type="button" class="btn btn-sm btn-warning" mdbTooltip="Retour à : {{mainFolder.parent}}" placement="top" (click)="backToParentFolder()" *ngIf="mainFolder.path !== 'Home'"><i class="fa fa-chevron-left" aria-hidden="true"></i> {{mainFolder.parent}}</button>
-
-    <label> Vous avez choisi : {{fileChooseName}}</label>
     </div>
-  <table class="table table-striped">
+
+
+    <button type="button" class="btn btn-sm btn-warning" 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-danger btn-sm" mdbTooltip="Choisir fichier" 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 type="button" class="btn btn-sm btn-warning" mdbTooltip="Ajouter le fichier : {{fileChooseName}}" placement="top" (click)="upload()" >Ajouter le fichier {{fileChooseName}}</button>
+    <label *ngIf="fileChooseName !== ''"> Vous avez choisi : {{fileChooseName}}</label>
+
+
+</div>
+<table class="table table-striped">
     <thead>
     <tr>
         <th>#</th>
@@ -19,46 +44,158 @@
     </tr>
     </thead>
     <tbody>
+    <tr *ngFor="let folder of allUserFolder; let i = index;">
+        <td>
+            <button type="button" class="btn btn-sm btn-warning" mdbTooltip="Supprimer : {{folder.name}}" placement="top" (click)="deleteFolder(folder)"><i class="fa fa-close" aria-hidden="true"></i></button>
+            <button type="button" class="btn btn-sm btn-warning" mdbTooltip="Ouvrir : {{folder.name}}" placement="top" (click)="openFolder(folder.path)"><i class="fa fa-folder-open-o" aria-hidden="true"></i></button>
+            <!--<button type="button" class="btn btn-warning" (click)="renameFolder(folder)">Rename</button>-->
+            <div class="btn-group" dropdown>
+                <button type="button" dropdownToggle class="btn btn-success btn-sm dropdown-toggle-split px-3 waves-light" mdbTooltip="Déplacer : {{folder.name}}" placement="top"  mdbWavesEffect>
+                    <i class="fa fa-arrows" aria-hidden="true"></i>
+                </button>
+                <div class="dropdown-menu">
+                    <a class="dropdown-item" *ngFor="let folderDest of allUserAppFolder; let i = index;" (click)="moveFolder(folder, folderDest)">{{folderDest.name}}</a>
+                </div>
+            </div>
+        </td>
+
+        <td>
+            <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>
+            <input type="search" class="form-control col-xs-2" placeholder= "{{folder.name}}" [(ngModel)]="folder.name">
+        </td>
+        <!--<td>{{ folder.name }}</td>-->
+        <td>{{ folder.taille}} Mo</td>
+        <td>Folder</td>
+        <td>{{ folder.owner }}</td>
+        <i class="fa fa-folder-open-o" aria-hidden="true"></i>
+    </tr>
     <tr *ngFor="let file of allUserFile; let i = index;">
-      <th scope="row">{{ i + 1 }}</th>
+        <td>
-      <td>{{ file.name }}</td>
+            <div class="d-print-inline-flex">
+                <!--Dropdown primary-->
+                <div class="dropdown" dropdown>
+
+                    <!--Trigger-->
+                    <button dropdownToggle class="btn btn-sm btn-primary 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" href="#">Something else here</a>
+                        <div class="divider dropdown-divider"></div>
+                        <h6 class="dropdown-header">Rename</h6>
+                        <div class="list-inline-item">
+                            <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>
+                <!--/Dropdown primary-->
+
+
+                <div class="btn-group" dropdown>
+                    <!--Trigger-->
+                    <button type="button" dropdownToggle class="btn btn-success btn-sm dropdown-toggle-split px-3 waves-light" mdbTooltip="Déplacer : {{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.extention }}</td>
+        <td>{{ file.type }}</td>
         <td>{{ file.lastDate }}</td>
-      <div *ngIf="file.extention === ('image/jpeg')">
+        <div *ngIf="file.type === ('image/jpeg')">
-        <img src="../../../{{ file.path }}" class="img-fluid flex-center" width="150" height="150">
+            <img [src]=file.urlSafe class="img-fluid flex-center" width="350" height="200">
         </div>
-      <div *ngIf="file.extention === ('image/png')">
+        <div *ngIf="file.type === ('image/png')">
-        <img src="../../../{{ file.path }}" class="img-fluid flex-center" width="150" height="150">
+            <img [src]=file.urlSafe class="img-fluid flex-center" width="350" height="200">
         </div>
-      <div *ngIf="file.extention === ('application/pdf')">
+        <div *ngIf="file.type === ('application/pdf')">
-        <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
+            <!--<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.extention === ('video/mp4')">
+        <div *ngIf="file.type === ('video/mp4')">
-        <i class="fa fa-file-movie-o" aria-hidden="true"></i>
+            <!--<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.extention === ('text/plain')">
+        <div *ngIf="file.type === ('text/plain')">
-        <i class="fa fa-file-text-o" aria-hidden="true"></i>
+            <!--<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.extention === ('audio/mpeg')">
+        <div *ngIf="file.type === ''">
-        <i class="fa fa-file-audio-o" aria-hidden="true"></i>
+            <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>
     </tr>
 
     </tbody>
-  </table>
+</table>
-
-
-
-  <!--
-  <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 } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
@@ -7,6 +7,14 @@ 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';
+
+
 
 @Component({
   selector: 'app-book',
@@ -16,88 +24,290 @@ import * as formData from 'form-data';
 export class BookComponent implements OnInit, OnDestroy {
   currentUser: any;
   allUserFile: any;
+  allUserFolder: any;
+  allUserAppFolder: any;
+  mainFolder: any;
   books: any;
   filesToUpload: Array<File>;
   fileChooseName: string;
   httpOptions: any;
-  // tokenFromLogin: any;
+  isClickCreateFolder: boolean;
-  constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute) {
+  inputCreateFolder: String;
+  reader: FileReader;
+  test: String;
+  previewNode:any;
+  previewTemplate:any;
+  // config: DropzoneConfigInterface;
+  //myDropzone: Dropzone;
+  droptestt:any;
 
+    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 http: HttpClient, private router: Router, private route: ActivatedRoute, public sanitizer: DomSanitizer) {
+    this.isClickCreateFolder = false;
     this.fileChooseName = 'None';
     this.filesToUpload = [];
+    this.test = '';
+  }
+
+    public toggleType(): void {
+        this.type = (this.type === 'component') ? 'directive' : 'component';
+    }
+
+    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);
+    }
+
+    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]);
+
+        console.log('ggguu :' + JSON.stringify(args));
+        this.upload();
+        this.resetDropzoneUploads();
+        this.openFolder(this.mainFolder.path);
+
     }
 
   ngOnInit() {
-
-    this.route.params.subscribe(params => {
-      // this.tokenFromLogin = params['tokenFromLogin'];
-
       this.httpOptions = {
-        headers: new HttpHeaders({ 'Authorization': localStorage.getItem('jwtToken') })
+        headers: new HttpHeaders({ 'Authorization': localStorage.getItem('jwtToken'), 'Access-Control-Allow-Origin' : '*'}),
+        pathFolder: ''
       };
 
-      this.http.get('/api/book', this.httpOptions).subscribe(user => {
+      this.http.get('/api/getCurrentUser', this.httpOptions).subscribe(user => {
         this.currentUser  = user;
-        console.log('mothafuka cureent user : ' + JSON.stringify(this.currentUser));
+        this.openFolder('Home');
       }, err => {
         if (err.status === 401) {
           this.router.navigate(['login']);
         }
       });
+  }
+
+    deleteFile(fileToDelete) {
+        this.http.post('/api/deleteFileMongo', fileToDelete).subscribe(file => {
+            console.log('this.mainFolder.path : ' + this.mainFolder.path);
+            this.openFolder(this.mainFolder.path);
         });
-    this.getfile();
+    }
+
+    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);
+        });
+    }
+
+
+  getfiles() {
+      //var preview = document.querySelector('img');
+
+
+      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) {
+                  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);
+              }
 
               }
-  getfile() {
+          } else {
-      this.http.get('/api/allUserFile', this.httpOptions).subscribe(files => {
+              this.allUserFile = [];
-          this.allUserFile  = files;
-          console.log('mothafuka cureent user : ' + JSON.stringify(this.allUserFile));
-      }, err => {
-          if (err.status === 401) {
-              this.router.navigate(['login']);
           }
       });
   }
+
+  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.http.post('/api/getFolderAppList', {owner: this.currentUser.username.toString()}).subscribe(folders => {
+          if (folders) {
+              this.allUserAppFolder = folders;
+          } else {
+              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) {
+      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('errrrr folllder : ' + 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('errrrr folllder : ' + err);
+      });
+  }
+
   ngOnDestroy() {
     localStorage.removeItem('jwtToken');
-    // this.tokenFromLogin = '';
     this.httpOptions = null;
     this.currentUser  = null;
   }
+
   upload() {
-
+        var me = this;
-    this.makeFileRequest('http://localhost:3000/api/upload', [], this.filesToUpload).then((result) => {
+      if(this.mainFolder !== undefined){
-      // var source = 'http://localhost:3000/public/'+result[0].filename;
+          console.log('this.filesToUpload[0] : ' + JSON.stringify(this.filesToUpload[0]));
-      console.log('current USer Filleeee ::: '+ JSON.stringify(this.currentUser));
+          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 => {
-      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 };
+              me.saveURLFileMongo(resp);
-      var message = '';
+              var mee = this;
-      //console.log('mothafukaaaaaaaaaaa : ' + JSON.stringify(this.currentUser));
+              me.makeFileRequest('http://localhost:3000/api/upload', [], this.filesToUpload, resp).then((result) => {
-      //console.log('mothafukaaaaaaaaaaa : ' + this.currentUser._id);
+                  mee.getfiles();
-      console.log('avaaaaanttttt : ' + this.currentUser.username.toString() + '     ----     ' + this.currentUser._id.toString());
+                  mee.filesToUpload = null;
-      console.log('lastModifiedDateee : ' + this.filesToUpload[0].lastModifiedDate.toString());
+                  mee.fileChooseName = 'None';
-      // 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(), lastDate: this.filesToUpload[0].lastModifiedDate.toString() }).subscribe(resp => {
-        console.log('ok db !!' + resp.toString());
-          this.getfile();
-          this.filesToUpload = null;
-          this.fileChooseName = 'None';
-      }, 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);
-
-
               }, (error) => {
                   console.error(error);
               });
+          }, err => {
+              console.error(err);
+          });
+      }
   }
 
   fileChangeEvent(fileInput: any){
@@ -105,12 +315,13 @@ export class BookComponent implements OnInit, OnDestroy {
     this.fileChooseName = this.filesToUpload[0].name;
   }
 
-  makeFileRequest(url: string, params: Array<string>, files: Array<File>) {
+
+  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], files[0].name);
+      formData.append("public[]", files[0], monFile._id + this.getStringExtention(monFile));
       xhr.onreadystatechange = function () {
         if (xhr.readyState == 4) {
           if (xhr.status == 200) {
@@ -126,10 +337,10 @@ export class BookComponent implements OnInit, OnDestroy {
     });
   }
 
-  logout() {
-    this.httpOptions = null;
-    localStorage.removeItem('jwtToken');
-    this.router.navigate(['login']);
-  }
 
+    getStringExtention(monFile: any){
+        return ( monFile.name.indexOf('.') > 0 ) ? '.' + monFile.name.split('.').pop().toLowerCase() : '';
+    }
 }
+
+

src/app/home/home.component.html

@@ -0,0 +1,136 @@
+
+<!--Main Navigation-->
+<header>
+
+  <!--Navbar-->
+  <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
+    <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 active waves-light" mdbWavesEffect>
+          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item waves-light" mdbWavesEffect>
+          <a class="nav-link" href="#">Link</a>
+        </li>
+        <li class="nav-item waves-light" mdbWavesEffect>
+          <a class="nav-link" href="#">Profile</a>
+        </li>
+      </ul>
+      <form class="form-inline waves-light" mdbWavesEffect>
+        <div class="md-form mt-0">
+          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
+        </div>
+      </form>
+    </links>
+  </mdb-navbar>
+
+  <!--Intro Section-->
+  <section class="view intro-2">
+    <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">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae, quisquam iste, maiores. Nulla.</h6>
+                <br>
+                <a class="btn btn-outline-white wow fadeInLeft waves-light" data-wow-delay="0.3s" 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-indigo waves-light" mdbWavesEffect (click)="login()">Log In</button>
+                    <button class="btn btn-indigo 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"><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="text-center">
+                    <button class="btn btn-indigo waves-light" (click)="signup()" mdbWavesEffect>Sign up</button>
+                    <button class="btn btn-indigo waves-light" mdbWavesEffect (click)="showregister()">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"><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-->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+</header>
+<!--Main Navigation-->

src/app/home/home.component.scss

@@ -0,0 +1,44 @@
+
+.intro-2 {
+  background: url("http://mdbootstrap.com/img/Photos/Others/img%20(42).jpg")no-repeat center center;
+  background-size: cover;
+}
+.view {
+  height: 100vh !important;
+}
+.top-nav-collapse {
+  background-color: #3f51b5 !important;
+}
+.navbar:not(.top-nav-collapse) {
+  background: transparent !important;
+}
+@media (max-width: 768px) {
+  .navbar:not(.top-nav-collapse) {
+    background: #3f51b5 !important;
+  }
+}
+.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;
+  }
+}

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,60 @@
+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;
+  signupData = { username:'', password:'' };
+  loginData = { username: '', password: '' };
+  message = '';
+  messageR = '';
+  data: any;
+
+  constructor(private http: HttpClient, private router: Router) {
+    this.registerbool = false;
+  }
+
+  showregister() {
+    this.registerbool = !this.registerbool
+  }
+
+  login() {
+    this.http.post('/api/signin', this.loginData).subscribe(resp => {
+      this.data = resp;
+      localStorage.setItem('jwtToken', this.data.token);
+      this.router.navigate(['main']);
+    }, err => {
+      this.message = err.error.msg;
+    });
+  }
+
+  signup() {
+    this.http.post('/api/signup',this.signupData).subscribe(resp => {
+      // console.log(resp);
+      //this.router.navigate(['home']);
+      this.showregister();
+    }, err => {
+      this.messageR = err.error.msg;
+    });
+  }
+
+  facebook() {
+    this.http.get('/api/facebook').subscribe(resp => {
+      this.router.navigate(['main']);
+    }, err => {
+      this.message = err.error.msg;
+    });
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/login/login.component.html

@@ -15,3 +15,10 @@
     </p>
   </form>
 </div>
+
+
+
+<button onclick="location.href='/api/facebook'" type="button" 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

@@ -26,6 +26,14 @@ export class LoginComponent implements OnInit {
     });
   }
 
+    facebook() {
+        this.http.get('/api/facebook').subscribe(resp => {
+            this.router.navigate(['main']);
+        }, err => {
+            this.message = err.error.msg;
+        });
+    }
+
   ngOnInit() {
   }
 

src/app/main/main.component.ts

@@ -12,7 +12,7 @@ export class MainComponent implements OnInit {
 
     logout() {
       localStorage.removeItem('jwtToken');
-      this.router.navigate(['login']);
+      this.router.navigate(['home']);
     }
 
   ngOnInit() {

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>