DEAD-4-NEW

.gitignore

@@ -8,3 +8,5 @@ public/images
 *precompiled.js
 
 
+public/closedEye.png
+public/openedEye.png

package.json

@@ -6,9 +6,11 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "prepare": "husky && husky install",
-    "prestart": "npm run compile:templates",
+    "prestart": "npm run compile:templates && npm run compile:forms && npm run compile:header",
     "start": "DEBUG=* && node ./server/server.js",
     "compile:templates": "handlebars public/components/Cards/cards.hbs -f public/components/Cards/cards.precompiled.js",
+    "compile:forms": "handlebars public/components/Forms/forms.hbs -f public/components/Forms/forms.precompiled.js",
+    "compile:header": "handlebars public/components/Header/header.hbs -f public/components/Header/header.precompiled.js",
     "lint": "eslint . --fix && prettier --write ."
   },
   "author": "",
@@ -28,6 +30,7 @@
     ]
   },
   "dependencies": {
+    "cors": "^2.8.5",
     "express": "^4.21.0",
     "handlebars": "^4.7.8",
     "morgan": "^1.10.0"

public/ajax.js

@@ -0,0 +1,41 @@
+const HTTP_METHOD_POST = 'POST';
+const HTTP_METHOD_GET = 'GET';
+
+export default async function Ajax({ method, url, body = null }) {
+  const requestBody = {
+    credentials: 'include',
+    method,
+    header: {
+      'Content-Type': 'application/json',
+    },
+  };
+
+  if (method === HTTP_METHOD_POST) {
+    requestBody.body = JSON.stringify(body);
+  }
+
+  const response = await fetch(url, requestBody);
+
+  let respBody;
+  try {
+    respBody = await response.json();
+  } catch {
+    return {
+      status: response.status,
+      error: 'failed to parse respBody',
+      body: 'failed to parse respBody',
+    };
+  }
+  // console.log('respBody', respBody);
+
+  if (response.status >= 400) {
+    return {
+      status: response.status,
+      error: respBody,
+    };
+  }
+  return {
+    status: response.status,
+    body: respBody,
+  };
+}

public/components/Cards/cards.css

@@ -5,6 +5,7 @@
   display: flex;
   padding: var(--space-xs);
   width: 100%;
+  box-sizing: border-box;
   min-height: var(--card-min-height);
   max-height: var(--card-max-height);
   gap: var(--space-xs);
@@ -14,6 +15,7 @@
 .card-img {
   min-width: var(--card-img-min-width);
   max-width: var(--card-img-max-width);
+  max-height: 100%;
   height: var(--card-img-height);
   overflow: hidden;
   position: relative;

public/components/Cards/cards.hbs

@@ -1,13 +1,13 @@
 {{#each items}}
   <div class='card'>
-    {{#if imageUrl}}
+    {{#if media-url}}
     <div class="card-img">
-        <img src="{{imageUrl}}">
+        <img src="{{media-url}}">
     </div>
     {{/if}}
     <div class='card-content'>
       <p class='card-content__header'>{{title}}</p>
-      <p class='card-content__text'>{{description}}</p>
+      <p class='card-content__text'>{{body}}</p>
     </div>
   </div>
 {{/each}}

public/components/Cards/cards.js

@@ -1,11 +1,30 @@
+import Ajax from '../../ajax.js';
+
 export default class Cards {
   constructor(parent, items) {
     this.parent = parent;
-    this.items = items;
+    this.items = {};
   }
 
-  render() {
+  async render() {
     const template = Handlebars.templates['cards.hbs'];
+    await this.getCurrentCards2();
     this.parent.innerHTML = template({ items: this.items });
   }
+
+  async getCurrentCards2() {
+    const response = await Ajax({
+      url: 'http://dead-vc.ru/api/v1/feed',
+      method: 'GET',
+    });
+
+    switch (response.status) {
+      case 200:
+        this.items = response.body.data;
+        console.log(this.items);
+        break;
+      default:
+        console.error('Error', response.status, response.error);
+    }
+  }
 }

public/components/Forms/forms.css

@@ -0,0 +1,84 @@
+@import '/public/variables.css';
+
+.auth-form {
+  margin-top: 50px;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-s);
+  padding: var(--space-m);
+  background-color: var(--main-color);
+  border-radius: var(--border-radius-m);
+}
+
+.auth-form-links {
+  display: flex;
+  justify-content: center;
+  gap: var(--space-xs);
+}
+
+.active-href {
+  color: var(--hover-color);
+  text-decoration: underline;
+}
+
+.disabled-href {
+  color: var(--hover-color);
+  text-decoration: none;
+}
+
+.auth-form-header {
+  text-align: center;
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--accent-color);
+}
+
+.auth-form-header p {
+  color: var(--accent-color);
+}
+
+.auth-form-inputs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.auth-form-inputs input {
+  padding: 10px;
+  border-radius: 5px;
+  font-size: var(--text-size-xs);
+}
+
+.input-correct {
+  border: 1.5px solid var(--secondary-text-color);
+}
+
+.input-error {
+  border: 1.5px solid var(--error-color);
+}
+
+.label-hint {
+  font-size: var(--text-size-xs);
+  color: var(--text-color);
+}
+
+.label-error {
+  font-size: var(--text-size-xs);
+  color: var(--error-color);
+}
+
+.auth-form-inputs button {
+  padding: 10px;
+  border-radius: 5px;
+  color: var(--main-color);
+  border: 0 none;
+  background-color: var(--accent-color);
+}
+
+.password-rules {
+  line-height: var(--line-height-s);
+  font-size: var(--text-size-xs);
+  color: var(--secondary-text-color);
+}

public/components/Forms/forms.hbs

@@ -0,0 +1,73 @@
+<div class="auth-form">
+    <div class="auth-form-header">
+        DEAD-VC
+    </div>
+    <div class="auth-form-links">
+        {{#if context.isReg}}
+            <a class="disabled-href" data-section="auth" id="authhref" href="auth.html">
+                Войти
+            </a>
+            <a class="active-href" data-section="reg" id="reghref" href="reg.html">
+                Регистрация
+            </a>
+        {{else}}
+            <a class="active-href" data-section="auth" id="authhref" href="auth.html">
+                Войти
+            </a>
+            <a class="disabled-href" data-section="reg" id="reghref" href="reg.html">
+                Регистрация
+            </a>
+        {{/if}}
+    </div>
+    <form class="auth-form-inputs" action="" method="post">
+        <label class="label-hint" for="email-input">Email</label>
+        {{#if context.isEmailCorrect}}
+            <input class="input-correct" id="email-input" type="email" placeholder="Введите Email">
+        {{else}}
+            <input class="input-error" id="email-input" type="email" placeholder="Введите Email">
+            <label class="label-error" for="email-input">Ошибочный Email</label>
+        {{/if}}
+
+        <label class="label-hint" for="password-input">Пароль</label>
+        {{#if context.isPasswordCorrect}}
+            <input class="input-correct" id="password-input" type="password" placeholder="Введите пароль">
+        {{else}}
+            <input class="input-error" id="password-input" type="password" placeholder="Введите пароль">
+            <label class="label-error" for="password-input">Ошибочный пароль</label>
+        {{/if}}
+
+        {{#if context.isReg}}
+        <label class="label-hint" for="password-input-repeat">Подтверждение пароля</label>
+            {{#if context.isPasswordRepeatCorrect}}
+                <input class="input-correct" id="password-input-repeat" type="password" placeholder="Повторите пароль">
+            {{else}}
+                <input class="input-error" id="password-input-repeat" type="password" placeholder="Повторите пароль">
+                <label class="label-error" for="password-input-repeat">Пароли не совпадают</label>
+            {{/if}}
+        {{/if}}
+        {{#if context.isReg}}
+        <button type="submit">Создать аккаунт</button>
+        {{else}}
+        <button type="submit">Войти</button>
+        {{/if}}
+    </form>
+    <div class="password-rules">
+        {{#unless context.isPasswordCorrect}}
+        Пароль должен быть длиной от 6 до 255 символов и содержать только:
+        <ul>
+            <li>
+                строчные и прописные латинские буквы
+            </li>
+            <li>
+                цифры (0-9)
+            </li>
+            <li>
+                специальные символы ?,!,_,-,$
+            </li>
+        </ul>
+        {{/unless}}
+        {{#if context.isApiError}}
+            {{context.apiErrorText}}
+        {{/if}}
+    </div>
+</div>