beenull/disposable-mailbox-2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

merged components just to make everthing simpler

Browse source
This commit is contained in:
Synox 2016-07-09 02:00:22 +02:00
parent 7746c99a82
commit d3cd2b4b4f
34 changed files with 219 additions and 307 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/index.html vendored
View file

@ -1 +1 @@
<!DOCTYPE html> <html lang=de> <head> <meta charset=utf-8> <title>Mailbox</title> <meta name=viewport content="width=device-width,initial-scale=1"> <meta name=mobile-web-app-capable content=yes> <meta name=apple-mobile-web-app-capable content=yes> <meta name=apple-mobile-web-app-status-bar-style content=black> <meta name=description content=Mailbox> <link rel=icon href="data:;base64,iVBORw0KGgo="> </head> <body ng-app=app ng-cloak> <app> Loading application... </app> <footer> <p>Powered by <a href=https://github.com/synox/disposable-mailbox><strong>synox/disposable-mailbox</strong></a> | <a href=https://github.com/synox/disposable-mailbox><span class="octicon octicon-mark-github"></span> Fork me on github</a></p> </footer> <script type="text/javascript" src="mailbox_1f7e8cc287576be2057b.js"></script></body> </html>
<!DOCTYPE html> <html lang=de> <head> <meta charset=utf-8> <title>Mailbox</title> <meta name=viewport content="width=device-width,initial-scale=1"> <meta name=mobile-web-app-capable content=yes> <meta name=apple-mobile-web-app-capable content=yes> <meta name=apple-mobile-web-app-status-bar-style content=black> <meta name=description content=Mailbox> <link rel=icon href="data:;base64,iVBORw0KGgo="> </head> <body ng-app=app ng-cloak> <div ui-view></div> <footer> <p>Powered by <a href=https://github.com/synox/disposable-mailbox><strong>synox/disposable-mailbox</strong></a> | <a href=https://github.com/synox/disposable-mailbox><span class="octicon octicon-mark-github"></span> Fork me on github</a></p> </footer> <script type="text/javascript" src="mailbox_1ad13ef2ffe2df84a4e6.js"></script></body> </html>

14
dist/mailbox_1f7e8cc287576be2057b.js → dist/mailbox_1ad13ef2ffe2df84a4e6.js vendored
View file

File diff suppressed because one or more lines are too long

2
spec.bundle.js
View file

@ -1,5 +1,5 @@
import 'angular';
import 'angular-mocks';
let context = require.context('./src/app', true, /\.spec\.js/);
let context = require.context('./src/mailbox', true, /\.spec\.js/);
context.keys().forEach(context);

7
src/app/app.js → src/app.js
View file

@ -7,15 +7,12 @@ import 'babel-polyfill';
// Interne Modul-Imports
import Mailbox from './mailbox/mailbox';
import Navbar from './navbar/navbar';
import AppComponent from './app.component';
angular.module('app', [
uiRouter, uiBootstrap, Mailbox.name, Navbar.name
uiRouter, uiBootstrap, Mailbox.name
])
.constant('config', {
'backend_url': './backend.php',
'reload_interval_ms': 10000
})
.directive('app', AppComponent);

11
src/app/app.component.js
View file

@ -1,11 +0,0 @@
import template from './app.html';
import './app.css';
let appComponent = () => {
return {
template,
restrict: 'E'
};
};
export default appComponent;

8
src/app/app.css
View file

@ -1,8 +0,0 @@
body {
background: #eeeeee;
}
footer p {
margin-top: 50px;
text-align: center;
}

1
src/app/app.html
View file

@ -1 +0,0 @@
<div ui-view></div>

8
src/app/mailbox/home/home.controller.js
View file

@ -1,8 +0,0 @@
class HomeController {
/*@ngInject*/
constructor() {
}
}
export default HomeController;

3
src/app/mailbox/home/home.css
View file

@ -1,3 +0,0 @@
div.home {
min-height: 400px;
}

7
src/app/mailbox/home/home.html
View file

@ -1,7 +0,0 @@
<navbar></navbar>
<main>
<div class="container home">
Use the buttons above to create a new inbox, or open a specific mailbox.
</div>
</main>

9
src/app/mailbox/home/home.js
View file

@ -1,9 +0,0 @@
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import template from './home.html';
import controller from './home.controller';
import './home.css';
export default angular.module('mailbox.home', [uiRouter])
.component('home', {template, controller})

36
src/app/mailbox/inbox/inbox.controller.js
View file

