Trusk/Partie-3
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

initial status

Browse Source
This commit is contained in:
Simon Priet
2021-09-05 12:34:08 +02:00
commit a041f9f575
9441 changed files with 627158 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 846 B

BIN
public/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

30
public/index.html Normal file
View File

@@ -0,0 +1,30 @@
<!--suppress ALL -->
<html>
<head>
<title>QA @ Trusk</title>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1 id="hello">👋 Hello Trusk!</h1>
<p id="guess">Identifiants corrects: adrian@trusk.com / adrian@trusk.com</p>
<form id="test-form">
<fieldset id="email-fieldset">
<label id="email-label">📨 Adresse e-mail</label>
<input autocomplete="username" id="email-input" placeholder="adrian@trusk.com" type="text" />
<span class="error" id="email-error"></span>
</fieldset>
<fieldset id="password-fieldset">
<label id="password-label">🔑 Mot de passe</label>
<input autocomplete="current-password" id="password-input" placeholder="********" type="password" />
<span class="error" id="password-error"></span>
</fieldset>
<fieldset id="submit-fieldset">
<span class="error" id="form-error"></span>
<button id="submit" type="submit">Suivant</button>
</fieldset>
</form>
<script src="main.js"></script>
</body>
</html>

63
public/main.css Normal file
View File

@@ -0,0 +1,63 @@
html, body {
left: 0;
margin: 0 auto;
padding: 8px;
top: 0;
}
form {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: start;
}
fieldset {
border: none;
margin-top: 8px;
padding: 0;
width: 300px;
}
label {
display: block;
font-style: italic;
}
input {
background-color: beige;
border: none;
color: #0530FF;
font-size: large;
height: 50px;
outline: none;
padding: 8px;
width: 284px;
}
input.error {
border: 1px red solid;
}
span.error {
color: red;
font-weight: bold;
}
button {
background-color: #0530FF;
border: none;
color: #ffff;
cursor: pointer;
font-weight: bold;
height: 50px;
outline: none;
padding: 8px;
text-transform: uppercase;
width: 284px;
}
button.disabled {
background-color: gray;
cursor: not-allowed;
}

91
public/main.js Normal file
View File

@@ -0,0 +1,91 @@
console.log('👋 Hello Trusk!')
const form = document.getElementById("test-form")
const emailInput = document.getElementById("email-input")
const emailErrorSpan = document.getElementById("email-error")
const passwordInput = document.getElementById("password-input")
const passwordErrorSpan = document.getElementById("password-error")
const formErrorSpan = document.getElementById("form-error")
const submit = document.getElementById('submit')
const emailRegEx = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/
let emailError = null
let passwordError = null
let formError = null
const addEmailError = (err => {
emailErrorSpan.textContent = err
emailInput.className = 'error'
})
const addPasswordError = (err => {
passwordErrorSpan.textContent = err
passwordInput.className = 'error'
})
const addFormError = (err => {
formErrorSpan.textContent = err
})
const removeEmailError = () => {
emailErrorSpan.textContent = ''
emailInput.className = ''
emailError = null
}
const removePasswordError = () => {
passwordErrorSpan.textContent = ''
passwordInput.className = ''
passwordError = null
}
const emailHandler = () => {
console.log('Adresse e-mail change:', emailInput.value)
removeEmailError()
}
const passwordHandler = () => {
console.log('Mot de passe change:', passwordInput.value)
removePasswordError()
}
emailInput.addEventListener('input', emailHandler)
passwordInput.addEventListener('input', passwordHandler)
form.addEventListener("submit", (event) => {
event.preventDefault();
const email = emailInput.value
const password = passwordInput.value
console.log('Soumission du formulaire...')
console.log('Adresse e-mail:', email)
console.log('Mot de passe:', password)
if (!email || email.length === 0) {
console.log('Adresse e-mail vide...')
emailError = 'Renseignes une adresse e-mail!'
addEmailError(emailError)
} else if (!emailRegEx.test(email)) {
console.log('Adresse e-mail invalide...')
emailError = 'Renseignes une adresse e-mail valide!'
addEmailError(emailError)
} else if (email !== 'adrian@trusk.com') {
console.log('Adresse e-mail non reconnue...')
emailError = 'Renseignes la bonne adresse e-mail!'
addEmailError(emailError)
}
if (!password || password.length === 0) {
console.log('Mot de passe vide...')
passwordError = 'Renseignes un mot de passe!'
addPasswordError(passwordError)
} else if (password !== 'adrian@trusk.com') {
console.log('Mot de passe non valide...')
passwordError = 'Renseignes le bon mot de passe!'
addPasswordError(passwordError)
}
if (email === 'adrian@trusk.com' && password === 'adrian@trusk.com') window.location.href = '/ok.html'
})

16
public/ok.html Normal file
View File

@@ -0,0 +1,16 @@
<!--suppress ALL -->
<html>
<head>
<title>QA @ Trusk</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1>👋 Hello Trusk!</h1>
<p id="welcome">Salut testeur !</p>
<a id="back-link" href="/">Retour</a>
</body>
</html>