heex login screen added
This commit is contained in:
parent
d7127f7447
commit
6a1dbbca8a
@ -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;
|
||||
}
|
@ -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);
|
||||
});
|
||||
});
|
||||
}
|
@ -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)
|
||||
|
5
lib/draincloud_core/auth/auth.ex
Normal file
5
lib/draincloud_core/auth/auth.ex
Normal file
@ -0,0 +1,5 @@
|
||||
defmodule DraincloudCore.Auth do
|
||||
def is_logon(token) :: boolean() do
|
||||
|
||||
end
|
||||
end
|
@ -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
|
||||
|
@ -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">
|
||||
|
@ -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
|
||||
|
@ -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>
|
@ -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>
|
2
mix.exs
2
mix.exs
@ -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
5
schemas/users.sql
Normal file
@ -0,0 +1,5 @@
|
||||
create table users (
|
||||
id bigserial,
|
||||
login varchar(50),
|
||||
password varchar(256)
|
||||
);
|
Loading…
Reference in New Issue
Block a user