Merge branch 'anis' of ssh://git.marbelium.com:10023/Viiciouss/Sup_File into anis
commit
3a4053f72f
@ -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;
|
||||
@ -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;
|
||||
@ -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;
|
||||
@ -1,28 +1,53 @@
|
||||
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) {
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
}));
|
||||
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) {
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
}));
|
||||
};
|
||||
|
||||
@ -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);
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,6 @@
|
||||
{
|
||||
"/api": {
|
||||
"target": "http://localhost:3000",
|
||||
"secure": false
|
||||
}
|
||||
}
|
||||
@ -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%;
|
||||
}
|
||||
@ -1,64 +1,201 @@
|
||||
<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" >
|
||||
Fichier à ajouter<input type="file" style="display: none;" #myPicture name="myPicture" (change)="fileChangeEvent($event)">
|
||||
<div class="container-fluid">
|
||||
<div *ngIf="mainFolder">
|
||||
<p> Path : {{mainFolder.path}}</p>
|
||||
<p> Vous êtes dans le dossier : {{mainFolder.name}}</p>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<button type="button" class="btn btn-warning" (click)="upload()">Ajouter le fichier {{fileChooseName}}</button>
|
||||
|
||||
<label> Vous avez choisi : {{fileChooseName}}</label>
|
||||
</div>
|
||||
<table class="table table-striped">
|
||||
</div>
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Nom</th>
|
||||
<th>Taille</th>
|
||||
<th>Type</th>
|
||||
<th>Date d'ajout</th>
|
||||
<th>#</th>
|
||||
<th>Nom</th>
|
||||
<th>Taille</th>
|
||||
<th>Type</th>
|
||||
<th>Date d'ajout</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let file of allUserFile; let i = index;">
|
||||
<th scope="row">{{ i + 1 }}</th>
|
||||
<td>{{ file.name }}</td>
|
||||
<td>{{ file.taille / ( 1024 * 1024 ) | number : '1.2-2'}} Mo</td>
|
||||
<td>{{ file.extention }}</td>
|
||||
<td>{{ file.lastDate }}</td>
|
||||
<div *ngIf="file.extention === ('image/jpeg')">
|
||||
<img src="../../../{{ file.path }}" class="img-fluid flex-center" width="150" height="150">
|
||||
</div>
|
||||
<div *ngIf="file.extention === ('image/png')">
|
||||
<img src="../../../{{ file.path }}" class="img-fluid flex-center" width="150" height="150">
|
||||
</div>
|
||||
<div *ngIf="file.extention === ('application/pdf')">
|
||||
<i class="fa fa-file-pdf-o" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div *ngIf="file.extention === ('video/mp4')">
|
||||
<i class="fa fa-file-movie-o" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div *ngIf="file.extention === ('text/plain')">
|
||||
<i class="fa fa-file-text-o" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div *ngIf="file.extention === ('audio/mpeg')">
|
||||
<i class="fa fa-file-audio-o" aria-hidden="true"></i>
|
||||
</div>
|
||||
<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;">
|
||||
<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-->
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<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>
|
||||
|
||||
<!--
|
||||
<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>
|
||||
-->
|
||||
</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 }}</td>
|
||||
<div *ngIf="file.type === ('image/jpeg')">
|
||||
<img [src]=file.urlSafe class="img-fluid flex-center" width="350" height="200">
|
||||
</div>
|
||||
<div *ngIf="file.type === ('image/png')">
|
||||
<img [src]=file.urlSafe class="img-fluid flex-center" 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>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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-->
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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() {
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue