From 12a1b82eacbb1b36b5b0e586cf739321f0f4d9a6 Mon Sep 17 00:00:00 2001 From: seanlin0324 Date: Thu, 9 Aug 2012 15:32:54 +0800 Subject: [PATCH 1/2] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d4e8f76..8ebdf2f 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,6 @@ "start": "app.js" }, "engines": { - "node": "0.6.x" + "node": "*" } } From 3b8a553bb7ed2dde19b42187ff0d9961d53c9a9a Mon Sep 17 00:00:00 2001 From: seanlin Date: Mon, 13 Aug 2012 17:54:42 +0800 Subject: [PATCH 2/2] Add new login & register page --- app.js | 22 +++---- package.json | 3 +- public/css/create.css | 5 ++ public/css/geany_run_script.sh | 16 ----- public/css/login.css | 43 ++++++++++++ public/css/style.css | 2 +- public/css/style.css.bak | 23 ------- public/index.html | 100 ++++++++++++++++++++++++++++ public/js/init.js | 5 ++ routes/index.js | 19 ++++-- src/public/css/style.styl | 47 +++++++------- views/create.ejs | 16 +++++ views/index.ejs | 115 ++++++++++++++++++++++++++------- views/layout.ejs | 33 +++++----- views/login.ejs | 9 ++- views/signup.ejs | 23 ------- 16 files changed, 330 insertions(+), 151 deletions(-) create mode 100644 public/css/create.css delete mode 100644 public/css/geany_run_script.sh create mode 100644 public/css/login.css delete mode 100644 public/css/style.css.bak create mode 100644 public/index.html create mode 100644 public/js/init.js create mode 100644 views/create.ejs delete mode 100644 views/signup.ejs diff --git a/app.js b/app.js index 7974b2b..4c217b6 100644 --- a/app.js +++ b/app.js @@ -1,7 +1,7 @@ /** * Module dependencies. */ - + var express = require('express') , stylus = require('stylus') , nib = require('nib') @@ -10,8 +10,8 @@ var express = require('express') var app = module.exports = express.createServer(); // mongoose setup -require( './db' ); - +require( './db' ); + // autoentication setup var auth = require( './auth' ); @@ -31,7 +31,7 @@ var compile = function (str, path) { // Configuration app.configure(function(){ app.set('views', __dirname + '/views'); - app.set('view engine', 'jade'); + app.set('view engine', 'ejs'); app.use(express.favicon()); app.use(express.logger()); app.use(express.cookieParser()); @@ -40,14 +40,14 @@ app.configure(function(){ app.use(express.session({secret: 'nodeTWParty'}) ); app.use(everyauth.middleware() ); app.use(app.router); - - // Insert Stylus middleware before creating static with Express + + // Insert Stylus middleware before creating static with Express app.use(stylus.middleware({ src: __dirname + '/src/public' , dest: __dirname + '/public' , compile: compile })); - + // 必須要放在stylus下面 stylus才會有效 app.use(express.static(__dirname + '/public')); }); @@ -56,17 +56,17 @@ app.configure(function(){ // Routes app.get('/', routes.index); -app.post( '/create', auth.requireLogin, routes.create ); +app.get( '/create', routes.create ); app.get( '/destroy/:id', auth.requireLogin, routes.destroy ); app.get( '/edit/:id', auth.requireLogin, routes.edit ); app.post( '/update/:id', auth.requireLogin, routes.update ); app.listen(3000, function(){ - + // Start SocketIO after app is initialized app.sockets = require('./socket')(app); - - + + console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env); }); diff --git a/package.json b/package.json index 8ebdf2f..f0010f7 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "dependencies": { "express": "2.5.9", "jade": ">= 0.0.1", + "ejs": ">= 0.0.1", "stylus": ">= 0.0.1", "nib": ">= 0.0.1", "socket.io": ">= 0.0.1", @@ -17,6 +18,6 @@ "start": "app.js" }, "engines": { - "node": "*" + "node": "0.6.x" } } diff --git a/public/css/create.css b/public/css/create.css new file mode 100644 index 0000000..126a80a --- /dev/null +++ b/public/css/create.css @@ -0,0 +1,5 @@ +.create-block { + margin:0 auto; + max-width: 350px; + text-align: center; +} \ No newline at end of file diff --git a/public/css/geany_run_script.sh b/public/css/geany_run_script.sh deleted file mode 100644 index aadaa58..0000000 --- a/public/css/geany_run_script.sh +++ /dev/null @@ -1,16 +0,0 @@ -#!/bin/sh - -rm $0 - -./style - -echo " - ------------------- -(program exited with code: $?)" - - -echo "Press return to continue" -#to be more compatible with shells like dash -dummy_var="" -read dummy_var diff --git a/public/css/login.css b/public/css/login.css new file mode 100644 index 0000000..7551691 --- /dev/null +++ b/public/css/login.css @@ -0,0 +1,43 @@ +body { + padding-top: 30px; + padding-bottom: 20px; +} +.login-block { + margin:0 auto; + max-width: 350px; + text-align: center; +} + +.login-block > #register-btn{ + color: #fff; +} + +.login-form { + text-align: center; +} + +.login-form > .title { + width: 230px; + margin:5px auto; + font-size: 1.5em; + line-height:1.5; + font-family: open Hei; + text-align: center; +} + +.login-form > input{ + font-size: 1em; + margin:5px auto; + width: 230px; +} + +.login-form > button{ + font-size: 1em; + line-height:1.5; + margin:5px auto; + width: 230px; +} + +.login-form > #login-btn{ + width: 230px; +} diff --git a/public/css/style.css b/public/css/style.css index 0b24062..19c0607 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,4 +1,4 @@ -body{padding:50px;font-size:16px} +body{padding:30px auto;font-size:16px;background-color:#3a3e4e} a{color:#195073} h1{text-align:center;font-size:2em} .hd{width:95%;margin:0 auto;} diff --git a/public/css/style.css.bak b/public/css/style.css.bak deleted file mode 100644 index fb4e01e..0000000 --- a/public/css/style.css.bak +++ /dev/null @@ -1,23 +0,0 @@ -body{padding:50px} -a{color:#195073} -h1{text-align:center;font-size:2em} -.hd{width:95%;margin:0 auto;} -.hd .l,.hd .r{display:inline-block;width:50%} -.hd .l{text-align:left} -.hd .r{text-align:right} -.chatroomName{padding:10.5px;border:1px solid #000} -.chatBox{border:1px solid #000} -.memberBox{border:1px solid #000} -.messagesBox{border:1px solid #000} -.chat{width:95%;margin:0 auto;border:1px solid #eee} -.chat-bd{height:400px;overflow-y:auto} -.chat-msgs{padding:21px} -.chat-msg-time{color:#aaa;margin-right:8.4px} -.chat-msg-user{font-weight:bold;margin-right:8.4px;color:#195073} -.chat-system-msg{color:#7f8c1f} -.chat-ft{padding:10.5px} -.chat-form{overflow:hidden} -.chat-input-wrapper{overflow:hidden;padding:10.5px;border:1px solid #eee} -.chat-input{font-size:21px;width:100%;margin:0;padding:0;border:none;} -.chat-input:focus{outline:none;-webkit-box-shadow:0;box-shadow:0} -.chat-submit{font-size:20px;float:right;margin-left:10.5px;padding:10.5px;border:none;color:#fff} diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..5e6eb52 --- /dev/null +++ b/public/index.html @@ -0,0 +1,100 @@ + + + + + + + Test + + + + +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+

