commit ed5498ec3a0cb108c9ff5ae9147bfbaa1cc8ff0f
parent 48449e268e56cf21d4958f37edb1ec5ba473bb83
Author: Felicia Hummel <felicia@drachenkatze.org>
Date: Wed, 4 Jul 2018 20:36:06 +0200
Added login dialog implementation for the mobile frontend
Diffstat:
6 files changed, 93 insertions(+), 18 deletions(-)
diff --git a/src/PartKeepr/FrontendBundle/Resources/public/js/Components/Auth/LoginController.js b/src/PartKeepr/FrontendBundle/Resources/public/js/Components/Auth/LoginController.js
@@ -0,0 +1,10 @@
+Ext.define('PartKeepr.Components.Auth.LoginController', {
+ extend: 'Ext.app.ViewController',
+ alias: 'controller.LoginController',
+
+ login: function () {
+ var view = this.getView();
+
+ view.fireEvent("login", view.getUsername(), view.getPassword());
+ }
+});+
\ No newline at end of file
diff --git a/src/PartKeepr/FrontendBundle/Resources/public/js/Components/Auth/LoginDialog.js b/src/PartKeepr/FrontendBundle/Resources/public/js/Components/Auth/LoginDialog.js
@@ -6,6 +6,8 @@ Ext.define('PartKeepr.LoginDialog', {
title: i18n("PartKeepr: Login"),
+ controller: 'LoginController',
+
maxWidth: 400,
modal: true,
@@ -15,7 +17,6 @@ Ext.define('PartKeepr.LoginDialog', {
bodyStyle: 'padding: 5px;',
keyMap: {
- scope: 'this',
ESC: 'onEsc',
ENTER: 'login'
},
@@ -31,6 +32,7 @@ Ext.define('PartKeepr.LoginDialog', {
this.loginField = Ext.ComponentMgr.create({
xtype: 'textfield',
value: "",
+ itemId: 'username',
fieldLabel: i18n("Username"),
anchor: '100%'
});
@@ -38,6 +40,7 @@ Ext.define('PartKeepr.LoginDialog', {
this.passwordField = Ext.ComponentMgr.create({
xtype: 'textfield',
inputType: "password",
+ itemId: 'password',
value: "",
fieldLabel: i18n("Password"),
anchor: '100%'
@@ -80,12 +83,10 @@ Ext.define('PartKeepr.LoginDialog', {
this.loginField.focus();
}, this, {delay: 100});
},
- /**
- * Fires the "login" event
- */
- login: function ()
- {
- this.fireEvent("login", this.loginField.getValue(), this.passwordField.getValue());
+ getUsername: function () {
+ return this.down("#username").getValue();
+ },
+ getPassword: function () {
+ return this.down("#password").getValue();
}
-
});
diff --git a/src/PartKeepr/FrontendBundle/Resources/views/index.html.twig b/src/PartKeepr/FrontendBundle/Resources/views/index.html.twig
@@ -193,6 +193,7 @@
'@PartKeeprFrontendBundle/Resources/public/js/Actions/BaseAction.js'
'@PartKeeprFrontendBundle/Resources/public/js/Actions/LogoutAction.js'
'@PartKeeprFrontendBundle/Resources/public/js/Components/Statusbar.js'
+ '@PartKeeprFrontendBundle/Resources/public/js/Components/Auth/LoginController.js'
'@PartKeeprFrontendBundle/Resources/public/js/Components/Auth/LoginDialog.js'
'@PartKeeprFrontendBundle/Resources/public/js/Components/Part/PartImageDisplay.js'
'@PartKeeprFrontendBundle/Resources/public/js/Components/Part/PartInfoGrid.js'
diff --git a/src/PartKeepr/MobileFrontendBundle/Resources/public/js/Components/Auth/LoginDialog.js b/src/PartKeepr/MobileFrontendBundle/Resources/public/js/Components/Auth/LoginDialog.js
@@ -0,0 +1,66 @@
+/**
+ * Defines the login dialog
+ */
+Ext.define('PartKeepr.LoginDialog', {
+ extend: 'Ext.form.Panel',
+
+ title: i18n("PartKeepr: Login"),
+
+ controller: 'LoginController',
+
+ keyMap: {
+ ESC: 'onEsc',
+ ENTER: 'login'
+ },
+
+ floated: true,
+ centered: true,
+ shadow: true,
+
+ showAnimation: {
+ type: 'fadeIn',
+ duration: 250
+ },
+
+ items: [{
+ xtype: "fieldset",
+ items: [{
+ xtype: 'textfield',
+ itemId: 'username',
+ label: i18n("Username")
+ }, {
+ xtype: 'passwordfield',
+ itemId: 'password',
+ label: i18n("Password")
+ }]
+ }, {
+ docked: 'bottom',
+ xtype: 'toolbar',
+ shadow: false,
+ items: [{
+ xtype: 'button',
+ text: 'Login',
+ handler: 'login'
+ }]
+ }],
+ /**
+ * Initializes the login dialog component
+ *
+ */
+ initialize: function () {
+ this.callParent(arguments);
+
+ // Focus the login field on show
+ // @workaround Set the focus 100ms after the dialog has been shown.
+ this.on("show", function () {
+ this.down("#username").focus();
+ }, this, {delay: 100});
+ },
+ getUsername: function () {
+ return this.down("#username").getValue();
+ },
+ getPassword: function () {
+ return this.down("#password").getValue();
+ }
+
+});+
\ No newline at end of file
diff --git a/src/PartKeepr/MobileFrontendBundle/Resources/public/js/PartKeeprMobile.js b/src/PartKeepr/MobileFrontendBundle/Resources/public/js/PartKeeprMobile.js
@@ -20,6 +20,8 @@ Ext.application({
this.loginManager = Ext.create("PartKeepr.Auth.LoginManager", config);
this.loginManager.on("login", this.onLogin, this);
this.loginManager.on("logout", this.onLogout, this);
+
+ Ext.Viewport.add(this.loginManager.loginDialog);
this.loginManager.login();
},
@@ -67,7 +69,7 @@ Ext.application({
flex: 1,
minWidth: 150
}
- ],
+ ]
});
diff --git a/src/PartKeepr/MobileFrontendBundle/Resources/views/index.html.twig b/src/PartKeepr/MobileFrontendBundle/Resources/views/index.html.twig
@@ -8,15 +8,6 @@
<base href="{{ app.request.getBaseURL() }}/"/>
- {% set themes = {"classic": "Classic", "crisp":"Crisp", "crisp-touch": "Crisp Touch", "gray":"Gray", "neptune": "Neptune", "neptune-touch": "Neptune Touch", "triton": "Triton", "aria": "Aria"} %}
- {% set defaultTheme = "classic" %}
-
- {% set themeUri %}js/packages/extjs6/build/classic/theme-{{ defaultTheme }}/resources/theme-{{ defaultTheme }}-all.css{% endset %}
- {% set themeUxUri %}js/packages/extjs6/build/packages/ux/classic/{{ defaultTheme }}/resources/ux-all.css{% endset %}
-
- <link id="theme" rel="stylesheet" href="{{ asset('' ~ themeUri) }}"/>
- <link id="themeUx" rel="stylesheet" href="{{ asset('' ~ themeUxUri) }}"/>
-
<!-- Include the ExtJS CSS Theme -->
{% stylesheets
filter='cssrewrite'
@@ -105,6 +96,8 @@
'@PartKeeprFrontendBundle/Resources/public/js/Actions/BaseAction.js'
'@PartKeeprFrontendBundle/Resources/public/js/Actions/LogoutAction.js'
'@PartKeeprFrontendBundle/Resources/public/js/Models/Message.js'
+ '@PartKeeprMobileFrontendBundle/Resources/public/js/Components/Auth/LoginDialog.js'
+ '@PartKeeprFrontendBundle/Resources/public/js/Components/Auth/LoginController.js'
'@PartKeeprFrontendBundle/Resources/public/js/php.default.min.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
