Adding styling and functionality for login and register pages

scalableinternetservices · Nov 17, 2024 · 1f81988 · 1f81988
1 parent f4813f5
commit 1f81988
Show file tree

Hide file tree

Showing 4 changed files with 210 additions and 34 deletions.
diff --git a/app/assets/stylesheets/auth.css b/app/assets/stylesheets/auth.css
@@ -0,0 +1,138 @@
+/* Global auth styles */
+body {
+  background-color: #f5f5f5;
+  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+}
+
+.auth-container {
+  max-width: 400px;
+  margin: 120px auto 80px;
+  padding: 30px;
+  background-color: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
+}
+
+.auth-container h1 {
+  text-align: center;
+  color: #2c3e50;
+  margin-bottom: 30px;
+  font-size: 28px;
+  font-weight: 600;
+}
+
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-group label {
+  color: #4a5568;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.form-group input {
+  padding: 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  font-size: 16px;
+  transition: all 0.2s;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: #4a90e2;
+  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
+}
+
+.auth-submit {
+  background-color: #3498db;
+  color: white;
+  padding: 14px;
+  border: none;
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  margin-top: 10px;
+  margin-bottom: 25px;  /* Added spacing before the create account link */
+}
+
+.auth-submit:hover {
+  background-color: #2980b9;
+}
+
+.auth-links {
+  text-align: center;
+  padding-top: 20px;
+  border-top: 1px solid #edf2f7;
+}
+
+.auth-links a {
+  color: #3498db;
+  text-decoration: none;
+  font-size: 15px;
+  font-weight: 500;
+  transition: color 0.2s;
+}
+
+.auth-links a:hover {
+  color: #2980b9;
+  text-decoration: underline;
+}
+
+/* Navigation links in header */
+.nav-links {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  gap: 15px;
+}
+
+.nav-links a {
+  color: #3498db;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 8px 15px;
+  border-radius: 6px;
+  transition: background-color 0.2s;
+}
+
+.nav-links a:hover {
+  background-color: rgba(52, 152, 219, 0.1);
+}
+
+/* Add these styles for the header */
+.auth-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 20px;
+  background-color: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  z-index: 100;
+}
+
+.home-link {
+  color: #2c3e50;
+  text-decoration: none;
+  font-size: 18px;
+  font-weight: 600;
+  transition: color 0.2s;
+}
+
+.home-link:hover {
+  color: #3498db;
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -11,13 +11,15 @@
   </head>
 
   <body>
-    <div style="position: absolute;top: 0;right: 0;">
-      <% if @loggedin %>
-        <%= link_to "Log Out", "/logout" %> <%= link_to "Profile", "/profile" %>
-      <% else %>
+    <% unless current_page?(login_path) || current_page?(register_path) %>
+      <div class="nav-links">
+        <% if @loggedin %>
+          <%= link_to "Log Out", "/logout" %> <%= link_to "Profile", "/profile" %>
+        <% else %>
           <%= link_to "Log In", "/login" %> <%= link_to "Register", "/register" %>
-      <% end %>
-    </div>
+        <% end %>
+      </div>
+    <% end %>
     <%= yield %>
   </body>
 </html>
diff --git a/app/views/session/login_form.html.erb b/app/views/session/login_form.html.erb
@@ -1,13 +1,31 @@
-<%= form_with url: "/login", method: :post do |form| %>
-    <%= form.label :username, "Username:" %>
-    <%= form.text_field :username %>
-    <br>
-    <%= form.label :password, "Password:" %>
-    <%= form.password_field :password %>
-    <br>
-    <%= form.submit "Log In" %>
-    <br>
+<header class="auth-header">
+  <%= link_to "← Back to Home", root_path, class: "home-link" %>
+</header>
+
+<div class="auth-container">
+  <h1>Welcome Back</h1>
+
+  <%= form_with url: "/login", method: :post, class: "auth-form" do |form| %>
+    <div class="form-group">
+      <%= form.label :username, "Username" %>
+      <%= form.text_field :username, placeholder: "Enter your username" %>
+    </div>
+
+    <div class="form-group">
+      <%= form.label :password, "Password" %>
+      <%= form.password_field :password, placeholder: "Enter your password" %>
+    </div>
+
+    <%= form.submit "Log In", class: "auth-submit" %>
+
     <% if defined?(@msg) %>
+      <div class="auth-error">
         <%= @msg %>
+      </div>
     <% end %>
-<% end %>
+  <% end %>
+
+  <div class="auth-links">
+    <%= link_to "Create an account", "/register" %>
+  </div>
+</div>
diff --git a/app/views/user/register_form.html.erb b/app/views/user/register_form.html.erb
@@ -1,20 +1,38 @@
-<%= form_with model: @user, url: "/register", method: :post do |form| %>
-    <%= form.label :username, "Username:" %>
-    <%= form.text_field :username %>
-    <br>
-    <%= form.label :password, "Password:" %>
-    <%= form.password_field :password %>
-    <br>
-    <%= form.label :password_confirmation, "Confirm Password:" %>
-    <%= form.password_field :password_confirmation %>
-    <br>
-    <%= form.submit "Register" %>
-    <br>
+<header class="auth-header">
+  <%= link_to "← Back to Home", root_path, class: "home-link" %>
+</header>
+
+<div class="auth-container">
+  <h1>Create Account</h1>
+
+  <%= form_with model: @user, url: "/register", method: :post, class: "auth-form" do |form| %>
+    <div class="form-group">
+      <%= form.label :username, "Username" %>
+      <%= form.text_field :username, placeholder: "Choose a username" %>
+    </div>
+
+    <div class="form-group">
+      <%= form.label :password, "Password" %>
+      <%= form.password_field :password, placeholder: "Choose a password" %>
+    </div>
+
+    <div class="form-group">
+      <%= form.label :password_confirmation, "Confirm Password" %>
+      <%= form.password_field :password_confirmation, placeholder: "Confirm your password" %>
+    </div>
+
+    <%= form.submit "Create Account", class: "auth-submit" %>
+
     <% if @user.errors.any? %>
-        <ul>
-            <% @user.errors.full_messages.each do |message| %>
-                <li><%= message %></li>
-            <% end %>
-        </ul>
+      <div class="auth-error">
+        <% @user.errors.full_messages.each do |message| %>
+          <div><%= message %></div>
+        <% end %>
+      </div>
     <% end %>
-<% end %>
+  <% end %>
+
+  <div class="auth-links">
+    <%= link_to "Already have an account? Log in", "/login" %>
+  </div>
+</div>