@ -1,36 +0,0 @@
class MailboxController {
/*@ngInject*/
constructor($log, $interval, config, mailboxService) {
this.$log = $log;
this.$interval = $interval;
this.config = config;
this.mailboxService = mailboxService;
this.loadingData = true;
this.mails = [];
this.address = null; // is set when mails are loaded
}
$onInit() {
this.intervalPromise = this.$interval(() => this.loadMails(), this.config.reload_interval_ms);
this.loadMails();
}
$onDestroy() {
this.$log.debug("destroying controller");
this.$interval.cancel(this.intervalPromise);
}
loadMails() {
this.mailboxService.loadEmails(this.mailboxService.getCurrentUsername())
.then(data => {
this.mails = data.mails;
this.address = this.mailboxService.getCurrentAddress();
this.loadingData = false;
});
}
}
export default MailboxController;

28
src/app/mailbox/inbox/inbox.html
View file

@ -1,28 +0,0 @@
<navbar></navbar>
<main>
<div class="container">
<div ng-show="$ctrl.loadingData" class="waiting-screen">
<h1>&nbsp;</h1>
<p class="lead">Loading Mails</p>
<p><br/>
<img src="spinner.gif">
<br/>
</p>
</div>
<div ng-hide="$ctrl.loadingData">
<div ng-repeat="mail in $ctrl.mails | orderBy:'-date' track by $index" class="email-table">
<mail mail="mail"></mail>
</div>
<div class="waiting-screen" ng-show="$ctrl.mails.length === 0">
<h1>{{$ctrl.address}}</h1>
<p class="lead">Inbox is empty.</p>
<p><br/>
<img src="spinner.gif">
<br/></p>
<p class="lead">Emails to {{address}} will be automatically displayed on this page. </p>
</div>
</div>
</div>
</main>

12
src/app/mailbox/inbox/inbox.scss
View file

@ -1,12 +0,0 @@
.email-table {
margin-top: 20px;
background: white;
}
.waiting-screen {
padding: 40px 15px;
text-align: center;
}

62
src/app/mailbox/service/mailbox.service.js
View file

@ -1,62 +0,0 @@
import phonetic from 'phonetic';
class MailboxService {
/*@ngInject*/
constructor($http, $log, $state, $stateParams, config) {
this.name = 'mailboxService';
this.$http = $http;
this.$log = $log;
this.$state = $state;
this.$stateParams = $stateParams;
this.config = config;
this.address = null;
}
gotoMailbox(username) {
username = MailboxService.cleanUsername(username);
this.address = username; // use username until real address has been loaded
this.$state.go('inbox', {username: username});
}
loadEmails(username) {
return this.$http.get(this.config.backend_url, {params: {username: username, action: "get"}})
.then(response=> {
this.address = response.data.address;
return response.data;
}
);
}
static cleanUsername(username) {
return username.replace(/[@].*$/, '');
}
gotoRandomAddress() {
let username = this.generateRandomUsername();
this.gotoMailbox(username);
}
generateRandomUsername() {
let username = phonetic.generate({syllables: 3, phoneticSimplicity: 1});
if (Math.random() >= 0.5) {
username += this.getRandomInt(30, 99);
}
return username.toLowerCase();
}
getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
getCurrentUsername() {
return this.$stateParams.username;
}
getCurrentAddress() {
return this.address
}
}
export default MailboxService;

6
src/app/mailbox/service/service.js
View file

@ -1,6 +0,0 @@
import angular from 'angular';
import Service from './mailbox.service'
export default angular.module('mailbox.service', [])
.service('mailboxService', Service)

31
src/app/navbar/navbar.controller.js
View file

@ -1,31 +0,0 @@
class NavbarController {
/*@ngInject*/
constructor(mailboxService, $stateParams, $rootScope) {
this.$rootScope = $rootScope;
this.mailboxService = mailboxService;
this.$stateParams = $stateParams;
}
$onInit() {
// the address is updated after loading the page. the value must be watched and upated later.
this.$rootScope.$watch(
()=> this.mailboxService.getCurrentAddress(),
(newValue, oldValue)=> {
this.address = newValue;
}
);
// load the temporary address (which is the username)
this.address = this.mailboxService.getCurrentAddress();
}
gotoMailbox(username) {
this.mailboxService.gotoMailbox(username);
}
gotoRandomAddress() {
this.mailboxService.gotoRandomAddress();
}
}
export default NavbarController;

14
src/app/navbar/navbar.js
View file

@ -1,14 +0,0 @@
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import template from './navbar.html';
import controller from './navbar.controller';
import './navbar.scss'
let navbarModule = angular.module('navbar', [uiRouter])
.component('navbar', {
template,
controller
});
export default navbarModule;

11
src/app/navbar/navbar.scss
View file

@ -1,11 +0,0 @@
.navbar {
background-color: #D9E2E9;
}
.octicon-inbox {
display: inline-block;
width: 26px;
height: 23px;
background: url('octicon-inbox.png') no-repeat;
}

