django login, signup page

전에 우리가 users라는 앱 안에 forms.py를 만들고 login form과 signup form을 만들었다.

이 때 html에 form.as_p를 사용하여 form의 내용들을 단순히 p태그로 보여주기만 하였다.

 

하지만 input태그를 사용해야 할 때는 위와 같이 form.email을 적어주어야한다.

그럼 input태그로 잘 나오게되고, 우리가 css에 input에 무언가를 주면 저것도 input으로 인식이 되기에 잘 적용이 될 것이다.

 

이 때에 placeholder같은 input의 속성을 주고싶은 경우에는 아래와 같이 forms.py안에 widget옵션을 주어야한다.

우리는 html에서 사용할 type의 input을 email이라면 forms.EmailInput , text라면 TextInput password라면 PsswordInput을 적어주고 그 안에 attrs={}를 사용해서 placeholder와 같은 속성을 줄 수도 있다.

 

만약 meta class로 정의하였다면 아래와 같이 widgets를 만들어주면 된다.

이 때에 오류를 나타나도록 해주어야 하는데..

전 처럼 form.as_p로 했다면 발생하는 오류도 아래와 같이 추가해주면 별도의 html에 추가하지 않아도 알아서 나타나도록 해주었다.

하지만 이제는 form.as_p를 사용하는 것이 아닌 각각의 요소 하나 하나씩 보여주는 것이기에 error를 보여주는 html또한  직접 만들어야 한다.

이렇게 하나하나 달아주면 전처럼 오류 메시지가 잘 나타난다. 반복문을 사용한 이유는 하나의 요소에 에러가 여러개 있을 수 있기 때문이다.

 

근데 이렇게 하면 보기 복잡하다. 반복되기 때문에 이 또한 반복문을 사용해서 form안에 있는 여러 요소를 나타낼 수 있다.  

추가적으로 하나 더 설정해줘야하는데 지금 우리가 설정한 것은 각 first_name, last_name, email...등 각 개별 요소에 대한 오류이지만 전체 form에 대한 오류가 있다면 그것도 나타내주어야 하기에 이 부분만 추가해주면 된다.

 

이건 non_field_errors라고 하며, forms.py에서 오류를 추가해줄 때 'password', 'email'등을 적는 부분에 None을 적어주면 된다.

 

 

오류메시지가 나오면 해당 input의 색이 바뀌면서 이목이 집중되도록 해보자!!

scss에 &.has_error를 추가하여 해당 요소에 has_error의 클래스 안에 input의 배경색을 살짝 빨갛게 주는 속성을 주고

조건문을 활용하여 아래와 같이 has_error가 추가해주도록 하자 !!

따라서 field에 error가 없다면 has_error가 추가가되지않고 반대라면 추가가되기에 그 요소만 빨갛게 변한다

아래와 같이 말이다.