feat: authentication flow

assets/css/app.css

@@ -9,7 +9,7 @@
 /* A Tailwind plugin that makes "hero-#{ICON}" classes available.
    The heroicons installation itself is managed by your mix.exs */
 @plugin "../vendor/heroicons";
-
+@plugin "../vendor/heroicons.js";
 
 @theme {
   --color-primary: #ee7749;
@@ -28,3 +28,4 @@
 [data-phx-session], [data-phx-teleported-src] { display: contents }
 
 /* This file is for your main application CSS */
+

assets/vendor/heroicons.js

@@ -40,4 +40,4 @@ module.exports = plugin(function({matchComponents, theme}) {
       }
     }
   }, {values})
-})
+})

lib/yearbook/user.ex

@@ -0,0 +1,26 @@
+defmodule Yearbook.User do
+  @moduledoc """
+    Yearbook's user module
+  """
+  use Ecto.Schema
+  import Ecto.Changeset
+
+  @primary_key {:id, :binary_id, autogenerate: true}
+  @foreign_key_type :binary_id
+  schema "users" do
+    field :name, :string
+    field :description, :string
+    field :email, :string
+    field :year, Ecto.Enum, values: [:"3rd", :"5th"]
+    field :password, :string
+
+    timestamps(type: :utc_datetime)
+  end
+
+  @doc false
+  def changeset(user, attrs) do
+    user
+    |> cast(attrs, [:name, :email, :year, :password])
+    |> validate_required([:name, :email, :year, :password])
+  end
+end

lib/yearbook_web.ex

@@ -64,6 +64,24 @@ defmodule YearbookWeb do
     end
   end
 
+  def auth_view do
+    quote do
+      use Phoenix.LiveView,
+        layout: {YearbookWeb.Layouts, :auth}
+
+      unquote(html_helpers())
+    end
+  end
+
+  def navbar do
+    quote do
+      use Phoenix.LiveView,
+        layout: {YearbookWeb.Layouts, :navbar}
+
+      unquote(html_helpers())
+    end
+  end
+
   def html do
     quote do
       use Phoenix.Component

lib/yearbook_web/components/core_components.ex

@@ -101,8 +101,8 @@ defmodule YearbookWeb.CoreComponents do
     <button
       type={@type}
       class={[
-        @class,
-        variant_classes(@variant)
+        variant_classes(@variant),
+        @class
       ]}
       {@rest}
     >
@@ -113,11 +113,11 @@ defmodule YearbookWeb.CoreComponents do
 
   # Variant classes
   defp variant_classes("primary") do
-    "rounded-xl bg-primary p-4 font-semibold tracking-wider text-white cursor-pointer"
+    "rounded-xl bg-primary font-semibold py-auto tracking-wider text-white cursor-pointer"
   end
 
   defp variant_classes("secondary") do
-    "rounded-4xl bg-white p-4 font-semibold tracking-wider text-primary cursor-pointer"
+    "rounded-4xl bg-white font-semibold py-auto tracking-wider text-primary cursor-pointer"
   end
 
   @doc """
@@ -199,7 +199,7 @@ defmodule YearbookWeb.CoreComponents do
             name={@name}
             value="true"
             checked={@checked}
-            class={@class || "checkbox checkbox-sm"}
+            class={@class || "checkbox checkbox-sm "}
             {@rest}
           />{@label}
         </span>

lib/yearbook_web/components/layouts.ex

@@ -123,7 +123,7 @@ defmodule YearbookWeb.Layouts do
   def theme_toggle(assigns) do
     ~H"""
     <div class="card relative flex flex-row items-center border-2 border-base-300 bg-base-300 rounded-full">
-      <div class="absolute w-1/3 h-full rounded-full border-1 border-base-200 bg-base-100 brightness-200 left-0 [[data-theme=light]_&]:left-1/3 [[data-theme=dark]_&]:left-2/3 transition-[left]" />
+      <div class="absolute w-1/3 h-full rounded-full border border-base-200 bg-base-100 brightness-200 left-0 [[data-theme=light]_&]:left-1/3 [[data-theme=dark]_&]:left-2/3 transition-[left]" />
 
       <button
         class="flex p-2 cursor-pointer w-1/3"

lib/yearbook_web/components/layouts/auth.html.heex

