borekon/disposable-mailbox
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

header

Browse Source
This commit is contained in:
Synox 2016-11-20 21:20:27 +01:00
parent b0d68b1224
commit efb14f90e1
5 changed files with 139 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/chance.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

56
src/index.html
View File

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="de"> <html lang="de" ng-app="app" ng-strict-di>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Mailbox</title> <title>Mailbox</title>
@ -9,11 +9,54 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="Mailbox"> <meta name="description" content="Mailbox">
<link rel="icon" href="data:;base64,iVBORw0KGgo="> <link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head> </head>
<body ng-app="app" ng-cloak> <body><!-- ng-cloak-->
<main ng-controller="MailboxController as $ctrl">
<div class="nav-container">
<div class="container">
<nav class="navbar navbar-light">
<a class="navbar-brand"><span class="octicon-inbox"></span>
&nbsp;
{{$ctrl.address}}
&nbsp;
<span ng-if="$ctrl.mailcount" class="tag tag-pill tag-default">{{$ctrl.mailcount}}</span>
</a>
<ul class="nav navbar-nav">
<button type="button nav-link" class="btn btn-outline-primary pull-xs-right"
ng-click="$ctrl.randomize()">
<span class="glyphicon glyphicon-random"></span>&nbsp;
randomize
</button>
<form class="form-inline pull-xs-right" ng-submit="$ctrl.updateUsername($ctrl.inputFieldUsername)">
<input ng-model="$ctrl.inputFieldUsername"
placeholder="username"
type="text" class="form-control"/>
<button type="submit" class="btn btn-outline-success">login</button>
</form>
</ul>
</nav>
</div>
</div>
<!--<inbox-->
<!--mails="$ctrl.mails"-->
<!--username="$ctrl.username"-->
<!--address="$ctrl.address"-->
<!--state="$ctrl.state">-->
<!--</inbox>-->
</main>
<app></app>
<footer> <footer>
<p>Powered by <a href="https://github.com/synox/disposable-mailbox"><strong>synox/disposable-mailbox</strong></a> <p>Powered by <a href="https://github.com/synox/disposable-mailbox"><strong>synox/disposable-mailbox</strong></a>
@ -21,6 +64,11 @@
me on github</a></p> me on github</a></p>
</footer> </footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="chance.min.js"></script>
<script src="index.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-signals/1.0.0/js-signals.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hasher/1.2.0/hasher.js"></script>
</body> </body>
</html> </html>

183
src/index.js
View File

