Simple Auth

# Customization

# Changing Basic Content

For starters, you probably want to enable basic whitelabeling functionality. This includes things like the company name, copyright, etc.

The relevant configuration section is metadata:

metadata:
    company: "My Company"
    footer: ""
    tagline: null
    bucket: {} # Not used by default. Can be used to customize

# Stylesheet Changes

Any file placed in the /static working directory will be served as a static file to the web. By default, simple-auth will attempt to load common.css in this directory to modify any in-line styles.

WARNING

In order to allow reading from disk, you need to set the config value staticfromdisk: true

# Adding a Background

In the below example, place a file bg.jpg in the /static/ directory, and add the following to common.css:

body {
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.8)), url('bg.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

# Customize Template

While most of simple-auth's frontend is written in VueJS, it is still wrapped in a static template for the content.

You can override this template by providing your own template/web/layout.tmpl in the working directory of simple-auth and setting staticfromdisk: true.

Default Layout 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf" content="{{ .csrf }}">
        <link rel="icon" href="static/favicon.svg">
        <link rel="stylesheet" href="static/common.css">
        <script src="dist/vendors.bundle.js"></script>
        <script src="dist/main.bundle.js"></script>
        <title>{{block "title" .}}{{ .company }}{{end}}: Simple Auth</title>
        {{block "head" .}}{{end}}
    </head>
    <body>
        <section class="hero">
            <div class="hero-body">
                <div class="container">
                    <h1 class="title is-1"><a href="/">{{ .company }}</a></h1>
                    {{if .tagline}}<h2 class="subtitle">{{ .tagline }}</h2>{{end}}
                </div>
            </div>
        </section>
        <section class="section" id="main">
            <div class="container">
                {{template "content" .}}
            </div>
        </section>
        <footer class="footer" id="footer">
            <div class="content has-text-centered">
                <p>
                    {{ .footer }} <a href="https://simple-auth.zdyn.net/" target="_blank">Simple-Auth</a> &copy; {{year}}
                </p>
            </div>
        </footer>
        {{block "footjs" .}}{{end}}
    </body>
</html>

← Email →