Hello, world!

+

This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.

+

Learn more »

+
+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+
+
+ + + diff --git a/public/js/init.js b/public/js/init.js new file mode 100644 index 0000000..ec7cbfe --- /dev/null +++ b/public/js/init.js @@ -0,0 +1,5 @@ +window.onload = init; + +function init(){ + //~ alert("hello"); +} diff --git a/routes/index.js b/routes/index.js index e1e9ce0..0c09a89 100644 --- a/routes/index.js +++ b/routes/index.js @@ -9,13 +9,15 @@ var utils = require( 'connect' ).utils; var everyauth= require( 'everyauth' ); exports.index = function ( req, res, next ){ - console.log("hhhh") + console.log(req.url) console.log(req.loggedIn) - + + //res.sendfile(); + res.render( 'index', { - title : 'OSSII chat Demo', - todos : [] + title : 'OSSII Chat', + todos : [] }); //~ Todo. @@ -24,7 +26,7 @@ exports.index = function ( req, res, next ){ //~ sort( 'updated_at', -1 ). //~ run( function ( err, todos ){ //~ if( err ) return next( err ); -//~ +//~ //~ res.render( 'index', { //~ title : 'Express Todo Example', //~ todos : todos @@ -33,7 +35,11 @@ exports.index = function ( req, res, next ){ }; exports.create = function ( req, res, next ){ - console.log("abcdefghijklmnopqrstuvwxyz") + console.log("abcdefghijklmnopqrstuvwxyz") + res.render( 'create', { + title : 'OSSII Chat - Create', + }); + /* new Todo({ //user_id : req.cookies.user_id, user_id : req.user.id, @@ -44,6 +50,7 @@ exports.create = function ( req, res, next ){ res.redirect( '/' ); }); + */ }; exports.destroy = function ( req, res, next ){ diff --git a/src/public/css/style.styl b/src/public/css/style.styl index 9341f8d..a0b3342 100644 --- a/src/public/css/style.styl +++ b/src/public/css/style.styl @@ -16,14 +16,14 @@ w(val) h(val) height val -// Padding +// Padding p() padding arguments // Margin m() margin arguments - + c() color arguments @@ -41,16 +41,17 @@ $white = #fff // Actual code body - padding 50px + padding 30px auto font-size 16px + background-color #3A3E4E a c #195073 - + h1 text-align center font-size 2em - + // Header stuff, just sugar, not important .hd width 95% @@ -59,13 +60,13 @@ h1 .l, .r display inline-block width 50% - + .l text-align left - + .c - text-align center - + text-align center + .r text-align right @@ -75,8 +76,8 @@ h1 .chatBox b black - -.chat-usersBox + +.chat-usersBox b black h 400px overflow-y auto @@ -86,12 +87,12 @@ h1 b black .chat-usersList li - line-height 26px + line-height 26px b black .messagesBox b black - + .chat width 95% margin 0 auto @@ -103,7 +104,7 @@ h1 .chat-msgs p gap(1) - + .chat-msg-time c $time margin-right gap(0.4) @@ -113,31 +114,31 @@ h1 margin-right gap(0.4) c $user-name -.chat-system-msg +.chat-system-msg c $system-msg .chat-ft padding gap(0.5) -.chat-form +.chat-form overflow hidden - + .chat-input-wrapper overflow hidden p gap(0.5) border 1px solid $chat-input-border - + .chat-input font-size 21px width 100% - margin 0 + margin 0 padding 0 border none - + &:focus outline none box-shadow 0 - + .chat-submit font-size 20px float right @@ -148,7 +149,7 @@ h1 // ------------- login css style ------------- -#list +#list w(283px) margin 0 auto p 20px 0 15px @@ -156,7 +157,7 @@ h1 /* line 38, ../sass/screen.sass */ -.item, .item-new +.item, .item-new w 250px overflow hidden *zoom: 1 diff --git a/views/create.ejs b/views/create.ejs new file mode 100644 index 0000000..389220f --- /dev/null +++ b/views/create.ejs @@ -0,0 +1,16 @@ +
+
+ +
+
\ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs index 9184b67..f970b4c 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -1,38 +1,103 @@ -

<%= title %>

- <% if (everyauth.loggedIn) { %> -
-
- Hi, <%= user.name || user.id %>. Good to see you! Log out -
+
+
+
+ +
+ + + <%= user.name || user.id %> + + + +
+
+ +
+
+
-
-
-
- +
+
+
+

<%= title %>

+
+
+
+
+
+
+
+
+
+
+
+
+
+

+
+
+
+
    +
    +
    +
    +
    +
    + + +
    + +
    + +
    +
    +
    - - -<% todos.forEach( function ( todo ){ %> -
    - <%= todo.content %> - Delete
    -<% }); %> -
    <% } else { %> -
    -
    - You are not logged in.
    - Please login or sign up.
    -
    - Sign in with Facebook. -
    +
    +
    <% } %> diff --git a/views/layout.ejs b/views/layout.ejs index 7010382..04c8011 100644 --- a/views/layout.ejs +++ b/views/layout.ejs @@ -1,24 +1,23 @@ + <%= title %> - - + + + + + + + + + + + + + -
    - <%- body %> - -
    - - + <%- body %> - \ No newline at end of file + diff --git a/views/login.ejs b/views/login.ejs index 331188d..5343d1b 100644 --- a/views/login.ejs +++ b/views/login.ejs @@ -1,5 +1,4 @@ - -

    Login

    +

    帳號登入

    <% if( typeof(errors) !== 'undefined' ) { %>
    @@ -10,13 +9,13 @@
    - ID + 帳號
    - Password + 密碼
    - +
    diff --git a/views/signup.ejs b/views/signup.ejs deleted file mode 100644 index c951801..0000000 --- a/views/signup.ejs +++ /dev/null @@ -1,23 +0,0 @@ - -

    Sign up

    - -<% if( typeof(errors) !== 'undefined' ) { %> -
    - <%= errors %> -
    -<% } %> - -
    -
    -
    - ID -
    -
    - Password -
    -
    - -
    -
    - -