ui design for sign-in and sign-up page

add /login and /sign-up link for user signing
fix typo error

public/css/gogs.css

@@ -5,31 +5,109 @@
  */
 
 body {
-	padding-top: 70px;
+    background: #F6F6F6;
 }
-.navbar {
+
-	min-height: 45px;
+/* gogits nav header */
+.gogs-masthead {
+    background-color: #428bca;
+    box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
+    min-height: 45px;
+    padding: 2px 16px;
 }
-.navbar-brand {
+
-	height: 45px;
+/* gogits nav item link */
-	padding: 5px 10px 0px 10px;
+.gogs-nav-item {
-	border-left: 1px solid #e5e5e5;
+    position: relative;
-	border-right: 1px solid #e5e5e5;
+    display: inline-block;
+    padding: 10px;
+    font-weight: bold;
+    color: #EEE;
+    font-size: 100%;
 }
-.navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar-brand:hover {
+
-	background-color: #f0f0f0;
+.gogs-nav-item:hover,
+.gogs-nav-item:focus {
+    color: #fff;
+    text-decoration: none;
 }
-.navbar-brand img {
+
-	width: 32px;
+.gogs-nav-item.navbar-btn {
+    cursor: pointer;
+    margin-top: 8px;
+    padding: 5px 15px;
 }
-.navbar-nav > li > a {
+
-	font-size: 16px;
+/* gogits nav item active status */
-	padding-top: 13px;
+.gogs-nav .active {
+    color: #fff;
 }
-.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
+
-	color: rgb(153, 153, 153);
+.gogs-nav .active:after {
+    position: absolute;
+    bottom: -2px;
+    left: 50%;
+    width: 0;
+    height: 0;
+    margin-left: -5px;
+    vertical-align: middle;
+    content: " ";
+    border-right: 5px solid transparent;
+    border-bottom: 5px solid;
+    border-left: 5px solid transparent;
 }
-.navbar-btn, .navbar .btn {
+
-	padding: 5px 15px;
+/* gogits logo */
-	margin-top: 7px;
+#gogs-logo {
+    width: 28px;
+}
+
+/* gogits body */
+#gogs-body {
+    padding-top: 30px;
+    padding-bottom: 60px;
+}
+
+/* gogits login card */
+#gogs-login-card {
+    width: 600px;
+    margin: auto;
+    padding: 30px;
+    background: #fff;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-sizing: border-box;
+}
+
+#gogs-login-card h3 {
+    margin-top: 0;
+    margin-bottom: 30px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #ccc;
+}
+
+#gogs-login-card .form-control {
+    padding: 6px 12px;
+    box-sizing: content-box;
+}
+
+#gogs-login-card .control-label {
+    height: 44px;
+    line-height: 30px;
+}
+
+#gogs-login-card .btn{
+    cursor: pointer;
+    margin-right: 1.2em;
+}
+
+#gogs-social-login{
+    margin-top: 30px;
+    padding-top: 20px;
+    border-top: 1px solid #ccc;
+}
+
+#gogs-social-login .btn{
+    float: none;
+    margin: auto;
 }

routers/user/ssh.go

@@ -13,7 +13,7 @@ import (
 	"github.com/gogits/gogs/models"
 )
 