4
src/index.html
View file

@ -13,9 +13,7 @@
</head>
<body ng-app="app" ng-cloak>
<app>
Loading application...
</app>
<div ui-view></div>
<footer>

84
src/mailbox/inbox/inbox.controller.js Normal file
View file

@ -0,0 +1,84 @@
import phonetic from 'phonetic';
class MailboxController {
/*@ngInject*/
constructor($log, $interval, config, mailboxService, $rootScope, $stateParams, $state) {
this.$rootScope = $rootScope;
this.$log = $log;
this.$interval = $interval;
this.config = config;
this.mailboxService = mailboxService;
this.mails = [];
this.$stateParams = $stateParams;
this.$state = $state;
this.address = null; // is set when mails are loaded
this.state = 'home';
}
$onInit() {
if (this.getCurrentUsername()) {
this.state = 'loading';
this.address = this.getCurrentUsername(); // use username until real address has been loaded
this.intervalPromise = this.$interval(() => this.loadMails(), this.config.reload_interval_ms);
this.loadMails();
}
}
static cleanUsername(username) {
return username.replace(/[@].*$/, '');
}
gotoMailbox(username) {
username = MailboxController.cleanUsername(username);
this.address = username; // use username until real address has been loaded
this.$state.go('inbox', {username: username});
}
gotoRandomAddress() {
let username = this.generateRandomUsername();
this.gotoMailbox(username);
}
generateRandomUsername() {
let username = phonetic.generate({syllables: 3, phoneticSimplicity: 1});
if (Math.random() >= 0.5) {
username += this.getRandomInt(30, 99);
}
return username.toLowerCase();
}
getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
$onDestroy() {
this.$log.debug("destroying controller");
this.$interval.cancel(this.intervalPromise);
}
loadMails() {
this.mailboxService.loadEmails(this.getCurrentUsername())
.then(data => {
this.mails = data.mails;
if (this.mails.length !== 0) {
this.state = 'list';
} else {
this.state = 'empty';
}
this.address = data.address;
this.loadingData = false;
});
}
getCurrentUsername() {
return this.$stateParams.username;
}
}
export default MailboxController;

36
src/app/navbar/navbar.html → src/mailbox/inbox/inbox.html
View file

@ -39,3 +39,39 @@
</form>
</div>
</div>
<main>
<div class="container min-height" ng-switch="$ctrl.state">
<p ng-switch-when="home">
Use the buttons above to create a new inbox, or open a specific mailbox.
</p>
<div ng-switch-when="list" ng-repeat="mail in $ctrl.mails | orderBy:'-date' track by $index"
class="email-table">
<mail mail="mail"></mail>
</div>
<div ng-switch-when="loading" class="waiting-screen">
<h1>&nbsp;</h1>
<p class="lead">Loading Mails</p>
<p><br/>
<img src="spinner.gif">
<br/>
</p>
</div>
<div ng-switch-when="empty">
<div class="waiting-screen">
<h1>{{$ctrl.address}}</h1>
<p class="lead">Inbox is empty.</p>
<p><br/>
<img src="spinner.gif">
<br/></p>
<p class="lead">Emails to {{address}} will be automatically displayed on this page. </p>
</div>
</div>
</div>
</main>

3
src/app/mailbox/inbox/inbox.js → src/mailbox/inbox/inbox.js
View file

