Implement modal login dialog

src/TinyBlog-Components/TBApplicationRootComponent.class.st

@@ -43,7 +43,8 @@ TBApplicationRootComponent >> main: aComponent [
 
 { #category : 'rendering' }
 TBApplicationRootComponent >> renderContentOn: html [
-	html render: main
+	html render: main.
+	SBSDeploymentLibrary addLoadScriptTo: html
 ]
 
 { #category : 'rendering' }

src/TinyBlog-Components/TBAuthenticationComponent.class.st

@@ -0,0 +1,125 @@
+Class {
+	#name : 'TBAuthenticationComponent',
+	#superclass : 'SBSComponent',
+	#instVars : [
+		'password',
+		'account',
+		'component'
+	],
+	#category : 'TinyBlog-Components',
+	#package : 'TinyBlog-Components'
+}
+
+{ #category : 'instance creation' }
+TBAuthenticationComponent class >> from: aComponent [
+	^ self new
+		component: aComponent;
+		yourself
+]
+
+{ #category : 'accessing' }
+TBAuthenticationComponent >> account [
+
+	^ account
+]
+
+{ #category : 'accessing' }
+TBAuthenticationComponent >> account: anObject [
+
+	account := anObject
+]
+
+{ #category : 'accessing' }
+TBAuthenticationComponent >> component [
+
+	^ component
+]
+
+{ #category : 'accessing' }
+TBAuthenticationComponent >> component: anObject [
+
+	component := anObject
+]
+
+{ #category : 'accessing' }
+TBAuthenticationComponent >> password [
+
+	^ password
+]
+
+{ #category : 'accessing' }
+TBAuthenticationComponent >> password: anObject [
+
+	password := anObject
+]
+
+{ #category : 'rendering' }
+TBAuthenticationComponent >> renderAccountFieldOn: html [
+	html 
+		formGroup: [ html label with: 'Account'.
+			html textInput
+				formControl;
+				attributeAt: 'autofocus' put: 'true';
+				callback: [ :value | account := value ];
+				value: account ]
+]
+
+{ #category : 'rendering' }
+TBAuthenticationComponent >> renderBodyOn: html [
+	html 
+		modalBody: [ 
+			html form: [ 
+				self renderAccountFieldOn: html.
+				self renderPasswordFieldOn: html.
+				html modalFooter: [ self renderButtonsOn: html ] ] ]
+]
+
+{ #category : 'rendering' }
+TBAuthenticationComponent >> renderButtonsOn: html [
+	html formButton
+		beSecondary;
+		dataDismiss: 'modal';
+		value: 'Cancel'.
+	html formButton
+		"beSubmit;"
+		bePrimary;
+		callback: [ self validate ];
+		value: 'SignIn'
+]
+
+{ #category : 'rendering' }
+TBAuthenticationComponent >> renderContentOn: html [
+	html modal 
+		id: 'myAuthDialog';
+		fade;
+		with: [ 
+			html modalDialog: [ 
+				html modalContent: [ 
+					self renderHeaderOn: html.
+					self renderBodyOn: html ] ] ]
+]
+
+{ #category : 'rendering' }
+TBAuthenticationComponent >> renderHeaderOn: html [
+	html 
+		modalHeader: [ 
+			html modalCloseButton.
+			html modalTitle
+				level: 4;
+				with: 'Authentication' ]
+]
+
+{ #category : 'rendering' }
+TBAuthenticationComponent >> renderPasswordFieldOn: html [
+	html 
+		formGroup: [ html label with: 'Password'.
+			html passwordInput
+				formControl;
+				callback: [ :value | password := value ];
+				value: password ]
+]
+
+{ #category : 'rendering' }
+TBAuthenticationComponent >> validate [
+	^ component tryConnectionWithLogin: self account andPassword: self password
+]

src/TinyBlog-Components/TBHeaderComponent.class.st

@@ -36,7 +36,7 @@ TBHeaderComponent >> renderBrandOn: html [
 
 { #category : 'rendering' }
 TBHeaderComponent >> renderButtonsOn: html [
-	self renderSimpleAdminButtonOn: html
+	self renderModalLoginButtonOn: html
 ]
 
 { #category : 'rendering' }
@@ -54,11 +54,12 @@ TBHeaderComponent >> renderContentOn: html [
 ]
 
 { #category : 'rendering' }
-TBHeaderComponent >> renderSimpleAdminButtonOn: html [
-	html form: [ 
-		html formButton beSecondary;
-			callback: [ component goToAdministrationView ];
-			with: [
-				html span class: 'glyphicon glyphicon-list-alt'.
-				html text: 'Admin View' ] ]
+TBHeaderComponent >> renderModalLoginButtonOn: html [
+	html render: (TBAuthenticationComponent from: component).
+	html formButton beSecondary;
+		dataTarget: '#myAuthDialog';
+		dataToggle: 'modal';
+		with: [ 
+			html span class: 'glyphicon glyphicon-lock'.
+			html text: 'Login' ]
 ]

src/TinyBlog-Components/TBPostsListComponent.class.st

@@ -3,7 +3,8 @@ Class {
 	#superclass : 'TBScreenComponent',
 	#instVars : [
 		'postComponents',
-		'currentCategory'
+		'currentCategory',
+		'showLoginError'
 	],
 	#category : 'TinyBlog-Components',
 	#package : 'TinyBlog-Components'
@@ -48,12 +49,27 @@ TBPostsListComponent >> goToAdministrationView [
 	self call: TBAdminComponent new
 ]
 
+{ #category : 'as yet unclassified' }
+TBPostsListComponent >> hasLoginError [
+	^ showLoginError ifNil: [ false ]
+]
+
 { #category : 'initialization' }
 TBPostsListComponent >> initialize [ 
 	super initialize.
 	postComponents := OrderedCollection new
 ]
 
+{ #category : 'as yet unclassified' }
+TBPostsListComponent >> loginErrorMessage [
+	^ 'Incorrect login and/or password'
+]
+
+{ #category : 'as yet unclassified' }
+TBPostsListComponent >> loginErrorOccurred [
+	showLoginError := true
+]
+
 { #category : 'rendering' }
 TBPostsListComponent >> postComponentFor: aPost [
 	^ TBPostComponent new post: aPost
@@ -93,19 +109,32 @@ TBPostsListComponent >> renderContentOn: html [
 					smallSize: 2;
 					mediumSize: 4;
 					with: [ html render: self categoriesComponent ].
-		html column
-			extraSmallSize: 12;
-			smallSize: 10;
-			mediumSize: 8;
-			with: [ 
-				self postComponents do: [ :p | html render: (self postComponentFor: p) ] ] ] ]
+		self renderPostColumnOn: html ] ]
+]
+
+{ #category : 'rendering' }
+TBPostsListComponent >> renderLoginErrorMessageIfAnyOn: html [
+	self hasLoginError ifTrue: [
+		showLoginError := false.
+		html alert
+			beDanger;
+			with: self loginErrorMessage ]
 ]
 
 { #category : 'rendering' }
 TBPostsListComponent >> renderPostColumnOn: html [
 	html column 
 		extraSmallSize: 12;
-		smallSize: 2;
-		mediumSize: 4;
-		with: [ self basicRenderPostsOn: html ]
+		smallSize: 10;
+		mediumSize: 8;
+		with: [
+			self renderLoginErrorMessageIfAnyOn: html.
+			self basicRenderPostsOn: html ]
+]
+
+{ #category : 'as yet unclassified' }
+TBPostsListComponent >> tryConnectionWithLogin: login andPassword: password [
+	(login = 'admin' and: [ password = 'topsecret' ])
+		ifTrue: [ self goToAdministrationView ]
+		ifFalse: [ self loginErrorOccurred ]
 ]