Improved UI for signin and signup

2 files changed, 72 insertions, 34 deletions

diff --git a/views/signin.hbs b/views/signin.hbs
index dc0bb8a..e985c13 100644
--- a/views/signin.hbs
+++ b/views/signin.hbs
@@ -26,20 +26,28 @@
 
                     <h3 class="signin"><hr><i class="fa fa-sign-in" aria-hidden="true"></i> Sign In<hr></h3>
                     <form action="/user/signin" method="post">
-                        <div class="form-group">
-                            <input type="text" class="form-control" placeholder="New Username" name="usrname">
-                        </div>
-                        <div class="form-group">
-                            <input type="password" class="form-control" placeholder="New Password" name="password">
+                        <div class="form-group signin-group">
+                            <div class="input-group input-group-lg">
+                                <div class="input-group-addon addon-username">
+                                    <i class="fa fa-envelope" aria-hidden="true"></i>
+                                </div>
+                                <input type="text" class="form-control input-username" placeholder="email" name="usrname">
+                            </div>
+                            <div class="input-group input-group-lg">
+                                <div class="input-group-addon addon-password">
+                                    <i class="fa fa-key" aria-hidden="true"></i>
+                                </div>
+                                <input type="password" class="form-control input-lg input-password" placeholder="password" name="password">
+                            </div>
                         </div>
                         <input type="hidden" name="_csrf" value="{{ csrfToken }}">
                         <button class="signin-btn signin-insite btn-lg btn btn-primary btn-block"><span>Sign In</span></button>
                     </form>
 
 
-                    <h3 class="signin signin-or">or</h3>
-                    <a href="/auth/facebook" class=" signin-btn btn-lg btn btn-primary btn-block"><span>
-                        <span class="fa fa-facebook"> </span>   Facebook connect</span></a>
+                    <h4 class="signin signin-or">or</h4>
+                    <a href="/auth/facebook" class="signin-fb signin-btn btn-lg btn btn-primary btn-block"><span>
+                        <span class="fa fa-facebook"> </span>   Sign in with Facebook</span></a>
 
                     </div>
                 </div>
diff --git a/views/signup.hbs b/views/signup.hbs
index b9cbb86..09b6c20 100644
--- a/views/signup.hbs
+++ b/views/signup.hbs
@@ -30,38 +30,68 @@
 
         <h3 class="signup"><hr><i class="fa fa-user-plus" aria-hidden="true"></i> Sign Up<hr></h3>
         <form action="/user/signup" method="post">
-            <div class="form-group">
-                <input type="text" class="form-control" placeholder="First Name" name="fname">
-            </div>
+            <div class="form-group signup-group ">
+                <div class="input-group input-group-lg">
+                    <div class="input-group-addon addon-fname">
+                        <i class="fa fa-male" aria-hidden="true"></i>
+                    </div>
+                    <input type="text" class="form-control input-fname" placeholder="first name" name="fname">
+                </div>
+                <div class="input-group input-group-lg">
+                    <div class="input-group-addon">
+                        <i class="fa fa-cube" aria-hidden="true"></i>
+                    </div>
+                    <input type="text" class="form-control input-lname" placeholder="last name" name="lname">
+                </div>
+                <div class="input-group input-group-lg">
+                    <div class="input-group-addon">
+                        <i class="fa fa-at" aria-hidden="true"></i>
+                    </div>
+                    <input type="email" class="form-control input-email" placeholder="email" name="email">
+                </div>
+                <div class="input-group input-group-lg">
+                    <div class="input-group-addon">
+                        <i class="fa fa-user" aria-hidden="true"></i>
+                    </div>
+                    <input type="text" class="form-control input-username-signin" placeholder="username" name="usrname">
+                </div>
+                <div class="input-group input-group-lg">
+                    <div class="input-group-addon">
+                        <i class="fa fa-lock" aria-hidden="true"></i>
+                    </div>
+                    <input type="password" class="form-control input-new-password" placeholder="password" name="password">
+                </div>
 
-            <div class="form-group">
-                <input type="text" class="form-control" placeholder="Last Name" name="lname">
-            </div>
+                <div class="input-group input-group-lg">
+                    <div class="input-group-addon">
+                        <i class="fa fa-unlock-alt" aria-hidden="true"></i>
+                    </div>
+                    <input type="password" class="form-control input-confirm" placeholder="confirm password" name="confirmPassword">
+                </div>
 
-            <div class="form-group">
-                <input type="email" class="form-control" placeholder="Email" name="email">
-            </div>
+                <div class="input-group input-group-lg">
+                    <div class="input-group-addon">
+                        <i class="fa fa-mobile" aria-hidden="true"></i>
+                    </div>
+                    <input type="number" class="form-control input-phone" placeholder="phone number (optional)" name="phone_num">
+                </div>
 
-            <div class="form-group">
-                <input type="text" class="form-control" placeholder="New Username" name="usrname">
-            </div>
-            <div class="form-group">
-                <input type="password" class="form-control" placeholder="New Password" name="password">
-            </div>
+                <div class="input-group input-group-lg">
+                    <div class="input-group-addon">
+                        <i class="fa fa-university" aria-hidden="true"></i>
+                    </div>
+                    <input type="text" class="form-control input-univ" placeholder="university (optional)" name="univ">
+                </div>
 
-            <div class="form-group">
-                <input type="password" class="form-control" placeholder="Confirm Password" name="confirmPassword">
-            </div>
-            <div class="form-group">
-                <input type="number" class="form-control" placeholder="Phone Number (optional)" name="phone_num">
-            </div>
-            <div class="form-group">
-                <input type="text" class="form-control" placeholder="University (optional)" name="univ">
+                <div class="input-group input-group-lg">
+                    <div class="input-group-addon addon-dept">
+                        <i class="fa fa-trophy" aria-hidden="true"></i>
+                    </div>
+                    <input type="text" class="form-control input-dept" placeholder="department (optional)" name="dept">
+                </div>
             </div>
 
-            <div class="form-group">
-                <input type="text" class="form-control" placeholder="Department (optional)" name="dept">
-            </div>
+
             <input type="hidden" name="_csrf" value="{{ csrfToken }}">
             <button class="signup-btn btn-lg btn btn-primary btn-block">Sign Up</button>
         </form>