Permalink
Browse files

Login + routeCheck works

  • Loading branch information...
MikeMitterer committed Oct 28, 2015
1 parent ccbd123 commit e0b3bb04c041473a241e33138e6614b7d26bffab
@@ -33,3 +33,13 @@
flex-grow: 1;
}
}
// - NEU ----------
.mdl-form__hint {
font-size: 12px;
padding-top: 8px;
padding-bottom: 8px;
a {
text-decoration: none;
}
}
@@ -0,0 +1,3 @@
.login-dialog {
margin-top: -50px;
}
@@ -4,8 +4,9 @@
@import "../../packages/mdl/assets/styles/variables/variables";
@import "../../packages/mdl/assets/styles/mixins/mixins";
@import "layout";
@import "components";
@import "dialogs";
@import "layout";
.application-section {
margin-top: 24px;
@@ -1,5 +1,7 @@
library spa_template.dialogs;
import "dart:html" as dom;
import 'package:mdl/mdl.dart';
import "package:mdl/mdldialog.dart";
@@ -48,40 +48,44 @@ class LoginDialog extends MaterialDialog {
// - EventHandler -----------------------------------------------------------------------------
void onSubmit() {
void onLogin(final dom.Event event) {
event.preventDefault();
close(MdlDialogStatus.OK);
}
void onCancel() {
close(MdlDialogStatus.CANCEL);
}
// - private ----------------------------------------------------------------------------------
// - template ----------------------------------------------------------------------------------
@override
String template = """
<div class="mdl-dialog custom-dialog2">
<div class="mdl-dialog__content">
{{#hasTitle}}<h5>{{title}}</h5>{{/hasTitle}}
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="name" mdl-model="name" autofocus>
<label class="mdl-textfield__label" for="name">Name</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="address" >
<label class="mdl-textfield__label" for="address">Address</label>
</div>
</div>
<div class="mdl-dialog__actions">
<button class="mdl-button mdl-js-button" data-mdl-click="onCancel()">
{{noButton}}
</button>
<button class="mdl-button mdl-js-button mdl-button--colored" data-mdl-click="onSubmit()">
{{yesButton}}
</button>
</div>
<div class="mdl-dialog login-dialog">
<form method="post" class="right mdl-form mdl-form-registration demo-registration">
<h5 class="mdl-form__title">Sign in</h5>
<div class="mdl-form__content">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="email" id="email" required autofocus>
<label class="mdl-textfield__label" for="email">Email</label>
<span class="mdl-textfield__error">This is not a valid eMail-Address</span>
</div>
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type=password id="password"
pattern="((?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#\$%?]).{8,15})" required>
<label class="mdl-textfield__label" for="password">Password</label>
<span class="mdl-textfield__error">This is not a valid password (Try: 12345678aA#)</span>
</div>
<div class="mdl-form__hint">
<a href="#" target="_blank">Forget your password?</a>
</div>
</div>
<div class="mdl-form__actions">
<button id="submit" class="mdl-button mdl-js-button mdl-button--submit
mdl-button--raised mdl-button--primary mdl-js-ripple-effect"
data-mdl-click="onLogin(\$event)">
Sign in
</button>
</div>
</form>
</div>
""";
}
@@ -30,4 +30,13 @@
.mdl-card__supporting-text {
flex-grow: 1;
}
}
// - NEU ----------
.mdl-form__hint {
font-size: 12px;
padding-top: 8px;
padding-bottom: 8px;
a {
text-decoration: none;
}
}
@@ -0,0 +1,3 @@
.login-dialog {
margin-top: -50px;
}
@@ -34,6 +34,30 @@
/* ========== IMAGES ========== */
/* SNACKBAR */
/* TOOLTIP */
/**
Overwrites some essential MDL-Styles
This should go into the main MDL-Branch
*/
.mdl-card {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-content: space-between;
align-items: stretch; }
.mdl-card .mdl-card__supporting-text {
flex-grow: 1; }
.mdl-form__hint {
font-size: 12px;
padding-top: 8px;
padding-bottom: 8px; }
.mdl-form__hint a {
text-decoration: none; }
.login-dialog {
margin-top: -50px; }
.application.mdl-layout {
flex-grow: 1; }
.application.mdl-layout.is-small-screen > .mdl-layout__header {
@@ -143,20 +167,6 @@
.application.mdl-layout > .mdl-sticky-mini-footer .mm-link {
display: none; } }
/**
Overwrites some essential MDL-Styles
This should go into the main MDL-Branch
*/
.mdl-card {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-content: space-between;
align-items: stretch; }
.mdl-card .mdl-card__supporting-text {
flex-grow: 1; }
.application-section {
margin-top: 24px; }
.application-section--home h1 {
@@ -2,8 +2,9 @@
//@import "../../packages/mdl/assets/styles/material-design-lite";
@import "../../packages/mdl/assets/styles/variables/variables";
@import "../../packages/mdl/assets/styles/mixins/mixins";
@import "layout";
@import "components";
@import "dialogs";
@import "layout";
.application-section {
margin-top: 24px;
&--home {
@@ -47,6 +47,8 @@ class Application extends MaterialApplication {
/// Title will be displayed
final ObservableProperty<String> title = new ObservableProperty<String>("");
bool isUserLoggedIn = false;
Application() {
_logger.info("Application created");
_bindSignals();
@@ -55,53 +57,69 @@ class Application extends MaterialApplication {
@override
void run() {
_login().then((final MdlDialogStatus status) {
_logger.info("Status: ${status}");
if(status == MdlDialogStatus.CANCEL) {
_router.go("view3", {});
}
_checkStatus(status);
});
}
void go(final String routePath, final Map params) {
_router.go(routePath,params);
}
//- private -----------------------------------------------------------------------------------
void _bindSignals() {
final MaterialButton login = MaterialButton.widget(dom.querySelector("#login"));
login.onClick.listen( (final dom.Event event) async {
event.preventDefault();
final MdlDialogStatus status = await _login();
_logger.info("Status: ${status}");
_checkStatus(status);
});
}
Future<MdlDialogStatus> _login() async {
final LoginDialog _loginDialog = new LoginDialog();
return _loginDialog(title: "Login").show();
}
void _checkStatus(final MdlDialogStatus status) {
_logger.info("Status: ${status}");
isUserLoggedIn = (status == MdlDialogStatus.OK);
if(isUserLoggedIn) {
go("view1", {} );
} else {
go("home", {} );
}
}
}
class StyleguideModule extends di.Module {
StyleguideModule() {
class ApplicationModule extends di.Module {
ApplicationModule() {
// Nothing interesting here - just a reminder how to use a Module
}
}
main() {
main() async {
final Logger _logger = new Logger('main.MaterialContent');
configLogging();
registerMdl();
registerMdlDND();
componentFactory().rootContext(Application)
.addModule(new StyleguideModule()).run()
.then((final Application application) {
final Application application = await componentFactory().rootContext(Application)
.addModule(new ApplicationModule()).run();
configRouter(application._router);
application.run();
configRouter(application._router,(final RoutePreEnterEvent event) {
event.allowEnter(new Future<bool>(() => application.isUserLoggedIn));
});
application.run();
//- private -----------------------------------------------------------------------------------
}
/// Default Controller!!!
@@ -172,19 +190,24 @@ class ControllerView3 extends DefaultController {
void configRouter(final Router router) {
void configRouter(final Router router,final RoutePreEnterEventHandler routeChecker) {
final Logger _logger = new Logger('main.configRouter');
final ViewFactory view = new ViewFactory();
router.root
..addRoute(name: 'view1', path: '/view1',
enter: view("views/view1.html", new ControllerView1()))
enter: view("views/view1.html", new ControllerView1()),
preEnter: routeChecker)
..addRoute(name: 'view2', path: '/view2',
enter: view("views/view2.html", new ControllerView2()))
enter: view("views/view2.html", new ControllerView2()),
preEnter: routeChecker)
..addRoute(name: 'view3', path: '/view3',
enter: view("views/view3.html", new ControllerView2()))
enter: view("views/view3.html", new ControllerView2()),
preEnter: routeChecker)
..addRoute(name: 'home', defaultRoute: true, path: '/',
enter: view("views/home.html", new DefaultController()))

0 comments on commit e0b3bb0

Please sign in to comment.