@@ -0,0 +1,30 @@
+<div class="flex flex-col relative w-full justify-between min-h-screen ">
+  <img
+    src="/images/background/0.png"
+    class="absolute inset-0 h-full w-full object-cover opacity-100 z-0 "
+    alt="background"
+  />
+  <div class="flex flex-col w-full h-full z-10 place-items-between min-h-screen">
+    <div class="flex relative w-full h-auto">
+      <div class="bg-white/30 m-4 w-auto backdrop-blur-md p-3 rounded-2xl hover:scale-102 transition-transform hover:bg-white/50">
+        <a href="/" class="flex items-center gap-3 cursor-pointer">
+          <span class="hero-academic-cap text-black h-8 w-8"></span>
+          <span class="text-2xl font-bold text-black">YEARBOOK</span>
+        </a>
+      </div>
+    </div>
+
+    <div class="flex grow md:place-items-center ">
+      {@inner_content}
+    </div>
+
+    <div class="flex relative w-full h-auto justify-center md:justify-start align-bottom mt-2">
+      <a href="https://cesium.di.uminho.pt/en" class="m-3 cursor-default ">
+        <img
+          src="/images/cesium.svg"
+          class="h-10 w-10 cursor-pointer hover:scale-105 transition-transform "
+        />
+      </a>
+    </div>
+  </div>
+</div>

lib/yearbook_web/components/layouts/navbar.html.heex

@@ -0,0 +1,23 @@
+<div class="h-screen w-full">
+  <div class="bg-white flex items-center justify-between w-full h-20 px-4 border-b-3 border-primary ">
+    <div class="flex z-10 justify-between h-full items-center">
+      <div class="p-3 rounded-2xl ">
+        <a href="/" class="flex items-center gap-3 cursor-pointer">
+          <span class="hero-academic-cap text-black h-8 w-8"></span>
+          <span class="text-2xl font-bold text-black">YEARBOOK</span>
+        </a>
+      </div>
+    </div>
+    <div class="flex items-center gap-2">
+      <a href="/signup">
+        <.button variant="secondary" class="w-32 h-10 border-primary ">Sign Up</.button>
+      </a>
+      <a href="/signin">
+        <.button variant="secondary" class="w-32 h-10 border-primary">Sign In</.button>
+      </a>
+    </div>
+  </div>
+  <div class="flex grow md:place-items-center ">
+    {@inner_content}
+  </div>
+</div>

lib/yearbook_web/components/layouts/root.html.heex

@@ -1,12 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <title>{assigns[:page_title] || "Yearbook"}</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
     <.live_title default="Yearbook" suffix=" · Phoenix Framework">
       {assigns[:page_title]}
     </.live_title>
+    <link rel="icon" type="image/x-icon" stroke="%23EE7749" href="/images/favicon.png" />
     <link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/js/app.js"}>
     </script>
@@ -18,7 +20,7 @@
             document.documentElement.removeAttribute("data-theme");
           } else {
             localStorage.setItem("phx:theme", theme);
-            document.documentElement.setAttribute("data-theme", theme);
+            document.documentElement.setAttribute("data-theme", wnite);
           }
         };
         if (!document.documentElement.hasAttribute("data-theme")) {
@@ -30,7 +32,7 @@
       })();
     </script>
   </head>
-  <body>
+  <body class="bg-gray-100">
     {@inner_content}
   </body>
 </html>

lib/yearbook_web/live/forgot_password/index.ex

@@ -0,0 +1,11 @@
+defmodule YearbookWeb.ForgotPassword.Index do
+  @moduledoc """
+    Forgot password
+  """
+  use YearbookWeb, :auth_view
+
+  def mount(_params, _session, socket) do
+    socket = assign(socket, page_title: "Forgot Password | Yearbook")
+    {:ok, socket}
+  end
+end

lib/yearbook_web/live/forgot_password/index.html.heex

@@ -0,0 +1,53 @@
+<div class=" z-10 flex justify-end items-center grow h-full my-auto">
+  <div class="flex flex-col justify-stretch sm:justify-between bg-white h-auto  w-full md:w-150 sm:h-100 rounded-2xl py-8 px-5 sm:p-8 mr-5 ml-5 my-auto">
+    <div class="flex-col">
+      <div class="flex-col">
+        <a
+          class="inline-flex items-center cursor-pointer hover:scale-105 transition-all"
+          href="/signin"
+        >
+          <span class="hero-arrow-left text-black h-5"></span>
+          <p class="text-primary">Back</p>
+        </a>
+
+        <div class="flex items-center">
+          <span class="hero-key text-black mt-5 mr-2"></span>
+          <h1 class="text-3xl font-bold tracking-normal ml-2 mt-6 mb-1 text-black">
+            Forgot Password
+          </h1>
+        </div>
+      </div>
+      <div class="flex-col">
+        <p class="pt-2 text-black">
+          Did you forget your password?
+        </p>
+        <p class="pt-2 text-black">
+          Try entering your email here to reset your password
+        </p>
+      </div>
+    </div>
+    <div class="flex flex-col">
+      <div class="mb-2 mt-4">
+        <label class="text-black font-semibold mb-2 mt-2">Email</label>
+        <div class="flex border border-gray-300 rounded mt-2  px-3 py-2 h-13">
+          <span class="hero-at-symbol text-black content-center my-auto mr-2 "></span>
+
+          <input
+            type="email"
+            class="text-black w-full outline-none "
+            placeholder="Email"
+            name="email"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col">
+      <.button
+        class="h-12 w-full hover:scale-101 transition-transform bg-primary rounded "
+        variant="primary"
+      >
+        Submit
+      </.button>
+    </div>
+  </div>
+</div>