@ -1,110 +1,91 @@
import angular from "angular";
import "bootstrap/scss/bootstrap.scss";
import "babel-polyfill";
import {cleanUsername, generateRandomUsername} from "./mailbox/util";
import hasher from "hasher";
import Header from "./mailbox/header/header";
import List from "./mailbox/list/list";
import Mail from "./mailbox/mail/mail";
// config: // config:
const reload_interval_ms = 10000; var reload_interval_ms = 10000;
const backend_url = './backend.php'; // var backend_url = './backend.php';
var backend_url = 'http://dubgo.com/m3/backend.php';
class AppController {
/*@ngInject*/ function getRandomInt(min, max) {
constructor($http, $log, $interval) { return Math.floor(Math.random() * (max - min)) + min;
this.$interval = $interval; }
this.$http = $http;
this.$log = $log; function generateRandomUsername() {
this.address = null; let username = chance.first();
this.username = null; if (Math.random() >= 0.5) {
this.mails = []; username += getRandomInt(30, 99);
}
$onInit() {
hasher.changed.add(this.onHashChange.bind(this));
hasher.initialized.add(this.onHashChange.bind(this)); //add initialized listener (to grab initial value in case it is already set)
hasher.init(); //initialize hasher (start listening for history changes)
this.intervalPromise = this.$interval(() => this.updateMails(), reload_interval_ms);
}
$onDestroy() {
this.$interval.cancel(this.intervalPromise);
}
onHashChange(hash) {
this.updateUsername(hash);
}
onChangeUsername({username}) {
this.updateUsername(username);
}
onGotoRandom() {
let username = generateRandomUsername();
this.updateUsername(username);
}
loadEmails(username) {
return this.$http.get(backend_url, {params: {username: username, action: "get"}})
.then(response=> {
return response.data;
}
);
}
loadEmailsAsync(username) {
this.$log.debug("updating mails for ", username);
this.loadEmails(this.username).then(data=> {
this.mails = data.mails;
this.address = data.address;
this.username = data.username;
this.$log.debug("received mails for ", username);
});
}
updateMails() {
if (this.username) {
this.loadEmailsAsync(this.username);
}
}
updateUsername(username) {
this.username = cleanUsername(username);
if (this.username.length > 0) {
hasher.setHash(this.username);
this.address = this.username; // use username until real address has been loaded
this.updateMails();
} else {
this.address = null;
this.mails = [];
}
} }
return username.toLowerCase();
}
function cleanUsername(username) {
return username.replace(/[@].*$/, '');
} }
angular.module('app', [List, Mail, Header]) var app = angular.module('app', []);
app.controller('MailboxController', ["$scope", "$interval", "$http", "$log", function ($scope, $interval, $http, $log) {
var self = this;
.component('app', {
template: ` self.updateUsername = function (username) {
<header self.username = cleanUsername(username);
username="$ctrl.username" if (self.username.length > 0) {
address="$ctrl.address" hasher.setHash(self.username);
mailcount="$ctrl.mails.length" self.address = self.username; // use username until real address has been loaded
on-change-username="$ctrl.onChangeUsername($event)" self.updateMails();
on-goto-random="$ctrl.onGotoRandom($event)"> } else {
</header> self.address = null;
self.mails = [];
<inbox }
mails="$ctrl.mails" self.inputFieldUsername = self.address;
username="$ctrl.username"
address="$ctrl.address" };
state="$ctrl.state">
</inbox>
`, self.randomize = function () {
controller: AppController let username = generateRandomUsername();
}); self.updateUsername(username);
};
self.onHashChange = function (hash) {
self.updateUsername(hash);
};
self.$onInit = function () {
hasher.changed.add(self.onHashChange.bind(self));
hasher.initialized.add(self.onHashChange.bind(self)); //add initialized listener (to grab initial value in case it is already set)
hasher.init(); //initialize hasher (start listening for history changes)
self.intervalPromise = $interval(function () {
self.updateMails()
}, reload_interval_ms);
}
;
self.updateMails = function () {
if (self.username) {
self.loadEmailsAsync(self.username);
}
};
self.loadEmailsAsync = function (username) {
$log.debug("updating mails for ", username);
self.loadEmails(self.username).then(function (data) {
self.mails = data.mails;
self.address = data.address;
self.username = data.username;
$log.debug("received mails for ", username);
});
};
self.loadEmails = function (username) {
return $http.get(backend_url, {params: {username: username, action: "get"}})
.then(function (response) {
return response.data;
}
);
};
self.updateMails()
}]);

82
src/mailbox/header/header.js
View File

@ -1,82 +0,0 @@
import angular from "angular";
import "./header.scss";
class HeaderController {
/*@ngInject*/
constructor($log) {
this.$log = $log;
this.inputFieldUsername = "";
}
$onInit() {
this.inputFieldUsername = this.address;
}
$onChanges(changes) {
if (changes.address) {
this.inputFieldUsername = this.username;
this.address = this.address;
}
}
gotoMailbox(username) {
this.onChangeUsername({
$event: {
username: username
}
});
}
randomize() {
this.onGotoRandom();
}
}
const HeaderComponent = {
bindings: {
address: '<',
username: '<',
mailcount: '<',
onChangeUsername: '&',
onGotoRandom: '&'
},
controller: HeaderController,
template: `
<div class="nav-container">
<div class="container">
<nav class="navbar navbar-light">
<a class="navbar-brand"><span class="octicon-inbox"></span>
&nbsp;
{{$ctrl.address}}
&nbsp;
<span ng-if="$ctrl.mailcount" class="tag tag-pill tag-default">{{$ctrl.mailcount}}</span>
</a>
<ul class="nav navbar-nav">
<button type="button nav-link" class="btn btn-outline-primary pull-xs-right"
ng-click="$ctrl.randomize()">
<span class="glyphicon glyphicon-random"></span>&nbsp;
randomize
</button>
<form class="form-inline pull-xs-right" ng-submit="$ctrl.gotoMailbox($ctrl.inputFieldUsername)">
<input ng-model="$ctrl.inputFieldUsername"
placeholder="username"
type="text" class="form-control"/>
<button type="submit" class="btn btn-outline-success">login</button>
</form>
</ul>
</nav>
</div>
</div>
`
};
export default angular
.module('header', [])
.component('header', HeaderComponent)
.name;

18
src/mailbox/util.js
View File

@ -1,18 +0,0 @@
import phonetic from "phonetic";
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
export function generateRandomUsername() {
let username = phonetic.generate({syllables: 3, phoneticSimplicity: 1});
if (Math.random() >= 0.5) {
username += getRandomInt(30, 99);
}
return username.toLowerCase();
}
export function cleanUsername(username) {
return username.replace(/[@].*$/, '');
}