Otwarcie strony dopiero po wpisaniu hasła w alert.

Question

Cześć, tak jak w teamcie, czy ktoś wie jak coś takiego wykonać, gdy ktos wchodzi na strone  nic sie nie laduje tylko wyskakuje alert z prosba o podanie hasla, jak zle to nie pokaze strony, jak dobre to pokaze, wiem jak wykonac kwestie z haslem ale nwm jak z pojawianiem sie strony

Comments

BackEnd (lepsze), czy frontowe(łatwe do złamania)?

---

front, tylko w tym na razie siedzę :D

Answer 1

Możesz to zrobić tak:

- Schować zawartość całej strony w elemencie 

- Ukryć element używając CSS

- Dodać js sprawdzający czy hasło wpisane w prompt jest poprawne i jeśli tak, dodać klasę "active" pokazującą zawartość elementu zawierającego twoją stronę

<div id="page" class="page">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui libero sapiente eveniet sed illum! Ullam laboriosam eligendi molestiae nihil temporibus quo, dolor delectus ex nemo, ad blanditiis eum rem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui libero sapiente eveniet sed illum! Ullam laboriosam eligendi molestiae nihil temporibus quo, dolor delectus ex nemo, ad blanditiis eum rem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui libero sapiente eveniet sed illum! Ullam laboriosam eligendi molestiae nihil temporibus quo, dolor delectus ex nemo, ad blanditiis eum rem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui libero sapiente eveniet sed illum! Ullam laboriosam eligendi molestiae nihil temporibus quo, dolor delectus ex nemo, ad blanditiis eum rem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui libero sapiente eveniet sed illum! Ullam laboriosam eligendi molestiae nihil temporibus quo, dolor delectus ex nemo, ad blanditiis eum rem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui libero sapiente eveniet sed illum! Ullam laboriosam eligendi molestiae nihil temporibus quo, dolor delectus ex nemo, ad blanditiis eum rem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui libero sapiente eveniet sed illum! Ullam laboriosam eligendi molestiae nihil temporibus quo, dolor delectus ex nemo, ad blanditiis eum rem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui libero sapiente eveniet sed illum! Ullam laboriosam eligendi molestiae nihil temporibus quo, dolor delectus ex nemo, ad blanditiis eum rem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui libero sapiente eveniet sed illum! Ullam laboriosam eligendi molestiae nihil temporibus quo, dolor delectus ex nemo, ad blanditiis eum rem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui libero sapiente eveniet sed illum! Ullam laboriosam eligendi molestiae nihil temporibus quo, dolor delectus ex nemo, ad blanditiis eum rem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui libero sapiente eveniet sed illum! Ullam laboriosam eligendi molestiae nihil temporibus quo, dolor delectus ex nemo, ad blanditiis eum rem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui libero sapiente eveniet sed illum! Ullam laboriosam eligendi molestiae nihil temporibus quo, dolor delectus ex nemo, ad blanditiis eum rem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui libero sapiente eveniet sed illum! Ullam laboriosam eligendi molestiae nihil temporibus quo, dolor delectus ex nemo, ad blanditiis eum rem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui libero sapiente eveniet sed illum! Ullam laboriosam eligendi molestiae nihil temporibus quo, dolor delectus ex nemo, ad blanditiis eum rem.</p>
</div>

 

.page{
  display:none;
}
.active{
  display:block;
}

var page = document.getElementById("page"),
password = "1234",
prompt = prompt("Wprowadź hasło");
if(prompt==password) {page.className+= "active";
}

Zobacz jak działa:

https://codepen.io/anon/pen/ZKRqPK?editors=0110

 

Takie zabezpieczenie we frontendzie nie powinno być oczywiście wykorzystywane, pamiętaj! Do tego służy backend.

 

 

 

 

 

 

 

 

Comments

dzięki, będę pamiętał

Answer 2

Rozwiązanie frontendowe moim zdaniem nie ma sensu. Skoro nie backend, to może odpowiednia konfiguracja serwera? Rozwiązanie znacznie prostsze niż ukrywanie czegoś CSSem itp.

Apache: https://www.digitalocean.com/community/tutorials/how-to-set-up-password-authentication-with-apache-on-ubuntu-14-04

Nginx: https://www.digitalocean.com/community/tutorials/how-to-set-up-password-authentication-with-nginx-on-ubuntu-14-04