Форум — Авторизация внутри статьи

Форум » Техническое » Функционал сайта » Авторизация внутри статьи

Создатель:

LevTrotsky
Дата: 10:38 10.03.2025
Сообщений: 2

Краткое описание:

Хочу сделать псевдо-авторизацию внутри спойлера

Авторизация внутри статьи

LevTrotsky 10:38 10.03.2025

Хотелось бы попробовать вставить в спойлер окно с псевдо-авторизацией, которое будет запрашивать ввод логина и пароля(соответственно 2 текстовых поля) и с помощью легчайшей проверки, при которой доступ открывается, если: поля "пароль" и "логин" Не пустые (ну то есть не null).

После авторизации выводится таблица([[table]]) с информацией, а поле авторизации скрывается(перестает быть видимым).

Как лучше это релизовать и насколько вообще оправдано играться с js в модулях статьи. Может быть идея вовсе нереализуема?

Re: Авторизация внутри статьи

VladislavTheMountain 12:48 10.03.2025

Англики нередко используют для этого модуль MailForm, которого у нас нет. Поэтому проще всего вам будет скопировать вот такой блок:

+ Показать аутентификацию

+ Показать исходный код

- Скрыть исходный код

(совать внутрь блока [[html]])

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Verdana;}
* {
    box-sizing: border-box;
}

.input-container {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    width: 100%;
    margin-bottom: 15px;

}

.input-field:focus{
    border-style: solid;
    transition: 0.5;
    border-color: maroon;
    border-width: 2px;
}

.input-field {
    width: 100%;
    padding: 10px;
    outline: none;
    transition: 0.5s;
}

.btn:focus {
    outline: 0;
}

.btn {
    background-color: Maroon;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    width: 50%;
    opacity: 0.9;
    transition: 0.09s;
    border-radius: 3px;
    transition 0.8s;
}

.btn:hover {
    opacity: 1;
    transition: 0.8s;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.7);
}

.btn:active {
    transition: 0.09s;
    transform: translateY(1px);
    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
}

.btn2 {
    background-color: white;
    border: none;
    cursor: pointer;
}

p {
    font-family: Helvetica;
    margin-bottom: 5%;
}
</style>
</head>
<body>

<form autocomplete="off" style="max-width:450px;text-align:center;margin: auto;">
<p style="font-size:55px; font-weight: bold;">ВХОД В SCiPNET</p>
  <div class="input-container">
    <input class="input-field" type="text" placeholder="Логин" name="usrnm">
  </div>

  <div class="input-container">
    <input onkeyup="if(this.value.length > 0) document.getElementById('start_button').disabled = false; else document.getElementById('start_button').disabled = true;" class="input-field" type="password" placeholder="Пароль">
  </div>

   <button id="start_button" class="btn btn-success" onclick="window.open('ЗАМЕНИТЕ ДАННЫЙ ТЕКСТ НА URL, КУДА ВАС ДОЛЖНА ПЕРЕНЕСТИ КНОПКА ВХОДА','_parent')" disabled>Войти</button>

<br></br>
   <button style= "font-weight: bold;" class="btn2 btn-success">Забыли пароль?</button>

</form>
</body>
</html>

Если же вы решите делать псевдо-аутентификацию сами, то учтите, что результат блока [[html]] всегда запускается из песочницы, а потому не имеет доступа к содержимому самой страницы, к содержимому других блоков [[html]] на странице и к хранилищам браузера (к локальному точно нет, остальным — не помню).

Re: Авторизация внутри статьи

LevTrotsky 14:29 10.03.2025

В таком случае как лучше оформить страницу, на которую будет вести данная авторизация. Как пример у меня есть scp, но прежде чем увидеть информацию о нем, я хочу сделать такую авторизацию, не на всей странице а лишь в определенном ее элементе(спойлере как пример).

В таком случае как мне заменить onclick="window.open('мой URL','_parent')", чтобы вместо открытия новой страницы, появлялся вложенный текст? Или стоит создать отдельную страницу где-то на сайте, куда данная авторизация будет перенаправлять(тогда какой раздел использовать)?

Re: Re: Авторизация внутри статьи

VladislavTheMountain 15:06 10.03.2025

Вы можете заменить window.open('URL','_parent') на любую другую JavaScript-функцию, например условный proceed(), в котором будет выбираться необходимый вам элемент по идентификатору и менять своё состояние на display: block; (при условии что необходимый элемент находится в рамках того же [[html]]).

Вы можете скомбинировать это с функционалом автопреобразования ссылок и передать параметр через URL на ту же самую страницу, скрыв необходимую часть под условным оператором. Что-то типа window.open('my-page/param/true','_parent').

Можно сделать отдельный фрагмент, куда вы будете перенаправлять пользователя (тогда до публикации на Полигон пользуйтесь вторым черновиком, а при публикации - выкладывайте в раздел fragment:).

Можно вообще не мучаться с HTML и JS, и просто оформить спойлер в виде кнопки входа.

Вариантов в принципе много, тут уже на ваше усмотрение.

версия страницы: 2, Последняя правка: 20 Сен. 2023, 00:24 (584 дня назад)

Пока не указано иное, содержимое этой страницы распространяется по лицензии Creative Commons Attribution-ShareAlike 3.0 License.

SCP Foundation

Russian Branch

Список доступных тегов

Список доступных тегов