Update to sveltekit 2

This commit is contained in:
Henrik Bygren 2024-04-03 14:48:04 +02:00
commit 1b63ab6908
63 changed files with 6296 additions and 0 deletions

21
.gitignore vendored Normal file
View File

@ -0,0 +1,21 @@
.DS_Store
sveltekit/node_modules/*
node_modules
sveltekit/build
sveltekit/.svelte-kit
sveltekit/package
sveltekit.env
sveltekit.env.*
!.env.example
db/*
!db/.gitkeep
!nginx
nginx/*
!nginx/nginx.conf
!php
php/*
!php/php.ini

37
README.md Normal file
View File

@ -0,0 +1,37 @@
## Docker-compose LEMP
### Inkluderar
- nginx -> localhost:80
- php
- mariadb -> mariadb
- phpmyadmin -> localhost:8080
- composer
### HowTo
##### Webbroten
www/public
##### Starta servern (containern) med
docker-compose up -d
##### Stoppa servern (containern) med
docker-compose down
##### Serverns url
localhost
##### phpmyadmin
localhost:8080
##### Anslut till MariaDB med php
````php
<?php
// Definierar konstanter med användarinformation.
define ('DB_USER', 'userName'); // Användare i MariaDB
define ('DB_PASSWORD', '12345');
define ('DB_HOST', 'mariadb');
define ('DB_NAME', 'dbName'); // Databasen som anslutning skall ske till
// Skapar en anslutning till MariaDB och databasen dbName
$dsn = 'mysql:host=' . DB_HOST . ';dbname=' . DB_NAME . ';charset=utf8';
$db = new PDO($dsn, DB_USER, DB_PASSWORD);
?> // Ej nödvändigt att avslut "ren" php med ?>
````
### ToDo
Stöd för https, TLS (ssl).

208
config/mysql/my.cnf Normal file
View File

@ -0,0 +1,208 @@
# Copyright © 2020 Joel Paulsson, Noah Jarvis
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU Affero General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU Affero General Public License for more details.
#
# You should have received a copy of the GNU Affero General Public License
# along with this program. If not, see <https://www.gnu.org/licenses/>.
# MariaDB database server configuration file.
#
# You can copy this file to one of:
# - "/etc/mysql/my.cnf" to set global options,
# - "~/.my.cnf" to set user-specific options.
#
# One can use all long options that the program supports.
# Run program with --help to get a list of available options and with
# --print-defaults to see which it w ould actually understand and use.
#
# For explanations see
# http://dev.mysql.com/doc/mysql/en/server-system-variables.html
# This will be passed to all mysql clients
# It has been reported that passwords should be enclosed with ticks/quotes
# escpecially if they contain "#" chars...
# Remember to edit /etc/mysql/debian.cnf when changing the socket location.
[client]
port = 3306
socket = /var/run/mysqld/mysqld.sock
default-character-set = utf8mb4
# Here is entries for some specific programs
# The following values assume you have at least 32M ram
# This was formally known as [safe_mysqld]. Both versions are currently parsed.
[mysqld_safe]
socket = /var/run/mysqld/mysqld.sock
nice = 0
[mysqld]
character-set-client-handshake = FALSE
character-set-server = utf8mb4
collation-server = utf8mb4_unicode_ci
#
# * Basic Settings
#
#user = mysql
pid-file = /var/run/mysqld/mysqld.pid
socket = /var/run/mysqld/mysqld.sock
port = 3306
basedir = /usr
datadir = /var/lib/mysql
tmpdir = /tmp
lc_messages_dir = /usr/share/mysql
lc_messages = en_US
skip-external-locking
#
# Instead of skip-networking the default is now to listen only on
# localhost which is more compatible and is not less secure.
#bind-address = 172.17.0.1
#
# * Fine Tuning
#
max_connections = 100
connect_timeout = 5
wait_timeout = 600
max_allowed_packet = 16M
thread_cache_size = 128
sort_buffer_size = 4M
bulk_insert_buffer_size = 16M
tmp_table_size = 32M
max_heap_table_size = 32M
#
# * MyISAM
#
# This replaces the startup script and checks MyISAM tables if needed
# the first time they are touched. On error, make copy and try a repair.
myisam_recover_options = BACKUP
key_buffer_size = 128M
#open-files-limit = 2000
table_open_cache = 400
myisam_sort_buffer_size = 512M
concurrent_insert = 2
read_buffer_size = 2M
read_rnd_buffer_size = 1M
#
# * Query Cache Configuration
#
# Cache only tiny result sets, so we can fit more in the query cache.
query_cache_limit = 128K
query_cache_size = 64M
# for more write intensive setups, set to DEMAND or OFF
#query_cache_type = DEMAND
#
# * Logging and Replication
#
# Both location gets rotated by the cronjob.
# Be aware that this log type is a performance killer.
# As of 5.1 you can enable the log at runtime!
#general_log_file = /var/log/mysql/mysql.log
#general_log = 1
#
# Error logging goes to syslog due to /etc/mysql/conf.d/mysqld_safe_syslog.cnf.
#
# we do want to know about network errors and such
#log_warnings = 2
#
# Enable the slow query log to see queries with especially long duration
#slow_query_log[={0|1}]
slow_query_log_file = /var/log/mysql/mariadb-slow.log
long_query_time = 10
#log_slow_rate_limit = 1000
#log_slow_verbosity = query_plan
#log-queries-not-using-indexes
#log_slow_admin_statements
#
# The following can be used as easy to replay backup logs or for replication.
# note: if you are setting up a replication slave, see README.Debian about
# other settings you may need to change.
#server-id = 1
#report_host = master1
#auto_increment_increment = 2
#auto_increment_offset = 1
#log_bin = /var/log/mysql/mariadb-bin
#log_bin_index = /var/log/mysql/mariadb-bin.index
# not fab for performance, but safer
#sync_binlog = 1
expire_logs_days = 10
max_binlog_size = 100M
# slaves
#relay_log = /var/log/mysql/relay-bin
#relay_log_index = /var/log/mysql/relay-bin.index
#relay_log_info_file = /var/log/mysql/relay-bin.info
#log_slave_updates
#read_only
#
# If applications support it, this stricter sql_mode prevents some
# mistakes like inserting invalid dates etc.
#sql_mode = NO_ENGINE_SUBSTITUTION,TRADITIONAL
#
# * InnoDB
#
# InnoDB is enabled by default with a 10MB datafile in /var/lib/mysql/.
# Read the manual for more InnoDB related options. There are many!
default_storage_engine = InnoDB
innodb_buffer_pool_size = 256M
innodb_log_buffer_size = 8M
innodb_file_per_table = 1
innodb_open_files = 400
innodb_io_capacity = 400
innodb_flush_method = O_DIRECT
#
# * Security Features
#
# Read the manual, too, if you want chroot!
# chroot = /var/lib/mysql/
#
# For generating SSL certificates I recommend the OpenSSL GUI "tinyca".
#
# ssl-ca=/etc/mysql/cacert.pem
# ssl-cert=/etc/mysql/server-cert.pem
# ssl-key=/etc/mysql/server-key.pem
#
# * Galera-related settings
#
[galera]
# Mandatory settings
#wsrep_on=ON
#wsrep_provider=
#wsrep_cluster_address=
#binlog_format=row
#default_storage_engine=InnoDB
#innodb_autoinc_lock_mode=2
#
# Allow server to accept connections on all interfaces.
#
#bind-address=0.0.0.0
#
# Optional setting
#wsrep_slave_threads=1
#innodb_flush_log_at_trx_commit=0
[mysqldump]
quick
quote-names
max_allowed_packet = 16M
[mysql]
default-character-set = utf8mb4
no-auto-rehash # faster start of mysql but no tab completion
[isamchk]
key_buffer = 16M
#
# * IMPORTANT: Additional settings that can override those from this file!
# The files must end with '.cnf', otherwise they'll be ignored.
#
!includedir /etc/mysql/conf.d/

72
config/nginx/nginx.conf Normal file
View File

@ -0,0 +1,72 @@
events {}
http {
server {
server_name localhost;
root /var/www/public;
index index.php index.html index.htm;
listen 80;
include /etc/nginx/mime.types;
default_type application/octet-stream;
location / {
proxy_pass http://node:5173;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
location /api {
try_files $uri $uri/ /index.php?$query_string;
}
# PHP-FPM Configuration Nginx
location ~ \.php$ {
try_files $uri = 404;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass php:9000;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param REQUEST_URI $request_uri;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
}
# server {
# server_name localhost;
# listen 443 ssl;
# fastcgi_param HTTPS on;
# ssl_certificate /etc/ssl/server.pem;
# ssl_certificate_key /etc/ssl/server.key;
# ssl_protocols TLSv1.3;
# index index.php index.html;
# error_log /var/log/nginx/error.log;
# access_log /var/log/nginx/access.log;
# root /var/www/html/public;
# location ~ \.php$ {
# try_files $uri =404;
# fastcgi_split_path_info ^(.+\.php)(/.+)$;
# fastcgi_pass php:9000;
# fastcgi_index index.php;
# include fastcgi_params;
# fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
# fastcgi_param PATH_INFO $fastcgi_path_info;
# }
error_log /var/log/nginx/error.log;
access_log /var/log/nginx/access.log;
}
}

1944
config/php/php.ini Normal file

File diff suppressed because it is too large Load Diff

1
db/.gitkeep Normal file
View File

@ -0,0 +1 @@
# to keep dir db

61
docker-compose.yml Normal file
View File

@ -0,0 +1,61 @@
services:
web:
image: nginx:latest
container_name: nginx
restart: always
ports:
- 80:80
volumes:
- ./www/public:/var/www/public
- ./config/nginx/nginx.conf:/etc/nginx/nginx.conf
- ./config/ssl:/etc/ssl
php:
build: ./docker/php
container_name: php
working_dir: /var/www
volumes:
- ./www:/var/www
- ./config/php/php.ini:/usr/local/etc/php/php.ini
mariadb:
image: mariadb:latest
container_name: mariadb
restart: always
ports:
- 3306:3306
volumes:
- ./db:/var/lib/mysql
- ./config/mysql/my.cnf:/etc/mysql/my.cnf
environment:
- MYSQL_ROOT_PASSWORD=12345
- MYSQL_DATABASE=db
- MYSQL_USER=pma
- MYSQL_PASSWORD=12345
phpmyadmin:
image: phpmyadmin/phpmyadmin:latest
container_name: pma
restart: always
environment:
PMA_HOST: mariadb
#PMA_ABSOLUTE_URI: http://localhost/pma/
ports:
- "8080:80"
depends_on:
- mariadb
composer:
image: composer/composer:latest
command: install
volumes:
- ./composer:/composer
node:
image: node:latest
container_name: node
working_dir: /sveltekit
command: "npm run dev -- --host 0.0.0.0"
volumes:
- ./sveltekit:/sveltekit

33
docker/php/Dockerfile Normal file
View File

@ -0,0 +1,33 @@
FROM php:fpm
RUN apt-get --allow-releaseinfo-change update && apt-get upgrade -y \
&& apt-get install -y \
g++ \
libbz2-dev \
libc-client-dev \
libcurl4-gnutls-dev \
libedit-dev \
libfreetype6-dev \
libicu-dev \
libjpeg62-turbo-dev \
libkrb5-dev \
libmcrypt-dev \
libpng-dev \
libsqlite3-dev \
libzip-dev \
wget \
unzip \
zlib1g-dev \
&& docker-php-ext-install -j$(nproc) \
mysqli \
pdo_mysql \
sockets \
&& docker-php-ext-configure gd --with-freetype --with-jpeg \
&& docker-php-ext-install -j$(nproc) gd \
&& docker-php-ext-configure zip \
&& docker-php-ext-install zip \
&& docker-php-source delete \
&& apt-get remove -y g++ wget \
&& apt-get autoremove --purge -y && apt-get autoclean -y && apt-get clean -y \
&& rm -rf /var/lib/apt/lists/* \
&& rm -rf /tmp/* /var/tmp/*

10
sveltekit/.gitignore vendored Normal file
View File

@ -0,0 +1,10 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

1
sveltekit/.npmrc Normal file
View File

@ -0,0 +1 @@
engine-strict=true

38
sveltekit/README.md Normal file
View File

@ -0,0 +1,38 @@
# create-svelte
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
## Creating a project
If you're seeing this, you've probably already done this step. Congrats!
```bash
# create a new project in the current directory
npm create svelte@latest
# create a new project in my-app
npm create svelte@latest my-app
```
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
To create a production version of your app:
```bash
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

2027
sveltekit/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

21
sveltekit/package.json Normal file
View File

@ -0,0 +1,21 @@
{
"name": "sveltekit",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/adapter-node": "^5.0.1",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"sass": "^1.72.0",
"svelte": "^4.2.7",
"svelte-preprocess": "^5.1.3",
"vite": "^5.0.3"
},
"type": "module"
}

10
sveltekit/src/app.html Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body>%sveltekit.body%</body>
</html>

View File

@ -0,0 +1,35 @@
<script>
import { user } from "$lib/stores/user.js";
import { goto } from "$app/navigation";
async function signIn(e) {
// Kod!
}
</script>
<form on:submit|preventDefault={signIn}>
</form>
<style lang="scss">
label {
display: block;
}
input {
width: 100%;
&[type="submit"] {
color: white;
background-color: #42b72a;
border: none;
margin: 10px 10px 0 0;
padding: 0.7rem;
border-radius: 6px;
&:hover {
background-color: green;
}
}
}
</style>

View File

@ -0,0 +1,20 @@
<script>
/**
* Data som kommer in i komponenten
* <Comment comment = {...} />
*/
export let comment;
</script>
<article>
</article>
<style>
article {
padding: 4px;
background-color: white;
margin-top: 5px;
margin-bottom: 5px;
}
</style>