@ -4,9 +4,8 @@ import uiRouter from 'angular-ui-router';
import template from './inbox.html';
import controller from './inbox.controller';
import './inbox.scss';
import Mail from './mail/mail'
export default angular.module('mailbox.inbox', [uiRouter, Mail.name])
export default angular.module('mailbox.inbox', [uiRouter])
.component('inbox', {
template, controller,
bindings: {

33
src/mailbox/inbox/inbox.scss Normal file
View file

@ -0,0 +1,33 @@
body {
background: #eeeeee;
}
footer p {
margin-top: 50px;
text-align: center;
}
.email-table {
margin-top: 20px;
background: white;
}
.waiting-screen {
padding: 40px 15px;
text-align: center;
}
div.min-height {
min-height: 400px;
}
.navbar {
background-color: #D9E2E9;
}
.octicon-inbox {
display: inline-block;
width: 26px;
height: 23px;
background: url('octicon-inbox.png') no-repeat;
}

0
src/app/mailbox/inbox/inbox.spec.js → src/mailbox/inbox/inbox.spec.js
View file

0
src/app/navbar/octicon-inbox.png → src/mailbox/inbox/octicon-inbox.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7 KiB

After

Width:  |  Height:  |  Size: 7 KiB

0
src/app/mailbox/inbox/spinner.gif → src/mailbox/inbox/spinner.gif
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

0
src/app/mailbox/inbox/mail/mail.controller.js → src/mailbox/mail/mail.controller.js
View file

0
src/app/mailbox/inbox/mail/mail.html → src/mailbox/mail/mail.html
View file

3
src/app/mailbox/inbox/mail/mail.js → src/mailbox/mail/mail.js
View file

@ -10,8 +10,7 @@ import './mail.scss';
export default angular.module('mailbox.inbox.mail', [uiRouter, ngSanitize])
.component('mail', {
template,
controller,
template, controller,
bindings: {
mail: '='
}

52
src/app/mailbox/inbox/mail/mail.scss → src/mailbox/mail/mail.scss
View file

@ -1,4 +1,3 @@
$email-border-color: #7C96AB;
$email-summary-background: white;
$email-header-background: white;
@ -7,66 +6,67 @@ $tab-button-color: white;
$tab-button-color-inactive: #e0e0e0;
$tab-content-background: white;
.email .email-summary {
.email {
.email-summary {
font-weight: bold;
border-top: 5px solid $email-border-color;
border-bottom: 1px solid $email-border-color;
padding: 10px;
background-color: $email-summary-background;
}
}
.email .email-headers {
.email-headers {
background-color: $email-header-background;
dl {
padding: 0 0 4px;
padding: 0 0 4px;
color: black;
overflow: hidden;
dt {
float: left;
color: black;
margin: 0 3px 0 0;
}
dd {
display: block;
overflow: hidden;
dt {
float: left;
color: black;
margin: 0 3px 0 0;
}
dd {
display: block;
overflow: hidden;
}
}
}
}
}
.email .email-tabs {
.email-tabs {
background-color: $email-header-background;
border-bottom: 1px solid $email-border-color;
.nav {
padding-left: 10px;
padding-left: 10px;
}
.mail-conent {
background-color: $tab-content-background;
padding: 20px;
overflow: hidden;
background-color: $tab-content-background;
padding: 20px;
overflow: hidden;
}
/* Tab Button (disabled)*/
.nav-tabs > li.disabled > a:hover,
.nav-tabs > li.disabled > a:focus {
background-color: $tab-button-color-inactive;
background-color: $tab-button-color-inactive;
}
/* Tab Button (incative)*/
.nav-tabs > li > a{
background-color: $tab-button-color-inactive;
.nav-tabs > li > a {
background-color: $tab-button-color-inactive;
}
/* Tab Button (active)*/
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
background-color: $tab-button-color;
background-color: $tab-button-color;
}
}
}

15
src/app/mailbox/mailbox.js → src/mailbox/mailbox.js
View file

@ -1,24 +1,19 @@
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import Service from './service/service';
import Home from './home/home';
import Service from './service/mailbox.service'
import Inbox from './inbox/inbox';
import Mail from './mail/mail'
let module = angular.module('mailbox', [uiRouter, Inbox.name, Service.name, Home.name])
let module = angular.module('mailbox', [uiRouter, Inbox.name, Mail.name])
.config(/*@ngInject*/($stateProvider, $urlRouterProvider) => {
$urlRouterProvider.otherwise('/');
$stateProvider.state('home', {
url: "/",
component: 'home'
});
$stateProvider.state('inbox', {
url: '/:username',
component: 'inbox'
});
});
})
.service('mailboxService', Service);
export default module;

18
src/mailbox/service/mailbox.service.js Normal file
View file

@ -0,0 +1,18 @@
class MailboxService {
/*@ngInject*/
constructor($http, $log, $state, $stateParams, config) {
this.$http = $http;
this.config = config;
}
loadEmails(username) {
return this.$http.get(this.config.backend_url, {params: {username: username, action: "get"}})
.then(response=> {
return response.data;
}
);
}
}
export default MailboxService;

6
webpack.config.js
View file

@ -13,7 +13,7 @@ var proxyMiddleware = require('proxy-middleware');
* @type {} Webpack Konfiguration
*/
var commonConfig = {
context: path.resolve(__dirname, 'src/app'),
context: path.resolve(__dirname, 'src'),
// Einstiegspunkt fuer Webpack
entry: {
mailbox: './app.js'
@ -62,7 +62,7 @@ var production = extend({}, commonConfig, {
}),
// add js files
new HtmlWebpackPlugin({
template: '../index.html'
template: './index.html'
})
]
});
@ -80,7 +80,7 @@ var development = extend({}, commonConfig, {
middleware: proxyMiddleware(proxyOptions)
}),
new HtmlWebpackPlugin({
template: '../index.html'
template: './index.html'
})
],
watch: true,