Update to sveltekit 2
This commit is contained in:
commit
1b63ab6908
21
.gitignore
vendored
Normal file
21
.gitignore
vendored
Normal 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
37
README.md
Normal 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
208
config/mysql/my.cnf
Normal 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
72
config/nginx/nginx.conf
Normal 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
1944
config/php/php.ini
Normal file
File diff suppressed because it is too large
Load Diff
1
db/.gitkeep
Normal file
1
db/.gitkeep
Normal file
@ -0,0 +1 @@
|
||||
# to keep dir db
|
61
docker-compose.yml
Normal file
61
docker-compose.yml
Normal 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
33
docker/php/Dockerfile
Normal 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
10
sveltekit/.gitignore
vendored
Normal 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
1
sveltekit/.npmrc
Normal file
@ -0,0 +1 @@
|
||||
engine-strict=true
|
38
sveltekit/README.md
Normal file
38
sveltekit/README.md
Normal 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
2027
sveltekit/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
21
sveltekit/package.json
Normal file
21
sveltekit/package.json
Normal 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
10
sveltekit/src/app.html
Normal 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>
|
35
sveltekit/src/lib/components/Auth.svelte
Normal file
35
sveltekit/src/lib/components/Auth.svelte
Normal 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>
|
20
sveltekit/src/lib/components/Comment.svelte
Normal file
20
sveltekit/src/lib/components/Comment.svelte
Normal 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>
|
34
sveltekit/src/lib/components/CommentForm.svelte
Normal file
34
sveltekit/src/lib/components/CommentForm.svelte
Normal 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>
|
45
sveltekit/src/lib/components/Contact.svelte
Normal file
45
sveltekit/src/lib/components/Contact.svelte
Normal 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>
|
29
sveltekit/src/lib/components/Footer.svelte
Normal file
29
sveltekit/src/lib/components/Footer.svelte
Normal 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>
|
64
sveltekit/src/lib/components/Header.svelte
Normal file
64
sveltekit/src/lib/components/Header.svelte
Normal 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>
|
37
sveltekit/src/lib/components/Load.svelte
Normal file
37
sveltekit/src/lib/components/Load.svelte
Normal 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>
|
197
sveltekit/src/lib/components/Nav.svelte
Normal file
197
sveltekit/src/lib/components/Nav.svelte
Normal 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>
|
61
sveltekit/src/lib/components/Password.svelte
Normal file
61
sveltekit/src/lib/components/Password.svelte
Normal 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>
|
27
sveltekit/src/lib/components/Post.svelte
Normal file
27
sveltekit/src/lib/components/Post.svelte
Normal 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>
|
61
sveltekit/src/lib/components/PostForm.svelte
Normal file
61
sveltekit/src/lib/components/PostForm.svelte
Normal 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>
|
122
sveltekit/src/lib/components/Signup.svelte
Normal file
122
sveltekit/src/lib/components/Signup.svelte
Normal 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>
|
84
sveltekit/src/lib/global.scss
Normal file
84
sveltekit/src/lib/global.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
14
sveltekit/src/lib/shared/auth.js
Normal file
14
sveltekit/src/lib/shared/auth.js
Normal 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;
|
||||
}
|
6
sveltekit/src/lib/stores/update.js
Normal file
6
sveltekit/src/lib/stores/update.js
Normal file
@ -0,0 +1,6 @@
|
||||
/**
|
||||
* Flagga/signal att flödet skall uppdateras
|
||||
*/
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export const update = writable(false);
|
6
sveltekit/src/lib/stores/user.js
Normal file
6
sveltekit/src/lib/stores/user.js
Normal file
@ -0,0 +1,6 @@
|
||||
/**
|
||||
* Användarinformation som behövs i komponenter och på sidor.
|
||||
*/
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export const user = writable({"auth": false, "userdata": null });
|
15
sveltekit/src/routes/+layout.svelte
Normal file
15
sveltekit/src/routes/+layout.svelte
Normal 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 />
|
38
sveltekit/src/routes/+page.svelte
Normal file
38
sveltekit/src/routes/+page.svelte
Normal 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>
|
53
sveltekit/src/routes/createaccount/+page.svelte
Normal file
53
sveltekit/src/routes/createaccount/+page.svelte
Normal 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>
|
15
sveltekit/src/routes/flow/+page.svelte
Normal file
15
sveltekit/src/routes/flow/+page.svelte
Normal 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>
|
46
sveltekit/src/routes/flow/[uid]/+page.svelte
Normal file
46
sveltekit/src/routes/flow/[uid]/+page.svelte
Normal 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>
|
25
sveltekit/src/routes/friends/+page.svelte
Normal file
25
sveltekit/src/routes/friends/+page.svelte
Normal 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>
|