View File

@ -0,0 +1,34 @@
<script>
import { update } from "$lib/stores/update.js";
export let postID;
async function addComment(e) {
}
</script>
<style lang="scss">
form {
display: flex;
flex-direction: row;
width: 100%;
input[type="text"] {
width: 100%;
}
input[type="submit"] {
border: none;
border-radius: 4px;
padding: 5px 15px;
text-decoration: none;
color: white;
background-color: #42b72a;
margin-left: 2px;
&:hover {
background-color: darkgreen;
color: #ffffff;
}
}
}
</style>

View File

@ -0,0 +1,45 @@
<script>
import { onMount } from 'svelte';
let settings = {"phone": "", "mail": ""};
async function changeSettings(e){
}
</script>
<form on:submit|preventDefault={changeSettings}>
<fieldset>
<legend>Kontaktuppgifter</legend>
</fieldset>
</form>
<style lang="scss">
fieldset {
padding: 0.5rem;
legend {
padding: 0.5rem;
}
}
label {
margin-top: 0.5rem;
display: block;
}
input {
display: inline-block;
width: 90%;
&[type="submit"] {
color: white;
background-color: #42b72a;
border: none;
margin: 10px 10px 0 0;
padding: 0.5rem 1rem;
border-radius: 6px;
display: inline;
width: auto;
&:hover {
background-color: green;
}
}
}
</style>

