login screen and related auth logic implemented #1

Merged
optclblast merged 4 commits from login_screen into master 2024-09-04 21:30:18 +00:00
11 changed files with 276 additions and 8 deletions
Showing only changes of commit 6a1dbbca8a - Show all commits

View File

@ -2,4 +2,92 @@
@import "tailwindcss/components";
@import "tailwindcss/utilities";
/* This file is for your main application CSS */
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
header {
width: 100%;
background-color: #0d1547;
padding: 15px 0;
text-align: center;
color: rgb(255, 241, 233);
font-size: 18px;
font-weight: bold;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.login-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h2 {
margin-bottom: 20px;
color: #333;
text-align: center;
}
.input-group {
margin-bottom: 15px;
}
.input-group label {
display: block;
margin-bottom: 5px;
color: #555;
}
.input-group input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.login-button {
width: 100%;
padding: 10px;
background-color: #0d1547;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.login-button:hover {
background-color: #0d1547;
}
.gallery-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-gap: 10px;
padding: 10px;
}
.gallery-item {
background-color: #fff;
padding: 10px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
.gallery-item img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
.gallery-item p {
margin-top: 10px;
font-size: 14px;
color: #555;
}

View File

@ -42,3 +42,33 @@ liveSocket.connect()
// >> liveSocket.disableLatencySim()
window.liveSocket = liveSocket
function initialize_gallery() {
document.addEventListener('DOMContentLoaded', function() {
const imagePaths = [
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg',
'image5.jpg'
// Add more image filenames here
];
const gallery = document.getElementById('gallery');
imagePaths.forEach(function(image) {
const item = document.createElement('div');
item.className = 'gallery-item';
const img = document.createElement('img');
img.src = '/images/' + image;
img.alt = image;
const caption = document.createElement('p');
caption.textContent = image;
item.appendChild(img);
item.appendChild(caption);
gallery.appendChild(item);
});
});
}

View File

@ -10,6 +10,7 @@ defmodule DrainCloudCore.Application do
children = [
DrainCloudCoreWeb.Telemetry,
DrainCloudCore.Repo,
# DrainCloudCore.Rtc,
{DNSCluster, query: Application.get_env(:draincloud_core, :dns_cluster_query) || :ignore},
{Phoenix.PubSub, name: DrainCloudCore.PubSub},
# Start a worker by calling: DrainCloudCore.Worker.start_link(arg)

View File

@ -0,0 +1,5 @@
defmodule DraincloudCore.Auth do
def is_logon(token) :: boolean() do
end
end

View File

@ -1,3 +1,103 @@
defmodule DraincloudCore.Rtc do
# Real Time Config module
defmodule DrainCloudCore.Rtc.Application do
use Application
def child_spec(opts) do
%{
id: __MODULE__,
start: {__MODULE__, :start_link, [opts]},
shutdown: 5_000,
restart: :permanent,
type: :supervisor
}
end
def start_link(_) do
children = [
DrainCloudCore.Rtc
]
opts = [strategy: :one_for_one, name: DrainCloudCore.Rtc.Supervisor]
Supervisor.start_link(children, opts)
end
end
defmodule DrainCloudCore.Rtc do
alias :mnesia, as: Mnesia
alias :logger, as: Log
use GenServer
# Real-time config table schemas
@config_web [attributes: [
:host,
:enable_https,
:port,
]]
@config_pg [attributes: [
:host,
:port,
:ssl,
:user,
:password,
:db,
]]
@config_s3 [attributes: [
:host,
:port,
# user / secret / secrets etc...
]]
# def child_spec(opts) do
# %{
# id: __MODULE__,
# start: {__MODULE__, :start_link, [opts]},
# shutdown: 5_000,
# restart: :permanent,
# type: :worker
# }
# end
def start_link(default) when is_list(default) do
GenServer.start_link(__MODULE__, default)
end
@impl true
def init(stack) do
{:ok, stack}
end
@impl true
def handle_call(:pop, _from, [head | tail]) do
{:reply, head, tail}
end
@impl true
def handle_cast({:push, element}, state) do
{:noreply, [element | state]}
end
def fetch_config() do
# Mnesia.read()
end
def init() do
Log.info("[#{__MODULE__}] start initializin RTC subsystems")
if Mnesia.create_schema([node()]) != :ok do
Log.warning("[#{__MODULE__}] schema #{node()} not created. skipping")
end
if Mnesia.create_table(DrainCloudRtcWeb, @config_web) != {:atomic, :ok} do
Log.warning("[#{__MODULE__}] table config_web not created. skipping")
end
if Mnesia.create_table(DrainCloudRtcPG, @config_pg) != {:atomic, :ok} do
Log.warning("[#{__MODULE__}] schema config_pg not created. skipping")
end
if Mnesia.create_table(DrainCloudRtcS3, @config_s3) != {:atomic, :ok} do
Log.warning("[#{__MODULE__}] schema config_s3 not created. skipping")
end
end
end

View File

@ -8,7 +8,8 @@
<%= assigns[:page_title] || "DrainCloudCore" %>
</.live_title>
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
<script src="https://unpkg.com/htmx.org@2.0.2" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin="anonymous"></script>
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
</script>
</head>
<body class="bg-white">

View File

@ -1,9 +1,14 @@
defmodule DrainCloudCoreWeb.PageController do
use DrainCloudCoreWeb, :controller
def home(conn, _params) do
def home(conn, _params) when is_logon(conn) do
# The home page is often custom made,
# so skip the default app layout.
if Map.has_key?(conn.req_headers, 'x-access-token') do
{_, token} = Map.fetch(conn.req_headers, 'x-access-token')
end
render(conn, :home, layout: false)
end
end

View File

@ -1 +1,17 @@
<h1>Hello</h1>
<header>
DrainCloud
</header>
<div class="login-container">
<h2>Login</h2>
<form action="/login" method="post">
<div class="input-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit" class="login-button">Login</button>
</form>
</div>

View File

@ -0,0 +1,17 @@
<header>
DrainCloud
</header>
<div class="login-container">
<h2>Login</h2>
<form action="/login" method="post">
<div class="input-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit" class="login-button">Login</button>
</form>
</div>

View File

@ -19,7 +19,7 @@ defmodule DrainCloudCore.MixProject do
def application do
[
mod: {DrainCloudCore.Application, []},
extra_applications: [:logger, :runtime_tools]
extra_applications: [:logger, :runtime_tools, :mnesia]
]
end

5
schemas/users.sql Normal file
View File

@ -0,0 +1,5 @@
create table users (
id bigserial,
login varchar(50),
password varchar(256)
);