Add websignup page

app/Controllers/Http/UserController.js

@@ -86,6 +86,56 @@ class UserController {
     });
   }
 
+  // Register a new user via web
+  async websignup({ request, response, auth }) {
+    if (Env.get('IS_REGISTRATION_ENABLED') == 'false') {
+      // eslint-disable-line eqeqeq
+      return response.status(401).send(
+        'Registration is disabled on this server',
+      );
+    }
+
+    // Validate user input
+    const validation = await validateAll(request.all(), {
+      firstname: 'required',
+      lastname: 'required',
+      email: 'required|email|unique:users,email',
+      password: 'required',
+    });
+
+    if (validation.fails()) {
+      return response.redirect('/websignupretry');
+    }
+
+    const data = request.only(['firstname', 'lastname', 'email', 'password']);
+
+    // Hash password
+    const hashedPassword = crypto
+      .createHash('sha256')
+      .update(data.password)
+      .digest('base64');
+
+    // Create user in DB
+    let user;
+    try {
+      user = await User.create({
+        email: data.email,
+        password: hashedPassword,
+        username: data.firstname,
+        lastname: data.lastname,
+      });
+    } catch (e) {
+      return response.status(401).send(
+        'E-Mail Address already in use',
+      );
+    }
+
+    await auth.generate(user);
+
+    // Redirect user to login page, confirmaiton would be nice
+    return response.redirect('/user/signuplogin');
+  }
+
   // Login using an existing user
   async login({ request, response, auth }) {
     if (!request.header('Authorization')) {

resources/views/dashboard/login.edge

@@ -59,6 +59,18 @@
         Forgot my Password
       </a>
     </div>
+    <div class="text-center">
+      <p class="text-gray-600 text-sm text-center py-2">
+        <br>
+        Don't have a Ferdium account yet?
+        <br>
+        <a class="w-full font-bold text-sm text-blue-500 hover:text-blue-800" href="/websignup">
+          Signup here!
+        </a>
+        <br>
+        or
+      </p>
+    </div>
     <div class="text-center">
       <a class="w-full font-bold text-sm text-blue-500 hover:text-blue-800" href="../import">
         Import your Franz/Ferdi account

resources/views/dashboard/signuplogin.edge

@@ -0,0 +1,69 @@
+@layout('layouts.v2')
+
+@section('content')
+<div class="w-screen bg-purple-200 flex items-center justify-center">
+<form class="w-full max-w-sm bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
+  action="{{ route('login') }}" method="POST">
+    <h1 class="text-gray-700 text-center text-2xl pb-5">
+      Signup successful please login
+    </h1>
+
+    @if(flashMessage('error'))
+    <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
+      {{ flashMessage('error') }}
+    </div>
+    @endif
+    @if(old('message'))
+    <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
+      {{ old('message') }}
+    </div>
+    @endif
+
+    {{ csrfField() }}
+    <div class="mb-4">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
+        E-Mail
+      </label>
+      <input
+        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+        id="mail"
+        name="mail"
+        type="text"
+        placeholder="E-Mail"
+        value="{{ old('mail', '') }}"
+        required>
+    </div>
+    <div class="mb-6">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
+        Password
+      </label>
+      <input
+        class="shadow appearance-none rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+        id="password"
+        type="password"
+        name="password"
+        placeholder="*****"
+        autocomplete="current-password"
+        required>
+    </div>
+    <button
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+      type="submit">
+      Sign In
+    </button>
+    <p class="text-gray-600 text-sm text-center py-2">
+      By logging in, you accept the <a href="/terms">terms of service</a> and <a href="/privacy">privacy policy</a>. This website uses cookies to log you in.
+    </p>
+    <div class="text-center">
+      <a class="w-full font-bold text-sm text-blue-500 hover:text-blue-800" href="/user/forgot">
+        Forgot my Password
+      </a>
+    </div>
+    <div class="text-center">
+      <a class="w-full font-bold text-sm text-blue-500 hover:text-blue-800" href="../import">
+        Import your Franz/Ferdi account
+      </a>
+    </div>
+</form>
+</div>
+@endsection

resources/views/others/index.edge

@@ -28,12 +28,16 @@
           </ol>
         </div>
 
+        <br>
         <p class="text-gray-700 font-bold pb-8 lg:pb-6 text-center md:text-left fade-in pt-8">
           Manage your account
         </p>
         <a href="/user/account" class="bg-gray-700 hover:bg-gray-900 text-white font-bold text-center md:text-left  py-2 px-4 rounded">
           Go to account dashboard
         </a>
+        <a href="/websignup" class="text-gray-700 font-bold pb-8 lg:pb-6 text-center md:text-left fade-in pt-8">
+          Register on Ferdium
+        </a>
         <p class="text-gray-700 my-10 py-0 pb-8 lg:pb-6 text-center md:text-left fade-in pt-2"><em><a href="https://ferdium.org">Don't have Ferdium yet?</a></em></p>
       </div>
 

resources/views/others/websignup.edge

@@ -0,0 +1,93 @@
+@layout('layouts.v2')
+
+@section('content')
+<div class="w-screen bg-purple-200 flex items-center justify-center">
+<form class="w-full max-w-sm bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
+  action="/websignup" method="POST">
+    <h1 class="text-gray-700 text-center text-2xl pb-5">
+      Signup for a Ferdium account
+    </h1>
+    <p class="text-gray-600 text-sm text-center py-2">
+      Please provide your details so your Ferdium account can be created.
+    </p>
+
+    @if(flashMessage('error'))
+    <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
+      {{ flashMessage('error') }}
+    </div>
+    @endif
+    @if(old('message'))
+    <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
+      {{ old('message') }}
+    </div>
+    @endif
+
+    <div class="mb-4">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="firstname">
+        First Name
+      </label>
+      <input
+        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+        id="firstname"
+        name="firstname"
+        type="text"
+        placeholder="First Name"
+        value="{{ old('firstname', '') }}"
+        required>
+    </div>
+    <div class="mb-4">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="lastname">
+        Last Name
+      </label>
+      <input
+        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+        id="lastname"
+        name="lastname"
+        type="text"
+        placeholder="Last Name"
+        value="{{ old('lastname', '') }}"
+        required>
+    </div>
+    <div class="mb-4">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="email">
+        E-Mail
+      </label>
+      <input
+        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+        id="email"
+        name="email"
+        type="text"
+        placeholder="E-Mail"
+        value="{{ old('email', '') }}"
+        required>
+    </div>
+    <div class="mb-6">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
+        Password
+      </label>
+      <input
+        class="shadow appearance-none rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+        id="password"
+        type="password"
+        name="password"
+        placeholder="*****"
+        autocomplete="current-password"
+        required>
+    </div>
+    <button
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+      type="submit">
+      Signup
+    </button>
+    <p class="text-gray-600 text-sm text-center py-2">
+      By signing up for your Franz/Ferdi account, you accept the <a href="/terms">terms of service</a> and <a href="/privacy">privacy
+        policy</a>
+    </p>
+    <div class="text-center">
+      <a class="w-full font-bold text-sm text-blue-500 hover:text-blue-800" href="/user/login">
+        Login to an existing account
+      </a>
+    </div>
+</form>
+</div>
+@endsection

resources/views/others/websignupretry.edge

@@ -0,0 +1,93 @@
+@layout('layouts.v2')
+
+@section('content')
+<div class="w-screen bg-purple-200 flex items-center justify-center">
+<form class="w-full max-w-sm bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
+  action="/websignup" method="POST">
+    <h1 class="text-gray-700 text-center text-2xl pb-5">
+      Error during signup, please try again
+    </h1>
+    <p class="text-gray-600 text-sm text-center py-2">
+      Please provide your details so your Ferdium account can be created.
+    </p>
+
+    @if(flashMessage('error'))
+    <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
+      {{ flashMessage('error') }}
+    </div>
+    @endif
+    @if(old('message'))
+    <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4">
+      {{ old('message') }}
+    </div>
+    @endif
+
+    <div class="mb-4">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="firstname">
+        First Name
+      </label>
+      <input
+        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+        id="firstname"
+        name="firstname"
+        type="text"
+        placeholder="First Name"
+        value="{{ old('firstname', '') }}"
+        required>
+    </div>
+    <div class="mb-4">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="lastname">
+        Last Name
+      </label>
+      <input
+        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+        id="lastname"
+        name="lastname"
+        type="text"
+        placeholder="Last Name"
+        value="{{ old('lastname', '') }}"
+        required>
+    </div>
+    <div class="mb-4">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="email">
+        E-Mail
+      </label>
+      <input
+        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+        id="email"
+        name="email"
+        type="text"
+        placeholder="E-Mail"
+        value="{{ old('email', '') }}"
+        required>
+    </div>
+    <div class="mb-6">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
+        Password
+      </label>
+      <input
+        class="shadow appearance-none rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+        id="password"
+        type="password"
+        name="password"
+        placeholder="*****"
+        autocomplete="current-password"
+        required>
+    </div>
+    <button
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+      type="submit">
+      Signup
+    </button>
+    <p class="text-gray-600 text-sm text-center py-2">
+      By signing up for your Franz/Ferdi account, you accept the <a href="/terms">terms of service</a> and <a href="/privacy">privacy
+        policy</a>
+    </p>
+    <div class="text-center">
+      <a class="w-full font-bold text-sm text-blue-500 hover:text-blue-800" href="/user/login">
+        Login to an existing account
+      </a>
+    </div>
+</form>
+</div>
+@endsection

start/routes.js

@@ -62,6 +62,7 @@ if (Env.get('IS_DASHBOARD_ENABLED') !== 'false') {
   Route.group(() => {
     // Auth
     Route.get('login', ({ view }) => view.render('dashboard.login')).middleware('guest');
+    Route.get('signuplogin', ({ view }) => view.render('dashboard.signuplogin')).middleware('guest');
     Route.post('login', 'DashboardController.login').middleware('guest').as('login');
 
     // Reset password
@@ -118,6 +119,11 @@ Route.get('new', ({ response, view }) => {
 Route.post('import', 'UserController.import');
 Route.get('import', ({ view }) => view.render('others.import'));
 
+// Ferdium account signup
+Route.post('websignup', 'UserController.websignup');
+Route.get('websignup', ({ view }) => view.render('others.websignup'));
+Route.get('websignupretry', ({ view }) => view.render('others.websignupretry'));
+
 // Legal documents
 Route.get('terms', ({ response }) => response.redirect('/terms.html'));
 Route.get('privacy', ({ response }) => response.redirect('/privacy.html'));