louis/food-inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

same responsive design for the register page

Browse Source
This commit is contained in:
Louis Vallat 2019-11-21 23:27:02 +01:00
parent 2de5e2072a
commit d40b4d6754
4 changed files with 47 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/css/common.css
View File

@ -46,6 +46,14 @@ body {
align-items: stretch;
}
.flex-content-stretch {
align-content: stretch;
}
.flex-space-between {
justify-content: space-between;
}
.halo-hover {
transition: all 500ms;
}

4
assets/css/login.css
View File

@ -189,3 +189,7 @@ a {
top: 0;
border-radius: 3px;
}
#register-email {
width: 100%;
}

2
login.php
View File

@ -73,7 +73,7 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
<h2 class="montserrat" id="title">Welcome back</h2>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="flex-container flex-evenly">
<input type="text" name="username" class="form-control halo-hover <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>" value="<?php echo $username; ?>" placeholder="Username">
<input type="email" name="username" class="form-control halo-hover <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>" value="<?php echo $username; ?>" placeholder="Username">
<input type="password" name="password" class="form-control halo-hover <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>" placeholder="Password">
</div>
<div class="flex-container flex-evenly">

75
register.php
View File

@ -47,7 +47,7 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty(trim($_POST["first_name"]))) {
$first_name_err = "Please input your first name.";
} else if (strlen(trim($_POST["first_name"])) > 255){
} else if (strlen(trim($_POST["first_name"])) > 255) {
$first_name_err = "Too long.";
} else {
$first_name = trim($_POST["first_name"]);
@ -55,7 +55,7 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty(trim($_POST["last_name"]))) {
$last_name_err = "Please input your last name.";
} else if (strlen(trim($_POST["last_name"])) > 255){
} else if (strlen(trim($_POST["last_name"])) > 255) {
$last_name_err = "Too long.";
} else {
$last_name = trim($_POST["last_name"]);
@ -82,55 +82,46 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
<head>
<meta charset="UTF-8">
<title>Sign Up</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<style type="text/css">
body {
font: 14px sans-serif;
}
.wrapper {
width: 350px;
padding: 20px;
}
</style>
<!-- TODO : ADD SEO STUFF -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="/assets/css/reset.css" rel="stylesheet">
<link href="/assets/css/common.css" rel="stylesheet">
<link href="/assets/css/login.css" rel="stylesheet">
<title>Food invetory - Register</title>
</head>
<body>
<div class="wrapper">
<h2>Sign Up</h2>
<p>Please fill this form to create an account.</p>
<div class="center30left white">
<h2 class="montserrat" id="title">Nice to meet you</h2>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>">
<label>Username</label>
<input type="text" name="username" class="form-control" value="<?php echo $username; ?>">
<span class="help-block"><?php echo $username_err; ?></span>
<div class="flex-container flex-content-stretch">
<input type="email" name="username" class="form-control halo-hover <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>" value="<?php echo $username; ?>" placeholder="E-mail" id="register-email">
</div>
<div class="form-group <?php echo (!empty($first_name_err)) ? 'has-error' : ''; ?>">
<label>First name</label>
<input type="text" name="first_name" class="form-control" value="<?php echo $first_name; ?>">
<span class="help-block"><?php echo $first_name_err; ?></span>
<div class="flex-container flex-content-stretch flex-space-between">
<input type="text" placeholder="First name" name="first_name" class="form-control halo-hover <?php echo (!empty($first_name_err)) ? 'has-error' : ''; ?>" value="<?php echo $first_name; ?>">
<input type="text" placeholder="Last name" name="last_name" class="form-control halo-hover <?php echo (!empty($last_name_err)) ? 'has-error' : ''; ?>" value="<?php echo $last_name; ?>">
</div>
<div class="form-group <?php echo (!empty($last_name_err)) ? 'has-error' : ''; ?>">
<label>Last name</label>
<input type="text" name="last_name" class="form-control" value="<?php echo $last_name; ?>">
<span class="help-block"><?php echo $last_name_err; ?></span>
<div class="flex-container flex-content-stretch flex-space-between">
<input type="password" placeholder="Password" name="password" class="form-control halo-hover <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>" value="<?php echo $password; ?>">
<input type="password" placeholder="Confirm password" name="confirm_password" class="form-control halo-hover <?php echo (!empty($confirm_password_err)) ? 'has-error' : ''; ?>" value="<?php echo $confirm_password; ?>">
</div>
<div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
<label>Password</label>
<input type="password" name="password" class="form-control" value="<?php echo $password; ?>">
<span class="help-block"><?php echo $password_err; ?></span>
<div class="flex-container flex-evenly">
<div class="error">
<?php
if (!empty($username_err)) echo $username_err;
else if (!empty($first_name_err)) echo $first_name_err;
else if (!empty($last_name_err)) echo $last_name_err;
else if (!empty($password_err)) echo $password_err;
else echo $confirm_password_err;
?>
</div>
</div>
<div class="form-group <?php echo (!empty($confirm_password_err)) ? 'has-error' : ''; ?>">
<label>Confirm Password</label>
<input type="password" name="confirm_password" class="form-control" value="<?php echo $confirm_password; ?>">
<span class="help-block"><?php echo $confirm_password_err; ?></span>
<div class="form-group flex-container flex-vertical-center flex-space-between">
<input type="submit" class="halo-hover login-button" value="Submit">
<a href="login.php" class="login-button halo-hover other-buttons">Already registered? Login!</a>
<a href="/" class="login-button halo-hover other-buttons">Main page</a>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Submit">
<input type="reset" class="btn btn-default" value="Reset">
</div>
<p>Already have an account? <a href="login.php">Login here</a>.</p>
</form>
</div>
</body>