lib/yearbook_web/live/landing_page/index.ex

@@ -0,0 +1,12 @@
+defmodule YearbookWeb.LandingPage.Index do
+  use YearbookWeb, :navbar
+
+  @moduledoc """
+    Landing Page
+  """
+  def mount(_params, _session, socket) do
+    {:ok,
+     socket
+     |> assign(page_title: "Home | Yearbook")}
+  end
+end

lib/yearbook_web/live/landing_page/index.html.heex

@@ -0,0 +1,7 @@
+<div class="flex flex-col relative w-full justify-between min-h-screen ">
+  <img
+    src="/images/background/0.png"
+    class="absolute inset-0 h-full w-full object-cover opacity-100 z-0 "
+    alt="background"
+  />
+</div>

lib/yearbook_web/live/sign_in/form_component.ex

@@ -0,0 +1,74 @@
+defmodule YearbookWeb.SignInLive.FormComponent do
+  use YearbookWeb, :live_component
+
+  alias Phoenix.HTML.FormData
+
+  @impl true
+  @spec render(any()) :: Phoenix.LiveView.Rendered.t()
+  def render(assigns) do
+    ~H"""
+    <div>
+      <.form for={@form} phx-change="validate" phx-target={@myself}>
+        <div class="mb-2 mt-4">
+          <label class="text-black font-semibold mb-2 mt-4">Password</label>
+          <div class="flex items-center border border-gray-300 rounded px-3 py-2 mb-4 mt-2 h-13">
+            <span class="hero-key text-black content-center my-auto mr-2"></span>
+            <%= if @password_visible do %>
+              <div class="grid w-full h-full grid-cols-[auto_1rem] justify-stretch py-1 pr-2">
+                <.input
+                  type="text"
+                  class="text-black w-full outline-none"
+                  placeholder="Password"
+                  field={@form["password"]}
+                />
+                <span
+                  id="toggle-eye-password"
+                  class="hero-eye-slash text-black cursor-pointer my-auto hover:scale-110 transition-transform self-end"
+                  phx-click="toggle_password"
+                  phx-target={@myself}
+                >
+                </span>
+              </div>
+            <% else %>
+              <div class="grid w-full h-full grid-cols-[auto_1rem] justify-stretch py-1 pr-2">
+                <.input
+                  type="password"
+                  class="text-black w-full outline-none"
+                  placeholder="Password"
+                  field={@form["password"]}
+                />
+                <span
+                  id="toggle-eye-password"
+                  class="hero-eye text-black cursor-pointer my-auto hover:scale-110 transition-transform"
+                  phx-click="toggle_password"
+                  phx-target={@myself}
+                >
+                </span>
+              </div>
+            <% end %>
+          </div>
+        </div>
+      </.form>
+    </div>
+    """
+  end
+
+  @impl true
+  def update(assigns, socket) do
+    {:ok,
+     socket
+     |> assign(assigns)
+     |> assign_new(:password_visible, fn -> false end)}
+  end
+
+  @impl true
+  def handle_event("toggle_password", _params, socket) do
+    {:noreply, assign(socket, :password_visible, !socket.assigns.password_visible)}
+  end
+
+  def handle_event("validate", %{"auth" => form}, socket) do
+    {:noreply,
+     socket
+     |> assign(form: FormData.to_form(%{"password" => form["password"]}, as: :auth))}
+  end
+end

lib/yearbook_web/live/sign_in/index.ex

@@ -0,0 +1,12 @@
+defmodule YearbookWeb.SignInLive.Index do
+  use YearbookWeb, :auth_view
+
+  alias Phoenix.HTML.FormData
+
+  def mount(_params, _session, socket) do
+    {:ok,
+     socket
+     |> assign(page_title: "Sign In | Yearbook")
+     |> assign(form: FormData.to_form(%{"password" => ""}, as: :auth))}
+  end
+end