-func AddPublickKey(req *http.Request, r render.Render) {
+func AddPublicKey(req *http.Request, r render.Render) {
 	if req.Method == "GET" {
 		r.HTML(200, "user/publickey_add", map[string]interface{}{
 			"Title": "Add Public Key",

routers/user/user.go

@@ -16,8 +16,15 @@ import (
 	"github.com/gogits/gogs/utils/log"
 )
 
-func SignIn(r render.Render) {
+func SignIn(req *http.Request, r render.Render) {
-	r.Redirect("/user/signup", 302)
+	if req.Method == "GET" {
+		r.HTML(200, "user/signin", map[string]interface{}{
+			"Title": "Log In",
+		})
+		return
+	}
+
+	// todo sign in
 }
 
 func SignUp(req *http.Request, r render.Render) {

templates/base/navbar.tmpl

@@ -1,4 +1,16 @@
-<nav class="navbar navbar-inverse navbar-fixed-top">
+<div class="gogs-masthead" id="masthead">
+    <div class="container">
+        <nav class="gogs-nav">
+            <a class="gogs-nav-item active" href="/"><img src="/img/favicon.png" alt="Gogs Logo" id="gogs-logo"></a>
+            <a class="gogs-nav-item" href="#">Dashboard</a>
+            <a class="gogs-nav-item" href="#">Explore</a>
+            <a class="gogs-nav-item" href="#">Help</a>
+            <a class="gogs-nav-item navbar-right navbar-btn btn btn-danger" href="/login/">Sign in</a>
+            <!--<a class="gogs-nav-item navbar-right" href="#">Profile</a>-->
+        </nav>
+    </div>
+</div>
+<!--<nav class="navbar navbar-inverse navbar-fixed-top">
 	<div class="container">
 		<div class="navbar-header">
 			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gogs-navbar-collapse">
@@ -15,4 +27,4 @@
 			<a href="/user/signin" class="navbar-right btn btn-success navbar-btn">Sign In</a>
 		</div>
 	</div>
-</nav>
+</nav>-->

templates/dashboard.tmpl

@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 {{template "base/navbar" .}}
-<div class="container">
+<div id="gogs-body" class="container">
 	Website is still in the progress of building...please come back later!
 </div>
 {{template "base/footer" .}}

templates/user/signin.tmpl

@@ -0,0 +1,34 @@
+{{template "base/head" .}}
+{{template "base/navbar" .}}
+<div class="container" id="gogs-body">
+    <form action="/user/signup" method="post" class="form-horizontal" id="gogs-login-card">
+        <h3>Log in</h3>
+        <div class="form-group">
+            <label class="col-md-4 control-label">Username or Email: </label>
+            <div class="col-md-6">
+                <input name="account" class="form-control" placeholder="Type your username or e-mail address">
+            </div>
+        </div>
+        <div class="form-group">
+            <label class="col-md-4 control-label">Password: </label>
+            <div class="col-md-6">
+                <input name="passwd" type="password" class="form-control" placeholder="Type your password">
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="col-md-offset-4 col-md-6">
+                <button type="submit" class="btn btn-lg btn-primary">Log In</button>
+                <a href="/forget-password/">Forgot your password?</a>
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="col-md-offset-4 col-md-6">
+                <a href="/sign-up/">Need an account? Sign up free.</a>
+            </div>
+        </div>
+        <div class="form-group text-center" id="gogs-social-login">
+            <a class="btn btn-default btn-lg">Social Login</a>
+        </div>
+    </form>
+</div>
+{{template "base/footer" .}}

templates/user/signup.tmpl

@@ -1,43 +1,44 @@
 {{template "base/head" .}}
 {{template "base/navbar" .}}
-<div class="container">
+<div class="container" id="gogs-body">
-	<form action="/user/signup" method="post" class="form-horizontal">
+	<form action="/user/signup" method="post" class="form-horizontal" id="gogs-login-card">
+        <h3>Sign Up</h3>
 		<div class="form-group">
 			<label class="col-md-4 control-label">Username: </label>
-			<div class="col-md-3">
+			<div class="col-md-6">
 				<input name="username" class="form-control" placeholder="Type your username">
 			</div>
 		</div>
-
 		<div class="form-group">
 			<label class="col-md-4 control-label">Email: </label>
-			<div class="col-md-3">
+			<div class="col-md-6">
 				<input name="email" class="form-control" placeholder="Type your e-mail address">
 			</div>
 		</div>
 
 		<div class="form-group">
 			<label class="col-md-4 control-label">Password: </label>
-			<div class="col-md-3">
+			<div class="col-md-6">
 				<input name="passwd" type="password" class="form-control" placeholder="Type your password">
 			</div>
 		</div>
-
 		<div class="form-group">
 			<label class="col-md-4 control-label">Re-type: </label>
-			<div class="col-md-3">
+			<div class="col-md-6">
 				<input type="password" class="form-control" placeholder="Re-type your password">
 			</div>
 		</div>
 
 		<div class="form-group">
-		    <div class="col-md-offset-4 col-md-3">
+		    <div class="col-md-offset-4 col-md-6">
-		    	<button type="submit" class="btn btn-info">Sign Up</button>
+		    	<button type="submit" class="btn btn-lg btn-primary">Create an account</button>
 		    </div>
 		</div>
 
-	    <div class="col-md-offset-4 col-md-3">
+	    <div class="form-group">
-	    	<a href="/user/signin">Already have an account? Sign in now!</a>
+            <div class="col-md-offset-4 col-md-6">
+                <a href="/sign-up">Already have an account? Sign in now!</a>
+            </div>
 	    </div>
 	</form>
 </div>

web.go

@@ -48,10 +48,14 @@ func runWeb(*cli.Context) {
 
 	// Routers.
 	m.Get("/", routers.Dashboard)
-	m.Get("/user/signin", user.SignIn)
+	m.Any("/login", user.SignIn)
+	m.Any("/user/signin", user.SignIn)
+
+	m.Any("/sign-up", user.SignUp)
 	m.Any("/user/signup", user.SignUp)
+
 	m.Any("/user/delete", user.Delete)
-	m.Any("/user/publickey/add", user.AddPublickKey)
+	m.Any("/user/publickey/add", user.AddPublicKey)
 	m.Any("/repo/create", repo.Create)
 	m.Any("/repo/delete", repo.Delete)