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>
<html lang="de">
<html lang="de" ng-app="app" ng-strict-di>
<head>
<meta charset="utf-8">
<title>Mailbox</title>
@ -9,11 +9,54 @@
<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>
<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>
<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>
</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>
</html>

175
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:
const reload_interval_ms = 10000;
const backend_url = './backend.php';
var reload_interval_ms = 10000;
// var backend_url = './backend.php';
var backend_url = 'http://dubgo.com/m3/backend.php';
class AppController {
/*@ngInject*/
constructor($http, $log, $interval) {
this.$interval = $interval;
this.$http = $http;
this.$log = $log;
this.address = null;
this.username = null;
this.mails = [];
}
$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)
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
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 = [];
}
function generateRandomUsername() {
let username = chance.first();
if (Math.random() >= 0.5) {
username += getRandomInt(30, 99);
}
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: `
<header
username="$ctrl.username"
address="$ctrl.address"
mailcount="$ctrl.mails.length"
on-change-username="$ctrl.onChangeUsername($event)"
on-goto-random="$ctrl.onGotoRandom($event)">
</header>
<inbox
mails="$ctrl.mails"
username="$ctrl.username"
address="$ctrl.address"
state="$ctrl.state">
</inbox>
`,
controller: AppController
self.updateUsername = function (username) {
self.username = cleanUsername(username);
if (self.username.length > 0) {
hasher.setHash(self.username);
self.address = self.username; // use username until real address has been loaded
self.updateMails();
} else {
self.address = null;
self.mails = [];
}
self.inputFieldUsername = self.address;
};
self.randomize = function () {
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(/[@].*$/, '');
}