Commit 15e73cb2 authored by Nacim Goura's avatar Nacim Goura

add register and page index

parent bb2c2c4e
......@@ -25,6 +25,7 @@
"indent": ["error", "tab", { "SwitchCase": 1 }],
"linebreak-style": ["error", "unix"],
"semi": ["error", "always"],
"no-console": "off"
"no-console": "off",
"meteor/no-session": [0]
}
}
......@@ -4,179 +4,5 @@
// Global namespace
@import "../imports/ui/stylesheets/sidebar.scss";
/* CSS declarations go here */
body {
margin-top: 50px;
overflow: hidden;
}
form {
margin-bottom: 20px;
}
@media (min-width: $grid-float-breakpoint) {
.container-fluid {
margin-left: 42px;
}
}
.row {
padding-top: 5px;
}
.wrapper {
position: relative;
overflow: auto;
background-color: #ffffff;
padding-top: 15px;
}
.border-left {
border-left: 1px solid $table-border-color;
}
.navbar-inverse .navbar-brand {
font-size: 24px;
}
.two-cols {
column-count: 2;
}
.fa {
font-size: 16px;
}
.two-columns {
column-count: 2;
}
.view-group-addon .fa,
.delete-group-addon .fa {
color: #ffffff;
}
.radio-select-inline > div,
.radio-select-inline .radio {
display: inline-block;
vertical-align: bottom;
}
.radio-select-inline label:first-child {
padding-right: 10px;
}
.rc-percentage {
margin-bottom: 0;
width: 120px
}
.panel-footer {
background: transparent;
}
.input-group-addon {
color: #fff;
}
.max-height {
height: 100%;
overflow: auto;
}
.max-width {
width: 100%;
}
.half-width {
width: 50%;
}
.clear {
overflow: auto;
}
.btn-interface {
padding: 5px 2px 3px 2px;
position: absolute;
top: 0;
}
.btn-interface-caption {
position: relative;
top: 0;
margin-right: 5px;
}
.caption-title {
font-weight: bold;
color: $gray-dark;
}
.label-display {
font-weight: bold;
}
.nav-tabs {
border-bottom-width: 0;
}
.radio,
.checkbox {
margin: 0;
}
.relative {
position: relative;
}
span.link {
color: $brand-primary;
text-decoration: underline;
cursor: pointer;
}
.modal-header {
border-radius: 6px 6px 0 0;
}
.big-modal {
width: 75% !important;
height: 80vh !important;
margin: 10vh auto !important;
.modal-body {
position: absolute;
width: 100%;
top: 50px;
bottom: 0;
overflow-y: auto;
}
.tab-content {
position: absolute;
top: 65px;
bottom: 0;
overflow-y: auto;
}
.tab-pane {
padding-bottom: 60px;
}
.btn-region {
position: absolute;
bottom: 15px;
right: 15px;
left: 15px;
}
}
.movable {
cursor: move;
}
.not-movable {
cursor: no-drop;
}
.warning {
@extend .bg-warning;
}
.danger {
@extend .bg-danger;
}
@import "../imports/ui/stylesheets/tabs.scss";
@import "../imports/ui/stylesheets/other.scss";
// import dependance
// import dependancies
import { FlowRouter } from 'meteor/kadira:flow-router';
import { BlazeLayout } from 'meteor/kadira:blaze-layout';
......@@ -8,6 +8,6 @@ const adminSection = FlowRouter.group({
adminSection.route('/indexation', {
action() {
BlazeLayout.render('mainLayoutTpl', { sidebar: 'sidebarTpl', main: 'homeTpl', navbar: 'navbarTpl' });
BlazeLayout.render('mainLayoutTpl', { sidebar: 'sidebarTpl', main: 'indexationTpl', navbar: 'navbarTpl' });
},
});
// import dependance
// import dependancies
import { FlowRouter } from 'meteor/kadira:flow-router';
import { BlazeLayout } from 'meteor/kadira:blaze-layout';
import { Accounts } from 'meteor/accounts-base';
......@@ -8,18 +8,26 @@ import '../../ui/layouts/main/main.js';
import '../../ui/layouts/sidebar/sidebar.js';
import '../../ui/layouts/navbar/navbar.js';
import '../../ui/pages/login/login.js';
import '../../ui/pages/home/home.js';
import '../../ui/pages/register/register.js';
import '../../ui/pages/indexation/indexation.js';
// Routing
import './adminRoutes.js';
FlowRouter.route('/', {
FlowRouter.route(['/', '/login'], {
name: 'App.home',
action() {
BlazeLayout.render('mainLayoutTpl', { main: 'loginTpl', navbar: 'navbarTpl' });
},
});
FlowRouter.route('/register', {
name: 'App.register',
action() {
BlazeLayout.render('mainLayoutTpl', { main: 'registerTpl', navbar: 'navbarTpl' });
},
});
FlowRouter.route('/logout', {
name: 'logout',
action() {
......
<template name="tabsTpl">
<ul class="nav nav-tabs {{module}}-tabs">
{{#each tab in tabsList}}
<li role="presentation" class="{{#if tab.activ}}active{{/if}}">
<a href="">
<span class="tab-select" data-id="{{tab._id}}">{{tab.label}}</span>
{{#if tab.closable}}
<span class="tab-close" data-id="{{tab._id}}">
<i class="fa fa-times" aria-hidden="true"></i>
</span>
{{/if}}
</a>
</li>
{{/each}}
</ul>
</template>
import TabsCollection from './tabsCollection.js';
import { Template } from 'meteor/templating';
import {Session} from 'meteor/session';
import './tabs.html';
/**
* TEMPLATE HELPERS
*/
Template.tabsTpl.helpers({
tabsList() {
const module = Template.instance().data.module;
return TabsCollection.find({module: module}, {sort: {sort: 1, createdAt: 1}});
},
module() {
return Template.instance().data.module;
}
});
/**
* TEMPLATE EVENTS
*/
Template.tabsTpl.events({
'click .tab-select'(event) {
let _id = $(event.target).data("id") || null,
item = _id ? TabsCollection.findOne({_id: _id}) : null;
if (!item.activ) {
// add "activ" to the selected tab
TabsCollection.update({_id: _id}, {$set: {activ: true}});
}
},
'click .tab-close'(event) {
event.stopPropagation();
event.preventDefault();
let _id = $(event.target).parent().data("id") || null,
item = _id ? TabsCollection.findOne({_id: _id}) : null,
module = item && item.module || null;
// remove the selected tab from collection
TabsCollection.remove({_id: _id});
// add "activ to the first item of the collection
let itemToActivate = TabsCollection.findOne({module: module});
TabsCollection.update({_id: itemToActivate._id}, {$set: {activ: true}});
}
});
/**
* TEMPLATE LIFECYCLE
*/
Template.tabsTpl.onCreated(function () {
let module = this.data.module;
// set a cursor observer on tabCollection query
let query = TabsCollection.find({module: module, activ: true});
let handle = query.observeChanges({
added(id, tab) {
// Deactivate previous tabs of the module
if (Session.get(module)) {
// check if it is a real update
let oldTab = Session.get(module),
oldId = oldTab._id;
delete(oldTab._id);
let isUpdate = !_.isEqual(oldTab, tab);
if (isUpdate) {
TabsCollection.update({_id: oldId}, {$set: {activ: false}});
// display layout
tab._id = id;
Session.set(module, tab);
}
} else {
// display layout
tab._id = id;
Session.set(module, tab);
}
}
});
});
import {SimpleSchema} from 'meteor/aldeed:simple-schema';
import {Mongo} from 'meteor/mongo';
/**
* this local collection keep tracks of all tabs of this application
* @type {Mongo.Collection}
*/
const TabsCollection = new Mongo.Collection(null);
SimpleSchema.TabsCollection = new SimpleSchema({
module: {
type: String
},
layout: {
type: String,
},
label: {
type: String
},
state: {
type: Object,
optional: true,
blackbox: true
},
closable: {
type: Boolean,
defaultValue: true
},
activ: {
type: Boolean,
defaultValue: false
},
sort: {
type: Number,
defaultValue: 0
},
createdAt: {
type: Date,
defaultValue: new Date()
}
});
TabsCollection.attachSchema(SimpleSchema.TabsCollection);
export default TabsCollection;
......@@ -3,7 +3,7 @@
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">meteorSearch</a>
<a class="navbar-brand" href="/">meteorSearch</a>
</div>
</div>
</nav>
......
import { FlowRouter } from 'meteor/kadira:flow-router';
import './sidebar.html';
<template name="homeTpl">
<!-- homeTpl -->
<template name="apiIndexationTpl">
<div class="panel panel-default wrapper">
<div class="panel-body">
Indexation des API
</div>
</div>
</template>
import { Template } from 'meteor/templating';
import './api.html';
<template name="indexationTpl">
<!-- indexationTpl -->
{{> tabsTpl module="indexation"}}
{{> Template.dynamic template=template}}
</template>
import { Template } from 'meteor/templating';
import { Session } from 'meteor/session';
import TabsCollection from '../../components/tabs/tabsCollection.js';
import '../../components/tabs/tabs.js';
import './api/api.js';
import './site/site.js';
import './indexation.html';
/**
* define tab depending on session
*/
Session.set("indexation", null);
let tabs = [
{module: "indexation", layout: "siteIndexationTpl", label: "Index site", state: {}, activ: true, closable: false, sort: -1},
{module: "indexation", layout: "apiIndexationTpl", label: "index API", state: {}, activ: false, closable: false, sort: 1000}
];
tabs.forEach(function (tab) {
TabsCollection.insert(tab);
});
/**
* change template dynamically
*/
Template.indexationTpl.helpers({
template() {
let currentTab = Session.get("indexation");
return currentTab.layout;
}
});
<template name="siteIndexationTpl">
<div class="panel panel-default wrapper">
<div class="panel-body">
<form class="form-horizontal">
<div class="input-group input-group-lg">
<input type="url" class="form-control" placeholder="Url">
<span class="input-group-addon">Valider</span>
</div>
</form>
</div>
</div>
</template>
import { Template } from 'meteor/templating';
import './site.html';
Template.siteIndexationTpl.events({
'submit form'(event) {
}
});
import { Meteor } from 'meteor/meteor';
import { FlowRouter } from 'meteor/kadira:flow-router';
import { Template } from 'meteor/templating';
import './login.html';
......@@ -17,5 +18,5 @@ Template.loginTpl.events({
FlowRouter.go('/admin/indexation');
}
});
},
}
});
<template name="registerTpl">
<!-- template registerTpl -->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title text-center">
<h3 class="plain">Registration</h3>
<small>Already Registered ? <a href="/login">Sign In</a></small>
</div>
</div>
<form class="register-form">
<div class="panel-body">
<div class="message alert"></div>
<div class="form-group">
<label for="name" class="cols-sm-2 control-label">Name</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa"
aria-hidden="true"></i></span>
<input type="text" class="form-control" name="name" id="name"
placeholder="Enter your Name"/>
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="cols-sm-2 control-label">Email</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa"
aria-hidden="true"></i></span>
<input type="text" class="form-control" name="email" id="email"
placeholder="Enter your Email"/>
</div>
</div>
</div>
<div class="form-group">
<label for="username" class="cols-sm-2 control-label">Username</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-users fa"
aria-hidden="true"></i></span>
<input type="text" class="form-control" name="username" id="username"
placeholder="Enter your Username"/>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="cols-sm-2 control-label">Password</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg"
aria-hidden="true"></i></span>
<input type="password" class="form-control" name="password" id="password"
placeholder="Enter your Password"/>
</div>
</div>
</div>
<div class="form-group">
<label for="" class="cols-sm-2 control-label">Rôles</label>
<div class="checkbox">
{{#each roles}}
<label>
<input type="checkbox" name="roles" value="{{name}}">
<span class="role-label">{{name}}</span>
</label>
{{/each}}
</div>
</div>
</div>
<div class="panel-footer">
<div class="form-group ">
<button type="submit" class="btn btn-primary btn-lg btn-block login-button">Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</template>
import { Meteor } from 'meteor/meteor';
import { FlowRouter } from 'meteor/kadira:flow-router';
import { Accounts } from 'meteor/accounts-base';
import { Template } from 'meteor/templating';
import './register.html';
Template.registerTpl.helpers({
'roles': function () {
return Meteor.roles.find({});
}
});
Template.registerTpl.events({
'submit form': function (event) {
console.log('===================================================');
console.log('roles',event.target.roles);
console.log('===================================================');
event.preventDefault();
const email = event.target.email.value;
const password = event.target.password.value;
const name = event.target.name.value;
const username = event.target.username.value;
let roles = [];
// get roles values
event.target.roles.forEach(function(item) {
if (item.checked) {
roles.push(item.value);
}
console.log(item.checked, item.value);
});
// Ask user creation on server side
Accounts.createUser({
email: email,
password: password,
name: name,
username: username,
roles: roles
}, function (err) {
if (err) {
$('.message').html(err.reason).addClass('alert-danger');
console.log('===================================================');
console.log('err', err);
console.log('===================================================');
} else {
FlowRouter.go('/');
}
});
}
});
body {
margin-top: 50px;
overflow: hidden;
}
form {
margin-bottom: 20px;
}
@media (min-width: $grid-float-breakpoint) {
.container-fluid {
margin-left: 42px;
}
}
.row {
padding-top: 5px;
}
.wrapper {
position: relative;
overflow: auto;
background-color: #ffffff;
padding-top: 15px;
}
.border-left {
border-left: 1px solid $table-border-color;
}
.navbar-inverse .navbar-brand {
font-size: 24px;
}
.two-cols {
column-count: 2;
}
.fa {
font-size: 16px;
}
.two-columns {
column-count: 2;
}
.view-group-addon .fa,
.delete-group-addon .fa {
color: #ffffff;
}
.radio-select-inline > div,
.radio-select-inline .radio {
display: inline-block;
vertical-align: bottom;
}
.radio-select-inline label:first-child {
padding-right: 10px;
}
.rc-percentage {
margin-bottom: 0;
width: 120px
}
.panel-footer {
background: transparent;
}
.input-group-addon {
color: #fff;
}