View File

@ -0,0 +1,29 @@
<script>
import { user } from "$lib/stores/user.js";
</script>
<footer>
<p>
EGY TALK
{#if $user.auth}
Användare:
{$user.userdata.firstname + " " + $user.userdata.surname}
{/if}
</p>
</footer>
<style lang="scss">
footer {
height: 45px;
width: 100%;
background-image: url("/images/bgImgLarge.png");
border-top: 2px solid rgb(124, 10, 10);
position: absolute;
bottom: 0;
p {
color: white;
padding: 1rem;
}
}
</style>

View File

@ -0,0 +1,64 @@
<script>
import Nav from "$lib/components/Nav.svelte";
import { user } from "$lib/stores/user.js";
</script>
<header>
<img src="/images/loggoegy.png" alt="loggo" id="logga" />
<h1>EGY TALK</h1>
{#if $user.auth}
<Nav />
{/if}
</header>
<style lang="scss">
header {
width: 100%;
font-size: 1.2rem;
text-align: left;
height: 80px;
padding-top: 5px;
background-image: url("/images/bgImg.png");
background-repeat: repeat;
color: white;
position: relative;
border-bottom: 2px solid rgb(124, 10, 10);
h1 {
display: inline-block;
font-family: saker, Arial;
letter-spacing: 3px;
font-size: 2.6rem;
margin-top: 1.8rem;
margin-left: 2.5rem;
}
img {
float: left;
height: 50px;
margin-top: 10px;
margin-left: 50px;
}
}
@media only screen and (max-width: 1024px) {
header {
height: 12rem;
img {
margin-left: 25px;
}
}
}
@media only screen and (max-width: 675px) {
header {
height: 108px;
img {
margin-left: 15px;
}
}
}
</style>

View File

@ -0,0 +1,37 @@
<!-- https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader -->
<div></div>
<style>
div {
margin-left: auto;
margin-right: auto;
margin-top: 12rem;
border: 16px solid #222;
border-radius: 50%;
border-top: 16px solid rgb(124, 10, 10);
width: 200px;
height: 200px;
-webkit-animation: spin 1.5s linear infinite; /* Safari */
animation: spin 1.5s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>

View File

@ -0,0 +1,197 @@
<script>
import { user } from "$lib/stores/user.js";
import { goto } from "$app/navigation";
import { page } from "$app/stores";
async function signOut() {
if ($user.auth) {
let response = await fetch("/api/signout.php");
$user = await response.json();
goto("/login");
}
}
</script>
<form>
<input type="text" name="searchUsr" placeholder="Sök vänner" size="30" />
<button class="search">
<img src="/images/searchIcon.png" alt="Search" />
</button>
</form>
<nav>
<ul>
<li>
<a href="/" class:active={"/" === $page.url.pathname}>
{$user.userdata.firstname + " " + $user.userdata.surname}
</a>
</li>
<li>
<a href="/flow/{$user.userdata.uid}"
class:active={$page.url.pathname.startsWith("/flow")}>Flöde</a>
</li>
<li>
<a href="/friends" class:active={"/friends" === $page.url.pathname}>Vänner</a>
</li>
<li>
<a href="/settings" class:active={"/settings" === $page.url.pathname}>
Inställningar</a>
</li>
</ul>
</nav>
<button class="sign" on:click={signOut}>
<img src="/images/logout.png" alt="Logga Ut" />
</button>
<style lang="scss">
nav {
position: relative;
display: inline;
margin-left: 2rem;
ul {
list-style-type: none;
display: inline;
li {
margin-left: 1rem;
display: inline;
a {
display: inline-block;
padding: 6px;
border-bottom: 1px solid rgb(124, 10, 10);
font-size: 1.4rem;
text-decoration: none;
color: white;
background-color: black;
&:hover {
border-bottom: 1px solid red;
color: #ffffff;
}
&.active {
border-bottom: 1px solid red;
color: #ffffff;
}
}
}
}
}
button {
background-color: transparent;
border: none;
img {
width: 14px;
height: auto;
}
&.sign {
border: none;
border-radius: 4px;
padding: 5px 15px;
text-decoration: none;
color: white;
background-color: rgb(124, 10, 10);
margin-left: 1.8rem;
img {
display: none;
}
&:hover {
background-color: gray;
}
&::after {
content: "Logga Ut";
}
}
&:hover {
cursor: pointer;
}
img {
width: 28px;
margin-bottom: -10px;
&:hover {
opacity: 0.5;
}
}
}
form {
display: inline;
margin-bottom: 0.7rem;
input[type="text"] {
margin-top: 0.5rem;
margin-left: 1.5em;
font-size: 1.4rem;
width: 20rem;
}
}
@media only screen and (max-width: 1024px) {
nav {
position: absolute;
display: block;
bottom: 5px;
margin-left: 5px;
li {
margin-left: 0.4rem;
display: inline;
}
}
}
@media only screen and (max-width: 675px) {
input,
button.search {
display: none;
margin-top: 1rem;
justify-content: right;
}
button.sign {
margin-left: 2.6rem;
padding: 0;
background-color: transparent;
position: absolute;
right: 15px;
top: 15px;
&:hover {
background-color: transparent;
color: alpha($color: #000000);
}
&::after {
content: none;
}
img {
display: inline;
}
}
button.search {
display: none;
}
nav {
ul {
li {
margin-left: 0.3rem;
}
}
}
}
</style>

View File

@ -0,0 +1,61 @@
<script>
let color = "white";
let pwd = "";
let pwdConfirm = "";
async function changePwd(e) {
}
</script>
<form on:submit|preventDefault={changePwd} style="--color: {color}">
<fieldset>
<legend>Byt Lösenord</legend>
<input type="submit" value="Byt Lösenord" />
</fieldset>
</form>
<style lang="scss">
form {
fieldset {
padding: 0.5rem;
legend {
padding: 0.5rem;
}
}
label {
margin-top: 0.5rem;
display: inline-block;
}
input {
display: block;
width: 90%;
&[type="submit"] {
color: white;
background-color: #42b72a;
border: none;
margin: 10px 10px 0 0;
padding: 0.5rem 1rem;
border-radius: 6px;
width: auto;
&:hover {
background-color: green;
}
}
}
--color: white;
div {
display: inline-block;
border: 1px solid black;
margin-left: 1rem;
margin-bottom: -0.1rem;
width: 1.1rem;
height: 1.1rem;
background-color: var(--color);
}
}
</style>

View File

@ -0,0 +1,27 @@
<script>
/**
* Data som kommer in i komponenten
* <Post post = {...} />
*/
export let post;
</script>
<article>
</article>
<style lang="scss">
article {
border-bottom: 1px solid black;
display: block;
width: 100%;
padding: 4px;
margin-top: 6px;
margin-bottom: 6px;
background-color: white;
p {
font-size: 1.6rem;
}
}
</style>

View File

@ -0,0 +1,61 @@
<script>
import { update } from "$lib/stores/update.js";
let result = { success: true };
async function addPost(e) {
}
</script>
<form on:submit|preventDefault={addPost}>
</form>
<style lang="scss">
form {
text-align: right;
max-width: 540px;
textarea {
width: 100%;
height: 10rem;
vertical-align: top;
border: 1px solid rgb(124, 10, 10);
border-radius: 6px;
resize: none;
padding: 0.5rem;
}
p {
display: inline-block;
color: red;
font-weight: bold;
margin-right: 1rem;
}
button {
border: none;
border-radius: 4px;
padding: 5px 15px;
text-decoration: none;
color: white;
background-color: #42b72a;
margin-top: 0.2rem;
&:enabled:hover {
background-color: green;
color: #ffffff;
}
&:enabled:active {
background-color: rgb(4, 50, 4);
color: #aeaeae;
}
&:disabled {
background-color: lightgrey;
}
}
}
</style>

View File

@ -0,0 +1,122 @@
<script>
import { user } from "$lib/stores/user.js";
let result = { success: false };
async function signUp(e) {
}
</script>
{#if result.success}
<div class="blur">
<div>
<hr />
<button>
<img
src="images/close.png"
alt="close"
width="32"
on:click={() => (result.success = false)}
/>
</button>
<h1>Ditt konto är skapat!</h1>
<p>Stäng fönstret och logga in.</p>
</div>
</div>
{/if}
<form on:submit|preventDefault={signUp}>
<label for="fn">Förnamn</label>
<input id="fn" type="text" name="firstname" />
<label for="ln">Efternamn</label>
<input id="ln" type="text" name="surname" />
<label for="usr">Användarnamn</label>
<input id="usr" type="text" name="user" />
<label for="pwd">Lösenord</label>
<input id="pwd" type="password" name="pwd" />
<input type="submit" value="Skapa Konto" />
</form>
<style lang="scss">
/* Meddelanderuta */
div {
position: fixed;
top: 150px;
left: 100px;
z-index: 100;
border: 2px solid black;
border-radius: 8px;
background-color: white;
width: 80%;
hr {
border: 22px solid grey;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 2.4rem;
letter-spacing: normal;
margin-left: 10px;
}
p {
font-size: 1.8rem;
padding-bottom: 40px;
margin-left: 10px;
}
button {
border: none;
img {
position: absolute;
top: 5px;
right: 5px;
}
}
&.blur {
z-index: 20;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: grayscale(0.5) blur(2px);
}
}
/* Formulär, skapa konto */
form {
label {
display: block;
}
input {
width: 100%;
&[type="submit"] {
color: white;
background-color: #166fe5;
border: none;
margin: 10px 10px 0 0;
padding: 0.7rem;
border-radius: 6px;
&:hover {
background-color: blue;
}
}
}
}
@media only screen and (max-width: 675px) {
div {
left: 10px;
}
}
</style>

View File

@ -0,0 +1,84 @@
/**
* global.scss
*/
* {
margin: 0;
padding: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
box-sizing: border-box;
}
@font-face {
font-family: saker;
src: url(/fonts/SakerSansMedium.ttf);
}
@font-face {
font-family: saker;
src: url(/fonts/SakerSansBold.ttf);
font-weight: bold;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
height: 100%;
background-color: #e8e8e8;
position: relative;
min-height: 100vh;
}
input,
p,
label,
button {
font-size: 1.4rem;
}
input {
padding: 0.3rem;
}
p {
text-align: justify;
}
main {
max-width: 768px;
margin: 0 auto;
padding: 20px 4px 45px 4px;
position: relative;
height: 100%;
h1 {
font-family: saker, Arial, Helvetica, sans-serif;
font-size: 2.2rem;
letter-spacing: 0.4rem;
}
h2 {
margin-top: 0.5rem;
font-family: Arial, sans-serif;
font-size: 1.8rem;
letter-spacing: 2px;
}
h3 {
margin-top: 4px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.6rem;
margin-bottom: 0.5rem;
}
h4 {
margin-top: 4px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4rem;
margin-bottom: 0.5rem;
}
}

View File

@ -0,0 +1,14 @@
/**
* Kontroll om man är inloggad eller ej
* @returns "auth": true/false,"userdata": {"uid": ..., "firstname": ..., "surname": ...}
*/
export async function auth() {
let result = {"auth": false, "userdata": null};
try {
const response = await fetch("/api/auth.php");
result = await response.json();
} catch (e) {}
return result;
}

View File

@ -0,0 +1,6 @@
/**
* Flagga/signal att flödet skall uppdateras
*/
import { writable } from 'svelte/store';
export const update = writable(false);

View File

@ -0,0 +1,6 @@
/**
* Användarinformation som behövs i komponenter och sidor.
*/
import { writable } from 'svelte/store';
export const user = writable({"auth": false, "userdata": null });

View File

@ -0,0 +1,15 @@
<script>
import "$lib/global.scss";
import Header from "$lib/components/Header.svelte";
import Footer from "$lib/components/Footer.svelte";
</script>
<head:title>
<title>EGY Talk</title>
</head:title>
<Header />
<main>
<slot />
</main>
<Footer />

View File

@ -0,0 +1,38 @@
<script>
import Load from "$lib/components/Load.svelte";
import PostForm from "$lib/components/PostForm.svelte";
import Post from "$lib/components/Post.svelte";
import CommentForm from "$lib/components/CommentForm.svelte";
import Comment from "$lib/components/Comment.svelte";
import { user } from "$lib/stores/user.js";
import { goto, afterNavigate } from "$app/navigation";
import { auth } from "$lib/shared/auth.js";
afterNavigate(async () => {
$user = await auth();
if (!$user.auth) {
goto("/login");
}
});
</script>
<section>
<!-- Rendera flödet -->
</section>
<style lang="scss">
section {
max-width: 540px;
hr {
margin-bottom: 16px;
margin-top: 8px;
}
div {
border-left: 2px solid green;
}
}
</style>

View File

@ -0,0 +1,53 @@
<script>
import Signup from "$lib/components/Signup.svelte";
import { goto } from '$app/navigation';
</script>
<aside>
<img src="/images/mobile.png" alt="Mobiltelefon" width="240" />
</aside>
<section>
<h1>Skapa konto på EGY Talk</h1>
<Signup />
<p>eller</p>
<button on:click={() => goto('/login')}>Logga In</button>
</section>
<style lang="scss">
aside,
section {
display: inline-block;
vertical-align: top;
}
aside {
margin-right: 10px;
}
p {
width: fit-content;
margin-left: auto;
margin-right: auto;
margin-top: 1rem;
}
button {
width: 100%;
color: white;
background-color: grey;
border: none;
margin: 10px 10px 0 0;
padding: 0.7rem;
border-radius: 6px;
&:hover {
background-color: #aeaeae;
}
}
@media only screen and (max-width: 675px) {
img {
display: none;
}
}
</style>

View File

@ -0,0 +1,15 @@
<script>
/**
* Omdirigerar! Kan tas bort helt.
* Kan användas vid alternativ lösning.
*/
import { user } from "$lib/stores/user.js";
import { goto, afterNavigate } from "$app/navigation";
afterNavigate(async () => {
$user = await auth();
if (!$user.auth) goto("/");
else goto("/flow/{$user.userdata.uid}");
});
</script>

View File

@ -0,0 +1,46 @@
<script>
import { page } from '$app/stores';
import Load from "$lib/components/Load.svelte";
import PostForm from "$lib/components/PostForm.svelte";
import Post from "$lib/components/Post.svelte";
import CommentForm from "$lib/components/CommentForm.svelte";
import Comment from "$lib/components/Comment.svelte";
import { user } from "$lib/stores/user.js";
import { update } from "$lib/stores/update.js";
import { goto, afterNavigate } from "$app/navigation";
import { auth } from "$lib/shared/auth.js";
afterNavigate(async () => {
$user = await auth();
if (!$user.auth) {
goto("/login");
}
});
let name = "Xxxx Yyyy";
</script>
<h1>{name} TALK</h1>
<section>
<!-- Rendera flödet från användare med [uid] -->
</section>
<style lang="scss">
section {
max-width: 540px;
hr {
margin-bottom: 16px;
margin-top: 8px;
}
div {
border-left: 2px solid green;
}
}
</style>

View File

@ -0,0 +1,25 @@
<script>
import Load from "$lib/components/Load.svelte";
import { user } from "$lib/stores/user.js";
import { goto, afterNavigate } from "$app/navigation";
import { auth } from "$lib/shared/auth.js";
afterNavigate(async () => {
$user = await auth();
if (!$user.auth) {
goto("/login");
}
});
</script>
<h1>Vänner</h1>
<section>
<Load /> <!-- mest för att visa hur den fungerar -->
</section>
<style lang="scss">
section {
max-width: 540px;
}
</style>